@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: normal;
    src:
/* url(OpenSansRegularWoffTwo) format('woff2'),
url(OpenSansRegularWoff) format('woff'); */
        url("./fonts/files/open-sans-v18-latin-regular.woff2") format("woff2"),
        url("./fonts/files/open-sans-v18-latin-regular.woff") format("woff");
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: normal;
    src:
        url("./fonts/files/open-sans-v18-latin-italic.woff2") format("woff2"),
        url("./fonts/files/open-sans-v18-latin-italic.woff") format("woff");
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    src:
        url("./fonts/files/open-sans-v18-latin-700.woff2") format("woff2"),
        url("./fonts/files/open-sans-v18-latin-700.woff") format("woff");
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300;
    src:
        url("./fonts/files/open-sans-v18-latin-light.woff2") format("woff2"),
        url("./fonts/files/open-sans-v18-latin-light.woff") format("woff");
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 300;
    src:
        url("./fonts/files/open-sans-v18-latin-light-italic.woff2")
            format("woff2"),
        url("./fonts/files/open-sans-v18-latin-light-italic.woff")
            format("woff");
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 700;
    src:
        url("./fonts/files/open-sans-v18-latin-700italic.woff2") format("woff2"),
        url("./fonts/files/open-sans-v18-latin-700italic.woff") format("woff");
}
html {
    font-family: "Open Sans" !important;
    --menuWidth: 220px;
    --mainBlue: #1a5a99;
    --lightBlue: hsl(209, 54%, 82%);
    --solidLightBlue: #8fb8de;
    --mainGray: #e3e3e3;
    --donutBody: #eea177;
    --donutTopping: #6d4445;
    --mainBorder: 2px solid black;
    --mainBorderRadius: 5px;
    --mainRed: #c1292e;
    --lightRed: hsl(0, 54%, 82%);
    --mainGreen: #3e844a;
    --canvas: white;
    --canvasText: black;
    --revealButtonSurface: #e3e3e3;
    --graphHandle: #404040;
    --lightGreen: #a6f19f;
    --lightYellow: #f5ed85;
    --whiteBlankLink: #6d4445;
    /* Link text. Distinct from --mainBlue, which is a surface color (button
       backgrounds) and so must stay dark in both themes. */
    --linkText: #1a5a99;
    /* Border for panels that paint the canvas color and so have no fill of
       their own to set them apart. Meets WCAG's 3:1 non-text contrast against
       the canvas, which a surface-toned border does not. */
    --panelBorder: #949494;
    --mainYellow: #94610a;
    --lightOrange: #efab34;
    --mainOrange: #a36600;
    --mainPurple: #4a03d9;
    --errorText: var(--mainRed);
    --indicatorHoverBlue: var(--lightBlue);
    --buttonHoverBlue: var(--lightBlue);
    --doenetTagColor: #3e844a;
}

[data-theme="dark"] {
    font-family: "Open Sans" !important;
    --menuWidth: 220px;
    --mainBlue: #1a5a99;
    --lightBlue: #1e3a5f;
    --solidLightBlue: #1a5a99;
    --mainGray: #a9a9a9;
    --donutBody: #eea177;
    --donutTopping: #6d4445;
    --mainBorder: 2px solid white;
    --mainBorderRadius: 5px;
    --mainRed: #c1292e;
    --lightRed: #7f1d1d;
    --mainGreen: #3e844a;
    --canvas: #121212;
    --canvasText: white;
    --revealButtonSurface: #3a3a3a;
    --graphHandle: #b0b0b0;
    --lightGreen: #1a5e20;
    --lightYellow: #f5ed85;
    --whiteBlankLink: #a9abe5;
    --linkText: #8ab4f8;
    --panelBorder: #6b6b6b;
    --mainYellow: #efab34;
    --lightOrange: #7a3e00;
    --mainOrange: #a36600;
    --mainPurple: #7c3aed;
    --errorText: #ff6b6b;
    --indicatorHoverBlue: #5b8cb5;
    --buttonHoverBlue: hsl(209, 54%, 82%);
    --doenetTagColor: #5cb870;
}
.doenet-viewer {
    font-family: "Open Sans" !important;
    color: var(--canvasText);
    overflow-x: auto;
}
.doenet-viewer h1 {
    font-size: 2em;
    font-weight: bold;
}
.doenet-viewer h2 {
    font-size: 1.5em;
    font-weight: bold;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
}
.doenet-viewer h3 {
    font-size: 1.17em;
    font-weight: bold;
    margin-block-start: 1em;
    margin-block-end: 1em;
}
.doenet-viewer h4 {
    font-weight: bold;
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
}
.doenet-viewer h5 {
    font-size: 0.83em;
    font-weight: bold;
    margin-block-start: 1.67em;
    margin-block-end: 1.67em;
}
.doenet-viewer p {
    margin-block-start: 1em;
    margin-block-end: 1em;
}
.doenet-viewer input {
    box-sizing: content-box;
    padding: 2px 1px;
}
div.jxgbox input {
    border-width: 2px;
}
div.jxgbox button {
    margin: 0;
    border-radius: 20px;
    border-width: 0px;
    border-style: hidden;
    padding: 0px 10px;
    color: white;
    height: 24px;
}
div.jxgbox input[type="checkbox"] {
    margin: 3px 3px 3px 4px;
    height: 18px;
    width: 18px;
}

/*
    Copyright 2008-2025
        Matthias Ehmann,
        Michael Gerhaeuser,
        Carsten Miller,
        Bianca Valentin,
        Andreas Walter,
        Alfred Wassermann,
        Peter Wilfahrt

    This file is part of JSXGraph.

    JSXGraph is free software dual licensed under the GNU LGPL or MIT License.

    You can redistribute it and/or modify it under the terms of the

      * GNU Lesser General Public License as published by
        the Free Software Foundation, either version 3 of the License, or
        (at your option) any later version
      OR
      * MIT License: https://github.com/jsxgraph/jsxgraph/blob/master/LICENSE.MIT

    JSXGraph is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Lesser General Public License for more details.

    You should have received a copy of the GNU Lesser General Public License and
    the MIT License along with JSXGraph. If not, see <https://www.gnu.org/licenses/>
    and <https://opensource.org/licenses/MIT/>.
 */

.jxgbox {
    /* for IE 7 */
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border-style: solid;
    border-width: 1px;
    border-color: #356aa0;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    margin: 0;
    -ms-touch-action: none;
    /* "touch-action: none;" is set with JavaScript. */
}

.jxgbox svg text {
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*
 * Keyboard-focus outline for graph objects. JSXGraph's own stylesheet sets a
 * thin dotted outline with no explicit color (so it inherits a non-theme-aware
 * default that is invisible on the dark canvas). Force a theme-aware outline so
 * the focused object is visible in both light and dark mode.
 */
.jxgbox :focus,
.jxgbox :focus-visible {
    outline: 2px solid var(--canvasText);
    outline-offset: 1px;
}

.JXGtext {
    font-family: Courier, monospace;
    /*
     * The default font family is now set in
     * JXG.Options.text.cssdefaultstyle = 'font-family: Arial, Helvetica, Geneva, sans-serif;'
     */

    /* "background-color: transparent;" may produce artefacts in IE. Solution: setting a color explicitly. */
    background-color: transparent;
    padding: 0;
    margin: 0;
}

.JXGinfobox {
    border-style: none;
    border-width: 0;
    border-color: black;
}

/* CSS attributes will (permantely) overwrite attributes set in JSXGraph */
.JXGimage {
    /* opacity: 1.0; */
}

.JXGimageHighlight {
    /* opacity: 0.6; */
}

.jxgbox :focus {
    outline-width: 0.5px;
    outline-style: dotted;
}

/* CSS rules for the navigation bar */

/*
 * Physical `right`, because the board this sits in is pinned to `dir="ltr"` in
 * `JSXGraphRenderer.tsx` — a graph is coordinate space and does not mirror.
 */
.JXG_navigation {
    position: absolute;
    right: 5px;
    bottom: 5px;

    z-index: 100;

    background-color: transparent;
    padding: 2px;
    font-size: 14px;
    cursor: pointer;
}

.JXG_navigation_button {
    color: #666;
}

.JXG_navigation_button_left {
}

.JXG_navigation_button_right {
}

.JXG_navigation_button_up {
}

.JXG_navigation_button_down {
}

.JXG_navigation_button_out {
}

.JXG_navigation_button_100 {
}

.JXG_navigation_button_in {
}

.JXG_navigation_button_fullscreen {
}

.JXG_navigation_button_reload {
}

.JXG_navigation_button_cleartraces {
}

.JXG_navigation_button_screenshot {
}

.JXG_navigation_button:hover {
    border-radius: 2px;
    background: rgba(184, 184, 184, 0.5);
}

.JXG_navigation_button svg {
    top: 0.2em;
    position: relative;
    padding: 0;
}

/* CSS rules for the wrapping div in fullscreen mode */

.JXG_wrap_private:-moz-full-screen {
    background-color: var(--canvas);
    padding: 0;
    width: 100%;
    height: 100%;
}

.JXG_wrap_private:-webkit-full-screen {
    background-color: var(--canvas);
    padding: 0;
    width: 100%;
    height: 100%;
}

.JXG_wrap_private:fullscreen {
    background-color: var(--canvas);
    padding: 0;
    width: 100%;
    height: 100%;
}

.JXG_wrap_private:-ms-fullscreen {
    background-color: var(--canvas);
    padding: 0;
    width: 100%;
    height: 100%;
}

/* Classes forn smartlabels */

.smart-label-solid {
    padding: 1px 7px 1px 7px;
    margin: 0;
    color: white;
    border-radius: 150px;
    text-align: center;
    vertical-align: middle;
}

.smart-label-outline {
    padding: 1px 7px 1px 7px;
    margin: 0;
    border: solid 2px black;
    background-color: white;
    color: black;
    border-radius: 15px;
    text-align: center;
    vertical-align: middle;
}

.smart-label-pure {
    padding: 20px 7px 1px 7px;
    margin: 0;
    border: none;
    background-color: transparent;
    color: black;
    border-radius: 15px;
    text-align: center;
    vertical-align: middle;
}

.smart-label-line,
.smart-label-point {
    background-color: #0072b2;
    border-color: #0072b2;
}

.smart-label-point {
    margin-top: 12px;
}

.smart-label-angle {
    background-color: #e69f00;
    border-color: #e69f00;
    padding: 1px 7px 1px 7px;
}

.smart-label-polygon,
.smart-label-circle {
    background-color: #f0e442;
    color: black;
    border-color: #f0e442;
    padding: 1px 7px 1px 7px;
}

/*
 * Smart-label dark-mode overrides.
 *
 * `.smart-label-pure`: transparent background with hardcoded black text.
 *   On a dark JSXGraph canvas this produces invisible text — switch to
 *   canvas-text color so it adapts to the theme.
 *
 * `.smart-label-outline`: white bubble on the dark canvas is jarring.
 *   Use an elevated-surface background consistent with other dark-mode
 *   popover surfaces, with a theme-aware border and text.
 */
[data-theme="dark"] .smart-label-pure {
    color: var(--canvasText);
}

[data-theme="dark"] .smart-label-outline {
    background-color: #2d2d2d;
    border-color: var(--canvasText);
    color: var(--canvasText);
}

/* Fix: Ensure div-based paragraphs maintain standard paragraph spacing */
.doenet-viewer .para {
    margin-block-start: 1em;
    margin-block-end: 1em;
}

/*
 * DoenetML <tag> element: render as green inline code. `--doenetTagColor`
 * stays separate from `--mainGreen` because button backgrounds need the darker
 * `--mainGreen` shade for white foreground text, while inline tags need a
 * brighter dark-mode green to stay readable on the canvas.
 */
.doenet-viewer .doenet-tag {
    color: var(--doenetTagColor);
}

/**************************************************
 End JSXGraph styles 
 **************************************************/
.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 {
    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, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, 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;
    -moz-column-gap: 0.75rem;
         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;
    -moz-column-gap: 0.25rem;
         column-gap: 0.25rem;
}

@media (min-width: 640px) {
    .virtual-keyboard .row {
        -moz-column-gap: 0.5rem;
             column-gap: 0.5rem;
    }
}

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

@media (min-width: 640px) {
    .virtual-keyboard .keyboard-region {
        -moz-column-gap: 0.5rem;
             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 {
        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, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, 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;
        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));
}
.doenet-button {
    box-sizing: border-box;
    --button-color: var(--mainBlue);
    /*
     * `--button-canvas-color` is the brand color used when the button sits
     * *on the canvas* (unchecked toggle text/border) rather than as a filled
     * background. On the dark canvas the plain brand color is too low-contrast,
     * so lighten it there; light mode keeps the brand color unchanged.
     */
    --button-canvas-color: var(--button-color);
    --button-hover-color: oklch(
        from var(--button-color) calc(max(l * 1.6, 0.7)) calc(c * 0.75) h
    );
    --button-active-color: oklch(
        from var(--button-color) calc(max(l * 1.7, 0.8)) calc(c * 0.75) h
    );
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;

    padding: 0.25rem 0.75rem;
    min-height: 1.4rem;
    margin: 0 2px;

    font-size: 12px;
    background-color: var(--button-color);
    color: white;
    border-radius: 10rem;
    cursor: pointer;
    user-select: none;

    &:hover {
        background-color: var(--button-hover-color);
        color: black;
    }
    &:active {
        background-color: var(--button-active-color);
        color: black;
    }
    &:disabled {
        background-color: var(--mainGray);
        cursor: not-allowed;
    }
    &:focus {
        outline: 2px solid white;
        outline-offset: -4px;
    }
}
.doenet-button.alert {
    --button-color: var(--mainRed);
}
.doenet-button.action-button {
    border-radius: var(--mainBorderRadius);
}
.doenet-button .button-icon {
    padding: 0.25rem 0;
    transform: translateY(0.12rem);
}
.doenet-labelled-button {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
}
.doenet-labelled-button.vertical {
    flex-direction: column;
    vertical-align: bottom;
}

.doenet-button-group {
    display: inline-flex;
    align-items: stretch;
    .doenet-button {
        --separator-color: oklch(
            from var(--button-color) calc(l * 1.8) calc(c * 0.5) h
        );
        border: 1px solid var(--separator-color);
    }
    &:not(.vertical) {
        flex-direction: row;
        .doenet-button {
            margin-inline: 0;
            /* Remove border radius on all but the first and last buttons */
            &:not(:first-child):not(:last-child) {
                border-radius: 0;
            }
            &:first-child {
                border-start-end-radius: 0;
                border-end-end-radius: 0;
            }
            &:last-child {
                border-start-start-radius: 0;
                border-end-start-radius: 0;
            }
        }
    }
}
.doenet-button-group.vertical {
    flex-direction: column;
    .doenet-button {
        margin-top: 0;
        margin-bottom: 0;
        /* Remove border radius on all but the first and last buttons */
        &:not(:first-child):not(:last-child) {
            border-radius: 0;
        }
        &:first-child {
            border-end-start-radius: 0;
            border-end-end-radius: 0;
        }
        &:last-child {
            border-start-start-radius: 0;
            border-start-end-radius: 0;
        }
    }
}
.doenet-button {
    /* Hide the underlying checkbox */
    input[type="checkbox"],
    input[type="radio"] {
        appearance: none;
        width: 0;
        margin: 0;
        padding: 0;
        position: absolute;
        outline: none;
    }
    &:has(input) {
        border: 2px solid var(--button-canvas-color);
    }
    &:has(input:not(:checked, :focus)):hover {
        background-color: var(--button-active-color);
    }
    &:has(input:not(:checked)):hover {
        color: black;
    }
    &:has(input:checked):hover {
        color: black;
    }
    &:has(input:checked) {
        background-color: var(--button-color);
    }
    &:has(input:not(:checked)) {
        background-color: var(--canvas);
        color: var(--button-canvas-color);
    }
    &:has(input:focus) {
        outline: 2px solid white;
        outline-offset: -4px;
    }
    &:has(input:not(:checked):focus) {
        outline: 2px solid var(--button-canvas-color);
        outline-offset: -4px;
    }
}

/*
 * On the dark canvas, lighten the brand color used for on-canvas (unchecked)
 * toggle text/border so it clears WCAG AA against the dark canvas. Filled
 * (checked) buttons keep the darker `--button-color` with white text.
 */
[data-theme="dark"] .doenet-button {
    --button-canvas-color: oklch(from var(--button-color) max(l, 0.78) c h);
}

/*
 * `.doenet-ui-button` dark mode: override the light-mode defaults under
 * `[data-theme="dark"]`, the single dark-mode mechanism used throughout
 * the DoenetEditor context.
 */
[data-theme="dark"] .doenet-ui-button {
    --background: rgb(255 255 255 / 5%);
    --border: rgb(255 255 255 / 10%);
    --light: rgb(255 255 255 / 5%);
    --shadow: rgb(0 0 0 / 25%);
    --text: white;
    box-shadow:
        inset 0 0 0 1px var(--border),
        inset 0 -1px 0 1px var(--shadow),
        inset 0 1px 0 var(--light);
}

[data-theme="dark"] .doenet-ui-button:not(:active):hover {
    --border: rgb(255 255 255 / 25%);
}

[data-theme="dark"] .doenet-ui-button:active,
[data-theme="dark"] .doenet-ui-button[data-active] {
    box-shadow:
        inset 0 0 0 1px var(--border),
        inset 0 1px 1px 1px var(--shadow);
}

/* Resizable Panel */
.doenet-resizable-panel-handle {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    background-color: var(--mainGray);
    border: 1px solid oklch(from var(--mainGray) calc(l * 0.8) calc(c * 0.5) h);

    svg {
        flex-shrink: 0;
        margin-inline-start: 1px;
    }

    &.vertical {
        width: 100%;
        height: 10px;
        svg {
            margin-inline-start: 0;
            margin-top: 0.5px;
        }
    }
    &.collapsible:not(.isOpen) {
        height: 5px;
    }
}

/*
 * In dark mode `--mainGray` = #a9a9a9 — too light against the near-black
 * canvas. Use a dark elevated surface (#2a2a2a) with a subtle border.
 */
[data-theme="dark"] .doenet-resizable-panel-handle {
    background-color: #2a2a2a;
    border-color: #444;

    svg {
        color: #8b949e;
    }
}

/* UI Components */

.doenet-ui-button {
    --outline-offset: -1px;
    --background: white;
    --border: rgb(0 0 0 / 13%);
    --light: rgb(255 255 255 / 20%);
    --shadow: rgb(0 0 0 / 10%);
    --text: black;

    &:not(:active):hover {
        --border: rgb(0 0 0 / 33%);
    }
    @layer theme {
        &[aria-disabled="true"] {
            opacity: 0.5;
        }
    }
    &:active,
    &[data-active] {
        box-shadow:
            inset 0 0 0 1px var(--border),
            inset 0 2px 0 var(--border);
    }

    cursor: pointer;
    --size: 2rem;
    display: flex;
    max-width: 100%;
    height: var(--size);
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-inline: 1rem;
    text-decoration-line: none;
    background-color: var(--background);
    color: var(--text, currentColor);
    border-style: none;
    scroll-margin: var(--padding, 0px);
    border-radius: calc(var(--rounded, 0.5rem) - var(--padding, 0px));
    font-size: 1rem;
    line-height: 1.5rem;
    box-shadow:
        inset 0 0 0 1px var(--border),
        inset 0 2px 0 var(--light),
        inset 0 -1px 0 var(--shadow),
        0 1px 1px var(--shadow);
    --outline-offset: 0;
    --outline: var(--color-primary);
    --depth: 1px;
    --padding-block: var(--depth);
    outline-width: 2px;
    outline-color: var(--outline);
    outline-offset: var(--outline-offset);
    user-select: none;
    white-space: nowrap;
    padding-block: var(--padding-block-start, var(--padding-block))
        var(--padding-block-end, var(--padding-block));
}
.variant-select {
    display: flex;
    margin-inline-start: 0.5rem;

    * {
        box-sizing: border-box;
    }
    .button {
        --size: 2.5rem;
        --outline-offset: 2px;
        --outline: hsl(204 100% 40%);
    }

    .button[data-focus-visible] {
        outline-style: solid;
    }

    .select-button {
        width: 12em;
        justify-content: space-between;
        border-start-end-radius: 0;
        border-end-end-radius: 0;
        margin-inline-end: 0;
    }
    .prev-next-button {
        border-start-start-radius: 0;
        border-end-start-radius: 0;
        margin-inline-start: 0;
    }
    /* Make all .prev-next-button buttons except for the last one have zero border radius */
    .prev-next-button:not(:last-child) {
        border-start-end-radius: 0;
        border-end-end-radius: 0;
    }

    .wrapper {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .popover {
        z-index: 50;
        display: flex;
        max-height: min(var(--popover-available-height, 300px), 300px);
        flex-direction: column;
        overflow: auto;
        overscroll-behavior: contain;
        border-radius: 0.5rem;
        border-width: 1px;
        border-style: solid;
        border-color: hsl(204 20% 88%);
        background-color: white;
        padding: 0.5rem;
        color: black;
        box-shadow:
            0 10px 15px -3px rgb(0 0 0 / 0.1),
            0 4px 6px -4px rgb(0 0 0 / 0.1);
        padding-top: 0px;
    }

    .popover:where([data-theme="dark"], [data-theme="dark"] *) {
        border-color: hsl(204 4% 24%);
        background-color: hsl(204 4% 16%);
        color: white;
        box-shadow:
            0 10px 15px -3px rgb(0 0 0 / 0.25),
            0 4px 6px -4px rgb(0 0 0 / 0.1);
        scrollbar-color: #555 hsl(204 4% 16%);
    }

    .popover:where(
            [data-theme="dark"],
            [data-theme="dark"] *
        )::-webkit-scrollbar {
        width: 8px;
    }

    .popover:where(
            [data-theme="dark"],
            [data-theme="dark"] *
        )::-webkit-scrollbar-track {
        background: hsl(204 4% 16%);
    }

    .popover:where(
            [data-theme="dark"],
            [data-theme="dark"] *
        )::-webkit-scrollbar-thumb {
        background-color: #555;
        border-radius: 4px;
        border: 2px solid hsl(204 4% 16%);
    }

    .popover:where(
            [data-theme="dark"],
            [data-theme="dark"] *
        )::-webkit-scrollbar-thumb:hover {
        background-color: #777;
    }

    .select-item {
        display: flex;
        cursor: default;
        scroll-margin: 0.5rem;
        align-items: center;
        gap: 0.5rem;
        border-radius: 0.25rem;
        padding: 0.5rem;
        outline: none !important;
        width: 100%;
        scroll-margin-top: 3.5rem;
    }

    .select-item[aria-disabled="true"] {
        opacity: 0.5;
    }

    .select-item[data-active-item] {
        background-color: hsl(204 100% 40%);
        color: white;
    }

    .combobox-wrapper {
        position: sticky;
        top: 0px;
        margin-bottom: 0.5rem;
        width: 100%;
        background-color: inherit;
        padding-top: 0.5rem;
        display: flex;
    }

    .combobox {
        height: 2.5rem;
        width: 100%;
        border-radius: 0.25rem;
        border-style: none;
        background-color: hsl(204 20% 94%);
        padding-inline: 1rem;
        font-size: 1rem;
        line-height: 1.5rem;
        color: black;
    }

    .combobox:hover {
        background-color: hsl(204 20% 91%);
    }

    .popover:focus-visible,
    .popover[data-focus-visible],
    .combobox:focus-visible,
    .combobox[data-focus-visible] {
        outline: 2px solid hsl(204 100% 40%);
        outline-offset: -1px;
    }

    .combobox:where([data-theme="dark"], [data-theme="dark"] *) {
        background-color: hsl(204 4% 10%);
        color: white;
    }

    .combobox:hover:where([data-theme="dark"], [data-theme="dark"] *) {
        background-color: hsl(204 4% 8%);
    }
}
.dev-app {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/*
 * Wraps rather than running off the side. These controls are wider than a
 * phone laid end to end, and a row that cannot wrap makes the whole document
 * wider than the viewport — at which point Chrome's device toolbar scales the
 * page down to fit and every mobile check is done against a shrunken render,
 * with the viewer apparently occupying two thirds of the width and a band of
 * empty space below it. The viewer itself fits a phone; only this bar did not.
 */
.dev-toolbar {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 8px 12px;
    border-bottom: 1px solid #ccc;
    background: #f5f5f5;
}

.dev-toolbar-status {
    margin-left: auto;
    color: #666;
}

.dev-label-short {
    display: none;
}

.dev-control {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85em;
    color: #333;
}

.dev-locale-input {
    width: 6em;
    font-size: inherit;
}

.dev-reset-button {
    padding: 2px 10px;
    font-size: 0.85em;
    cursor: pointer;
}

.dev-viewer {
    flex: 1 1 auto;
    overflow: hidden;
}

/*
 * On a phone the bar is checking the app, not competing with it for the
 * screen: the labels shorten, the note about local storage goes (the Reset
 * button's tooltip says the same thing), and the locale fields keep just
 * enough room for a tag like `en-XB`. Full-width this bar wrapped onto four
 * rows and took a fifth of an iPhone SE; it now fits on one.
 *
 * `40rem` matches Tailwind's `sm` breakpoint, which is where the viewer
 * beneath already changes its own spacing.
 */
@media (max-width: 40rem) {
    .dev-toolbar {
        gap: 6px 8px;
        padding: 6px 8px;
    }

    .dev-label-full {
        display: none;
    }

    .dev-label-short {
        display: inline;
    }

    .dev-toolbar-status {
        display: none;
    }

    /*
     * Enough for a tag (`en-XB` is the longest the datalist offers) but not
     * for the `(document)` placeholder, which truncates. That hint is the
     * price of the single row; the field's `title` still explains it.
     */
    .dev-locale-input {
        width: 4em;
    }
}