/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.2_webpack@5.102.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].use[1]!../node_modules/.pnpm/postcss-loader@8.2.0_postcss@8.5.6_typescript@5.9.3_webpack@5.102.1/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].use[2]!./styles/app_variables.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************/
:root {
    /* Zulip color palette */
    /* stylelint-disable color-no-hex */
    /* grey */
    --grey-0: #f7f8fc;
    --grey-50: #f2f3f7;
    --grey-100: #e9ebf2;
    --grey-150: #dfe1e8;
    --grey-200: #cbcdd6;
    --grey-250: #bbbdc8;
    --grey-300: #aaadba;
    --grey-350: #9ea1ae;
    --grey-400: #9194a3;
    --grey-450: #858897;
    --grey-500: #767988;
    --grey-550: #626573;
    --grey-600: #535663;
    --grey-650: #444754;
    --grey-700: #393c49;
    --grey-750: #2d303c;
    --grey-800: #242631;
    --grey-850: #181a25;
    --grey-900: #11131e;
    --grey-950: #0a0c17;
    --grey-1000: #070812;

    /* purple */
    --purple-0: #f3f2fd;
    --purple-50: #ededfc;
    --purple-100: #e5e5fc;
    --purple-150: #dbdaff;
    --purple-200: #c9c7fd;
    --purple-250: #b8b4ff;
    --purple-300: #aba5fd;
    --purple-350: #9e94fd;
    --purple-400: #9283fd;
    --purple-450: #8a70fc;
    --purple-500: #7f63ee;
    --purple-550: #7153dc;
    --purple-600: #5f3cc5;
    --purple-650: #522ab4;
    --purple-700: #4615a3;
    --purple-750: #370386;
    --purple-800: #2c0070;
    --purple-850: #200154;
    --purple-900: #13013a;
    --purple-950: #0d002c;
    --purple-1000: #070020;

    /* violet */
    --violet-0: #f1f3fe;
    --violet-50: #eceefc;
    --violet-100: #e3e6fd;
    --violet-150: #d8dcfc;
    --violet-200: #c3c9fe;
    --violet-250: #b1b7fe;
    --violet-300: #a3a9fc;
    --violet-350: #9398fd;
    --violet-400: #8688fd;
    --violet-450: #7977fe;
    --violet-500: #6e69f3;
    --violet-550: #6159e1;
    --violet-600: #4f42c9;
    --violet-650: #4331b8;
    --violet-700: #381da7;
    --violet-750: #2b0e8a;
    --violet-800: #230773;
    --violet-850: #180557;
    --violet-900: #0e033c;
    --violet-950: #08012e;
    --violet-1000: #050121;

    /* blue */
    --blue-0: #eff3fe;
    --blue-50: #e5edfe;
    --blue-100: #dae5fd;
    --blue-150: #cbdbfd;
    --blue-200: #b4cafd;
    --blue-250: #97b6fe;
    --blue-300: #84a8fd;
    --blue-350: #7199fe;
    --blue-400: #5f8bfc;
    --blue-450: #4d7bfd;
    --blue-500: #406ef6;
    --blue-550: #325ce3;
    --blue-600: #2145cb;
    --blue-650: #1633b9;
    --blue-700: #0f23ac;
    --blue-750: #0a089b;
    --blue-800: #06037c;
    --blue-850: #03025c;
    --blue-900: #020145;
    --blue-950: #010034;
    --blue-1000: #010024;

    /* green */
    --green-0: #ebffee;
    --green-50: #d0fed8;
    --green-100: #b4ffc3;
    --green-150: #a3f9b5;
    --green-200: #82e89a;
    --green-250: #6bd586;
    --green-300: #57c273;
    --green-350: #41ae61;
    --green-400: #2f9f52;
    --green-450: #158f44;
    --green-500: #07833c;
    --green-550: #087736;
    --green-600: #09672e;
    --green-650: #035926;
    --green-700: #054f22;
    --green-750: #05401b;
    --green-800: #013112;
    --green-850: #03260e;
    --green-900: #001d07;
    --green-950: #011505;
    --green-1000: #010d03;

    /* orange */
    --orange-0: #fef4e3;
    --orange-50: #ffeccd;
    --orange-100: #ffda9b;
    --orange-150: #fecb6f;
    --orange-200: #febe3d;
    --orange-250: #f8b325;
    --orange-300: #eba002;
    --orange-350: #db920d;
    --orange-400: #c8850d;
    --orange-450: #ba7401;
    --orange-500: #a96a05;
    --orange-550: #9c5c00;
    --orange-600: #88520c;
    --orange-650: #764607;
    --orange-700: #623b0c;
    --orange-750: #4f2e06;
    --orange-800: #3f2404;
    --orange-850: #321c04;
    --orange-900: #291602;
    --orange-950: #200f01;
    --orange-1000: #180c03;

    /* red */
    --red-0: #fcf3f2;
    --red-50: #ffe4e0;
    --red-100: #ffd4cd;
    --red-150: #ffbfb5;
    --red-200: #fea497;
    --red-250: #ff8b7c;
    --red-300: #fd7465;
    --red-350: #fd5f50;
    --red-400: #f34c3e;
    --red-450: #e1392e;
    --red-500: #d22720;
    --red-550: #c0070a;
    --red-600: #ac0508;
    --red-650: #960708;
    --red-700: #7c0203;
    --red-750: #650102;
    --red-800: #4f0001;
    --red-850: #400101;
    --red-900: #330201;
    --red-950: #280100;
    --red-1000: #1a0200;

    --csstools-color-scheme--light: initial;

    color-scheme: light;

    /*
    This is the header, aka the navbar.
    */
    --header-height: 2.5em; /* 40px at 16px em */

    /*
    At 600px, the header starts taking up more than 5%
    of the screen. We make it shorter to leave more space
    to see the rest of the app. */
}

@media (max-height: 599.98px) {

:root {
        --header-height: 1.875em; /* 30px at 16px em */
}
    }

:root {

    /*
    Height of the search box, which appears in the header.
    */
    --search-box-height: 2em; /* 32px at 16px em */
    --search-box-width: 9.375em; /* 150px at 16px em */
}

@media (max-width: 767.98px) {

:root {
        --search-box-width: 2.5em; /* 40px at 16px em */
}
    }

/*
        On very short screens, the search box's height becomes
        is reduced to fit the available space.
    */

@media (max-height: 599.98px) {

:root {
        --search-box-height: 1.75em; /* 28px at 16px em */
}
    }

:root {

    --search-pill-label-min-width: 2.5em; /* 35px at 14px/em */

    /*
    This is the space for the searchbar's search icon, and the left padding
    for the search suggestions so they match up with searchbar content.
    */
    --search-left-padding: 35px;

    /*
    Since #navbar_alerts_wrapper can take variable height depending upon
    window width / language, we sync its height in navbar_alerts.js
    */
    --navbar-alerts-wrapper-height: 0px;
    --navbar-fixed-height: calc(
        var(--header-height) + var(--navbar-alerts-wrapper-height)
    );
    /* Keep content from colliding with the search box. */
    --navbar-content-righthand-offset: 5px;

    /*
    We have a 10px gutter below the header,
    which often needs to be respected by both
    the elements above it and below it on
    the y-axis, due to absolute positioning.
    */
    --header-padding-bottom: 10px;

    /*
    Our sidebars (and anything that top-align
    with them) go beneath the header.
    */
    /* The width of the empty space in the sidebar to separate
       content from the edge of the window */
    --left-sidebar-padding-left: 8px;
    /* The empty space between left-sidebar row icons and
       the row content.
       7px at 16px/1em */
    --left-sidebar-icon-content-gap: 0.4375em;
    /* The space allotted in gridded rows for the toggle icon. */
    --left-sidebar-header-icon-toggle-width: 20px;
    /* 26px at 16px/1em */
    --left-sidebar-vdots-width: 1.625em;
    /* Other rows need an offset to preserve a column the
       entire height of the left sidebar for where toggles sit. */
    --left-sidebar-toggle-width-offset: var(
        --left-sidebar-header-icon-toggle-width
    );
    --right-sidebar-header-icon-toggle-width: 20px;
    --right-sidebar-toggle-width-offset: calc(
        var(--right-sidebar-header-icon-toggle-width) - 4px
    );
    /* This represents the space in the sidebar reserved for symbols like
       the #; labels like the stream name go to the right of this. */
    --left-sidebar-icon-column-width: 1em;
    /* Offset on unreads to make New topic button appear centered. */
    --left-sidebar-unread-offset: 6.5px;
    /* space direct message / stream / topic names from unread counters
    and @ mention indicators by 3px on the right */
    --left-sidebar-before-unread-count-padding: 3px;
    /* 15px is the approximate width of a single-digit
       unread marker. */
    /* 15px at 8px/1em (masked unreads are sized to 0.5em) */
    --left-sidebar-single-digit-unread-width: 1.875em;
    --left-sidebar-right-margin: 12px;
    /* 289px at 14px/1em */
    --left-sidebar-max-width: calc(
        20.6429em - var(--left-sidebar-right-margin)
    );
    --realm-logo-max-width: 12.5em; /* 200px at 16px em */
    /* Value updated on realm_logo.render() */
    --realm-logo-current-width: var(--realm-logo-max-width);
    /* 10px is just extra margin for content separation */
    --middle-column-left-margin-fluid-layout: calc(
        var(--header-height) + var(--realm-logo-current-width) + 10px
    );
    /* Sidebar width is 1/3 of the screen at smaller
       sizes, but gets held to the left sidebar's max width.
       This is very useful for areas in the CSS codebase
       that rely on this value, but not necessarily as
       applied to `width:` or `max-width:`. */
    --left-sidebar-width: min(33.3333vw, var(--left-sidebar-max-width));
    --right-sidebar-left-spacing: 5px;
    /* 50px per icon * 4 icons + 3px space (legacy) = 203px at 20px/1em */
    --right-column-collapsed-sidebar-width: 10.15em;
    /* 288px at 14px/1em */
    --right-sidebar-max-width: 20.57em;
    /* We open the right sidebar at xl_min at a size of 240px,
       here expressed as precisely 20% of the viewport. */
    --right-sidebar-width: min(20vw, var(--right-sidebar-max-width));
    /* 25px at 16px/1em */
    --right-sidebar-vdots-width: 1.5625em;
    /* The width of the icon is reduced by 2px, to account for 2px
       of top and bottom margin needed for hover backgrounds to
       not touch the row outline. */
    --left-sidebar-header-icon-width: calc(1.7142em - 2px); /* 24px / 14px em */
    /* Space between section in the left sidebar. */
    --left-sidebar-sections-vertical-gutter: 8px;
    /* The legacy value here is 25px; that's the unitless legacy line-height
       of 20px, plus 5px at 14px/1em */
    --left-sidebar-bottom-scrolling-buffer: calc(
        (var(--legacy-body-line-height-unitless) * 1em) + 0.3571em
    );
    /* Used in both left and right sidebar at the bottom, to allow
       the user to scroll past the bottom-most elements a little bit.

       Value is chosen to avoid elements overlapping with the browser's URL
       display when hovering links, and should not scale with font size. */
    --sidebar-bottom-spacing: 25px;
    --sidebar-filter-bottom-spacing: 3px;

    /* We base sidebar row heights on their line heights.
       Prominent rows include things like headers (e.g., VIEWS)
       as well as navigation items. Everything else takes
       the smaller line-height. */
    --line-height-sidebar-row-prominent: 1.7142em; /* 24px / 14px em */
    --line-height-sidebar-row: 1.5714em; /* 22px / 14px em */
    --line-height-sidebar-row-with-avatars: 1.3571em; /* 19px / 14px em */
    --line-height-sidebar-topic-inner: 1.2em;
    /* This spacing value is to compensate for the
       additional space of the prominent row-height
       from within the inner topic value. */
    --spacing-top-bottom-sidebar-topic-inner: calc(
        (
                var(--line-height-sidebar-row-prominent) -
                    var(--line-height-sidebar-topic-inner)
            ) /
            2
    );

    /* Right sidebar */
    /* Vlad's design adds 2px of extra padding beyond the
       space created by the padding-left on .right-sidebar,
       which separates the right sidebar from the message area. */
    --right-sidebar-padding-left: 2px;
    --right-sidebar-heading-left-spacing: 5px;
    --right-sidebar-avatar-width: 2em;
    --right-sidebar-avatar-height: var(--right-sidebar-avatar-width);
    --right-sidebar-avatar-right-margin: 0.85ch;
    --right-sidebar-presence-circle-width: 1.4285em; /* 20px at 14px em */
    /* toggle + avatar + avatar margin + 2px border */
    --right-sidebar-text-indent-with-avatar: calc(
        var(--right-sidebar-header-icon-toggle-width) / 2 +
            var(--right-sidebar-avatar-width) +
            var(--right-sidebar-avatar-right-margin) + 2px
    );
    --right-sidebar-text-indent-without-avatar: calc(
        var(--right-sidebar-toggle-width-offset) +
            var(--right-sidebar-presence-circle-width)
    );

    /* Tippy popover related values */
    --navbar-popover-menu-min-width: 230px;
    --message-actions-popover-min-width: 230px;
    --user-group-info-popover-min-width: 16.4285em; /* 230px / 14px em */
    --topic-actions-popover-min-width: 200px;
    --user-card-popover-min-width: 200px;
    --stream-card-popover-min-width: 16.4285em;

    /* Information density and typography values */
    /* The legacy values here are updated via JavaScript */
    --base-font-size-px: 14px;
    --base-line-height-unitless: 1.214;
    --base-maximum-block-height-em: 1.425em;
    --line-fitted-vertical-align-offset-em: 0;
    --markdown-interelement-space-px: 5px;
    --markdown-interelement-doubled-space-px: calc(
        var(--markdown-interelement-space-px) * 2
    );
    /* Certain elements need to be fitted perfectly to
       the line height; the length here can be used to set
       precise heights, and in the case of square elements,
       a matching precise width as well. */
    --length-line-fitted-block: calc(var(--base-line-height-unitless) * 1em);
    /* Emoji elements are allowed to exceed the perfectly-fit
       line-height. Classic Zulip emoji sizing is a 20px square
       emoji at a 14px font-size, for 1.4286em at 14px/1em. */
    --length-line-oversize-block: 1.4286em;
    /* To avoid disturbing the flow of text around emoji or other
       oversize inline blocks, we calculate a negative margin
       adjustment for offsetting the emoji, top and bottom. */
    --length-line-oversize-block-margin-adjust: calc(
        (
                (
                        min(
                            var(--base-maximum-block-height-em),
                            var(--length-line-fitted-block)
                        )
                    ) -
                    var(--length-line-oversize-block)
            ) /
            2
    );

    /* Legacy values */
    --legacy-body-line-height-unitless: calc(20 / 14);

    /* Special effects */
    --pulse-unread-scale-max: 1.5;

    /* Message area */
    /* In the legacy layout at 16px/1em density, 918.6px is
       the widest the message area gets, so we preserve this
       value to better present a readable message area across
       different info densities and the manual hiding of the
       left and right sidebars.
       918.6px at 16px/1em
    */
    --message-area-max-width: 57.4125em;

    /* Box shadow for overlays across the web app */
    --box-shadow-overlay: none;

    /* Shared sidebar typography and effects values. */
    --font-weight-sidebar-heading: 600;
    --font-weight-sidebar-action-heading: 370;
    --font-variant-sidebar-action-heading: all-small-caps;
    --font-feature-settings-sidebar-action-heading: "c2sc", "smcp";
    /* 17px at 16px/1em = 1.0625em */
    --font-size-sidebar-action-heading: 1.0625em;
    --text-transform-sidebar-action-heading: uppercase;
    --letter-spacing-sidebar-heading: 0.0469em;
    --opacity-sidebar-heading: 0.7;
    --opacity-sidebar-heading-icon: 0.5;
    --opacity-sidebar-heading-hover: 0.9;
    --opacity-left-sidebar-muted: 0.55;
    --opacity-left-sidebar-muted-hover: 0.75;
    --opacity-unread-mention-info: 0.5;
    /* Since --opacity-unread-mention-info is too close to
       --opacity-left-sidebar-muted */
    --opacity-left-sidebar-muted-mentions: 0.3;
    --opacity-right-sidebar-subheading: 0.65;
    --opacity-right-sidebar-subheading-hover: 0.9;

    /*
    Message box elements and values.
    */
    /* At very tight line-heights, the focus ring on
       links can get cut off on paragraphs and list
       items that open the senderless message area.
       This padding fixes the cut-off problem, and
       can be used to adjust padding elsewhere in the
       message area as needed.
       2px at 20px/1em */
    --message-box-link-focus-ring-block-padding: 0.1em;
    /* 35px at 14px/1em */
    --message-box-avatar-width: 2.5em;
    --message-box-avatar-height: var(--message-box-avatar-width);
    /* 46px at 14px/1em */
    --message-box-avatar-column-width: 3.2857em;
    /* Increase the margin here to account for the
       focus ring, which is offset by -1px, as well
       as the vertical height between the hover icons
       and focus ring. */
    --message-box-vertical-margin: calc(
        var(--markdown-interelement-space-px) * 1.4
    );
    --message-box-markdown-aligned-vertical-space: var(
        --markdown-interelement-space-px
    );
    /* 22px matches to the width of the padded icon.
       22px at 16px/1em
    */
    --message-box-icon-width: 1.375em;
    /* 25px at 16px/1em */
    --message-box-icon-height: 1.6667em;
    --message-box-height-senderless-single-line-message: calc(
        var(--base-line-height-unitless) * var(--base-font-size-px) +
            calc(var(--markdown-interelement-space-px) * 2)
    );
    /* The line-height on the sender line should coordinate with the
       height of a single-line, senderless message, but never be smaller
       than the height of the hover icons. The sender line never wraps,
       so this just keeps everything in line with the grid definition. */
    --message-box-sender-line-height: max(
        var(--message-box-icon-height),
        var(--message-box-height-senderless-single-line-message)
    );
    /* This width is updated with an exact pixel
       width upon UI initialization. */
    --message-box-timestamp-column-width: 0;

    /* This length is the primary reference for height
       and image width on URL preview embeds. 112px
       comes from the height of a two-line title and a
       two-line description at a +2 (maximum)
       line-height setting.
       112px at 16px/1em */
    --length-message-preview-embeds: 7em;

    /*
    Reaction container UI scaling.
    */
    --scale-message-reaction-active: 0.96;

    /* Message group bookend and date row UI */
    --csstools-light-dark-toggle--457: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.15);
    --color-border-message-group-spacer-line: var(--csstools-light-dark-toggle--457, rgba(0, 0, 0, 0.15));

    /*
    Left position of unread marker. Only needs to be tracked if it is negative so that
    it doesn't leak through message header.
    */
    --unread-marker-left: -1px;

    /*
    Compose-recipient box minimum height. Used in a flexbox context to
    allow elements like DM pills to stack without breaking out of their
    flex item. 2em is 32px at 16px/1em.
    */
    --compose-recipient-box-min-height: 2em;
    /* 28px at 14px/1em */
    /* Note that this variable can only be used in contexts where
       the font-size doesn't deviate from the base font-size;
       that excludes contexts like .compose_control_button, which
       uses font-sizing to adjust the size of the icon. Related
       values have been noted in comments with this variable name,
       to make their coordination a little less painful. */
    --compose-formatting-buttons-row-height: 2em;

    /*
    Width of the area where the compose box buttons are placed, "inside"
    the right edge of the compose box. This is used for the negative right
    margin and the right padding of the textbox to extend it into the compose
    expand / collapse buttons area, but keep the text from showing under the
    the buttons.
    */
    --composebox-buttons-width: 24px;

    /*
    Width of the send menu area with the Send button, Draft(s) button
    and the vdots.
    */
    --compose-send-controls-width: 112px;
}

@supports (color: light-dark(red, red)) {
:root {
    --color-border-message-group-spacer-line: light-dark(
        rgba(0, 0, 0, 0.15),
        rgba(255, 255, 255, 0.15)
    );
}
}

@supports not (color: light-dark(tan, tan)) {

:root * {
    --csstools-light-dark-toggle--457: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.15);
    --color-border-message-group-spacer-line: var(--csstools-light-dark-toggle--457, rgba(0, 0, 0, 0.15));
    }
}

@media ((min-width: 576px) and (max-width: 848.98px)) {

:root {
        --compose-send-controls-width: 62px;
}
    }

@media (max-width: 575.98px) {

:root {
        --compose-send-controls-width: 28px;
}
    }

:root {

    /* Compose-specific transitions and delays. */
    --compose-recipient-row-transition-delay: 100ms;
    --compose-recipient-row-transition: 150ms ease;

    /*
    User group info popover elements and values.
    */
    --user-group-popover-horizontal-padding: 0.6666em; /* 10px at 15px/1em */
    --user-group-popover-icon-text-gap: 0.3125em; /* 5px at 16px/1em */

    /*
    This isn't scaled with font-size because the flatpickr is a third
    party component that doesn't scale with font size.
    */
    --flatpickr-confirm-button-font-size: 18px;

    /*
    Width to be reserved for document scrollbar when scrolling is disabled.
    Using `scrollbar-gutter` would be more appropriate but doesn't has wide
    support and doesn't work for `fixed` elements.
    */
    --disabled-scrollbar-width: 0px;

    /*
    Right offset of simplebar scrollbar for `.column-right` when browser has
    overlay scrollbars which don't occupy any space. Currently only
    known to present on Mac (all browsers) and Firefox (all OS?). This seems
    more than enough to differentiate right sidebar scrollbar and browser
    scrollbar even if the browser scrollbar is wider.
    */
    --browser-overlay-scrollbar-width: 10px;

    /*
    Sometimes it's necessary to keep elements, especially those with hover
    controls or other interactivity, from appearing beneath Simplebar scroll
    bars.
    */
    --width-simplebar-scroll: 11px;
    --width-simplebar-scroll-hover: 15px;

    /* This is the height occupied by Recent Conversations filters,
       based on the height of the new filter elements in the sidebars
       and for the topics filter. 31px at 16px/1em. */
    --recent-topics-filters-height: 1.9375em;
    /* Legacy margin/flex-gap value for filters. 10px at 14px/1em. */
    --recent-topics-filters-gap: 0.7142em;

    /* Pill dimensions. */
    /* 1.5714em is 22px (border-inclusive) at 14px/1em */
    --height-input-pill: 1.5714em;
    /* Reduce user pill image lengths by 2px to
       preserve an apparent border around
       them, and a square aspect-ratio, even under
       `box-sizing: border-box` in the area. */
    --length-search-input-pill-image: calc(var(--height-input-pill) - 2px);
    --length-input-pill-exit: 1.1429em; /* 16px at 14px/em */
    --input-pill-side-padding: 0.3571em; /* 5px at 14px/em */
    --vertical-spacing-input-pill: 2px;
    --outer-spacing-input-pill-container: var(--vertical-spacing-input-pill);
    --horizontal-spacing-input-pill: 6px;

    /* User circles. */
    /* 8px at 14px/1em */
    --length-user-status-circle: 0.5714em;
    /* Shrink the user activity circle for the Recent Conversations context. */
    /* 7px at 14px/1em */
    --length-user-status-circle-recent-conversations: 0.5em;
    --length-user-status-circle-popover-menu: 8px;
    --length-user-popover-menu-avatar: 64px;

    /* Overlay heights for streams modal */
    --overlay-container-height: 95vh;
    --overlay-container-max-height: 1000px;
    /* The width of the settings sidebar. */
    --settings-sidebar-width: 18.2142em; /* 255px at 14px/em */
    /* .two-pane-settings-header and .settings-header */
    --settings-overlay-header-height: 3.2143em; /* 45px at 14px/em */
    /* .display-type and .list-toggler-container
       in subscriptions and user group settings overlays */
    --settings-overlay-subheader-height: 3.1429em; /* 44px at 14px/em */
    --settings-overlay-header-button-height: 2em;
    /* Informational overlay */
    --informational-overlay-max-width: 43.75em;
    --modal-input-width: 23.2142em;
    /* Dropdown menu width. This is a legacy value that comes from bootstrap.
       See 1c6bed55e4e800b5bad7150f6bdd274cd7f6504e for more context. */
    --width-dropdown-widget-button: 206px;

    /*
    Maximum height of the compose box when it is not in maximised state. This
    is equal to the height of `#bottom_whitespace`. We expect resize.ts to
    replace it with its pixel calculation since even if `vh` has great support,
    it can change depending on browser / OS on mobile devices.
    */
    --max-unmaximized-compose-height: 40vh;

    /* Maximum height of the message-edit and preview areas. */
    --max-message-edit-height: 24em;

    /*
    Line height of the message buttons in compose box. Here it's necessary
    to control this value uniformly and precisely to avoid issues with
    layout shifts originating with non-Latin characters in this area.
    1.429em is 20px at 14px em.
    */
    --line-height-compose-buttons: 1.429em;

    /*
    Maximum height of the subscribers list in stream settings so that
    it doesn't cause the container to have a second scrollbar.
    This value will be overridden when stream settings is opened.
    */
    --stream-subscriber-list-max-height: 100%;

    /*
      Reusable dimensions and offsets.
    */
    --margin-bottom-field-description: 3px;
    /* Gap between tabs in the tab picker */
    --grid-gap-tab-picker: 2px;

    /*
    The tippy arrow which matches the color of the popover's border,
    is formed by stacking two arrows on top of each other, via the
    use of `::before` and `::after` pseudo-elements. This value overrides
    the offset of the `::before` pseudo element to create a thicker border,
    visually consistent with that of it's parent popover.
    */
    --popover-tippy-arrow-before-offset: -6.5px;

    /* Color picker popover values */
    --size-color-swatch: 1em;
    --grid-gap-color-swatch: 1em;
    --padding-color-swatch-list: 0.6666em;
    --gradient-custom-swatch: conic-gradient(from 0deg at 50% 50%, rgb(255, 0, 151) 0%, rgb(255, 0, 0), rgb(255, 103, 0), rgb(182, 163, 0), rgb(0, 200, 0), rgb(0, 210, 166), rgb(0, 191, 255), rgb(0, 150, 255), rgb(160, 101, 255), rgb(241, 52, 255), rgb(255, 0, 151) 100%);

    /* Banner grid layout variables */
    --banner-horizontal-padding: 0.8125em; /* 13px at 16px/1em */
    --banner-vertical-padding: 0.3125em; /* 5px at 16px/1em */
    --banner-grid-template-areas: " . . banner-close-button banner-close-button"
        ". banner-content banner-close-button banner-close-button"
        ". . banner-close-button banner-close-button";
    --banner-grid-template-columns: var(--banner-horizontal-padding)
        minmax(0, 1fr) minmax(0, auto) var(--banner-horizontal-padding);
    --banner-grid-template-rows: 0.3125em auto 0.3125em; /* 5px at 16px/1em */

    /* Popup banner related variables */
    --popup-banner-translate-y-distance: 100px;

    /* Input grid layout variables */
    --input-icon-starting-offset: 0.5em; /* 8px at 16px/1em */
    --input-icon-width: 1em; /* 16px at 16px/1em */
    --input-icon-content-gap: 0.4375em; /* 7px at 16px/1em */
    --input-button-content-gap: 0.25em; /* 4px at 16px/1em */
    --input-button-width: 1.5em; /* 24px at 16px/1em */
    --input-button-ending-offset: 0.125em; /* 2px at 16px/1em */

    /* Colors used across the app */
    --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 75%);
    --color-date: var(--csstools-light-dark-toggle--0, hsl(0deg 0% 15% / 75%));
    --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) hsl(46deg 15% 20%);
    --color-background-private-message-header: var(--csstools-light-dark-toggle--1, hsl(46deg 35% 93%));
    --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) hsl(46deg 7% 16%);
    --color-background-private-message-content: var(--csstools-light-dark-toggle--2, hsl(45deg 20% 96%));
    --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) hsl(0deg 0% 13.5%);
    --color-background-stream-message-content: var(--csstools-light-dark-toggle--3, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) hsl(217deg 64% 59% / 70%);
    --color-selected-message-outline: var(--csstools-light-dark-toggle--4, hsl(217deg 64% 59% / 60%));
    --csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 40%);
    --color-message-list-border: var(--csstools-light-dark-toggle--5, hsl(0deg 0% 0% / 16%));
    --csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-message-header-contents-border: var(--csstools-light-dark-toggle--6, hsl(0deg 0% 0% / 10%));
    --csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 48%);
    --color-private-message-header-border: var(--csstools-light-dark-toggle--7, hsl(0deg 0% 0% / 10%));
    --csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 50%);
    --color-message-header-contents-border-bottom: var(--csstools-light-dark-toggle--8, hsl(0deg 0% 0% / 5%));
    --csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 37%);
    --color-private-message-header-border-bottom: var(--csstools-light-dark-toggle--9, hsl(0deg 0% 0% / 7%));
    --csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 30%);
    --color-message-header-icon-non-interactive: var(--csstools-light-dark-toggle--10, hsl(0deg 0% 0% / 30%));
    --csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-message-header-icon-interactive: var(--csstools-light-dark-toggle--11, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) hsl(0deg 0% 11%);
    --color-background: var(--csstools-light-dark-toggle--12, hsl(0deg 0% 94%));
    --csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) hsl(225deg 6% 10%);
    --color-background-widget-input: var(--csstools-light-dark-toggle--13, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-widget-button: var(--csstools-light-dark-toggle--14, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) hsl(0deg 0% 13%);
    --color-background-navbar: var(--csstools-light-dark-toggle--15, hsl(0deg 0% 97%));
    --csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 85%);
    --color-text-sidebar-row: var(--csstools-light-dark-toggle--16, hsl(0deg 0% 20%));
    --csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) hsl(0deg 0% 90%);
    --color-text-active-narrow-filter: var(--csstools-light-dark-toggle--17, hsl(0deg 0% 15%));
    --csstools-light-dark-toggle--458: var(--csstools-color-scheme--light) rgb(46, 46, 46);
    --color-background-active-narrow-filter: var(--csstools-light-dark-toggle--458, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--459: var(--csstools-color-scheme--light) rgb(46, 46, 46);
    --color-background-hover-narrow-filter: var(--csstools-light-dark-toggle--459, hsl(0deg 0% 97%));
    --csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 30%);
    --color-shadow-sidebar-row-hover: var(--csstools-light-dark-toggle--18, hsl(0deg 0% 0% / 30%));
    --csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) hsl(240deg 25% 35%);
    --color-background-sidebar-action-hover: var(--csstools-light-dark-toggle--19, hsl(240deg 100% 93%));
    --csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) hsl(240deg 100% 75% / 20%);
    --color-background-navigation-item-hover: var(--csstools-light-dark-toggle--20, hsl(240deg 100% 50% / 7%));
    --color-background-sidebar-action-heading-hover: var(
        --color-background-navigation-item-hover
    );
    --csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-navbar-bottom-border: var(--csstools-light-dark-toggle--21, hsl(0deg 0% 80%));
    --color-unread-marker: hsl(217deg 64% 59%);
    --csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) hsl(0deg 0% 30%);
    --color-masked-unread-marker: var(--csstools-light-dark-toggle--22, hsl(0deg 0% 80%));
    --color-failed-message-send-icon: hsl(3.88deg 98.84% 66.27%);
    --csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-active-row-modal: var(--csstools-light-dark-toggle--23, hsl(0deg 0% 98%));
    --csstools-light-dark-toggle--24: var(--csstools-color-scheme--light) hsl(212deg 28% 8% / 75%);
    --color-background-overlay: var(--csstools-light-dark-toggle--24, hsl(0deg 0% 13% / 80%));
    --csstools-light-dark-toggle--25: var(--csstools-color-scheme--light) hsl(212deg 28% 8% / 75%);
    --color-background-non-empty-overlay-indicator: var(--csstools-light-dark-toggle--25, hsl(0deg 0% 100% / 90%));
    --csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) #242424;
    --color-background-modal: var(--csstools-light-dark-toggle--26, #ededed);
    --csstools-light-dark-toggle--27: var(--csstools-color-scheme--light) #333;
    --color-background-modal-bar: var(--csstools-light-dark-toggle--27, #f5f5f5);
    --csstools-light-dark-toggle--460: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.08);
    --color-border-modal: var(--csstools-light-dark-toggle--460, rgba(140, 140, 140, 0.25));
    --csstools-light-dark-toggle--461: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.05);
    --color-border-modal-bar: var(--csstools-light-dark-toggle--461, rgba(194, 194, 194, 0.8));
    --csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 20%);
    --color-border-modal-footer: var(--csstools-light-dark-toggle--28, hsl(0deg 0% 87%));
    --csstools-light-dark-toggle--29: var(--csstools-color-scheme--light) hsl(236deg 33% 90%);
    --color-modal-close-button: var(--csstools-light-dark-toggle--29, inherit);
    --csstools-light-dark-toggle--30: var(--csstools-color-scheme--light) hsl(0deg 0% 91% / 10%);
    --color-background-modal-close-button-hover: var(--csstools-light-dark-toggle--30, hsl(0deg 0% 90%));
    --csstools-light-dark-toggle--31: var(--csstools-color-scheme--light) hsl(240deg 35% 68%);
    --color-modal-selectable-icon: var(--csstools-light-dark-toggle--31, hsl(240deg 30% 40%));
    --csstools-light-dark-toggle--32: var(--csstools-color-scheme--light) hsl(240deg 100% 90%);
    --color-modal-selectable-icon-hover: var(--csstools-light-dark-toggle--32, hsl(240deg 100% 15%));
    --csstools-light-dark-toggle--33: var(--csstools-color-scheme--light) hsl(240deg 100% 75% / 20%);
    --background-color-modal-selectable-icon-hover: var(--csstools-light-dark-toggle--33, hsl(240deg 100% 50% / 7%));
    --csstools-light-dark-toggle--34: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-pill-container-without-placeholder: var(--csstools-light-dark-toggle--34, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--35: var(--csstools-color-scheme--light) hsl(236deg 33% 90%);
    --color-unmuted-or-followed-topic-list-item: var(--csstools-light-dark-toggle--35, hsl(0deg 0% 20%));
    --csstools-light-dark-toggle--36: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 19%);
    --color-topic-indent-border: var(--csstools-light-dark-toggle--36, hsl(0deg 0% 0% / 19%));
    --color-outline-focus: hsl(215deg 47% 50%);
    --csstools-light-dark-toggle--37: var(--csstools-color-scheme--light) hsl(0deg 0% 17%);
    --color-background-search: var(--csstools-light-dark-toggle--37, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--38: var(--csstools-color-scheme--light) hsl(0deg 0% 20%);
    --color-background-search-collapsed: var(--csstools-light-dark-toggle--38, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--39: var(--csstools-color-scheme--light) hsl(0deg 0% 20%);
    --color-background-search-option-hover: var(--csstools-light-dark-toggle--39, hsl(0deg 0% 94%));
    --csstools-light-dark-toggle--40: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 30%);
    --color-search-box-hover-shadow: var(--csstools-light-dark-toggle--40, hsl(0deg 0% 0% / 10%));
    --color-search-shadow-wide: hsl(0deg 0% 0% / 25%);
    --color-search-shadow-tight: hsl(0deg 0% 0% / 10%);
    --csstools-light-dark-toggle--41: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 35%);
    --color-search-dropdown-top-border: var(--csstools-light-dark-toggle--41, hsl(0deg 0% 0% / 10%));
    --csstools-light-dark-toggle--42: var(--csstools-color-scheme--light) hsl(0deg 0% 78%);
    --color-search-icons: var(--csstools-light-dark-toggle--42, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--43: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 10%);
    --color-background-image-loader: var(--csstools-light-dark-toggle--43, hsl(0deg 0% 0% / 10%));
    --color-icon-purple: hsl(240deg 35% 60%);
    --csstools-light-dark-toggle--44: var(--csstools-color-scheme--light) hsl(0deg 0% 17%);
    --color-background-popover-menu: var(--csstools-light-dark-toggle--44, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--45: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 40%);
    --color-border-popover-menu-separator: var(--csstools-light-dark-toggle--45, hsl(0deg 0% 0% / 10%));
    --csstools-light-dark-toggle--46: var(--csstools-color-scheme--light) hsl(225deg 100% 84%);
    --color-hotkey-hint: var(--csstools-light-dark-toggle--46, hsl(227deg 78% 59%));
    --csstools-light-dark-toggle--47: var(--csstools-color-scheme--light) hsl(0deg 0% 65%);
    --color-popover-hotkey-hint: var(--csstools-light-dark-toggle--47, hsl(0deg 0% 40%));
    --csstools-light-dark-toggle--48: var(--csstools-color-scheme--light) hsl(0deg 0% 65% / 50%);
    --color-border-popover-hotkey-hint: var(--csstools-light-dark-toggle--48, hsl(0deg 0% 40% / 50%));
    --csstools-light-dark-toggle--49: var(--csstools-color-scheme--light) hsl(220deg 12% 95% / 5%);
    --color-background-hover-popover-menu: var(--csstools-light-dark-toggle--49, hsl(220deg 12% 5% / 5%));
    --csstools-light-dark-toggle--50: var(--csstools-color-scheme--light) hsl(220deg 12% 95% / 7%);
    --color-background-active-popover-menu: var(--csstools-light-dark-toggle--50, hsl(220deg 12% 5% / 7%));
    --csstools-light-dark-toggle--51: var(--csstools-color-scheme--light) hsl(0deg 0% 0%);
    --color-border-popover-menu: var(--csstools-light-dark-toggle--51, hsl(0deg 0% 0% / 40%));
    --csstools-light-dark-toggle--52: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 20%);
    --color-border-personal-menu-avatar: var(--csstools-light-dark-toggle--52, hsl(0deg 0% 0% / 10%));
    --csstools-light-dark-toggle--53: var(--csstools-color-scheme--light) hsl(240deg 18.37% 34.42%);
    --color-background-unread-counter-prominent: var(--csstools-light-dark-toggle--53, hsl(240deg 10% 50% / 70%));
    --csstools-light-dark-toggle--54: var(--csstools-color-scheme--light) hsl(240deg 10% 50% / 35%);
    --color-background-unread-counter-normal: var(--csstools-light-dark-toggle--54, hsl(240deg 10% 50% / 20%));
    --color-background-unread-counter-quiet: transparent;
    --box-shadow-unread-counter-normal: inset 0 0 1px hsl(0deg 0% 0% / 30%);
    --color-unread-counter-prominent: hsl(0deg 0% 100%);
    --csstools-light-dark-toggle--55: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 85%);
    --color-unread-counter-normal: var(--csstools-light-dark-toggle--55, hsl(0deg 0% 0% / 90%));
    --csstools-light-dark-toggle--56: var(--csstools-color-scheme--light) hsl(240deg 15% 65%);
    --color-unread-counter-quiet: var(--csstools-light-dark-toggle--56, hsl(240deg 15% 50%));
    /* Legacy unread-counter color value. */
    --color-background-unread-counter: var(
        --color-background-unread-counter-prominent
    );
    --color-unread-counter-muted: hsl(240deg 10% 50% / 35%);
    --csstools-light-dark-toggle--57: var(--csstools-color-scheme--light) hsl(0deg 0% 67%);
    --color-border-add-subscription-button-focus: var(--csstools-light-dark-toggle--57, hsl(0deg 0% 20%));
    /* When unreads are hovered on the condensed
       views, they should not have an alpha.
       The first color corresponds to
       --color-background-unread-counter-normal.
       The second color aligns with light mode's
       --color-background. */
    --csstools-light-dark-toggle--462: var(--csstools-color-scheme--light) rgb(58, 58, 67);
    --color-background-unread-counter-no-alpha: var(--csstools-light-dark-toggle--462, rgb(215, 215, 220));
    --csstools-light-dark-toggle--58: var(--csstools-color-scheme--light) hsl(240deg 35% 68%);
    --color-background-unread-counter-dot: var(--csstools-light-dark-toggle--58, hsl(240deg 30% 40%));
    --csstools-light-dark-toggle--59: var(--csstools-color-scheme--light) hsl(105deg 2% 50%);
    --color-border-unread-counter: var(--csstools-light-dark-toggle--59, var(--color-background-unread-counter));
    --csstools-light-dark-toggle--60: var(--csstools-color-scheme--light) var(--color-border-unread-counter);
    --color-border-unread-counter-popover-menu: var(--csstools-light-dark-toggle--60, inherit);
    --csstools-light-dark-toggle--61: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 30%);
    --color-background-tab-picker-container: var(--csstools-light-dark-toggle--61, hsl(0deg 0% 0% / 7%));
    --csstools-light-dark-toggle--62: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 7%);
    --color-background-tab-picker-selected-tab: var(--csstools-light-dark-toggle--62, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--63: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 12%);
    --color-outline-tab-picker-tab-option: var(--csstools-light-dark-toggle--63, hsl(0deg 0% 0% / 30%));
    --csstools-light-dark-toggle--64: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 5%);
    --color-background-tab-picker-tab-option-hover: var(--csstools-light-dark-toggle--64, hsl(0deg 0% 100% / 60%));
    --csstools-light-dark-toggle--65: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 3%);
    --color-background-tab-picker-tab-option-active: var(--csstools-light-dark-toggle--65, hsl(0deg 0% 100% / 35%));
    --csstools-light-dark-toggle--66: var(--csstools-color-scheme--light) hsl(0deg 0% 17%);
    --color-background-popover: var(--csstools-light-dark-toggle--66, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--67: var(--csstools-color-scheme--light) hsl(22deg 70% 35%);
    --color-background-alert-word: var(--csstools-light-dark-toggle--67, hsl(18deg 100% 84%));
    --color-buddy-list-highlighted-user: var(
        --color-background-hover-narrow-filter
    );
    --csstools-light-dark-toggle--68: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 10%);
    --color-buddy-list-avatar-loading: var(--csstools-light-dark-toggle--68, hsl(0deg 0% 0% / 10%));
    --csstools-light-dark-toggle--69: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-border-sidebar: var(--csstools-light-dark-toggle--69, hsl(0deg 0% 87%));
    --csstools-light-dark-toggle--70: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-text-sidebar-base: var(--csstools-light-dark-toggle--70, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--71: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 15%);
    --color-border-sidebar-subheader: var(--csstools-light-dark-toggle--71, hsl(0deg 0% 0% / 15%));
    --csstools-light-dark-toggle--72: var(--csstools-color-scheme--light) hsl(236deg 33% 90%);
    --color-request-progress-status-alert-text: var(--csstools-light-dark-toggle--72, hsl(0deg 0% 20%));
    --csstools-light-dark-toggle--73: var(--csstools-color-scheme--light) hsl(46deg 28% 38% / 27%);
    --color-background-tip: var(--csstools-light-dark-toggle--73, hsl(46deg 63% 95%));
    --csstools-light-dark-toggle--74: var(--csstools-color-scheme--light) hsl(49deg 38% 46%);
    --color-border-tip: var(--csstools-light-dark-toggle--74, hsl(49deg 20% 84%));
    --csstools-light-dark-toggle--75: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 66.6%);
    --color-box-shadow-animated-purple-button-focus: var(--csstools-light-dark-toggle--75, hsl(235deg 18% 7%));
    --csstools-light-dark-toggle--76: var(--csstools-color-scheme--light) hsl(211deg 29% 14%);
    --color-background-animated-button: var(--csstools-light-dark-toggle--76, hsl(0deg 0% 90%));
    --csstools-light-dark-toggle--77: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-animated-button-text: var(--csstools-light-dark-toggle--77, hsl(0deg 0% 0%));
    --color-background-animated-button-hover: hsl(240deg 96% 68%);
    --csstools-light-dark-toggle--78: var(--csstools-color-scheme--light) hsl(3deg 73% 74%);
    --color-invalid-input-border: var(--csstools-light-dark-toggle--78, hsl(3deg 57% 33%));
    --invalid-input-box-shadow: 0 0 2px var(--color-invalid-input-box-shadow);
    --csstools-light-dark-toggle--79: var(--csstools-color-scheme--light) hsl(3deg 73% 74%);
    --color-invalid-input-box-shadow: var(--csstools-light-dark-toggle--79, hsl(3deg 57% 33%));
    --csstools-light-dark-toggle--80: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-white-box: var(--csstools-light-dark-toggle--80, hsl(0deg 0% 100%));
    --color-stream-group-row-checked-icon: hsl(240deg 96% 68%);
    --color-stream-group-row-checked-icon-hover: hsl(240deg 41% 50%);
    --csstools-light-dark-toggle--81: var(--csstools-color-scheme--light) hsl(240deg 96% 68% / 50%);
    --color-stream-group-row-checked-icon-disabled: var(--csstools-light-dark-toggle--81, hsl(240deg 96% 68% / 100%));
    --csstools-light-dark-toggle--82: var(--csstools-color-scheme--light) hsl(218deg 14% 33%);
    --color-stream-group-row-plus-icon: var(--csstools-light-dark-toggle--82, hsl(0deg 0% 72%));
    --csstools-light-dark-toggle--83: var(--csstools-color-scheme--light) hsl(230deg 11% 67%);
    --color-stream-group-row-plus-icon-hover: var(--csstools-light-dark-toggle--83, hsl(0deg 0% 27%));
    --csstools-light-dark-toggle--84: var(--csstools-color-scheme--light) hsl(218deg 14% 33% / 50%);
    --color-stream-group-row-plus-icon-disabled: var(--csstools-light-dark-toggle--84, hsl(0deg 0% 87% / 100%));

    /* Recent view */
    --recent-view-max-avatars: 4;
    --csstools-light-dark-toggle--85: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-border-recent-view-row: var(--csstools-light-dark-toggle--85, hsl(0deg 0% 87%));
    --csstools-light-dark-toggle--86: var(--csstools-color-scheme--light) hsl(0deg 0% 88%);
    --color-border-recent-view-table: var(--csstools-light-dark-toggle--86, hsl(0deg 0% 0% / 60%));
    --csstools-light-dark-toggle--87: var(--csstools-color-scheme--light) hsl(0deg 0% 11%);
    --color-background-recent-view-row: var(--csstools-light-dark-toggle--87, hsl(100deg 11% 96%));
    --csstools-light-dark-toggle--88: var(--csstools-color-scheme--light) hsl(208deg 26% 11% / 60%);
    --color-background-recent-view-row-hover: var(--csstools-light-dark-toggle--88, hsl(210deg 100% 97%));
    --csstools-light-dark-toggle--89: var(--csstools-color-scheme--light) hsl(212deg 30% 22% / 40%);
    --color-background-recent-view-unread-row: var(--csstools-light-dark-toggle--89, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--90: var(--csstools-color-scheme--light) hsl(212deg 30% 22% / 60%);
    --color-background-recent-view-unread-row-hover: var(--csstools-light-dark-toggle--90, hsl(210deg 100% 97%));
    --csstools-light-dark-toggle--91: var(--csstools-color-scheme--light) hsl(206deg 89% 74%);
    --color-recent-view-link: var(--csstools-light-dark-toggle--91, hsl(205deg 47% 42%));
    --csstools-light-dark-toggle--92: var(--csstools-color-scheme--light) hsl(208deg 64% 52%);
    --color-recent-view-link-hover: var(--csstools-light-dark-toggle--92, hsl(214deg 40% 58%));
    --csstools-light-dark-toggle--93: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 50%);
    --color-background-recent-filters-button-focus: var(--csstools-light-dark-toggle--93, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--94: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 50%);
    --color-background-recent-filters-button-disabled: var(--csstools-light-dark-toggle--94, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--95: var(--csstools-color-scheme--light) hsl(0deg 0% 0%);
    --color-border-recent-filters-button-disabled: var(--csstools-light-dark-toggle--95, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--96: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-recent-view-participant-overflow-text: var(--csstools-light-dark-toggle--96, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--97: var(--csstools-color-scheme--light) hsl(211deg 18% 25%);
    --color-background-recent-view-participant-overflow: var(--csstools-light-dark-toggle--97, hsl(0deg 0% 88%));
    --csstools-light-dark-toggle--98: var(--csstools-color-scheme--light) hsl(228deg 11% 17%);
    --color-background-recent-view-selected: var(--csstools-light-dark-toggle--98, hsl(0deg 11% 93%));
    --csstools-light-dark-toggle--99: var(--csstools-color-scheme--light) hsl(228deg 11% 17%);
    --color-background-recent-view-table-thead-th: var(--csstools-light-dark-toggle--99, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--100: var(--csstools-color-scheme--light) hsl(211deg 29% 14%);
    --color-background-recent-view-table-thead-sort-header: var(--csstools-light-dark-toggle--100, hsl(0deg 0% 95%));

    /* Compose box colors */
    --csstools-light-dark-toggle--101: var(--csstools-color-scheme--light) hsl(228deg 11% 17%);
    --color-compose-box-background: var(--csstools-light-dark-toggle--101, hsl(232deg 30% 92%));
    --csstools-light-dark-toggle--102: var(--csstools-color-scheme--light) color-mix(
            in srgb,
            var(--color-compose-box-background),
            hsl(0deg 0% 0%) 20%
        );
    --color-compose-message-content-background: var(--csstools-light-dark-toggle--102, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--103: var(--csstools-color-scheme--light) hsl(3deg 50% 12%);
    --color-compose-message-content-background-over-limit: var(--csstools-light-dark-toggle--103, hsl(3deg 35% 90%));
    --csstools-light-dark-toggle--104: var(--csstools-color-scheme--light) hsl(50deg 75% 12%);
    --color-compose-message-content-background-approaching-limit: var(--csstools-light-dark-toggle--104, hsl(50deg 75% 92%));
    --csstools-light-dark-toggle--105: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 40%);
    --color-border-compose-content: var(--csstools-light-dark-toggle--105, hsl(0deg 0% 0% / 10%));
    --color-compose-send-button-icon-color: hsl(0deg 0% 100%);
    --color-compose-send-button-background: hsl(240deg 96% 68%);
    --color-compose-send-button-background-interactive: hsl(240deg 41% 50%);
    --color-compose-send-button-focus-border: hsl(232deg 20% 10%);
    --csstools-light-dark-toggle--106: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 80%);
    --color-compose-send-button-focus-shadow: var(--csstools-light-dark-toggle--106, hsl(230deg 100% 20%));
    --csstools-light-dark-toggle--107: var(--csstools-color-scheme--light) hsl(240deg 30% 70%);
    --color-compose-send-control-button: var(--csstools-light-dark-toggle--107, hsl(240deg 30% 50% / 80%));
    --color-compose-send-control-button-background: transparent;
    --csstools-light-dark-toggle--108: var(--csstools-color-scheme--light) var(--color-compose-send-control-button);
    --color-compose-send-control-button-interactive: var(--csstools-light-dark-toggle--108, hsl(240deg 30% 50%));
    --csstools-light-dark-toggle--109: var(--csstools-color-scheme--light) hsl(235deg 100% 70% / 11%);
    --color-compose-send-control-button-background-interactive: var(--csstools-light-dark-toggle--109, hsl(240deg 100% 30% / 5%));
    --color-compose-send-control-button-focus-shadow: var(
        --color-compose-send-button-focus-shadow
    );
    --color-compose-recipient-box-text-color: inherit;
    --csstools-light-dark-toggle--110: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-compose-recipient-box-background-color: var(--csstools-light-dark-toggle--110, hsl(0deg 0% 100%));
    /* Because of how the background color is assigned on
       recipient-row elements, we need here to mix down the
       border color from the compose text area,
       --color-message-content-container-border,
       with the compose box's background color,
       --color-compose-box-background. */
    --csstools-light-dark-toggle--463: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 80%);
    --color-compose-recipient-box-border-color: var(--csstools-light-dark-toggle--463, rgb(207, 208, 215));
    --csstools-light-dark-toggle--111: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 12%);
    --color-compose-recipient-box-hover: var(--csstools-light-dark-toggle--111, hsl(0deg 0% 69%));
    --csstools-light-dark-toggle--112: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 27%);
    --color-compose-recipient-box-has-focus: var(--csstools-light-dark-toggle--112, hsl(0deg 0% 57%));
    --csstools-light-dark-toggle--113: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-compose-collapsed-reply-button-area-background: var(--csstools-light-dark-toggle--113, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--114: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 15%);
    --color-compose-collapsed-reply-button-area-background-interactive: var(--csstools-light-dark-toggle--114, var(--color-compose-collapsed-reply-button-area-background));
    --csstools-light-dark-toggle--115: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-compose-collapsed-reply-button-area-border: var(--csstools-light-dark-toggle--115, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--116: var(--csstools-color-scheme--light) var(--color-compose-collapsed-reply-button-area-border);
    --color-compose-collapsed-reply-button-area-border-interactive: var(--csstools-light-dark-toggle--116, hsl(0deg 0% 60%));
    --csstools-light-dark-toggle--117: var(--csstools-color-scheme--light) hsl(231deg 30% 65%);
    --color-compose-embedded-button-text-color: var(--csstools-light-dark-toggle--117, hsl(231deg 20% 55%));
    --csstools-light-dark-toggle--118: var(--csstools-color-scheme--light) hsl(231deg 30% 70%);
    --color-compose-embedded-button-text-color-hover: var(--csstools-light-dark-toggle--118, hsl(231deg 20% 30%));
    --color-compose-embedded-button-background: transparent;
    --csstools-light-dark-toggle--119: var(--csstools-color-scheme--light) hsl(235deg 100% 70% / 11%);
    --color-compose-embedded-button-background-hover: var(--csstools-light-dark-toggle--119, hsl(231deg 100% 90% / 50%));
    --csstools-light-dark-toggle--120: var(--csstools-color-scheme--light) hsl(235deg 100% 70% / 20%);
    --color-compose-embedded-button-background-interactive: var(--csstools-light-dark-toggle--120, hsl(231deg 100% 90% / 90%));
    --csstools-light-dark-toggle--121: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-compose-new-message-button: var(--csstools-light-dark-toggle--121, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--122: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 15%);
    --color-background-compose-new-message-button-hover: var(--csstools-light-dark-toggle--122, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--123: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-compose-new-message-button-active: var(--csstools-light-dark-toggle--123, hsl(0deg 0% 95%));
    --csstools-light-dark-toggle--124: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-border-compose-new-message-button: var(--csstools-light-dark-toggle--124, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--125: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-border-compose-new-message-button-hover: var(--csstools-light-dark-toggle--125, hsl(0deg 0% 60%));
    --csstools-light-dark-toggle--126: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-border-compose-new-message-button-active: var(--csstools-light-dark-toggle--126, hsl(0deg 0% 60%));
    --color-compose-chevron-arrow: hsl(0deg 0% 58%);
    --csstools-light-dark-toggle--127: var(--csstools-color-scheme--light) hsl(38deg 100% 70%);
    --color-limit-indicator: var(--csstools-light-dark-toggle--127, hsl(38deg 100% 36%));
    --csstools-light-dark-toggle--128: var(--csstools-color-scheme--light) hsl(3deg 80% 60%);
    --color-limit-indicator-over-limit: var(--csstools-light-dark-toggle--128, hsl(3deg 80% 40%));
    --csstools-light-dark-toggle--129: var(--csstools-color-scheme--light) hsl(227deg 80% 60% / 25%);
    --color-narrow-to-compose-recipients-background: var(--csstools-light-dark-toggle--129, hsl(227deg 100% 70% / 25%));
    --csstools-light-dark-toggle--130: var(--csstools-color-scheme--light) hsl(227deg 80% 60% / 35%);
    --color-narrow-to-compose-recipients-background-hover: var(--csstools-light-dark-toggle--130, hsl(227deg 100% 70% / 35%));
    --csstools-light-dark-toggle--131: var(--csstools-color-scheme--light) hsl(224deg 28% 81%);
    --color-narrow-to-compose-recipients: var(--csstools-light-dark-toggle--131, hsl(227deg 76% 64%));
    --csstools-light-dark-toggle--132: var(--csstools-color-scheme--light) hsl(221deg 100% 95%);
    --color-narrow-to-compose-recipients-hover: var(--csstools-light-dark-toggle--132, hsl(227deg 78% 59%));
    --csstools-light-dark-toggle--133: var(--csstools-color-scheme--light) hsl(0deg 100% 100% / 55%);
    --color-composebox-button: var(--csstools-light-dark-toggle--133, hsl(0deg 100% 0% / 55%));
    --color-composebox-button-hover: var(--color-text-default);
    --csstools-light-dark-toggle--134: var(--csstools-color-scheme--light) hsl(231deg 8% 13.5% / 80%);
    --color-composebox-button-background: var(--csstools-light-dark-toggle--134, hsl(0deg 100% 100% / 60%));
    --csstools-light-dark-toggle--135: var(--csstools-color-scheme--light) hsl(231deg 12% 18%);
    --color-composebox-button-background-hover: var(--csstools-light-dark-toggle--135, hsl(0deg 0% 95%));
    --csstools-light-dark-toggle--136: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 8%);
    --color-message-formatting-controls-container: var(--csstools-light-dark-toggle--136, hsl(232deg 30% 96%));
    --csstools-light-dark-toggle--137: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 80%);
    --color-message-content-container-border: var(--csstools-light-dark-toggle--137, hsl(0deg 0% 0% / 10%));
    --csstools-light-dark-toggle--138: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 27%);
    --color-message-content-container-border-focus: var(--csstools-light-dark-toggle--138, hsl(0deg 0% 57%));
    --color-message-content-container-border-over-limit: hsl(0deg 76% 65%);
    --color-message-content-container-border-approaching-limit: hsl(
        38deg 70% 50%
    );
    --csstools-light-dark-toggle--139: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 5%);
    --color-compose-control-button-background-hover: var(--csstools-light-dark-toggle--139, hsl(0deg 0% 0% / 5%));
    --csstools-light-dark-toggle--140: var(--csstools-color-scheme--light) hsl(236deg 33% 90% / 25%);
    --color-compose-formatting-button-divider: var(--csstools-light-dark-toggle--140, hsl(0deg 0% 75%));
    --csstools-light-dark-toggle--141: var(--csstools-color-scheme--light) hsl(0deg 0% 67%);
    --color-compose-focus-ring: var(--csstools-light-dark-toggle--141, var(--color-outline-focus));
    --color-compose-scroll-icon: hsl(0deg 0% 50%);
    --csstools-light-dark-toggle--142: var(--csstools-color-scheme--light) hsl(234deg 21% 24%);
    --csstools-light-dark-toggle--143: var(--csstools-color-scheme--light) hsl(234deg 21% 24% / 76.9%);
    --gradient-compose-scroll-backward: linear-gradient(
        90deg,
        var(--csstools-light-dark-toggle--142, hsl(234deg 100% 95%)) 35%,
        var(--csstools-light-dark-toggle--143, hsl(234deg 100% 95%)) 50%,
        transparent 100%
    );
    --csstools-light-dark-toggle--144: var(--csstools-color-scheme--light) hsl(234deg 30% 28%);
    --csstools-light-dark-toggle--145: var(--csstools-color-scheme--light) hsl(234deg 30% 28% / 76.9%);
    --gradient-compose-scroll-backward-hover: linear-gradient(
        90deg,
        var(--csstools-light-dark-toggle--144, hsl(234deg 100% 93%)) 35%,
        var(--csstools-light-dark-toggle--145, hsl(234deg 100% 93%)) 50%,
        transparent 100%
    );
    --csstools-light-dark-toggle--146: var(--csstools-color-scheme--light) hsl(234deg 35% 30%);
    --gradient-compose-scroll-backward-active: linear-gradient(
        90deg,
        var(--csstools-light-dark-toggle--146, hsl(234deg 100% 90%)) 45%,
        transparent 100%
    );
    --csstools-light-dark-toggle--147: var(--csstools-color-scheme--light) hsl(234deg 21% 24% / 76.9%);
    --csstools-light-dark-toggle--148: var(--csstools-color-scheme--light) hsl(234deg 21% 24%);
    --gradient-compose-scroll-forward: linear-gradient(
        90deg,
        transparent 0%,
        var(--csstools-light-dark-toggle--147, hsl(234deg 100% 95%)) 50%,
        var(--csstools-light-dark-toggle--148, hsl(234deg 100% 95%)) 65%
    );
    --csstools-light-dark-toggle--149: var(--csstools-color-scheme--light) hsl(234deg 30% 28% / 76.9%);
    --csstools-light-dark-toggle--150: var(--csstools-color-scheme--light) hsl(234deg 30% 28%);
    --gradient-compose-scroll-forward-hover: linear-gradient(
        90deg,
        transparent 0%,
        var(--csstools-light-dark-toggle--149, hsl(234deg 100% 93%)) 50%,
        var(--csstools-light-dark-toggle--150, hsl(234deg 100% 93%)) 65%
    );
    --csstools-light-dark-toggle--151: var(--csstools-color-scheme--light) hsl(234deg 35% 30%);
    --gradient-compose-scroll-forward-active: linear-gradient(
        90deg,
        transparent 0%,
        var(--csstools-light-dark-toggle--151, hsl(234deg 100% 90%)) 55%
    );

    /* Text colors */
    --csstools-light-dark-toggle--152: var(--csstools-color-scheme--light) hsl(0deg 0% 87%);
    --color-text-default: var(--csstools-light-dark-toggle--152, hsl(0deg 0% 20%));
    /* Unlike the light theme, the dark theme renders message
       text in the default color. */
    --csstools-light-dark-toggle--153: var(--csstools-color-scheme--light) var(--color-text-default);
    --color-text-message-default: var(--csstools-light-dark-toggle--153, hsl(0deg 0% 15%));
    --csstools-light-dark-toggle--154: var(--csstools-color-scheme--light) hsl(0deg 0% 87% / 40%);
    --color-text-message-blockquote-border: var(--csstools-light-dark-toggle--154, hsl(0deg 0% 15% / 25%));
    --color-text-message-header-archived: hsl(0deg 0% 50%);
    --csstools-light-dark-toggle--155: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 85%);
    --color-text-message-view-header: var(--csstools-light-dark-toggle--155, hsl(0deg 0% 20% / 100%));
    --csstools-light-dark-toggle--156: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 85%);
    --color-text-message-header: var(--csstools-light-dark-toggle--156, hsl(0deg 0% 15%));
    /* Light and dark mode both use the same hover color on
       sender names. */
    --color-text-sender-name-hover: hsl(200deg 100% 40%);
    --csstools-light-dark-toggle--157: var(--csstools-color-scheme--light) hsl(0deg 0% 95%);
    --color-text-dropdown-input: var(--csstools-light-dark-toggle--157, hsl(0deg 0% 13.33%));
    --csstools-light-dark-toggle--158: var(--csstools-color-scheme--light) hsl(240deg 100% 88% / 100%);
    --color-text-self-direct-mention: var(--csstools-light-dark-toggle--158, hsl(240deg 52% 45% / 100%));
    --csstools-light-dark-toggle--159: var(--csstools-color-scheme--light) hsl(184deg 52% 63% / 100%);
    --color-text-self-group-mention: var(--csstools-light-dark-toggle--159, hsl(183deg 52% 26% / 100%));
    --csstools-light-dark-toggle--160: var(--csstools-color-scheme--light) hsl(240deg 30% 65%);
    --color-text-show-more-less-button: var(--csstools-light-dark-toggle--160, hsl(240deg 52% 53%));
    --csstools-light-dark-toggle--161: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 75%);
    --color-text-search: var(--csstools-light-dark-toggle--161, hsl(0deg 0% 35%));
    --csstools-light-dark-toggle--162: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-text-search-hover: var(--csstools-light-dark-toggle--162, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--163: var(--csstools-color-scheme--light) hsl(0deg 0% 55%);
    --color-text-placeholder: var(--csstools-light-dark-toggle--163, hsl(0deg 0% 45%));
    --csstools-light-dark-toggle--164: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 50%);
    --color-text-search-placeholder: var(--csstools-light-dark-toggle--164, hsl(0deg 0% 50%));
    --csstools-light-dark-toggle--165: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 80%);
    --color-text-popover-menu: var(--csstools-light-dark-toggle--165, hsl(0deg 0% 15%));
    --csstools-light-dark-toggle--166: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-text-full-name: var(--csstools-light-dark-toggle--166, hsl(0deg 0% 15%));
    --csstools-light-dark-toggle--167: var(--csstools-color-scheme--light) hsl(0deg 0% 50%);
    --color-text-item: var(--csstools-light-dark-toggle--167, hsl(0deg 0% 40%));
    --csstools-light-dark-toggle--168: var(--csstools-color-scheme--light) hsl(0deg 0% 100% 35%);
    --color-text-personal-menu-no-status: var(--csstools-light-dark-toggle--168, hsl(0deg 0% 50%));
    --csstools-light-dark-toggle--169: var(--csstools-color-scheme--light) hsl(0deg 0% 100% 50%);
    --color-text-personal-menu-some-status: var(--csstools-light-dark-toggle--169, hsl(0deg 0% 40%));
    --csstools-light-dark-toggle--170: var(--csstools-color-scheme--light) hsl(216deg 50% 75%);
    --color-text-sidebar-heading: var(--csstools-light-dark-toggle--170, hsl(216deg 65% 20%));
    --csstools-light-dark-toggle--171: var(--csstools-color-scheme--light) hsl(240deg 35% 68%);
    --color-text-sidebar-action-heading: var(--csstools-light-dark-toggle--171, hsl(240deg 30% 40%));
    --csstools-light-dark-toggle--172: var(--csstools-color-scheme--light) hsl(240deg 100% 90%);
    --color-text-sidebar-action-heading-hover: var(--csstools-light-dark-toggle--172, hsl(240deg 100% 15%));
    --csstools-light-dark-toggle--173: var(--csstools-color-scheme--light) hsl(236deg 33% 90%);
    --color-text-sidebar-popover-menu: var(--csstools-light-dark-toggle--173, hsl(0deg 0% 20%));
    --csstools-light-dark-toggle--174: var(--csstools-color-scheme--light) var(--grey-400);
    --color-text-user-card-secondary: var(--csstools-light-dark-toggle--174, var(--grey-550));
    --color-text-url: hsl(200deg 100% 40%);
    --csstools-light-dark-toggle--175: var(--csstools-color-scheme--light) hsl(200deg 79% 66%);
    --color-text-url-hover: var(--csstools-light-dark-toggle--175, hsl(200deg 100% 25%));
    --csstools-light-dark-toggle--176: var(--csstools-color-scheme--light) hsl(0deg 0% 52%);
    --color-text-settings-field-hint: var(--csstools-light-dark-toggle--176, hsl(0deg 0% 57%));
    --csstools-light-dark-toggle--177: var(--csstools-color-scheme--light) hsl(236deg 33% 80%);
    --color-text-clear-search-button: var(--csstools-light-dark-toggle--177, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--178: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-text-clear-search-button-hover: var(--csstools-light-dark-toggle--178, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--179: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-text-settings-plus-button: var(--csstools-light-dark-toggle--179, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--180: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-settings-plus-button: var(--csstools-light-dark-toggle--180, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--181: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-border-settings-plus-button: var(--csstools-light-dark-toggle--181, hsl(0deg 0% 80%));

    /* User Profile Modal */
    --csstools-light-dark-toggle--182: var(--csstools-color-scheme--light) hsl(236deg 33% 90%);
    --color-user-profile-field-name: var(--csstools-light-dark-toggle--182, hsl(0deg 0% 20%));
    --csstools-light-dark-toggle--183: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 40%);
    --color-border-user-profile-table: var(--csstools-light-dark-toggle--183, hsl(0deg 0% 87%));
    --csstools-light-dark-toggle--184: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 20%);
    --color-border-manage-profile-footer: var(--csstools-light-dark-toggle--184, hsl(0deg 0% 87%));

    /* Link colors */
    --csstools-light-dark-toggle--185: var(--csstools-color-scheme--light) hsl(200deg 100% 50%);
    --color-text-link: var(--csstools-light-dark-toggle--185, hsl(210deg 94% 42%));
    --csstools-light-dark-toggle--464: var(--csstools-color-scheme--light) rgba(0, 170, 255, 0.2);
    --color-text-link-decoration: var(--csstools-light-dark-toggle--464, rgba(6, 107, 208, 0.2));
    --csstools-light-dark-toggle--186: var(--csstools-color-scheme--light) hsl(200deg 100% 60%);
    --color-text-link-hover: var(--csstools-light-dark-toggle--186, hsl(212deg 100% 50%));
    --csstools-light-dark-toggle--465: var(--csstools-color-scheme--light) rgba(51, 187, 255, 0.7);
    --color-text-link-decoration-hover: var(--csstools-light-dark-toggle--465, rgba(0, 119, 255, 0.7));
    --csstools-light-dark-toggle--187: var(--csstools-color-scheme--light) hsl(200deg 100% 50%);
    --color-text-link-active: var(--csstools-light-dark-toggle--187, hsl(212deg 100% 30%));
    /* These colors are from Bootstrap. */
    --color-text-generic-link: #08c;
    --csstools-light-dark-toggle--188: var(--csstools-color-scheme--light) hsl(200deg 79% 66%);
    --color-text-generic-link-interactive: var(--csstools-light-dark-toggle--188, #005580);

    /* Tippy colors */
    --csstools-light-dark-toggle--189: var(--csstools-color-scheme--light) hsl(0deg 0% 0%);
    --color-background-tippy-box: var(--csstools-light-dark-toggle--189, hsl(0deg 0% 20%));

    /* Widgets colors */
    --csstools-light-dark-toggle--190: var(--csstools-color-scheme--light) hsl(240deg 5% 16%);
    --color-background-dropdown-widget: var(--csstools-light-dark-toggle--190, hsl(240deg 20% 98%));
    --csstools-light-dark-toggle--191: var(--csstools-color-scheme--light) hsl(0deg 0% 0%);
    --color-border-dropdown-widget: var(--csstools-light-dark-toggle--191, hsl(0deg 0% 0% / 40%));
    --csstools-light-dark-toggle--192: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-border-dropdown-widget-button: var(--csstools-light-dark-toggle--192, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--193: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-dropdown-widget-button: var(--csstools-light-dark-toggle--193, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--194: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-disabled-dropdown-widget-button: var(--csstools-light-dark-toggle--194, hsl(0deg 0% 93%));
    /* Poll Widget */
    --csstools-light-dark-toggle--195: var(--csstools-color-scheme--light) hsl(185deg 35% 65%);
    --color-poll-vote: var(--csstools-light-dark-toggle--195, hsl(156deg 41% 40%));
    --csstools-light-dark-toggle--196: var(--csstools-color-scheme--light) hsl(185deg 50% 70%);
    --color-poll-vote-hover: var(--csstools-light-dark-toggle--196, hsl(156deg 41% 40%));
    --csstools-light-dark-toggle--197: var(--csstools-color-scheme--light) hsl(185deg 50% 65%);
    --color-poll-vote-focus: var(--csstools-light-dark-toggle--197, hsl(156deg 41% 40%));
    --csstools-light-dark-toggle--198: var(--csstools-color-scheme--light) hsl(185deg 35% 35%);
    --color-border-poll-vote: var(--csstools-light-dark-toggle--198, hsl(156deg 28% 70%));
    --csstools-light-dark-toggle--199: var(--csstools-color-scheme--light) hsl(185deg 40% 40%);
    --color-border-poll-vote-hover: var(--csstools-light-dark-toggle--199, hsl(156deg 30% 50%));
    --csstools-light-dark-toggle--200: var(--csstools-color-scheme--light) hsl(185deg 40% 50%);
    --color-border-poll-vote-focus: var(--csstools-light-dark-toggle--200, hsl(156deg 30% 50%));
    --csstools-light-dark-toggle--201: var(--csstools-color-scheme--light) hsl(185deg 20% 20%);
    --color-background-poll-vote-hover: var(--csstools-light-dark-toggle--201, var(--color-background-widget-button));
    --csstools-light-dark-toggle--202: var(--csstools-color-scheme--light) hsl(185deg 40% 35%);
    --color-background-poll-vote-focus: var(--csstools-light-dark-toggle--202, hsl(156deg 41% 90%));
    --csstools-light-dark-toggle--203: var(--csstools-color-scheme--light) hsl(236deg 15% 70%);
    --color-poll-names: var(--csstools-light-dark-toggle--203, hsl(0deg 0% 45%));
    /* TODO Widget */
    --csstools-light-dark-toggle--466: var(--csstools-color-scheme--light) rgba(69, 153, 161, 0.7);
    --color-border-todo-checkbox: var(--csstools-light-dark-toggle--466, hsl(156deg 28% 70%));
    --csstools-light-dark-toggle--204: var(--csstools-color-scheme--light) hsl(185deg 40% 35%);
    --color-border-todo-checkbox-hover: var(--csstools-light-dark-toggle--204, hsl(156deg 30% 50%));
    --csstools-light-dark-toggle--205: var(--csstools-color-scheme--light) hsl(185deg 40% 45%);
    --color-border-todo-checkbox-checked: var(--csstools-light-dark-toggle--205, hsl(156deg 41% 40%));
    --csstools-light-dark-toggle--206: var(--csstools-color-scheme--light) hsl(185deg 20% 20%);
    --color-background-todo-checkbox-hover: var(--csstools-light-dark-toggle--206, transparent);
    --csstools-light-dark-toggle--207: var(--csstools-color-scheme--light) hsl(185deg 40% 45%);
    --color-background-todo-checkbox-checked: var(--csstools-light-dark-toggle--207, hsl(156deg 41% 40%));

    /* KBD colors */
    --csstools-light-dark-toggle--208: var(--csstools-color-scheme--light) hsl(211deg 29% 14%);
    --color-kbd-background: var(--csstools-light-dark-toggle--208, hsl(0deg 0% 98%));
    --csstools-light-dark-toggle--209: var(--csstools-color-scheme--light) hsl(211deg 29% 14%);
    --color-kbd-border: var(--csstools-light-dark-toggle--209, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--210: var(--csstools-color-scheme--light) hsl(236deg 33% 90%);
    --color-kbd-text: var(--csstools-light-dark-toggle--210, hsl(0deg 0% 20%));
    --csstools-light-dark-toggle--211: var(--csstools-color-scheme--light) hsl(236deg 33% 90%);
    --color-kbd-enter-sends: var(--csstools-light-dark-toggle--211, hsl(0deg 0% 40%));

    /* Settings */
    --csstools-light-dark-toggle--212: var(--csstools-color-scheme--light) hsl(236deg 33% 90%);
    --color-realm-enable-spectator-access-link: var(--csstools-light-dark-toggle--212, hsl(0deg 0% 20%));
    --csstools-light-dark-toggle--213: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-stream-email: var(--csstools-light-dark-toggle--213, hsl(0deg 0% 98%));
    --csstools-light-dark-toggle--214: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-integration-url: var(--csstools-light-dark-toggle--214, transparent);
    --csstools-light-dark-toggle--215: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-tbody-th-odd: var(--csstools-light-dark-toggle--215, transparent);
    /* Markdown colors */
    --csstools-light-dark-toggle--216: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 50%);
    --color-background-rendered-markdown-thead: var(--csstools-light-dark-toggle--216, hsl(0deg 0% 93%));
    --csstools-light-dark-toggle--217: var(--csstools-color-scheme--light) hsl(0deg 0% 33%);
    --color-border-rendered-markdown-table: var(--csstools-light-dark-toggle--217, hsl(0deg 0% 80%));

    /* Tab-switcher colors */
    /* The non-selected colors here are shared with numerous other
       inputs and buttons in dark theme. A refactor here would make
       more generic names for those colors, and help to clean out
       the huge stack of selectors in the dark theme CSS file. */
    --csstools-light-dark-toggle--218: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-tab-switcher-ind-tab: var(--csstools-light-dark-toggle--218, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--219: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 50%);
    --color-background-tab-switcher-ind-tab-selected: var(--csstools-light-dark-toggle--219, hsl(0deg 0% 53%));
    --csstools-light-dark-toggle--220: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-border-tab-switcher-ind-tab: var(--csstools-light-dark-toggle--220, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--221: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 90%);
    --color-border-tab-switcher-ind-tab-selected: var(--csstools-light-dark-toggle--221, hsl(0deg 0% 47%));
    --csstools-light-dark-toggle--222: var(--csstools-color-scheme--light) hsl(0deg 0% 42% / 90%);
    --color-text-tab-switcher-ind-tab-disabled: var(--csstools-light-dark-toggle--222, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--223: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-border-tab-switcher-ind-tab-disabled: var(--csstools-light-dark-toggle--223, hsl(0deg 0% 87%));

    /* Settings table colors */
    --csstools-light-dark-toggle--224: var(--csstools-color-scheme--light) hsl(0deg 0% 0%);
    --color-background-table-header: var(--csstools-light-dark-toggle--224, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--225: var(--csstools-color-scheme--light) hsl(211deg 29% 14%);
    --color-background-table-header-sortable-hover: var(--csstools-light-dark-toggle--225, hsl(0deg 0% 95%));
    --csstools-light-dark-toggle--226: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-border-table-striped: var(--csstools-light-dark-toggle--226, hsl(0deg 0% 87%));
    --csstools-light-dark-toggle--227: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-border-table-bordered: var(--csstools-light-dark-toggle--227, hsl(0deg 0% 87%));
    --csstools-light-dark-toggle--228: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-border-table-subscriber-list: var(--csstools-light-dark-toggle--228, hsl(0deg 0% 87%));

    /* Markdown code colors */
    --csstools-light-dark-toggle--229: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 85%);
    --color-markdown-code-text: var(--csstools-light-dark-toggle--229, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--230: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 8%);
    --color-markdown-code-background: var(--csstools-light-dark-toggle--230, hsl(0deg 0% 0% / 6%));
    --csstools-light-dark-toggle--231: var(--csstools-color-scheme--light) var(--color-markdown-code-background);
    --color-markdown-code-background-mentions: var(--csstools-light-dark-toggle--231, hsl(0deg 0% 0% / 7%));
    --color-markdown-pre-text: var(--color-markdown-code-text);
    --color-markdown-pre-border: transparent;
    --csstools-light-dark-toggle--232: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 4%);
    --color-markdown-pre-background: var(--csstools-light-dark-toggle--232, hsl(0deg 0% 0% / 4%));
    --csstools-light-dark-toggle--233: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 5%);
    --color-markdown-pre-background-mentions: var(--csstools-light-dark-toggle--233, hsl(0deg 0% 0% / 4%));
    --csstools-light-dark-toggle--234: var(--csstools-color-scheme--light) var(--color-markdown-pre-border);
    --color-markdown-pre-border-mentions: var(--csstools-light-dark-toggle--234, transparent);
    --csstools-light-dark-toggle--235: var(--csstools-color-scheme--light) var(--color-text-generic-link);
    --color-markdown-link: var(--csstools-light-dark-toggle--235, hsl(200deg 100% 40%));
    --color-markdown-code-link: var(--color-markdown-link);
    --csstools-light-dark-toggle--236: var(--csstools-color-scheme--light) var(--color-text-generic-link-interactive);
    --color-markdown-link-hover: var(--csstools-light-dark-toggle--236, hsl(200deg 100% 25%));
    --color-markdown-code-link-hover: var(--color-markdown-link-hover);
    --csstools-light-dark-toggle--237: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 3%);
    --color-background-image-thumbnail: var(--csstools-light-dark-toggle--237, hsl(0deg 0% 0% / 3%));
    --csstools-light-dark-toggle--238: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 45%);
    --color-background-image-thumbnail-hover: var(--csstools-light-dark-toggle--238, hsl(0deg 0% 0% / 30%));

    /* Icon colors */
    --csstools-light-dark-toggle--239: var(--csstools-color-scheme--light) hsl(180deg 5% 50% / 100%);
    --color-icon-bot: var(--csstools-light-dark-toggle--239, hsl(180deg 8% 65% / 100%));
    --csstools-light-dark-toggle--240: var(--csstools-color-scheme--light) hsl(217deg 41% 90% / 50%);
    --color-message-action-visible: var(--csstools-light-dark-toggle--240, hsl(216deg 43% 20% / 50%));
    --csstools-light-dark-toggle--241: var(--csstools-color-scheme--light) hsl(217deg 41% 90% / 100%);
    --color-message-action-interactive: var(--csstools-light-dark-toggle--241, hsl(216deg 43% 20% / 100%));
    --color-message-star-action: hsl(41deg 100% 47% / 100%);
    --csstools-light-dark-toggle--242: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-left-sidebar-follow-icon-hover: var(--csstools-light-dark-toggle--242, hsl(0deg 0% 0%));
    /* The gray on the filter icons is the same as
       what's set on ul.filters, but with 70% opacity. */
    --csstools-light-dark-toggle--243: var(--csstools-color-scheme--light) hsl(240deg 35% 68%);
    --color-left-sidebar-navigation-icon: var(--csstools-light-dark-toggle--243, hsl(240deg 30% 40%));
    --csstools-light-dark-toggle--244: var(--csstools-color-scheme--light) hsl(240deg 35% 68%);
    --color-left-sidebar-heads-up-icon: var(--csstools-light-dark-toggle--244, hsl(240deg 30% 40%));
    --csstools-light-dark-toggle--245: var(--csstools-color-scheme--light) hsl(240deg 100% 90%);
    --color-left-sidebar-heads-up-icon-hover: var(--csstools-light-dark-toggle--245, hsl(240deg 100% 15%));
    --csstools-light-dark-toggle--246: var(--csstools-color-scheme--light) hsl(240deg 35% 58%);
    --color-left-sidebar-dm-partners-icon: var(--csstools-light-dark-toggle--246, hsl(240deg 30% 60%));
    --csstools-light-dark-toggle--247: var(--csstools-color-scheme--light) hsl(240deg 100% 75% / 20%);
    --background-color-left-sidebar-heads-up-icon-hover: var(--csstools-light-dark-toggle--247, hsl(240deg 100% 50% / 7%));
    --csstools-light-dark-toggle--248: var(--csstools-color-scheme--light) hsl(240deg 35% 38%);
    --color-vdots-hint: var(--csstools-light-dark-toggle--248, hsl(240deg 30% 80%));
    --csstools-light-dark-toggle--249: var(--csstools-color-scheme--light) hsl(240deg 35% 68%);
    --color-vdots-visible: var(--csstools-light-dark-toggle--249, hsl(240deg 30% 40%));
    --csstools-light-dark-toggle--250: var(--csstools-color-scheme--light) hsl(240deg 100% 90%);
    --color-vdots-hover: var(--csstools-light-dark-toggle--250, hsl(240deg 100% 15%));
    --csstools-light-dark-toggle--251: var(--csstools-color-scheme--light) hsl(0deg 0% 80%);
    --color-tab-picker-icon: var(--csstools-light-dark-toggle--251, hsl(200deg 100% 40%));
    --csstools-light-dark-toggle--252: var(--csstools-color-scheme--light) #4cdc75;
    --color-user-circle-active: var(--csstools-light-dark-toggle--252, #43a35e);
    --csstools-light-dark-toggle--253: var(--csstools-color-scheme--light) #ae640a;
    --color-user-circle-idle: var(--csstools-light-dark-toggle--253, #f5b266);
    --csstools-light-dark-toggle--254: var(--csstools-color-scheme--light) #545764;
    --color-user-circle-offline: var(--csstools-light-dark-toggle--254, #bcc0cf);
    --csstools-light-dark-toggle--255: var(--csstools-color-scheme--light) #646671;
    --color-user-circle-offline-typeahead-highlight: var(--csstools-light-dark-toggle--255, #adb2c5);
    --color-user-circle-deactivated: hsl(0deg 0% 50%);
    /* The gradient is also recreated inside the `user-circle-idle` SVG
       file. That is needed for the new help center since it does not
       do the SVG to font conversion that the web app does. We
       re-apply it here since the linearGradient there is stripped off
       when that SVG is converted to font for the web app. Any changes
       to this gradient should be reflected in the SVG file as well. */
    --csstools-light-dark-toggle--256: var(--csstools-color-scheme--light) var(--color-user-circle-idle);
    --gradient-user-circle-idle: linear-gradient(
        to right,
        var(--color-user-circle-idle) 5%,
        var(--csstools-light-dark-toggle--256, color-mix(
                    in srgb,
                    var(--color-user-circle-idle) 78.9%,
                    transparent
                ))
            25%,
        transparent 100%
    );
    /* To avoid the avatar bleeding through, we rewrite
       the gradient with an explicit background color. */
    --csstools-light-dark-toggle--257: var(--csstools-color-scheme--light) var(--color-user-circle-idle);
    --gradient-user-circle-idle-avatar: linear-gradient(
        to right,
        var(--color-user-circle-idle) 5%,
        var(--csstools-light-dark-toggle--257, color-mix(
                    in srgb,
                    var(--color-user-circle-idle) 78.9%,
                    var(--color-background)
                ))
            25%,
        var(--color-background) 100%
    );
    --csstools-light-dark-toggle--467: var(--csstools-color-scheme--light) rgba(171, 174, 186, 0.7);
    --color-copy-button: var(--csstools-light-dark-toggle--467, rgba(84, 87, 100, 0.7));
    --csstools-light-dark-toggle--258: var(--csstools-color-scheme--light) var(--grey-300);
    --color-copy-button-hover: var(--csstools-light-dark-toggle--258, var(--grey-600));
    --csstools-light-dark-toggle--468: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.14);
    --color-copy-button-square-bg-hover: var(--csstools-light-dark-toggle--468, rgba(84, 87, 100, 0.07));
    --csstools-light-dark-toggle--469: var(--csstools-color-scheme--light) rgba(171, 174, 186, 0.7);
    --color-copy-button-active: var(--csstools-light-dark-toggle--469, rgba(84, 87, 100, 0.7));
    --csstools-light-dark-toggle--259: var(--csstools-color-scheme--light) var(--grey-300);
    --color-copy-button-square-active: var(--csstools-light-dark-toggle--259, var(--grey-600));
    --csstools-light-dark-toggle--470: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.18);
    --color-copy-button-square-bg-active: var(--csstools-light-dark-toggle--470, rgba(84, 87, 100, 0.11));
    --csstools-light-dark-toggle--260: var(--csstools-color-scheme--light) var(--green-300);
    --color-copy-button-success: var(--csstools-light-dark-toggle--260, var(--green-500));

    /* Reaction container colors */
    --csstools-light-dark-toggle--261: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 15%);
    --color-message-reaction-border: var(--csstools-light-dark-toggle--261, hsl(0deg 0% 0% / 10%));
    --csstools-light-dark-toggle--262: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 70%);
    --color-message-reaction-border-reacted: var(--csstools-light-dark-toggle--262, hsl(0deg 0% 0% / 45%));
    --csstools-light-dark-toggle--263: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 30%);
    --color-message-reaction-background: var(--csstools-light-dark-toggle--263, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--264: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 80%);
    --color-message-reaction-background-reacted: var(--csstools-light-dark-toggle--264, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--265: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 10%);
    --color-message-reaction-background-hover: var(--csstools-light-dark-toggle--265, hsl(210deg 30% 96%));
    --csstools-light-dark-toggle--266: var(--csstools-color-scheme--light) transparent;
    --color-message-reaction-shadow-inner: var(--csstools-light-dark-toggle--266, hsl(210deg 50% 50% / 8%));
    --csstools-light-dark-toggle--267: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 75%);
    --color-message-reaction-text: var(--csstools-light-dark-toggle--267, hsl(210deg 20% 25% / 100%));
    --csstools-light-dark-toggle--268: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 85%);
    --color-message-reaction-text-reacted: var(--csstools-light-dark-toggle--268, hsl(210deg 20% 20% / 100%));
    --csstools-light-dark-toggle--269: var(--csstools-color-scheme--light) var(--color-message-reaction-text);
    --color-message-reaction-button-text: var(--csstools-light-dark-toggle--269, hsl(210deg 20% 20% / 60%));
    --csstools-light-dark-toggle--270: var(--csstools-color-scheme--light) var(--color-message-reaction-text-reacted);
    --color-message-reaction-button-text-hover: var(--csstools-light-dark-toggle--270, var(--color-message-reaction-text));
    --color-message-reaction-button-background: inherit;
    --csstools-light-dark-toggle--271: var(--csstools-color-scheme--light) var(--color-message-reaction-background-hover);
    --color-message-reaction-button-background-hover: var(--csstools-light-dark-toggle--271, var(--color-message-reaction-background));
    --color-message-reaction-button-border: transparent;
    --color-message-reaction-button-border-hover: var(
        --color-message-reaction-border
    );
    --font-weight-message-reaction: 600;

    /* Message feed loading indicator colors */
    --csstools-light-dark-toggle--272: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 50%);
    --color-zulip-logo: var(--csstools-light-dark-toggle--272, hsl(0deg 0% 0% / 34%));
    --csstools-light-dark-toggle--273: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-zulip-logo-loading: var(--csstools-light-dark-toggle--273, hsl(0deg 0% 27%));
    --csstools-light-dark-toggle--274: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 60%);
    --color-recent-view-loading-spinner: var(--csstools-light-dark-toggle--274, hsl(0deg 0% 27%));
    --csstools-light-dark-toggle--275: var(--csstools-color-scheme--light) hsl(214deg 27% 18%);
    --color-zulip-logo-z: var(--csstools-light-dark-toggle--275, hsl(0deg 0% 100%));

    /* Message collapsing/condensing button colors */
    --csstools-light-dark-toggle--276: var(--csstools-color-scheme--light) hsl(240deg 44% 56% / 15%);
    --color-show-more-less-button-background: var(--csstools-light-dark-toggle--276, hsl(240deg 44% 56% / 8%));
    --csstools-light-dark-toggle--277: var(--csstools-color-scheme--light) hsl(240deg 44% 56% / 25%);
    --color-show-more-less-button-background-hover: var(--csstools-light-dark-toggle--277, hsl(240deg 44% 56% / 15%));
    --csstools-light-dark-toggle--278: var(--csstools-color-scheme--light) hsl(240deg 44% 56% / 15%);
    --color-show-more-less-button-background-active: var(--csstools-light-dark-toggle--278, hsl(240deg 44% 56% / 20%));

    /* Message edit history colors */
    --csstools-light-dark-toggle--279: var(--csstools-color-scheme--light) hsl(122deg 100% 81%);
    --color-message-edit-history-text-inserted: var(--csstools-light-dark-toggle--279, hsl(122deg 72% 30%));
    --csstools-light-dark-toggle--280: var(--csstools-color-scheme--light) hsl(120deg 64% 95% / 30%);
    --color-message-edit-history-background-inserted: var(--csstools-light-dark-toggle--280, hsl(120deg 64% 95%));
    --csstools-light-dark-toggle--281: var(--csstools-color-scheme--light) hsl(0deg 90% 67%);
    --color-message-edit-history-text-deleted: var(--csstools-light-dark-toggle--281, hsl(0deg 100% 50%));
    --csstools-light-dark-toggle--282: var(--csstools-color-scheme--light) hsl(7deg 54% 62% / 38%);
    --color-message-edit-history-background-deleted: var(--csstools-light-dark-toggle--282, hsl(7deg 90% 92%));

    /* Mention pill colors */
    --csstools-light-dark-toggle--283: var(--csstools-color-scheme--light) hsl(240deg 13% 16%);
    --color-background-direct-mention: var(--csstools-light-dark-toggle--283, hsl(240deg 52% 95%));
    --csstools-light-dark-toggle--284: var(--csstools-color-scheme--light) hsl(180deg 13% 14%);
    --color-background-group-mention: var(--csstools-light-dark-toggle--284, hsl(180deg 40% 94%));
    --csstools-light-dark-toggle--285: var(--csstools-color-scheme--light) hsl(240deg 52% 60% / 25%);
    --color-background-text-direct-mention: var(--csstools-light-dark-toggle--285, hsl(240deg 70% 70% / 20%));
    --csstools-light-dark-toggle--286: var(--csstools-color-scheme--light) hsl(240deg 52% 60% / 45%);
    --color-background-text-hover-direct-mention: var(--csstools-light-dark-toggle--286, hsl(240deg 70% 70% / 30%));
    --csstools-light-dark-toggle--287: var(--csstools-color-scheme--light) hsl(183deg 52% 40% / 20%);
    --color-background-text-group-mention: var(--csstools-light-dark-toggle--287, hsl(183deg 60% 45% / 18%));
    --csstools-light-dark-toggle--288: var(--csstools-color-scheme--light) hsl(183deg 52% 40% / 30%);
    --color-background-text-hover-group-mention: var(--csstools-light-dark-toggle--288, hsl(183deg 60% 45% / 30%));

    /* Input pills */
    --csstools-light-dark-toggle--289: var(--csstools-color-scheme--light) hsl(240deg 65% 60% / 38%);
    --color-background-input-pill: var(--csstools-light-dark-toggle--289, hsl(237deg 68% 94%));
    /* Tuned pill for the search bar in dark mode. */
    --csstools-light-dark-toggle--290: var(--csstools-color-scheme--light) hsl(240deg 65% 60% / 30%);
    --color-background-input-pill-search: var(--csstools-light-dark-toggle--290, hsl(237deg 68% 94%));
    --csstools-light-dark-toggle--291: var(--csstools-color-scheme--light) hsl(240deg 52% 60% / 45%);
    --color-background-input-pill-hover: var(--csstools-light-dark-toggle--291, hsl(240deg 70% 70% / 30%));
    --csstools-light-dark-toggle--292: var(--csstools-color-scheme--light) hsl(240deg 65% 60% / 60%);
    --color-border-input-pill-image: var(--csstools-light-dark-toggle--292, hsl(237deg 68% 94% / 50%));
    --csstools-light-dark-toggle--293: var(--csstools-color-scheme--light) hsl(240deg 65% 60% / 22%);
    --color-outline-low-attention-input-pill: var(--csstools-light-dark-toggle--293, hsl(237deg 68% 88%));
    --csstools-light-dark-toggle--294: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 60%);
    --color-focus-outline-input-pill: var(--csstools-light-dark-toggle--294, hsl(240deg 50% 50%));
    --csstools-light-dark-toggle--295: var(--csstools-color-scheme--light) hsl(240deg 50% 74%);
    --color-input-pill-close: var(--csstools-light-dark-toggle--295, hsl(240deg 60% 65%));
    --csstools-light-dark-toggle--296: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 7%);
    --color-background-input-pill-exit-hover: var(--csstools-light-dark-toggle--296, hsl(240deg 70% 70% / 15%));
    --csstools-light-dark-toggle--297: var(--csstools-color-scheme--light) hsl(360deg 97% 25%);
    --color-background-deactivated-user-pill: var(--csstools-light-dark-toggle--297, hsl(8deg 96% 91%));
    --csstools-light-dark-toggle--298: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 70%);
    --color-focus-outline-deactivated-user-pill: var(--csstools-light-dark-toggle--298, hsl(4deg 75% 53%));
    --csstools-light-dark-toggle--299: var(--csstools-color-scheme--light) hsl(7deg 100% 74%);
    --color-close-deactivated-user-pill: var(--csstools-light-dark-toggle--299, hsl(4deg 75% 53%));
    --csstools-light-dark-toggle--300: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 7%);
    --color-background-exit-hover-deactivated-user-pill: var(--csstools-light-dark-toggle--300, hsl(4deg 75% 53% / 15%));
    --csstools-light-dark-toggle--301: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 40%);
    --color-background-user-pill: var(--csstools-light-dark-toggle--301, hsl(0deg 0% 100% / 85%));
    --csstools-light-dark-toggle--302: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-pill-container: var(--csstools-light-dark-toggle--302, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--303: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-pill-container-input-disabled: var(--csstools-light-dark-toggle--303, hsl(0deg 0% 93%));
    --csstools-light-dark-toggle--304: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-border-pill-container: var(--csstools-light-dark-toggle--304, hsl(0deg 0% 0% / 15%));

    /* Inbox view constants - Values from Figma design */
    --width-inbox-search: 29.0625em; /* 465px / 16px em */
    --width-inbox-filters-dropdown: 10.7142em; /* 150px / 14px em */
    --csstools-light-dark-toggle--305: var(--csstools-color-scheme--light) hsl(147deg 40% 55%);
    --color-background-inbox-no-unreads-illustration: var(--csstools-light-dark-toggle--305, hsl(147deg 57% 25%));
    --color-background-inbox: var(--color-background);
    --csstools-light-dark-toggle--306: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-icon-search-inbox: var(--csstools-light-dark-toggle--306, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--307: var(--csstools-color-scheme--light) hsl(0deg 0% 95%);
    --color-inbox-search-text: var(--csstools-light-dark-toggle--307, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--308: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 20%);
    --color-border-inbox-search: var(--csstools-light-dark-toggle--308, hsl(229.09deg 21.57% 10% / 30%));
    --csstools-light-dark-toggle--309: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 40%);
    --color-border-inbox-search-hover: var(--csstools-light-dark-toggle--309, hsl(229.09deg 21.57% 10% / 60%));
    --csstools-light-dark-toggle--310: var(--csstools-color-scheme--light) hsl(225deg 6% 10%);
    --color-background-inbox-search: var(--csstools-light-dark-toggle--310, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--311: var(--csstools-color-scheme--light) hsl(225deg 6% 8%);
    --color-background-inbox-search-hover: var(--csstools-light-dark-toggle--311, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--312: var(--csstools-color-scheme--light) hsl(225deg 6% 7%);
    --color-background-inbox-search-focus: var(--csstools-light-dark-toggle--312, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--313: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 50%);
    --color-border-inbox-search-focus: var(--csstools-light-dark-toggle--313, hsl(229.09deg 21.57% 10% / 80%));
    --csstools-light-dark-toggle--314: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 40%);
    --color-box-shadow-inbox-search-focus: var(--csstools-light-dark-toggle--314, hsl(228deg 9.8% 20% / 30%));
    --csstools-light-dark-toggle--315: var(--csstools-color-scheme--light) hsl(0deg 0% 14%);
    --color-background-inbox-row: var(--csstools-light-dark-toggle--315, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--471: var(--csstools-color-scheme--light) rgb(47, 47, 47);
    --color-background-inbox-row-hover: var(--csstools-light-dark-toggle--471, rgb(242, 242, 242));
    --csstools-light-dark-toggle--316: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 5%);
    --color-background-button-inbox-selected: var(--csstools-light-dark-toggle--316, hsl(0deg 0% 0% / 5%));
    --csstools-light-dark-toggle--317: var(--csstools-color-scheme--light) hsl(0deg 0% 20%);
    --color-background-button-inbox-focus: var(--csstools-light-dark-toggle--317, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--318: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-icons-inbox: var(--csstools-light-dark-toggle--318, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--319: var(--csstools-color-scheme--light) hsl(216deg 50% 75%);
    --color-folder-header: var(--csstools-light-dark-toggle--319, hsl(216deg 43% 20%));
    /* Light mode uses the --grey-600 equivalent;
       dark mode uses the --grey-300 equivalent. */
    --csstools-light-dark-toggle--320: var(--csstools-color-scheme--light) #aaadba;
    --color-inbox-row-chevron: var(--csstools-light-dark-toggle--320, #535663);

    /* Navbar dropdown menu constants - Values from Figma design */
    --box-shadow-popover-menu:
        0 2.78px 4.11px 0 hsl(0deg 0% 0% / 6%),
        0 5.5113px 8.5783px 0 hsl(0deg 0% 0% / 7%),
        0 8.438px 13.9271px 0 hsl(0deg 0% 0% / 8%),
        0 12.177px 21.4737px 0 hsl(0deg 0% 0% / 9%),
        0 18.7257px 35.4802px 0 hsl(0deg 0% 0% / 9%),
        0 41px 80px 0 hsl(0deg 0% 0% / 13%);
    --box-shadow-gear-menu:
        0 2.7798px 4.1129px 0 hsl(0deg 0% 0% / 10%),
        0 5.5113px 8.5783px 0 hsl(0deg 0% 0% / 9%),
        0 8.4377px 13.9271px 0 hsl(0deg 0% 0% / 11%),
        0 12.177px 21.4737px 0 hsl(0deg 0% 0% / 11%),
        0 18.7257px 35.4802px 0 hsl(0deg 0% 0% / 15%),
        0 41px 80px 0 hsl(0deg 0% 0% / 20%);
    --csstools-light-dark-toggle--321: var(--csstools-color-scheme--light) hsl(240deg 35% 60%);
    --color-navbar-icon: var(--csstools-light-dark-toggle--321, hsl(240deg 20% 50%));
    --csstools-light-dark-toggle--322: var(--csstools-color-scheme--light) hsl(240deg 55% 72% / 100%);
    --color-navbar-spectator-low-attention-brand-button-text: var(--csstools-light-dark-toggle--322, hsl(240deg 40% 50%));
    --color-navbar-spectator-low-attention-brand-button-background: transparent;
    --csstools-light-dark-toggle--323: var(--csstools-color-scheme--light) hsl(240deg 56% 70% / 10%);
    --color-navbar-spectator-low-attention-brand-button-background-hover: var(--csstools-light-dark-toggle--323, hsl(240deg 100% 30% / 5%));
    --csstools-light-dark-toggle--324: var(--csstools-color-scheme--light) hsl(240deg 56% 70% / 13%);
    --color-navbar-spectator-low-attention-brand-button-background-active: var(--csstools-light-dark-toggle--324, hsl(240deg 100% 30% / 8%));
    --csstools-light-dark-toggle--325: var(--csstools-color-scheme--light) hsl(240deg 64% 76% / 100%);
    --color-navbar-spectator-medium-attention-brand-button-text: var(--csstools-light-dark-toggle--325, hsl(240deg 40% 40% / 100%));
    --csstools-light-dark-toggle--326: var(--csstools-color-scheme--light) hsl(240deg 56% 70% / 12%);
    --color-navbar-spectator-medium-attention-brand-button-background: var(--csstools-light-dark-toggle--326, hsl(244deg 64% 47% / 10%));
    --csstools-light-dark-toggle--327: var(--csstools-color-scheme--light) hsl(240deg 56% 70% / 17%);
    --color-navbar-spectator-medium-attention-brand-button-background-hover: var(--csstools-light-dark-toggle--327, hsl(244deg 64% 47% / 15%));
    --csstools-light-dark-toggle--328: var(--csstools-color-scheme--light) hsl(240deg 56% 70% / 12%);
    --color-navbar-spectator-medium-attention-brand-button-background-active: var(--csstools-light-dark-toggle--328, hsl(244deg 64% 47% / 18%));
    --csstools-light-dark-toggle--329: var(--csstools-color-scheme--light) hsl(0deg 0% 50%);
    --color-gear-menu-lighter-text: var(--csstools-light-dark-toggle--329, hsl(0deg 0% 40%));
    --csstools-light-dark-toggle--330: var(--csstools-color-scheme--light) hsl(217deg 100% 65%);
    --color-gear-menu-blue-text: var(--csstools-light-dark-toggle--330, hsl(217deg 100% 50%));
    --csstools-light-dark-toggle--331: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 4%);
    --color-header-button-hover: var(--csstools-light-dark-toggle--331, hsl(0deg 0% 0% / 5%));
    /* This is a technique for directing CSS to do
       the color mixing ordinarily handled by the
       alpha channel in hsl(); here, the alpha value
       is omitted from the hsl() syntax and instead
       used as the percentage for mixing over top of
       the navbar background. This is needed so that
       elements like the unread-count dot can make
       use of the color, but neither compound alpha
       values or apply alpha values over different
       colors, such as the background color on the
       unread dot.

       The second color value aligns with
       --color-background-navbar. We use the value
       directly so that this gets compiled down to
       an rgb() value by PostCSS Preset Env. */
    --csstools-light-dark-toggle--472: var(--csstools-color-scheme--light) rgb(42, 42, 42);
    --color-header-button-hover-no-alpha: var(--csstools-light-dark-toggle--472, rgb(235, 235, 235));
    --csstools-light-dark-toggle--332: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 7%);
    --color-header-button-focus: var(--csstools-light-dark-toggle--332, hsl(0deg 0% 0% / 8%));
    /* The second color value aligns with
       --color-background-navbar */
    --csstools-light-dark-toggle--473: var(--csstools-color-scheme--light) rgb(49, 49, 49);
    --color-header-button-focus-no-alpha: var(--csstools-light-dark-toggle--473, rgb(228, 228, 228));
    --color-fill-hover-copy-icon: hsl(200deg 100% 40%);
    --csstools-light-dark-toggle--333: var(--csstools-color-scheme--light) hsl(236deg 33% 90%);
    --color-fill-user-invite-copy-icon: var(--csstools-light-dark-toggle--333, hsl(0deg 0% 46.7%));
    --icon-chevron-down: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27%23333333%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath clip-rule=%27evenodd%27 d=%27M3.52977 5.52973C3.78947 5.27004 4.21053 5.27004 4.47023 5.52973L8 9.05951L11.5298 5.52973C11.7895 5.27004 12.2105 5.27004 12.4702 5.52973C12.7299 5.78943 12.7299 6.21049 12.4702 6.47019L8.47023 10.4702C8.21053 10.7299 7.78947 10.7299 7.52977 10.4702L3.52977 6.47019C3.27008 6.21049 3.27008 5.78943 3.52977 5.52973Z%27/%3E%3C/svg%3E");

    /* Button colors on modals and message editing. */
    /* Don't define light theme colors for modal here
       since the modal is also used on billing pages and
       this file is not imported on billing pages. */

    /* Zulip-style button colors. */
    --csstools-light-dark-toggle--334: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-zulip-button: var(--csstools-light-dark-toggle--334, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--335: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 15%);
    --color-background-zulip-button-hover: var(--csstools-light-dark-toggle--335, var(--color-background-zulip-button));
    --csstools-light-dark-toggle--336: var(--csstools-color-scheme--light) var(--color-background-zulip-button-hover);
    --color-background-zulip-button-active: var(--csstools-light-dark-toggle--336, hsl(0deg 0% 95%));
    --csstools-light-dark-toggle--337: var(--csstools-color-scheme--light) var(--color-background-zulip-button);
    --color-background-zulip-button-disabled: var(--csstools-light-dark-toggle--337, hsl(0deg 0% 93%));
    --csstools-light-dark-toggle--338: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-border-zulip-button: var(--csstools-light-dark-toggle--338, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--339: var(--csstools-color-scheme--light) var(--color-border-zulip-button);
    --color-border-zulip-button-interactive: var(--csstools-light-dark-toggle--339, hsl(0deg 0% 60%));

    /* Zulip-style checkbox values. */
    --csstools-light-dark-toggle--340: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 40%);
    --color-border-rendered-checkbox: var(--csstools-light-dark-toggle--340, hsl(0deg 0% 0% / 60%));
    /* The SVG must be adjusted when changing the border color above. */
    --svg-url-rendered-checkbox: url(files/images/checkbox.svg);
    /* Nested checkboxes in settings menu */
    --settings-nested-checkbox-vertical-margins: 0.3125em 0; /* 5px at 16px */

    /* Theme-dependent SVGs */
    --svg-url-thumbnail-loader: url(files/images/loading/loader-black.svg);

    /* Emoji-picker colors */
    --csstools-light-dark-toggle--341: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-emoji-picker-popover: var(--csstools-light-dark-toggle--341, hsl(0deg 0% 93%));
    --csstools-light-dark-toggle--342: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 50%);
    --color-background-emoji-picker-popover-tab-item-active: var(--csstools-light-dark-toggle--342, hsl(0deg 0% 100% / 20%));
    --csstools-light-dark-toggle--343: var(--csstools-color-scheme--light) hsl(212deg 28% 8% / 75%);
    --color-background-emoji-picker-emoji-focus: var(--csstools-light-dark-toggle--343, hsl(0deg 0% 93%));
    --csstools-light-dark-toggle--344: var(--csstools-color-scheme--light) hsl(0deg 0% 98%);
    --color-box-shadow-emoji-picker-emoji-focus: var(--csstools-light-dark-toggle--344, transparent);
    --csstools-light-dark-toggle--345: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 50%);
    --color-background-emoji-picker-emoji-reacted: var(--csstools-light-dark-toggle--345, hsl(195deg 50% 95%));
    --csstools-light-dark-toggle--346: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 90%);
    --color-border-emoji-picker-emoji-reacted: var(--csstools-light-dark-toggle--346, hsl(195deg 52% 79%));
    --csstools-light-dark-toggle--347: var(--csstools-color-scheme--light) hsl(0deg 0% 20% / 70%);
    --color-background-emoji-picker-emoji-reacted-focus: var(--csstools-light-dark-toggle--347, hsl(195deg 55% 88%));
    /* Same color as background color of header / footer */
    --csstools-light-dark-toggle--348: var(--csstools-color-scheme--light) hsl(211.58deg 33.33% 11.18%);
    --color-border-emoji-picker-tippy-arrow: var(--csstools-light-dark-toggle--348, hsl(0deg 0% 93%));

    /* Dropdown / Typeahead constants */
    --csstools-light-dark-toggle--349: var(--csstools-color-scheme--light) hsl(0deg 0% 75%);
    --color-dropdown-item: var(--csstools-light-dark-toggle--349, hsl(0deg 0% 20%));
    --csstools-light-dark-toggle--350: var(--csstools-color-scheme--light) hsl(0deg 0% 75% 60%);
    --color-dropdown-item-link-underline: var(--csstools-light-dark-toggle--350, hsl(0deg 0% 20% 60%));
    --csstools-light-dark-toggle--351: var(--csstools-color-scheme--light) hsl(0deg 0% 90%);
    --color-active-dropdown-item: var(--csstools-light-dark-toggle--351, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--352: var(--csstools-color-scheme--light) hsl(220deg 12% 100% / 7%);
    --background-color-active-dropdown-item: var(--csstools-light-dark-toggle--352, hsl(220deg 12% 4.9% / 5%));
    --csstools-light-dark-toggle--353: var(--csstools-color-scheme--light) hsl(220deg 12% 100% / 7%);
    --background-color-active-typeahead-item: var(--csstools-light-dark-toggle--353, hsl(220deg 12% 4.9% / 5%));
    --csstools-light-dark-toggle--354: var(--csstools-color-scheme--light) var(--grey-400);
    --color-typeahead-option-label: var(--csstools-light-dark-toggle--354, var(--grey-500));

    /* Shared button CSS variables */
    --csstools-light-dark-toggle--355: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-outline-button-focus: var(--csstools-light-dark-toggle--355, hsl(0deg 0% 0%));
    --outline-width-button-focus: 1.5px;
    --outline-offset-button-focus: 0;
    /* Actions buttons */
    --csstools-light-dark-toggle--474: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.21);
    --color-inner-shadow-action-button: var(--csstools-light-dark-toggle--474, rgba(0, 0, 0, 0.2));
    /* Action buttons -- Neutral Variant */
    --csstools-light-dark-toggle--475: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.85);
    --color-text-neutral-primary-action-button: var(--csstools-light-dark-toggle--475, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--356: var(--csstools-color-scheme--light) hsl(229deg 9% 36%);
    --color-background-neutral-primary-action-button: var(--csstools-light-dark-toggle--356, hsl(229deg 7% 50%));
    --csstools-light-dark-toggle--357: var(--csstools-color-scheme--light) hsl(229deg 8% 42%);
    --color-background-neutral-primary-action-button-hover: var(--csstools-light-dark-toggle--357, hsl(229deg 7% 47%));
    --csstools-light-dark-toggle--358: var(--csstools-color-scheme--light) hsl(229deg 9% 36%);
    --color-background-neutral-primary-action-button-active: var(--csstools-light-dark-toggle--358, hsl(232deg 7% 44%));
    --csstools-light-dark-toggle--359: var(--csstools-color-scheme--light) hsl(231deg 11% 76%);
    --color-text-neutral-quiet-action-button: var(--csstools-light-dark-toggle--359, hsl(229deg 12% 25%));
    --csstools-light-dark-toggle--476: var(--csstools-color-scheme--light) rgba(187, 189, 201, 0.12);
    --color-background-neutral-quiet-action-button: var(--csstools-light-dark-toggle--476, rgba(119, 122, 136, 0.12));
    --csstools-light-dark-toggle--477: var(--csstools-color-scheme--light) rgba(187, 189, 201, 0.17);
    --color-background-neutral-quiet-action-button-hover: var(--csstools-light-dark-toggle--477, rgba(119, 122, 136, 0.17));
    --csstools-light-dark-toggle--478: var(--csstools-color-scheme--light) rgba(187, 189, 201, 0.12);
    --color-background-neutral-quiet-action-button-active: var(--csstools-light-dark-toggle--478, rgba(119, 122, 136, 0.22));
    --csstools-light-dark-toggle--360: var(--csstools-color-scheme--light) hsl(229deg 10% 70%);
    --color-text-neutral-borderless-action-button: var(--csstools-light-dark-toggle--360, hsl(229deg 9% 36%));
    --csstools-light-dark-toggle--479: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.14);
    --color-background-neutral-borderless-action-button-hover: var(--csstools-light-dark-toggle--479, rgba(84, 87, 100, 0.07));
    --csstools-light-dark-toggle--480: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.18);
    --color-background-neutral-borderless-action-button-active: var(--csstools-light-dark-toggle--480, rgba(84, 87, 100, 0.11));
    /* Action buttons -- Brand Variant */
    --csstools-light-dark-toggle--481: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.85);
    --color-text-brand-primary-action-button: var(--csstools-light-dark-toggle--481, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--361: var(--csstools-color-scheme--light) hsl(261deg 79% 43%);
    --color-background-brand-primary-action-button: var(--csstools-light-dark-toggle--361, hsl(254deg 99% 68%));
    --csstools-light-dark-toggle--362: var(--csstools-color-scheme--light) hsl(258deg 66% 51%);
    --color-background-brand-primary-action-button-hover: var(--csstools-light-dark-toggle--362, hsl(255deg 81% 61%));
    --csstools-light-dark-toggle--363: var(--csstools-color-scheme--light) hsl(261deg 79% 43%);
    --color-background-brand-primary-action-button-active: var(--csstools-light-dark-toggle--363, hsl(258deg 66% 51%));
    --csstools-light-dark-toggle--364: var(--csstools-color-scheme--light) hsl(244deg 96% 82%);
    --color-text-brand-quiet-action-button: var(--csstools-light-dark-toggle--364, hsl(264deg 95% 34%));
    --csstools-light-dark-toggle--482: var(--csstools-color-scheme--light) rgba(160, 150, 253, 0.12);
    --color-background-brand-quiet-action-button: var(--csstools-light-dark-toggle--482, rgba(130, 93, 254, 0.12));
    --csstools-light-dark-toggle--483: var(--csstools-color-scheme--light) rgba(160, 150, 253, 0.17);
    --color-background-brand-quiet-action-button-hover: var(--csstools-light-dark-toggle--483, rgba(130, 93, 254, 0.17));
    --csstools-light-dark-toggle--484: var(--csstools-color-scheme--light) rgba(160, 150, 253, 0.12);
    --color-background-brand-quiet-action-button-active: var(--csstools-light-dark-toggle--484, rgba(130, 93, 254, 0.22));
    --csstools-light-dark-toggle--365: var(--csstools-color-scheme--light) hsl(246deg 96% 79%);
    --color-text-brand-borderless-action-button: var(--csstools-light-dark-toggle--365, hsl(255deg 54% 50%));
    --csstools-light-dark-toggle--485: var(--csstools-color-scheme--light) rgba(138, 112, 255, 0.14);
    --color-background-brand-borderless-action-button-hover: var(--csstools-light-dark-toggle--485, rgba(45, 0, 112, 0.05));
    --csstools-light-dark-toggle--486: var(--csstools-color-scheme--light) rgba(138, 112, 255, 0.18);
    --color-background-brand-borderless-action-button-active: var(--csstools-light-dark-toggle--486, rgba(45, 0, 112, 0.1));
    /* Action buttons -- Info Variant */
    --csstools-light-dark-toggle--487: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.85);
    --color-text-info-primary-action-button: var(--csstools-light-dark-toggle--487, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--366: var(--csstools-color-scheme--light) hsl(228deg 75% 47%);
    --color-background-info-primary-action-button: var(--csstools-light-dark-toggle--366, hsl(226deg 100% 62%));
    --color-background-info-primary-action-button-hover: hsl(226deg 83% 55%);
    --color-background-info-primary-action-button-active: hsl(228deg 75% 47%);
    --csstools-light-dark-toggle--367: var(--csstools-color-scheme--light) hsl(222deg 98% 79%);
    --color-text-info-quiet-action-button: var(--csstools-light-dark-toggle--367, hsl(231deg 82% 36%));
    --csstools-light-dark-toggle--488: var(--csstools-color-scheme--light) rgba(149, 180, 254, 0.12);
    --color-background-info-quiet-action-button: var(--csstools-light-dark-toggle--488, rgba(61, 106, 255, 0.12));
    --csstools-light-dark-toggle--489: var(--csstools-color-scheme--light) rgba(149, 180, 254, 0.17);
    --color-background-info-quiet-action-button-hover: var(--csstools-light-dark-toggle--489, rgba(61, 106, 255, 0.17));
    --csstools-light-dark-toggle--490: var(--csstools-color-scheme--light) rgba(149, 180, 254, 0.12);
    --color-background-info-quiet-action-button-active: var(--csstools-light-dark-toggle--490, rgba(61, 106, 255, 0.22));
    --csstools-light-dark-toggle--368: var(--csstools-color-scheme--light) hsl(222deg 97% 75%);
    --color-text-info-borderless-action-button: var(--csstools-light-dark-toggle--368, hsl(227deg 70% 46%));
    --csstools-light-dark-toggle--491: var(--csstools-color-scheme--light) rgba(78, 125, 253, 0.12);
    --color-background-info-borderless-action-button-hover: var(--csstools-light-dark-toggle--491, rgba(5, 3, 124, 0.05));
    --csstools-light-dark-toggle--492: var(--csstools-color-scheme--light) rgba(78, 125, 253, 0.17);
    --color-background-info-borderless-action-button-active: var(--csstools-light-dark-toggle--492, rgba(5, 3, 124, 0.09));
    /* Action buttons -- Success Variant */
    --csstools-light-dark-toggle--493: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.85);
    --color-text-success-primary-action-button: var(--csstools-light-dark-toggle--493, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--369: var(--csstools-color-scheme--light) hsl(144deg 84% 22%);
    --color-background-success-primary-action-button: var(--csstools-light-dark-toggle--369, hsl(146deg 90% 27%));
    --color-background-success-primary-action-button-hover: hsl(145deg 87% 25%);
    --color-background-success-primary-action-button-active: hsl(
        144deg 84% 22%
    );
    --csstools-light-dark-toggle--370: var(--csstools-color-scheme--light) hsl(135deg 56% 63%);
    --color-text-success-quiet-action-button: var(--csstools-light-dark-toggle--370, hsl(144deg 88% 16%));
    --csstools-light-dark-toggle--494: var(--csstools-color-scheme--light) rgba(65, 175, 98, 0.12);
    --color-background-success-quiet-action-button: var(--csstools-light-dark-toggle--494, rgba(7, 131, 61, 0.13));
    --csstools-light-dark-toggle--495: var(--csstools-color-scheme--light) rgba(65, 175, 98, 0.17);
    --color-background-success-quiet-action-button-hover: var(--csstools-light-dark-toggle--495, rgba(7, 131, 61, 0.18));
    --csstools-light-dark-toggle--496: var(--csstools-color-scheme--light) rgba(65, 175, 98, 0.12);
    --color-background-success-quiet-action-button-active: var(--csstools-light-dark-toggle--496, rgba(7, 131, 61, 0.23));
    --csstools-light-dark-toggle--371: var(--csstools-color-scheme--light) hsl(136deg 47% 55%);
    --color-text-success-borderless-action-button: var(--csstools-light-dark-toggle--371, hsl(146deg 90% 27%));
    --csstools-light-dark-toggle--497: var(--csstools-color-scheme--light) rgba(47, 157, 82, 0.12);
    --color-background-success-borderless-action-button-hover: var(--csstools-light-dark-toggle--497, rgba(9, 103, 47, 0.08));
    --csstools-light-dark-toggle--498: var(--csstools-color-scheme--light) rgba(47, 157, 82, 0.17);
    --color-background-success-borderless-action-button-active: var(--csstools-light-dark-toggle--498, rgba(9, 103, 47, 0.12));
    /* Action buttons -- Warning Variant */
    --csstools-light-dark-toggle--499: var(--csstools-color-scheme--light) rgba(0, 0, 0, 0.9);
    --color-text-warning-primary-action-button: var(--csstools-light-dark-toggle--499, rgba(0, 0, 0, 0.88));
    --csstools-light-dark-toggle--372: var(--csstools-color-scheme--light) hsl(39deg 89% 45%);
    --color-background-warning-primary-action-button: var(--csstools-light-dark-toggle--372, hsl(40deg 99% 62%));
    --csstools-light-dark-toggle--373: var(--csstools-color-scheme--light) hsl(41deg 98% 46%);
    --color-background-warning-primary-action-button-hover: var(--csstools-light-dark-toggle--373, hsl(40deg 94% 56%));
    --csstools-light-dark-toggle--374: var(--csstools-color-scheme--light) hsl(39deg 89% 45%);
    --color-background-warning-primary-action-button-active: var(--csstools-light-dark-toggle--374, hsl(41deg 98% 46%));
    --csstools-light-dark-toggle--375: var(--csstools-color-scheme--light) hsl(40deg 94% 56%);
    --color-text-warning-quiet-action-button: var(--csstools-light-dark-toggle--375, hsl(34deg 89% 25%));
    --csstools-light-dark-toggle--500: var(--csstools-color-scheme--light) rgba(217, 145, 13, 0.12);
    --color-background-warning-quiet-action-button: var(--csstools-light-dark-toggle--500, rgba(232, 159, 2, 0.18));
    --csstools-light-dark-toggle--501: var(--csstools-color-scheme--light) rgba(217, 145, 13, 0.17);
    --color-background-warning-quiet-action-button-hover: var(--csstools-light-dark-toggle--501, rgba(232, 159, 2, 0.23));
    --csstools-light-dark-toggle--502: var(--csstools-color-scheme--light) rgba(217, 145, 13, 0.12);
    --color-background-warning-quiet-action-button-active: var(--csstools-light-dark-toggle--502, rgba(232, 159, 2, 0.28));
    --csstools-light-dark-toggle--376: var(--csstools-color-scheme--light) hsl(41deg 98% 46%);
    --color-text-warning-borderless-action-button: var(--csstools-light-dark-toggle--376, hsl(37deg 94% 34%));
    --csstools-light-dark-toggle--503: var(--csstools-color-scheme--light) rgba(201, 135, 13, 0.12);
    --color-background-warning-borderless-action-button-hover: var(--csstools-light-dark-toggle--503, rgba(168, 106, 5, 0.1));
    --csstools-light-dark-toggle--504: var(--csstools-color-scheme--light) rgba(201, 135, 13, 0.17);
    --color-background-warning-borderless-action-button-active: var(--csstools-light-dark-toggle--504, rgba(168, 106, 5, 0.14));
    /* Action buttons -- Danger Variant */
    --csstools-light-dark-toggle--505: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.85);
    --color-text-danger-primary-action-button: var(--csstools-light-dark-toggle--505, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--377: var(--csstools-color-scheme--light) hsl(2deg 74% 47%);
    --color-background-danger-primary-action-button: var(--csstools-light-dark-toggle--377, hsl(4deg 75% 53%));
    --csstools-light-dark-toggle--378: var(--csstools-color-scheme--light) hsl(4deg 75% 53%);
    --color-background-danger-primary-action-button-hover: var(--csstools-light-dark-toggle--378, hsl(2deg 74% 47%));
    --csstools-light-dark-toggle--379: var(--csstools-color-scheme--light) hsl(2deg 74% 47%);
    --color-background-danger-primary-action-button-active: var(--csstools-light-dark-toggle--379, hsl(359deg 93% 39%));
    --csstools-light-dark-toggle--380: var(--csstools-color-scheme--light) hsl(7deg 100% 74%);
    --color-text-danger-quiet-action-button: var(--csstools-light-dark-toggle--380, hsl(359deg 94% 35%));
    --csstools-light-dark-toggle--506: var(--csstools-color-scheme--light) rgba(253, 93, 78, 0.12);
    --color-background-danger-quiet-action-button: var(--csstools-light-dark-toggle--506, rgba(225, 57, 45, 0.13));
    --csstools-light-dark-toggle--507: var(--csstools-color-scheme--light) rgba(253, 93, 78, 0.17);
    --color-background-danger-quiet-action-button-hover: var(--csstools-light-dark-toggle--507, rgba(225, 57, 45, 0.18));
    --csstools-light-dark-toggle--508: var(--csstools-color-scheme--light) rgba(253, 93, 78, 0.12);
    --color-background-danger-quiet-action-button-active: var(--csstools-light-dark-toggle--508, rgba(225, 57, 45, 0.23));
    --csstools-light-dark-toggle--381: var(--csstools-color-scheme--light) hsl(7deg 100% 74%);
    --color-text-danger-borderless-action-button: var(--csstools-light-dark-toggle--381, hsl(359deg 93% 39%));
    --csstools-light-dark-toggle--509: var(--csstools-color-scheme--light) rgba(243, 78, 63, 0.12);
    --color-background-danger-borderless-action-button-hover: var(--csstools-light-dark-toggle--509, rgba(192, 7, 10, 0.09));
    --csstools-light-dark-toggle--510: var(--csstools-color-scheme--light) rgba(243, 78, 63, 0.17);
    --color-background-danger-borderless-action-button-active: var(--csstools-light-dark-toggle--510, rgba(192, 7, 10, 0.13));

    /* Icon buttons */
    /* Icon buttons -- Neutral Variant */
    --csstools-light-dark-toggle--511: var(--csstools-color-scheme--light) rgba(171, 174, 186, 0.7);
    --color-text-neutral-icon-button: var(--csstools-light-dark-toggle--511, rgba(84, 87, 100, 0.7));
    --csstools-light-dark-toggle--382: var(--csstools-color-scheme--light) hsl(229deg 10% 70%);
    --color-text-neutral-icon-button-hover: var(--csstools-light-dark-toggle--382, hsl(229deg 9% 36%));
    --csstools-light-dark-toggle--512: var(--csstools-color-scheme--light) rgba(171, 174, 186, 0.7);
    --color-text-neutral-icon-button-active: var(--csstools-light-dark-toggle--512, rgba(84, 87, 100, 0.7));
    --csstools-light-dark-toggle--383: var(--csstools-color-scheme--light) hsl(229deg 10% 70%);
    --color-text-neutral-icon-button-square-active: var(--csstools-light-dark-toggle--383, hsl(229deg 9% 36%));
    --csstools-light-dark-toggle--513: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.14);
    --color-background-neutral-icon-button-square-hover: var(--csstools-light-dark-toggle--513, rgba(84, 87, 100, 0.07));
    --csstools-light-dark-toggle--514: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.18);
    --color-background-neutral-icon-button-square-active: var(--csstools-light-dark-toggle--514, rgba(84, 87, 100, 0.11));
    /* Icon buttons -- Brand Variant */
    --csstools-light-dark-toggle--515: var(--csstools-color-scheme--light) rgba(160, 150, 253, 0.7);
    --color-text-brand-icon-button: var(--csstools-light-dark-toggle--515, rgba(93, 59, 196, 0.7));
    --csstools-light-dark-toggle--384: var(--csstools-color-scheme--light) hsl(246deg 96% 79%);
    --color-text-brand-icon-button-hover: var(--csstools-light-dark-toggle--384, hsl(255deg 54% 50%));
    --csstools-light-dark-toggle--516: var(--csstools-color-scheme--light) rgba(160, 150, 253, 0.7);
    --color-text-brand-icon-button-active: var(--csstools-light-dark-toggle--516, rgba(93, 59, 196, 0.7));
    --csstools-light-dark-toggle--385: var(--csstools-color-scheme--light) hsl(246deg 96% 79%);
    --color-text-brand-icon-button-square-active: var(--csstools-light-dark-toggle--385, hsl(255deg 54% 50%));
    --csstools-light-dark-toggle--517: var(--csstools-color-scheme--light) rgba(138, 112, 255, 0.14);
    --color-background-brand-icon-button-square-hover: var(--csstools-light-dark-toggle--517, rgba(45, 0, 112, 0.05));
    --csstools-light-dark-toggle--518: var(--csstools-color-scheme--light) rgba(138, 112, 255, 0.18);
    --color-background-brand-icon-button-square-active: var(--csstools-light-dark-toggle--518, rgba(45, 0, 112, 0.1));
    /* Icon buttons -- Info Variant */
    --csstools-light-dark-toggle--519: var(--csstools-color-scheme--light) rgba(129, 167, 253, 0.7);
    --color-text-info-icon-button: var(--csstools-light-dark-toggle--519, rgba(35, 71, 199, 0.7));
    --csstools-light-dark-toggle--386: var(--csstools-color-scheme--light) hsl(222deg 97% 75%);
    --color-text-info-icon-button-hover: var(--csstools-light-dark-toggle--386, hsl(227deg 70% 46%));
    --csstools-light-dark-toggle--520: var(--csstools-color-scheme--light) rgba(129, 167, 253, 0.7);
    --color-text-info-icon-button-active: var(--csstools-light-dark-toggle--520, rgba(35, 71, 199, 0.7));
    --csstools-light-dark-toggle--387: var(--csstools-color-scheme--light) hsl(222deg 97% 75%);
    --color-text-info-icon-button-square-active: var(--csstools-light-dark-toggle--387, hsl(227deg 70% 46%));
    --csstools-light-dark-toggle--521: var(--csstools-color-scheme--light) rgba(78, 125, 253, 0.12);
    --color-background-info-icon-button-square-hover: var(--csstools-light-dark-toggle--521, rgba(5, 3, 124, 0.05));
    --csstools-light-dark-toggle--522: var(--csstools-color-scheme--light) rgba(78, 125, 253, 0.17);
    --color-background-info-icon-button-square-active: var(--csstools-light-dark-toggle--522, rgba(5, 3, 124, 0.09));
    /* Icon buttons -- Success Variant */
    --csstools-light-dark-toggle--523: var(--csstools-color-scheme--light) rgba(86, 194, 115, 0.7);
    --color-text-success-icon-button: var(--csstools-light-dark-toggle--523, rgba(7, 131, 61, 0.7));
    --csstools-light-dark-toggle--388: var(--csstools-color-scheme--light) hsl(136deg 47% 55%);
    --color-text-success-icon-button-hover: var(--csstools-light-dark-toggle--388, hsl(146deg 90% 27%));
    --csstools-light-dark-toggle--524: var(--csstools-color-scheme--light) rgba(86, 194, 115, 0.7);
    --color-text-success-icon-button-active: var(--csstools-light-dark-toggle--524, rgba(7, 131, 61, 0.7));
    --csstools-light-dark-toggle--389: var(--csstools-color-scheme--light) hsl(136deg 47% 55%);
    --color-text-success-icon-button-square-active: var(--csstools-light-dark-toggle--389, hsl(146deg 90% 27%));
    --csstools-light-dark-toggle--525: var(--csstools-color-scheme--light) rgba(47, 157, 82, 0.12);
    --color-background-success-icon-button-square-hover: var(--csstools-light-dark-toggle--525, rgba(9, 103, 47, 0.08));
    --csstools-light-dark-toggle--526: var(--csstools-color-scheme--light) rgba(47, 157, 82, 0.17);
    --color-background-success-icon-button-square-active: var(--csstools-light-dark-toggle--526, rgba(9, 103, 47, 0.12));
    /* Icon buttons -- Warning Variant */
    --csstools-light-dark-toggle--527: var(--csstools-color-scheme--light) rgba(232, 159, 2, 0.7);
    --color-text-warning-icon-button: var(--csstools-light-dark-toggle--527, rgba(168, 106, 5, 0.7));
    --csstools-light-dark-toggle--390: var(--csstools-color-scheme--light) hsl(41deg 98% 46%);
    --color-text-warning-icon-button-hover: var(--csstools-light-dark-toggle--390, hsl(37deg 94% 34%));
    --csstools-light-dark-toggle--528: var(--csstools-color-scheme--light) rgba(232, 159, 2, 0.7);
    --color-text-warning-icon-button-active: var(--csstools-light-dark-toggle--528, rgba(168, 106, 5, 0.7));
    --csstools-light-dark-toggle--391: var(--csstools-color-scheme--light) hsl(41deg 98% 46%);
    --color-text-warning-icon-button-square-active: var(--csstools-light-dark-toggle--391, hsl(37deg 94% 34%));
    --csstools-light-dark-toggle--529: var(--csstools-color-scheme--light) rgba(201, 135, 13, 0.12);
    --color-background-warning-icon-button-square-hover: var(--csstools-light-dark-toggle--529, rgba(168, 106, 5, 0.1));
    --csstools-light-dark-toggle--530: var(--csstools-color-scheme--light) rgba(201, 135, 13, 0.17);
    --color-background-warning-icon-button-square-active: var(--csstools-light-dark-toggle--530, rgba(168, 106, 5, 0.14));
    /* Icon buttons -- Danger Variant */
    --csstools-light-dark-toggle--531: var(--csstools-color-scheme--light) rgba(255, 138, 122, 0.7);
    --color-text-danger-icon-button: var(--csstools-light-dark-toggle--531, rgba(192, 7, 10, 0.7));
    --csstools-light-dark-toggle--392: var(--csstools-color-scheme--light) hsl(7deg 100% 74%);
    --color-text-danger-icon-button-hover: var(--csstools-light-dark-toggle--392, hsl(359deg 93% 39%));
    --csstools-light-dark-toggle--532: var(--csstools-color-scheme--light) rgba(255, 138, 122, 0.7);
    --color-text-danger-icon-button-active: var(--csstools-light-dark-toggle--532, rgba(192, 7, 10, 0.7));
    --csstools-light-dark-toggle--393: var(--csstools-color-scheme--light) hsl(7deg 100% 74%);
    --color-text-danger-icon-button-square-active: var(--csstools-light-dark-toggle--393, hsl(359deg 93% 39%));
    --csstools-light-dark-toggle--533: var(--csstools-color-scheme--light) rgba(243, 78, 63, 0.12);
    --color-background-danger-icon-button-square-hover: var(--csstools-light-dark-toggle--533, rgba(192, 7, 10, 0.09));
    --csstools-light-dark-toggle--534: var(--csstools-color-scheme--light) rgba(243, 78, 63, 0.17);
    --color-background-danger-icon-button-square-active: var(--csstools-light-dark-toggle--534, rgba(192, 7, 10, 0.13));

    /* Banners */
    /* NOTE: These colors are also used in starlight help center for
       aside colors. Do grep for these variable when changing them
       and confirm on CZO on whether the colors there need to change
       as well. */
    --color-text-link-banner: hsl(210deg 94% 42%);
    /* Banners - Neutral Variant */
    --csstools-light-dark-toggle--394: var(--csstools-color-scheme--light) hsl(231deg 11% 76%);
    --color-text-neutral-banner: var(--csstools-light-dark-toggle--394, hsl(229deg 12% 25%));
    --csstools-light-dark-toggle--535: var(--csstools-color-scheme--light) rgba(162, 162, 174, 0.4);
    --color-border-neutral-banner: var(--csstools-light-dark-toggle--535, rgba(75, 75, 78, 0.4));
    --csstools-light-dark-toggle--395: var(--csstools-color-scheme--light) hsl(240deg 7% 17%);
    --color-background-neutral-banner: var(--csstools-light-dark-toggle--395, hsl(240deg 7% 93%));
    /* Banners - Brand Variant */
    --csstools-light-dark-toggle--396: var(--csstools-color-scheme--light) hsl(244deg 96% 82%);
    --color-text-brand-banner: var(--csstools-light-dark-toggle--396, hsl(264deg 95% 34%));
    --csstools-light-dark-toggle--536: var(--csstools-color-scheme--light) rgba(216, 207, 247, 0.4);
    --color-border-brand-banner: var(--csstools-light-dark-toggle--536, rgba(87, 51, 204, 0.4));
    --csstools-light-dark-toggle--397: var(--csstools-color-scheme--light) hsl(254deg 49% 16%);
    --color-background-brand-banner: var(--csstools-light-dark-toggle--397, hsl(254deg 42% 94%));
    /* Banners - Info Variant */
    --csstools-light-dark-toggle--398: var(--csstools-color-scheme--light) hsl(221deg 93% 89%);
    --color-text-info-banner: var(--csstools-light-dark-toggle--398, hsl(241deg 95% 25%));
    --csstools-light-dark-toggle--537: var(--csstools-color-scheme--light) rgba(130, 184, 222, 0.4);
    --color-border-info-banner: var(--csstools-light-dark-toggle--537, rgba(38, 81, 110, 0.4));
    --csstools-light-dark-toggle--399: var(--csstools-color-scheme--light) hsl(204deg 100% 12%);
    --color-background-info-banner: var(--csstools-light-dark-toggle--399, hsl(204deg 58% 92%));
    /* Banners - Success Variant */
    --csstools-light-dark-toggle--400: var(--csstools-color-scheme--light) hsl(135deg 56% 63%);
    --color-text-success-banner: var(--csstools-light-dark-toggle--400, hsl(144deg 88% 16%));
    --csstools-light-dark-toggle--538: var(--csstools-color-scheme--light) rgba(74, 191, 131, 0.4);
    --color-border-success-banner: var(--csstools-light-dark-toggle--538, rgba(27, 100, 60, 0.4));
    --csstools-light-dark-toggle--401: var(--csstools-color-scheme--light) hsl(146deg 90% 7%);
    --color-background-success-banner: var(--csstools-light-dark-toggle--401, hsl(147deg 43% 92%));
    /* Banners - Warning Variant */
    --csstools-light-dark-toggle--402: var(--csstools-color-scheme--light) hsl(40deg 94% 56%);
    --color-text-warning-banner: var(--csstools-light-dark-toggle--402, hsl(34deg 89% 25%));
    --csstools-light-dark-toggle--539: var(--csstools-color-scheme--light) rgba(206, 186, 130, 0.4);
    --color-border-warning-banner: var(--csstools-light-dark-toggle--539, rgba(99, 77, 39, 0.4));
    --csstools-light-dark-toggle--403: var(--csstools-color-scheme--light) hsl(50deg 100% 10%);
    --color-background-warning-banner: var(--csstools-light-dark-toggle--403, hsl(50deg 75% 92%));
    /* Banners - Danger Variant */
    --csstools-light-dark-toggle--404: var(--csstools-color-scheme--light) hsl(7deg 100% 74%);
    --color-text-danger-banner: var(--csstools-light-dark-toggle--404, hsl(359deg 94% 35%));
    --csstools-light-dark-toggle--540: var(--csstools-color-scheme--light) rgba(237, 145, 140, 0.4);
    --color-border-danger-banner: var(--csstools-light-dark-toggle--540, rgba(132, 41, 36, 0.4));
    --csstools-light-dark-toggle--405: var(--csstools-color-scheme--light) hsl(0deg 52% 18%);
    --color-background-danger-banner: var(--csstools-light-dark-toggle--405, hsl(0deg 35% 92%));

    /* Inputs */
    /* Legacy input colors */
    /* TODO: Remove these variables after migrating all the inputs to use the new input colors. */
    --csstools-light-dark-toggle--406: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-legacy-input: var(--csstools-light-dark-toggle--406, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--407: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-border-legacy-input: var(--csstools-light-dark-toggle--407, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--408: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 90%);
    --color-border-legacy-input-focus: var(--csstools-light-dark-toggle--408, hsl(206deg 80% 62% / 80%));
    --csstools-light-dark-toggle--409: var(--csstools-color-scheme--light) hsl(0deg 0% 95%);
    --color-text-input: var(--csstools-light-dark-toggle--409, hsl(0deg 0% 14%));
    /* TODO: Light mode uses browser-default white
       backgrounds; we should extend the use of this
       color variable to 1) explicitly set the
       background color of inputs, and 2) clean up a
       lingering stack of selectors in dark_theme.css. */
    --csstools-light-dark-toggle--410: var(--csstools-color-scheme--light) hsl(225deg 6% 10%);
    --color-background-input: var(--csstools-light-dark-toggle--410, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--411: var(--csstools-color-scheme--light) hsl(225deg 6% 7%);
    --color-background-input-focus: var(--csstools-light-dark-toggle--411, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--541: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.2);
    --color-outline-input: var(--csstools-light-dark-toggle--541, rgba(20, 22, 31, 0.3));
    --csstools-light-dark-toggle--542: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.4);
    --color-outline-input-hover: var(--csstools-light-dark-toggle--542, rgba(20, 22, 31, 0.6));
    --csstools-light-dark-toggle--543: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.5);
    --color-outline-input-focus: var(--csstools-light-dark-toggle--543, rgba(20, 22, 31, 0.8));
    --csstools-light-dark-toggle--544: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.4);
    --color-box-shadow-input-focus: var(--csstools-light-dark-toggle--544, rgba(46, 48, 56, 0.3));
    --csstools-light-dark-toggle--412: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-border-settings-radio-input-parent: var(--csstools-light-dark-toggle--412, hsl(0deg 0% 87%));

    /* .main-view-banner colors */
    --csstools-light-dark-toggle--413: var(--csstools-color-scheme--light) hsl(147deg 51% 80%);
    --color-success-main-view-banner: var(--csstools-light-dark-toggle--413, hsl(147deg 57% 25%));
    --csstools-light-dark-toggle--414: var(--csstools-color-scheme--light) hsl(147deg 100% 8%);
    --color-background-success-main-view-banner: var(--csstools-light-dark-toggle--414, hsl(147deg 43% 92%));
    --csstools-light-dark-toggle--415: var(--csstools-color-scheme--light) hsl(149deg 48% 52% / 40%);
    --color-border-success-main-view-banner: var(--csstools-light-dark-toggle--415, hsl(147deg 57% 25% / 40%));
    --csstools-light-dark-toggle--416: var(--csstools-color-scheme--light) hsl(147deg 51% 55% / 50%);
    --color-success-main-view-banner-close-button: var(--csstools-light-dark-toggle--416, hsl(147deg 57% 25% / 50%));
    --csstools-light-dark-toggle--417: var(--csstools-color-scheme--light) hsl(147deg 51% 55%);
    --color-success-main-view-banner-close-button-hover: var(--csstools-light-dark-toggle--417, hsl(147deg 57% 25%));
    --csstools-light-dark-toggle--418: var(--csstools-color-scheme--light) hsl(147deg 51% 55% / 75%);
    --color-success-main-view-banner-close-button-active: var(--csstools-light-dark-toggle--418, hsl(147deg 57% 25% / 75%));
    --csstools-light-dark-toggle--419: var(--csstools-color-scheme--light) hsl(147deg 51% 55% / 10%);
    --color-background-success-main-view-banner-action-button: var(--csstools-light-dark-toggle--419, hsl(147deg 57% 25% / 10%));
    --csstools-light-dark-toggle--420: var(--csstools-color-scheme--light) hsl(147deg 51% 55% / 15%);
    --color-background-success-main-view-banner-action-button-hover: var(--csstools-light-dark-toggle--420, hsl(147deg 57% 25% / 12%));
    --csstools-light-dark-toggle--421: var(--csstools-color-scheme--light) hsl(147deg 51% 55% / 20%);
    --color-background-success-main-view-banner-action-button-active: var(--csstools-light-dark-toggle--421, hsl(147deg 57% 25% / 15%));
    --csstools-light-dark-toggle--422: var(--csstools-color-scheme--light) hsl(50deg 45% 80%);
    --color-warning-main-view-banner: var(--csstools-light-dark-toggle--422, hsl(38deg 44% 27%));
    --csstools-light-dark-toggle--423: var(--csstools-color-scheme--light) hsl(53deg 100% 11%);
    --color-background-warning-main-view-banner: var(--csstools-light-dark-toggle--423, hsl(50deg 75% 92%));
    --csstools-light-dark-toggle--424: var(--csstools-color-scheme--light) hsl(38deg 44% 60% / 40%);
    --color-border-warning-main-view-banner: var(--csstools-light-dark-toggle--424, hsl(38deg 44% 27% / 40%));
    --csstools-light-dark-toggle--425: var(--csstools-color-scheme--light) hsl(50deg 45% 61% / 50%);
    --color-warning-main-view-banner-close-button: var(--csstools-light-dark-toggle--425, hsl(38deg 44% 27% / 50%));
    --csstools-light-dark-toggle--426: var(--csstools-color-scheme--light) hsl(50deg 45% 61%);
    --color-warning-main-view-banner-close-button-hover: var(--csstools-light-dark-toggle--426, hsl(38deg 44% 27%));
    --csstools-light-dark-toggle--427: var(--csstools-color-scheme--light) hsl(50deg 45% 61% / 75%);
    --color-warning-main-view-banner-close-button-active: var(--csstools-light-dark-toggle--427, hsl(38deg 44% 27% / 75%));
    --csstools-light-dark-toggle--428: var(--csstools-color-scheme--light) hsl(50deg 45% 61%);
    --color-warning-main-view-banner-action-button: var(--csstools-light-dark-toggle--428, inherit);
    --csstools-light-dark-toggle--429: var(--csstools-color-scheme--light) hsl(50deg 45% 61% / 10%);
    --color-background-warning-main-view-banner-action-button: var(--csstools-light-dark-toggle--429, hsl(38deg 44% 27% / 10%));
    --csstools-light-dark-toggle--430: var(--csstools-color-scheme--light) hsl(50deg 45% 61% / 15%);
    --color-background-warning-main-view-banner-action-button-hover: var(--csstools-light-dark-toggle--430, hsl(38deg 44% 27% / 12%));
    --csstools-light-dark-toggle--431: var(--csstools-color-scheme--light) hsl(50deg 45% 61% / 20%);
    --color-background-warning-main-view-banner-action-button-active: var(--csstools-light-dark-toggle--431, hsl(38deg 44% 27% / 15%));
    --csstools-light-dark-toggle--432: var(--csstools-color-scheme--light) hsl(3deg 73% 80%);
    --color-error-main-view-banner: var(--csstools-light-dark-toggle--432, hsl(4deg 58% 33%));
    --csstools-light-dark-toggle--433: var(--csstools-color-scheme--light) hsl(0deg 60% 19%);
    --color-background-error-main-view-banner: var(--csstools-light-dark-toggle--433, hsl(4deg 35% 90%));
    --csstools-light-dark-toggle--434: var(--csstools-color-scheme--light) hsl(3deg 73% 74% / 40%);
    --color-border-error-main-view-banner: var(--csstools-light-dark-toggle--434, hsl(3deg 57% 33% / 40%));
    --csstools-light-dark-toggle--435: var(--csstools-color-scheme--light) hsl(3deg 73% 74% / 50%);
    --color-error-main-view-banner-close-button: var(--csstools-light-dark-toggle--435, hsl(4deg 58% 33% / 50%));
    --csstools-light-dark-toggle--436: var(--csstools-color-scheme--light) hsl(3deg 73% 74%);
    --color-error-main-view-banner-close-button-hover: var(--csstools-light-dark-toggle--436, hsl(4deg 58% 33%));
    --csstools-light-dark-toggle--437: var(--csstools-color-scheme--light) hsl(3deg 73% 74% / 75%);
    --color-error-main-view-banner-close-button-active: var(--csstools-light-dark-toggle--437, hsl(4deg 58% 33% / 75%));
    --csstools-light-dark-toggle--438: var(--csstools-color-scheme--light) hsl(3deg 73% 74%);
    --color-error-main-view-banner-action-button: var(--csstools-light-dark-toggle--438, inherit);
    --csstools-light-dark-toggle--439: var(--csstools-color-scheme--light) hsl(3deg 73% 74% / 10%);
    --color-background-error-main-view-banner-action-button: var(--csstools-light-dark-toggle--439, hsl(3deg 57% 33% / 10%));
    --csstools-light-dark-toggle--440: var(--csstools-color-scheme--light) hsl(3deg 73% 74% / 15%);
    --color-background-error-main-view-banner-action-button-hover: var(--csstools-light-dark-toggle--440, hsl(3deg 57% 33% / 12%));
    --csstools-light-dark-toggle--441: var(--csstools-color-scheme--light) hsl(3deg 73% 74% / 20%);
    --color-background-error-main-view-banner-action-button-active: var(--csstools-light-dark-toggle--441, hsl(3deg 57% 33% / 15%));
    --csstools-light-dark-toggle--442: var(--csstools-color-scheme--light) hsl(205deg 58% 80%);
    --color-info-main-view-banner: var(--csstools-light-dark-toggle--442, hsl(204deg 49% 29%));
    --csstools-light-dark-toggle--443: var(--csstools-color-scheme--light) hsl(204deg 100% 12%);
    --color-background-info-main-view-banner: var(--csstools-light-dark-toggle--443, hsl(204deg 58% 92%));
    --csstools-light-dark-toggle--444: var(--csstools-color-scheme--light) hsl(205deg 58% 69% / 40%);
    --color-border-info-main-view-banner: var(--csstools-light-dark-toggle--444, hsl(204deg 49% 29% / 40%));
    --csstools-light-dark-toggle--445: var(--csstools-color-scheme--light) hsl(205deg 58% 69% / 50%);
    --color-info-main-view-banner-close-button: var(--csstools-light-dark-toggle--445, hsl(204deg 49% 29% / 50%));
    --csstools-light-dark-toggle--446: var(--csstools-color-scheme--light) hsl(205deg 58% 69%);
    --color-info-main-view-banner-close-button-hover: var(--csstools-light-dark-toggle--446, hsl(204deg 49% 29%));
    --csstools-light-dark-toggle--447: var(--csstools-color-scheme--light) hsl(205deg 58% 69% / 75%);
    --color-info-main-view-banner-close-button-active: var(--csstools-light-dark-toggle--447, hsl(204deg 49% 29% / 75%));
    --csstools-light-dark-toggle--448: var(--csstools-color-scheme--light) hsl(205deg 58% 69%);
    --color-info-main-view-banner-action-button: var(--csstools-light-dark-toggle--448, inherit);
    --csstools-light-dark-toggle--449: var(--csstools-color-scheme--light) hsl(205deg 58% 69% / 10%);
    --color-background-info-main-view-banner-action-button: var(--csstools-light-dark-toggle--449, hsl(204deg 49% 29% / 10%));
    --csstools-light-dark-toggle--450: var(--csstools-color-scheme--light) hsl(205deg 58% 69% / 15%);
    --color-background-info-main-view-banner-action-button-hover: var(--csstools-light-dark-toggle--450, hsl(204deg 49% 29% / 12%));
    --csstools-light-dark-toggle--451: var(--csstools-color-scheme--light) hsl(205deg 58% 69% / 20%);
    --color-background-info-main-view-banner-action-button-active: var(--csstools-light-dark-toggle--451, hsl(204deg 49% 29% / 15%));
    --csstools-light-dark-toggle--452: var(--csstools-color-scheme--light) hsl(200deg 100% 50%);
    --color-main-view-banner-action-link: var(--csstools-light-dark-toggle--452, var(--color-text-generic-link));
    --csstools-light-dark-toggle--453: var(--csstools-color-scheme--light) hsl(204deg 63% 18%);
    --color-background-main-view-banner-moving-bar: var(--csstools-light-dark-toggle--453, hsl(204deg 63% 85%));

    /* Info density update UI */
    --csstools-light-dark-toggle--454: var(--csstools-color-scheme--light) hsl(0deg 0% 90% / 20%);
    --color-info-density-control-border: var(--csstools-light-dark-toggle--454, hsl(0deg 0% 0% / 20%));
    --csstools-light-dark-toggle--455: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 80%);
    --color-info-denisty-button-icon: var(--csstools-light-dark-toggle--455, hsl(229deg 9% 36%));
    --csstools-light-dark-toggle--456: var(--csstools-color-scheme--light) hsl(229deg 10% 50% / 30%);
    --color-info-density-button-hover-background: var(--csstools-light-dark-toggle--456, hsl(229deg 9% 36% / 7%));
}

@supports (color: color(display-p3 0 0 0%)) {
:root {
    --gradient-custom-swatch: conic-gradient(from 0deg at 50% 50%, rgb(255, 87, 153) 0%, rgb(255, 103, 61), rgb(215, 140, 0), rgb(168, 164, 0), rgb(0, 192, 40), rgb(0, 184, 161), rgb(0, 177, 207), rgb(72, 162, 255), rgb(155, 138, 255), rgb(238, 64, 255), rgb(255, 87, 153) 100%);
}

@media (color-gamut: rec2020) {
:root {
    --gradient-custom-swatch: conic-gradient(from 0deg at 50% 50%, color(display-p3 1.03576 0.16402 0.58559) 0%, color(display-p3 1.0712 0.22315 -0.16387), color(display-p3 0.95969 0.44471 -0.37436), color(display-p3 0.70114 0.64225 -0.37766), color(display-p3 0.15111 0.76888 -0.07977), color(display-p3 -0.50711 0.80212 0.65378), color(display-p3 -0.51273 0.73019 1.04482), color(display-p3 -0.18305 0.57586 1.26541), color(display-p3 0.59635 0.40747 1.2413), color(display-p3 0.87121 0.27781 0.98482), color(display-p3 1.03576 0.16402 0.58559) 100%);
}
}
}

@supports (background: conic-gradient(in oklch, red 0deg, red 0deg 1deg, red 2deg)) and (color: oklab(0% 0 0%)) {
:root {
    --gradient-custom-swatch: conic-gradient(
        from 0deg at 50% 50% in oklch longer hue,
        rgb(255, 87, 153) 0%,
        rgb(255, 87, 153) 100%
    );
}

@media (color-gamut: rec2020) {
:root {
    --gradient-custom-swatch: conic-gradient(
        from 0deg at 50% 50% in oklch longer hue,
        oklch(70% 0.3 0deg) 0%,
        oklch(70% 0.3 0deg) 100%
    );
}
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-date: light-dark(hsl(0deg 0% 15% / 75%), hsl(0deg 0% 100% / 75%));
    --color-background-private-message-header: light-dark(
        hsl(46deg 35% 93%),
        hsl(46deg 15% 20%)
    );
    --color-background-private-message-content: light-dark(
        hsl(45deg 20% 96%),
        hsl(46deg 7% 16%)
    );
    --color-background-stream-message-content: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 13.5%)
    );
    --color-selected-message-outline: light-dark(
        hsl(217deg 64% 59% / 60%),
        hsl(217deg 64% 59% / 70%)
    );
    --color-message-list-border: light-dark(
        hsl(0deg 0% 0% / 16%),
        hsl(0deg 0% 0% / 40%)
    );
    --color-message-header-contents-border: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-private-message-header-border: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 0% / 48%)
    );
    --color-message-header-contents-border-bottom: light-dark(
        hsl(0deg 0% 0% / 5%),
        hsl(0deg 0% 0% / 50%)
    );
    --color-private-message-header-border-bottom: light-dark(
        hsl(0deg 0% 0% / 7%),
        hsl(0deg 0% 0% / 37%)
    );
    --color-message-header-icon-non-interactive: light-dark(
        hsl(0deg 0% 0% / 30%),
        hsl(0deg 0% 100% / 30%)
    );
    --color-message-header-icon-interactive: light-dark(
        hsl(0deg 0% 0%),
        hsl(0deg 0% 100%)
    );
    --color-background: light-dark(hsl(0deg 0% 94%), hsl(0deg 0% 11%));
    --color-background-widget-input: light-dark(
        hsl(0deg 0% 100%),
        hsl(225deg 6% 10%)
    );
    --color-background-widget-button: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-navbar: light-dark(hsl(0deg 0% 97%), hsl(0deg 0% 13%));
    --color-text-sidebar-row: light-dark(
        hsl(0deg 0% 20%),
        hsl(0deg 0% 100% / 85%)
    );
    --color-text-active-narrow-filter: light-dark(
        hsl(0deg 0% 15%),
        hsl(0deg 0% 90%)
    );
    --color-background-active-narrow-filter: light-dark(
        hsl(0deg 0% 100%),
        rgb(46, 46, 46)
    );
    --color-background-hover-narrow-filter: light-dark(
        hsl(0deg 0% 97%),
        rgb(46, 46, 46)
    );
    --color-shadow-sidebar-row-hover: light-dark(
        hsl(0deg 0% 0% / 30%),
        hsl(0deg 0% 100% / 30%)
    );
    --color-background-sidebar-action-hover: light-dark(
        hsl(240deg 100% 93%),
        hsl(240deg 25% 35%)
    );
    --color-background-navigation-item-hover: light-dark(
        hsl(240deg 100% 50% / 7%),
        hsl(240deg 100% 75% / 20%)
    );
    --color-navbar-bottom-border: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-masked-unread-marker: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 30%)
    );
    --color-active-row-modal: light-dark(
        hsl(0deg 0% 98%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-overlay: light-dark(
        hsl(0deg 0% 13% / 80%),
        hsl(212deg 28% 8% / 75%)
    );
    --color-background-non-empty-overlay-indicator: light-dark(
        hsl(0deg 0% 100% / 90%),
        hsl(212deg 28% 8% / 75%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-background-modal: light-dark(#ededed, #242424);
    --color-background-modal-bar: light-dark(#f5f5f5, #333);
    --color-border-modal: light-dark(
        rgba(140, 140, 140, 0.25),
        rgba(255, 255, 255, 0.08)
    );
    --color-border-modal-bar: light-dark(
        rgba(194, 194, 194, 0.8),
        rgba(255, 255, 255, 0.05)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-border-modal-footer: light-dark(
        hsl(0deg 0% 87%),
        hsl(0deg 0% 100% / 20%)
    );
    --color-modal-close-button: light-dark(inherit, hsl(236deg 33% 90%));
    --color-background-modal-close-button-hover: light-dark(
        hsl(0deg 0% 90%),
        hsl(0deg 0% 91% / 10%)
    );
    --color-modal-selectable-icon: light-dark(
        hsl(240deg 30% 40%),
        hsl(240deg 35% 68%)
    );
    --color-modal-selectable-icon-hover: light-dark(
        hsl(240deg 100% 15%),
        hsl(240deg 100% 90%)
    );
    --background-color-modal-selectable-icon-hover: light-dark(
        hsl(240deg 100% 50% / 7%),
        hsl(240deg 100% 75% / 20%)
    );
    --color-background-pill-container-without-placeholder: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-unmuted-or-followed-topic-list-item: light-dark(
        hsl(0deg 0% 20%),
        hsl(236deg 33% 90%)
    );
    --color-topic-indent-border: light-dark(
        hsl(0deg 0% 0% / 19%),
        hsl(0deg 0% 100% / 19%)
    );
    --color-background-search: light-dark(hsl(0deg 0% 100%), hsl(0deg 0% 17%));
    --color-background-search-collapsed: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 20%)
    );
    --color-background-search-option-hover: light-dark(
        hsl(0deg 0% 94%),
        hsl(0deg 0% 20%)
    );
    --color-search-box-hover-shadow: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 0% / 30%)
    );
    --color-search-dropdown-top-border: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 0% / 35%)
    );
    --color-search-icons: light-dark(hsl(0deg 0% 0%), hsl(0deg 0% 78%));
    --color-background-image-loader: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 100% / 10%)
    );
    --color-background-popover-menu: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 17%)
    );
    --color-border-popover-menu-separator: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 0% / 40%)
    );
    --color-hotkey-hint: light-dark(hsl(227deg 78% 59%), hsl(225deg 100% 84%));
    --color-popover-hotkey-hint: light-dark(hsl(0deg 0% 40%), hsl(0deg 0% 65%));
    --color-border-popover-hotkey-hint: light-dark(
        hsl(0deg 0% 40% / 50%),
        hsl(0deg 0% 65% / 50%)
    );
    --color-background-hover-popover-menu: light-dark(
        hsl(220deg 12% 5% / 5%),
        hsl(220deg 12% 95% / 5%)
    );
    --color-background-active-popover-menu: light-dark(
        hsl(220deg 12% 5% / 7%),
        hsl(220deg 12% 95% / 7%)
    );
    --color-border-popover-menu: light-dark(
        hsl(0deg 0% 0% / 40%),
        hsl(0deg 0% 0%)
    );
    --color-border-personal-menu-avatar: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 100% / 20%)
    );
    --color-background-unread-counter-prominent: light-dark(
        hsl(240deg 10% 50% / 70%),
        hsl(240deg 18.37% 34.42%)
    );
    --color-background-unread-counter-normal: light-dark(
        hsl(240deg 10% 50% / 20%),
        hsl(240deg 10% 50% / 35%)
    );
    --color-unread-counter-normal: light-dark(
        hsl(0deg 0% 0% / 90%),
        hsl(0deg 0% 100% / 85%)
    );
    --color-unread-counter-quiet: light-dark(
        hsl(240deg 15% 50%),
        hsl(240deg 15% 65%)
    );
    --color-border-add-subscription-button-focus: light-dark(
        hsl(0deg 0% 20%),
        hsl(0deg 0% 67%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-background-unread-counter-no-alpha: light-dark(
        rgb(215, 215, 220),
        rgb(58, 58, 67)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-unread-counter-dot: light-dark(
        hsl(240deg 30% 40%),
        hsl(240deg 35% 68%)
    );
    --color-border-unread-counter: light-dark(
        var(--color-background-unread-counter),
        hsl(105deg 2% 50%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-border-unread-counter-popover-menu: light-dark(
        inherit,
        var(--color-border-unread-counter)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-tab-picker-container: light-dark(
        hsl(0deg 0% 0% / 7%),
        hsl(0deg 0% 0% / 30%)
    );
    --color-background-tab-picker-selected-tab: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 100% / 7%)
    );
    --color-outline-tab-picker-tab-option: light-dark(
        hsl(0deg 0% 0% / 30%),
        hsl(0deg 0% 100% / 12%)
    );
    --color-background-tab-picker-tab-option-hover: light-dark(
        hsl(0deg 0% 100% / 60%),
        hsl(0deg 0% 100% / 5%)
    );
    --color-background-tab-picker-tab-option-active: light-dark(
        hsl(0deg 0% 100% / 35%),
        hsl(0deg 0% 100% / 3%)
    );
    --color-background-popover: light-dark(hsl(0deg 0% 100%), hsl(0deg 0% 17%));
    --color-background-alert-word: light-dark(
        hsl(18deg 100% 84%),
        hsl(22deg 70% 35%)
    );
    --color-buddy-list-avatar-loading: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 100% / 10%)
    );
    --color-border-sidebar: light-dark(hsl(0deg 0% 87%), hsl(0deg 0% 0% / 20%));
    --color-text-sidebar-base: light-dark(hsl(0deg 0% 0%), hsl(0deg 0% 100%));
    --color-border-sidebar-subheader: light-dark(
        hsl(0deg 0% 0% / 15%),
        hsl(0deg 0% 100% / 15%)
    );
    --color-request-progress-status-alert-text: light-dark(
        hsl(0deg 0% 20%),
        hsl(236deg 33% 90%)
    );
    --color-background-tip: light-dark(
        hsl(46deg 63% 95%),
        hsl(46deg 28% 38% / 27%)
    );
    --color-border-tip: light-dark(hsl(49deg 20% 84%), hsl(49deg 38% 46%));
    --color-box-shadow-animated-purple-button-focus: light-dark(
        hsl(235deg 18% 7%),
        hsl(0deg 0% 100% / 66.6%)
    );
    --color-background-animated-button: light-dark(
        hsl(0deg 0% 90%),
        hsl(211deg 29% 14%)
    );
    --color-animated-button-text: light-dark(
        hsl(0deg 0% 0%),
        hsl(0deg 0% 100%)
    );
    --color-invalid-input-border: light-dark(
        hsl(3deg 57% 33%),
        hsl(3deg 73% 74%)
    );
    --color-invalid-input-box-shadow: light-dark(
        hsl(3deg 57% 33%),
        hsl(3deg 73% 74%)
    );
    --color-background-white-box: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-stream-group-row-checked-icon-disabled: light-dark(
        hsl(240deg 96% 68% / 100%),
        hsl(240deg 96% 68% / 50%)
    );
    --color-stream-group-row-plus-icon: light-dark(
        hsl(0deg 0% 72%),
        hsl(218deg 14% 33%)
    );
    --color-stream-group-row-plus-icon-hover: light-dark(
        hsl(0deg 0% 27%),
        hsl(230deg 11% 67%)
    );
    --color-stream-group-row-plus-icon-disabled: light-dark(
        hsl(0deg 0% 87% / 100%),
        hsl(218deg 14% 33% / 50%)
    );
    --color-border-recent-view-row: light-dark(
        hsl(0deg 0% 87%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-border-recent-view-table: light-dark(
        hsl(0deg 0% 0% / 60%),
        hsl(0deg 0% 88%)
    );
    --color-background-recent-view-row: light-dark(
        hsl(100deg 11% 96%),
        hsl(0deg 0% 11%)
    );
    --color-background-recent-view-row-hover: light-dark(
        hsl(210deg 100% 97%),
        hsl(208deg 26% 11% / 60%)
    );
    --color-background-recent-view-unread-row: light-dark(
        hsl(0deg 0% 100%),
        hsl(212deg 30% 22% / 40%)
    );
    --color-background-recent-view-unread-row-hover: light-dark(
        hsl(210deg 100% 97%),
        hsl(212deg 30% 22% / 60%)
    );
    --color-recent-view-link: light-dark(
        hsl(205deg 47% 42%),
        hsl(206deg 89% 74%)
    );
    --color-recent-view-link-hover: light-dark(
        hsl(214deg 40% 58%),
        hsl(208deg 64% 52%)
    );
    --color-background-recent-filters-button-focus: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0% / 50%)
    );
    --color-background-recent-filters-button-disabled: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 50%)
    );
    --color-border-recent-filters-button-disabled: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0%)
    );
    --color-recent-view-participant-overflow-text: light-dark(
        hsl(0deg 0% 0%),
        hsl(0deg 0% 100%)
    );
    --color-background-recent-view-participant-overflow: light-dark(
        hsl(0deg 0% 88%),
        hsl(211deg 18% 25%)
    );
    --color-background-recent-view-selected: light-dark(
        hsl(0deg 11% 93%),
        hsl(228deg 11% 17%)
    );
    --color-background-recent-view-table-thead-th: light-dark(
        hsl(0deg 0% 100%),
        hsl(228deg 11% 17%)
    );
    --color-background-recent-view-table-thead-sort-header: light-dark(
        hsl(0deg 0% 95%),
        hsl(211deg 29% 14%)
    );
    --color-compose-box-background: light-dark(
        hsl(232deg 30% 92%),
        hsl(228deg 11% 17%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-compose-message-content-background: light-dark(
        hsl(0deg 0% 100%),
        color-mix(
            in srgb,
            var(--color-compose-box-background),
            hsl(0deg 0% 0%) 20%
        )
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-compose-message-content-background-over-limit: light-dark(
        hsl(3deg 35% 90%),
        hsl(3deg 50% 12%)
    );
    --color-compose-message-content-background-approaching-limit: light-dark(
        hsl(50deg 75% 92%),
        hsl(50deg 75% 12%)
    );
    --color-border-compose-content: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 0% / 40%)
    );
    --color-compose-send-button-focus-shadow: light-dark(
        hsl(230deg 100% 20%),
        hsl(0deg 0% 100% / 80%)
    );
    --color-compose-send-control-button: light-dark(
        hsl(240deg 30% 50% / 80%),
        hsl(240deg 30% 70%)
    );
    --color-compose-send-control-button-interactive: light-dark(
        hsl(240deg 30% 50%),
        var(--color-compose-send-control-button)
    );
    --color-compose-send-control-button-background-interactive: light-dark(
        hsl(240deg 100% 30% / 5%),
        hsl(235deg 100% 70% / 11%)
    );
    --color-compose-recipient-box-background-color: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-compose-recipient-box-border-color: light-dark(
        rgb(207, 208, 215),
        hsl(0deg 0% 0% / 80%)
    );
    --color-compose-recipient-box-hover: light-dark(
        hsl(0deg 0% 69%),
        hsl(0deg 0% 100% / 12%)
    );
    --color-compose-recipient-box-has-focus: light-dark(
        hsl(0deg 0% 57%),
        hsl(0deg 0% 100% / 27%)
    );
    --color-compose-collapsed-reply-button-area-background: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-compose-collapsed-reply-button-area-background-interactive: light-dark(
        var(--color-compose-collapsed-reply-button-area-background),
        hsl(0deg 0% 0% / 15%)
    );
    --color-compose-collapsed-reply-button-area-border: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-compose-collapsed-reply-button-area-border-interactive: light-dark(
        hsl(0deg 0% 60%),
        var(--color-compose-collapsed-reply-button-area-border)
    );
    --color-compose-embedded-button-text-color: light-dark(
        hsl(231deg 20% 55%),
        hsl(231deg 30% 65%)
    );
    --color-compose-embedded-button-text-color-hover: light-dark(
        hsl(231deg 20% 30%),
        hsl(231deg 30% 70%)
    );
    --color-compose-embedded-button-background-hover: light-dark(
        hsl(231deg 100% 90% / 50%),
        hsl(235deg 100% 70% / 11%)
    );
    --color-compose-embedded-button-background-interactive: light-dark(
        hsl(231deg 100% 90% / 90%),
        hsl(235deg 100% 70% / 20%)
    );
    --color-background-compose-new-message-button: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-compose-new-message-button-hover: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 15%)
    );
    --color-background-compose-new-message-button-active: light-dark(
        hsl(0deg 0% 95%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-border-compose-new-message-button: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-border-compose-new-message-button-hover: light-dark(
        hsl(0deg 0% 60%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-border-compose-new-message-button-active: light-dark(
        hsl(0deg 0% 60%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-limit-indicator: light-dark(
        hsl(38deg 100% 36%),
        hsl(38deg 100% 70%)
    );
    --color-limit-indicator-over-limit: light-dark(
        hsl(3deg 80% 40%),
        hsl(3deg 80% 60%)
    );
    --color-narrow-to-compose-recipients-background: light-dark(
        hsl(227deg 100% 70% / 25%),
        hsl(227deg 80% 60% / 25%)
    );
    --color-narrow-to-compose-recipients-background-hover: light-dark(
        hsl(227deg 100% 70% / 35%),
        hsl(227deg 80% 60% / 35%)
    );
    --color-narrow-to-compose-recipients: light-dark(
        hsl(227deg 76% 64%),
        hsl(224deg 28% 81%)
    );
    --color-narrow-to-compose-recipients-hover: light-dark(
        hsl(227deg 78% 59%),
        hsl(221deg 100% 95%)
    );
    --color-composebox-button: light-dark(
        hsl(0deg 100% 0% / 55%),
        hsl(0deg 100% 100% / 55%)
    );
    --color-composebox-button-background: light-dark(
        hsl(0deg 100% 100% / 60%),
        hsl(231deg 8% 13.5% / 80%)
    );
    --color-composebox-button-background-hover: light-dark(
        hsl(0deg 0% 95%),
        hsl(231deg 12% 18%)
    );
    --color-message-formatting-controls-container: light-dark(
        hsl(232deg 30% 96%),
        hsl(0deg 0% 0% / 8%)
    );
    --color-message-content-container-border: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 0% / 80%)
    );
    --color-message-content-container-border-focus: light-dark(
        hsl(0deg 0% 57%),
        hsl(0deg 0% 100% / 27%)
    );
    --color-compose-control-button-background-hover: light-dark(
        hsl(0deg 0% 0% / 5%),
        hsl(0deg 0% 100% / 5%)
    );
    --color-compose-formatting-button-divider: light-dark(
        hsl(0deg 0% 75%),
        hsl(236deg 33% 90% / 25%)
    );
    --color-compose-focus-ring: light-dark(
        var(--color-outline-focus),
        hsl(0deg 0% 67%)
    );
    --gradient-compose-scroll-backward: linear-gradient(
        90deg,
        light-dark(hsl(234deg 100% 95%), hsl(234deg 21% 24%)) 35%,
        light-dark(hsl(234deg 100% 95%), hsl(234deg 21% 24% / 76.9%)) 50%,
        transparent 100%
    );
    --gradient-compose-scroll-backward-hover: linear-gradient(
        90deg,
        light-dark(hsl(234deg 100% 93%), hsl(234deg 30% 28%)) 35%,
        light-dark(hsl(234deg 100% 93%), hsl(234deg 30% 28% / 76.9%)) 50%,
        transparent 100%
    );
    --gradient-compose-scroll-backward-active: linear-gradient(
        90deg,
        light-dark(hsl(234deg 100% 90%), hsl(234deg 35% 30%)) 45%,
        transparent 100%
    );
    --gradient-compose-scroll-forward: linear-gradient(
        90deg,
        transparent 0%,
        light-dark(hsl(234deg 100% 95%), hsl(234deg 21% 24% / 76.9%)) 50%,
        light-dark(hsl(234deg 100% 95%), hsl(234deg 21% 24%)) 65%
    );
    --gradient-compose-scroll-forward-hover: linear-gradient(
        90deg,
        transparent 0%,
        light-dark(hsl(234deg 100% 93%), hsl(234deg 30% 28% / 76.9%)) 50%,
        light-dark(hsl(234deg 100% 93%), hsl(234deg 30% 28%)) 65%
    );
    --gradient-compose-scroll-forward-active: linear-gradient(
        90deg,
        transparent 0%,
        light-dark(hsl(234deg 100% 90%), hsl(234deg 35% 30%)) 55%
    );
    --color-text-default: light-dark(hsl(0deg 0% 20%), hsl(0deg 0% 87%));
    --color-text-message-default: light-dark(
        hsl(0deg 0% 15%),
        var(--color-text-default)
    );
    --color-text-message-blockquote-border: light-dark(
        hsl(0deg 0% 15% / 25%),
        hsl(0deg 0% 87% / 40%)
    );
    --color-text-message-view-header: light-dark(
        hsl(0deg 0% 20% / 100%),
        hsl(0deg 0% 100% / 85%)
    );
    --color-text-message-header: light-dark(
        hsl(0deg 0% 15%),
        hsl(0deg 0% 100% / 85%)
    );
    --color-text-dropdown-input: light-dark(
        hsl(0deg 0% 13.33%),
        hsl(0deg 0% 95%)
    );
    --color-text-self-direct-mention: light-dark(
        hsl(240deg 52% 45% / 100%),
        hsl(240deg 100% 88% / 100%)
    );
    --color-text-self-group-mention: light-dark(
        hsl(183deg 52% 26% / 100%),
        hsl(184deg 52% 63% / 100%)
    );
    --color-text-show-more-less-button: light-dark(
        hsl(240deg 52% 53%),
        hsl(240deg 30% 65%)
    );
    --color-text-search: light-dark(hsl(0deg 0% 35%), hsl(0deg 0% 100% / 75%));
    --color-text-search-hover: light-dark(hsl(0deg 0% 0%), hsl(0deg 0% 100%));
    --color-text-placeholder: light-dark(hsl(0deg 0% 45%), hsl(0deg 0% 55%));
    --color-text-search-placeholder: light-dark(
        hsl(0deg 0% 50%),
        hsl(0deg 0% 100% / 50%)
    );
    --color-text-popover-menu: light-dark(
        hsl(0deg 0% 15%),
        hsl(0deg 0% 100% / 80%)
    );
    --color-text-full-name: light-dark(hsl(0deg 0% 15%), hsl(0deg 0% 100%));
    --color-text-item: light-dark(hsl(0deg 0% 40%), hsl(0deg 0% 50%));
    --color-text-personal-menu-no-status: light-dark(
        hsl(0deg 0% 50%),
        hsl(0deg 0% 100% 35%)
    );
    --color-text-personal-menu-some-status: light-dark(
        hsl(0deg 0% 40%),
        hsl(0deg 0% 100% 50%)
    );
    --color-text-sidebar-heading: light-dark(
        hsl(216deg 65% 20%),
        hsl(216deg 50% 75%)
    );
    --color-text-sidebar-action-heading: light-dark(
        hsl(240deg 30% 40%),
        hsl(240deg 35% 68%)
    );
    --color-text-sidebar-action-heading-hover: light-dark(
        hsl(240deg 100% 15%),
        hsl(240deg 100% 90%)
    );
    --color-text-sidebar-popover-menu: light-dark(
        hsl(0deg 0% 20%),
        hsl(236deg 33% 90%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-text-user-card-secondary: light-dark(
        var(--grey-550),
        var(--grey-400)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-url-hover: light-dark(
        hsl(200deg 100% 25%),
        hsl(200deg 79% 66%)
    );
    --color-text-settings-field-hint: light-dark(
        hsl(0deg 0% 57%),
        hsl(0deg 0% 52%)
    );
    --color-text-clear-search-button: light-dark(
        hsl(0deg 0% 80%),
        hsl(236deg 33% 80%)
    );
    --color-text-clear-search-button-hover: light-dark(
        hsl(0deg 0% 0%),
        hsl(0deg 0% 100%)
    );
    --color-text-settings-plus-button: light-dark(
        hsl(0deg 0% 0%),
        hsl(0deg 0% 100%)
    );
    --color-background-settings-plus-button: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-border-settings-plus-button: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-user-profile-field-name: light-dark(
        hsl(0deg 0% 20%),
        hsl(236deg 33% 90%)
    );
    --color-border-user-profile-table: light-dark(
        hsl(0deg 0% 87%),
        hsl(0deg 0% 0% / 40%)
    );
    --color-border-manage-profile-footer: light-dark(
        hsl(0deg 0% 87%),
        hsl(0deg 0% 100% / 20%)
    );
    --color-text-link: light-dark(hsl(210deg 94% 42%), hsl(200deg 100% 50%));
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-text-link-decoration: light-dark(
        rgba(6, 107, 208, 0.2),
        rgba(0, 170, 255, 0.2)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-link-hover: light-dark(
        hsl(212deg 100% 50%),
        hsl(200deg 100% 60%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-text-link-decoration-hover: light-dark(
        rgba(0, 119, 255, 0.7),
        rgba(51, 187, 255, 0.7)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-link-active: light-dark(
        hsl(212deg 100% 30%),
        hsl(200deg 100% 50%)
    );
    --color-text-generic-link-interactive: light-dark(
        #005580,
        hsl(200deg 79% 66%)
    );
    --color-background-tippy-box: light-dark(hsl(0deg 0% 20%), hsl(0deg 0% 0%));
    --color-background-dropdown-widget: light-dark(
        hsl(240deg 20% 98%),
        hsl(240deg 5% 16%)
    );
    --color-border-dropdown-widget: light-dark(
        hsl(0deg 0% 0% / 40%),
        hsl(0deg 0% 0%)
    );
    --color-border-dropdown-widget-button: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-background-dropdown-widget-button: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-disabled-dropdown-widget-button: light-dark(
        hsl(0deg 0% 93%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-poll-vote: light-dark(hsl(156deg 41% 40%), hsl(185deg 35% 65%));
    --color-poll-vote-hover: light-dark(
        hsl(156deg 41% 40%),
        hsl(185deg 50% 70%)
    );
    --color-poll-vote-focus: light-dark(
        hsl(156deg 41% 40%),
        hsl(185deg 50% 65%)
    );
    --color-border-poll-vote: light-dark(
        hsl(156deg 28% 70%),
        hsl(185deg 35% 35%)
    );
    --color-border-poll-vote-hover: light-dark(
        hsl(156deg 30% 50%),
        hsl(185deg 40% 40%)
    );
    --color-border-poll-vote-focus: light-dark(
        hsl(156deg 30% 50%),
        hsl(185deg 40% 50%)
    );
    --color-background-poll-vote-hover: light-dark(
        var(--color-background-widget-button),
        hsl(185deg 20% 20%)
    );
    --color-background-poll-vote-focus: light-dark(
        hsl(156deg 41% 90%),
        hsl(185deg 40% 35%)
    );
    --color-poll-names: light-dark(hsl(0deg 0% 45%), hsl(236deg 15% 70%));
    --color-border-todo-checkbox: light-dark(
        hsl(156deg 28% 70%),
        rgba(69, 153, 161, 0.7)
    );
    --color-border-todo-checkbox-hover: light-dark(
        hsl(156deg 30% 50%),
        hsl(185deg 40% 35%)
    );
    --color-border-todo-checkbox-checked: light-dark(
        hsl(156deg 41% 40%),
        hsl(185deg 40% 45%)
    );
    --color-background-todo-checkbox-hover: light-dark(
        transparent,
        hsl(185deg 20% 20%)
    );
    --color-background-todo-checkbox-checked: light-dark(
        hsl(156deg 41% 40%),
        hsl(185deg 40% 45%)
    );
    --color-kbd-background: light-dark(hsl(0deg 0% 98%), hsl(211deg 29% 14%));
    --color-kbd-border: light-dark(hsl(0deg 0% 80%), hsl(211deg 29% 14%));
    --color-kbd-text: light-dark(hsl(0deg 0% 20%), hsl(236deg 33% 90%));
    --color-kbd-enter-sends: light-dark(hsl(0deg 0% 40%), hsl(236deg 33% 90%));
    --color-realm-enable-spectator-access-link: light-dark(
        hsl(0deg 0% 20%),
        hsl(236deg 33% 90%)
    );
    --color-background-stream-email: light-dark(
        hsl(0deg 0% 98%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-integration-url: light-dark(
        transparent,
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-tbody-th-odd: light-dark(
        transparent,
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-rendered-markdown-thead: light-dark(
        hsl(0deg 0% 93%),
        hsl(0deg 0% 0% / 50%)
    );
    --color-border-rendered-markdown-table: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 33%)
    );
    --color-background-tab-switcher-ind-tab: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-tab-switcher-ind-tab-selected: light-dark(
        hsl(0deg 0% 53%),
        hsl(0deg 0% 0% / 50%)
    );
    --color-border-tab-switcher-ind-tab: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-border-tab-switcher-ind-tab-selected: light-dark(
        hsl(0deg 0% 47%),
        hsl(0deg 0% 0% / 90%)
    );
    --color-text-tab-switcher-ind-tab-disabled: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 42% / 90%)
    );
    --color-border-tab-switcher-ind-tab-disabled: light-dark(
        hsl(0deg 0% 87%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-background-table-header: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0%)
    );
    --color-background-table-header-sortable-hover: light-dark(
        hsl(0deg 0% 95%),
        hsl(211deg 29% 14%)
    );
    --color-border-table-striped: light-dark(
        hsl(0deg 0% 87%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-border-table-bordered: light-dark(
        hsl(0deg 0% 87%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-border-table-subscriber-list: light-dark(
        hsl(0deg 0% 87%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-markdown-code-text: light-dark(
        hsl(0deg 0% 0%),
        hsl(0deg 0% 100% / 85%)
    );
    --color-markdown-code-background: light-dark(
        hsl(0deg 0% 0% / 6%),
        hsl(0deg 0% 100% / 8%)
    );
    --color-markdown-code-background-mentions: light-dark(
        hsl(0deg 0% 0% / 7%),
        var(--color-markdown-code-background)
    );
    --color-markdown-pre-background: light-dark(
        hsl(0deg 0% 0% / 4%),
        hsl(0deg 0% 100% / 4%)
    );
    --color-markdown-pre-background-mentions: light-dark(
        hsl(0deg 0% 0% / 4%),
        hsl(0deg 0% 100% / 5%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-markdown-pre-border-mentions: light-dark(
        transparent,
        var(--color-markdown-pre-border)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-markdown-link: light-dark(
        hsl(200deg 100% 40%),
        var(--color-text-generic-link)
    );
    --color-markdown-link-hover: light-dark(
        hsl(200deg 100% 25%),
        var(--color-text-generic-link-interactive)
    );
    --color-background-image-thumbnail: light-dark(
        hsl(0deg 0% 0% / 3%),
        hsl(0deg 0% 100% / 3%)
    );
    --color-background-image-thumbnail-hover: light-dark(
        hsl(0deg 0% 0% / 30%),
        hsl(0deg 0% 100% / 45%)
    );
    --color-icon-bot: light-dark(
        hsl(180deg 8% 65% / 100%),
        hsl(180deg 5% 50% / 100%)
    );
    --color-message-action-visible: light-dark(
        hsl(216deg 43% 20% / 50%),
        hsl(217deg 41% 90% / 50%)
    );
    --color-message-action-interactive: light-dark(
        hsl(216deg 43% 20% / 100%),
        hsl(217deg 41% 90% / 100%)
    );
    --color-left-sidebar-follow-icon-hover: light-dark(
        hsl(0deg 0% 0%),
        hsl(0deg 0% 100%)
    );
    --color-left-sidebar-navigation-icon: light-dark(
        hsl(240deg 30% 40%),
        hsl(240deg 35% 68%)
    );
    --color-left-sidebar-heads-up-icon: light-dark(
        hsl(240deg 30% 40%),
        hsl(240deg 35% 68%)
    );
    --color-left-sidebar-heads-up-icon-hover: light-dark(
        hsl(240deg 100% 15%),
        hsl(240deg 100% 90%)
    );
    --color-left-sidebar-dm-partners-icon: light-dark(
        hsl(240deg 30% 60%),
        hsl(240deg 35% 58%)
    );
    --background-color-left-sidebar-heads-up-icon-hover: light-dark(
        hsl(240deg 100% 50% / 7%),
        hsl(240deg 100% 75% / 20%)
    );
    --color-vdots-hint: light-dark(hsl(240deg 30% 80%), hsl(240deg 35% 38%));
    --color-vdots-visible: light-dark(hsl(240deg 30% 40%), hsl(240deg 35% 68%));
    --color-vdots-hover: light-dark(hsl(240deg 100% 15%), hsl(240deg 100% 90%));
    --color-tab-picker-icon: light-dark(hsl(200deg 100% 40%), hsl(0deg 0% 80%));
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-user-circle-active: light-dark(#43a35e, #4cdc75);
    --color-user-circle-idle: light-dark(#f5b266, #ae640a);
    --color-user-circle-offline: light-dark(#bcc0cf, #545764);
    --color-user-circle-offline-typeahead-highlight: light-dark(
        #adb2c5,
        #646671
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: light-dark(red, red)) {
:root {
    --gradient-user-circle-idle: linear-gradient(
        to right,
        var(--color-user-circle-idle) 5%,
        light-dark(
                color-mix(
                    in srgb,
                    var(--color-user-circle-idle) 78.9%,
                    transparent
                ),
                var(--color-user-circle-idle)
            )
            25%,
        transparent 100%
    );
    --gradient-user-circle-idle-avatar: linear-gradient(
        to right,
        var(--color-user-circle-idle) 5%,
        light-dark(
                color-mix(
                    in srgb,
                    var(--color-user-circle-idle) 78.9%,
                    var(--color-background)
                ),
                var(--color-user-circle-idle)
            )
            25%,
        var(--color-background) 100%
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-copy-button: light-dark(
        
            rgba(84, 87, 100, 0.7),
        
            rgba(171, 174, 186, 0.7)
    );
    --color-copy-button-hover: light-dark(var(--grey-600), var(--grey-300));
    --color-copy-button-square-bg-hover: light-dark(
        
            rgba(84, 87, 100, 0.07),
        
            rgba(144, 147, 162, 0.14)
    );
    --color-copy-button-active: light-dark(
        
            rgba(84, 87, 100, 0.7),
        
            rgba(171, 174, 186, 0.7)
    );
    --color-copy-button-square-active: light-dark(
        var(--grey-600),
        var(--grey-300)
    );
    --color-copy-button-square-bg-active: light-dark(
        
            rgba(84, 87, 100, 0.11),
        
            rgba(144, 147, 162, 0.18)
    );
    --color-copy-button-success: light-dark(var(--green-500), var(--green-300));
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-message-reaction-border: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 100% / 15%)
    );
    --color-message-reaction-border-reacted: light-dark(
        hsl(0deg 0% 0% / 45%),
        hsl(0deg 0% 100% / 70%)
    );
    --color-message-reaction-background: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 30%)
    );
    --color-message-reaction-background-reacted: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 80%)
    );
    --color-message-reaction-background-hover: light-dark(
        hsl(210deg 30% 96%),
        hsl(0deg 0% 100% / 10%)
    );
    --color-message-reaction-shadow-inner: light-dark(
        hsl(210deg 50% 50% / 8%),
        transparent /* No shadow in dark mode. */
    );
    --color-message-reaction-text: light-dark(
        hsl(210deg 20% 25% / 100%),
        hsl(0deg 0% 100% / 75%)
    );
    --color-message-reaction-text-reacted: light-dark(
        hsl(210deg 20% 20% / 100%),
        hsl(0deg 0% 100% / 85%)
    );
    --color-message-reaction-button-text: light-dark(
        hsl(210deg 20% 20% / 60%),
        var(--color-message-reaction-text)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-message-reaction-button-text-hover: light-dark(
        var(--color-message-reaction-text),
        var(--color-message-reaction-text-reacted)
    );
    --color-message-reaction-button-background-hover: light-dark(
        var(--color-message-reaction-background),
        var(--color-message-reaction-background-hover)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-zulip-logo: light-dark(
        hsl(0deg 0% 0% / 34%),
        hsl(0deg 0% 100% / 50%)
    );
    --color-zulip-logo-loading: light-dark(hsl(0deg 0% 27%), hsl(0deg 0% 100%));
    --color-recent-view-loading-spinner: light-dark(
        hsl(0deg 0% 27%),
        hsl(0deg 0% 100% / 60%)
    );
    --color-zulip-logo-z: light-dark(hsl(0deg 0% 100%), hsl(214deg 27% 18%));
    --color-show-more-less-button-background: light-dark(
        hsl(240deg 44% 56% / 8%),
        hsl(240deg 44% 56% / 15%)
    );
    --color-show-more-less-button-background-hover: light-dark(
        hsl(240deg 44% 56% / 15%),
        hsl(240deg 44% 56% / 25%)
    );
    --color-show-more-less-button-background-active: light-dark(
        hsl(240deg 44% 56% / 20%),
        hsl(240deg 44% 56% / 15%)
    );
    --color-message-edit-history-text-inserted: light-dark(
        hsl(122deg 72% 30%),
        hsl(122deg 100% 81%)
    );
    --color-message-edit-history-background-inserted: light-dark(
        hsl(120deg 64% 95%),
        hsl(120deg 64% 95% / 30%)
    );
    --color-message-edit-history-text-deleted: light-dark(
        hsl(0deg 100% 50%),
        hsl(0deg 90% 67%)
    );
    --color-message-edit-history-background-deleted: light-dark(
        hsl(7deg 90% 92%),
        hsl(7deg 54% 62% / 38%)
    );
    --color-background-direct-mention: light-dark(
        hsl(240deg 52% 95%),
        hsl(240deg 13% 16%)
    );
    --color-background-group-mention: light-dark(
        hsl(180deg 40% 94%),
        hsl(180deg 13% 14%)
    );
    --color-background-text-direct-mention: light-dark(
        hsl(240deg 70% 70% / 20%),
        hsl(240deg 52% 60% / 25%)
    );
    --color-background-text-hover-direct-mention: light-dark(
        hsl(240deg 70% 70% / 30%),
        hsl(240deg 52% 60% / 45%)
    );
    --color-background-text-group-mention: light-dark(
        hsl(183deg 60% 45% / 18%),
        hsl(183deg 52% 40% / 20%)
    );
    --color-background-text-hover-group-mention: light-dark(
        hsl(183deg 60% 45% / 30%),
        hsl(183deg 52% 40% / 30%)
    );
    --color-background-input-pill: light-dark(
        hsl(237deg 68% 94%),
        hsl(240deg 65% 60% / 38%)
    );
    --color-background-input-pill-search: light-dark(
        hsl(237deg 68% 94%),
        hsl(240deg 65% 60% / 30%)
    );
    --color-background-input-pill-hover: light-dark(
        hsl(240deg 70% 70% / 30%),
        hsl(240deg 52% 60% / 45%)
    );
    --color-border-input-pill-image: light-dark(
        hsl(237deg 68% 94% / 50%),
        hsl(240deg 65% 60% / 60%)
    );
    --color-outline-low-attention-input-pill: light-dark(
        hsl(237deg 68% 88%),
        hsl(240deg 65% 60% / 22%)
    );
    --color-focus-outline-input-pill: light-dark(
        hsl(240deg 50% 50%),
        hsl(0deg 0% 100% / 60%)
    );
    --color-input-pill-close: light-dark(
        hsl(240deg 60% 65%),
        hsl(240deg 50% 74%)
    );
    --color-background-input-pill-exit-hover: light-dark(
        hsl(240deg 70% 70% / 15%),
        hsl(0deg 0% 100% / 7%)
    );
    --color-background-deactivated-user-pill: light-dark(
        hsl(8deg 96% 91%),
        hsl(360deg 97% 25%)
    );
    --color-focus-outline-deactivated-user-pill: light-dark(
        hsl(4deg 75% 53%),
        hsl(0deg 0% 100% / 70%)
    );
    --color-close-deactivated-user-pill: light-dark(
        hsl(4deg 75% 53%),
        hsl(7deg 100% 74%)
    );
    --color-background-exit-hover-deactivated-user-pill: light-dark(
        hsl(4deg 75% 53% / 15%),
        hsl(0deg 0% 100% / 7%)
    );
    --color-background-user-pill: light-dark(
        hsl(0deg 0% 100% / 85%),
        hsl(0deg 0% 0% / 40%)
    );
    --color-background-pill-container: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-pill-container-input-disabled: light-dark(
        hsl(0deg 0% 93%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-border-pill-container: light-dark(
        hsl(0deg 0% 0% / 15%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-background-inbox-no-unreads-illustration: light-dark(
        hsl(147deg 57% 25%),
        hsl(147deg 40% 55%)
    );
    --color-icon-search-inbox: light-dark(hsl(0deg 0% 0%), hsl(0deg 0% 100%));
    --color-inbox-search-text: light-dark(hsl(0deg 0% 0%), hsl(0deg 0% 95%));
    --color-border-inbox-search: light-dark(
        hsl(229.09deg 21.57% 10% / 30%),
        hsl(0deg 0% 100% / 20%)
    );
    --color-border-inbox-search-hover: light-dark(
        hsl(229.09deg 21.57% 10% / 60%),
        hsl(0deg 0% 100% / 40%)
    );
    --color-background-inbox-search: light-dark(
        hsl(0deg 0% 100%),
        hsl(225deg 6% 10%)
    );
    --color-background-inbox-search-hover: light-dark(
        hsl(0deg 0% 100%),
        hsl(225deg 6% 8%)
    );
    --color-background-inbox-search-focus: light-dark(
        hsl(0deg 0% 100%),
        hsl(225deg 6% 7%)
    );
    --color-border-inbox-search-focus: light-dark(
        hsl(229.09deg 21.57% 10% / 80%),
        hsl(0deg 0% 100% / 50%)
    );
    --color-box-shadow-inbox-search-focus: light-dark(
        hsl(228deg 9.8% 20% / 30%),
        hsl(0deg 0% 100% / 40%)
    );
    --color-background-inbox-row: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 14%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-background-inbox-row-hover: light-dark(
        rgb(242, 242, 242),
        rgb(47, 47, 47)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-button-inbox-selected: light-dark(
        hsl(0deg 0% 0% / 5%),
        hsl(0deg 0% 100% / 5%)
    );
    --color-background-button-inbox-focus: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 20%)
    );
    --color-icons-inbox: light-dark(hsl(0deg 0% 0%), hsl(0deg 0% 100%));
    --color-folder-header: light-dark(hsl(216deg 43% 20%), hsl(216deg 50% 75%));
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-inbox-row-chevron: light-dark(#535663, #aaadba);
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-navbar-icon: light-dark(hsl(240deg 20% 50%), hsl(240deg 35% 60%));
    --color-navbar-spectator-low-attention-brand-button-text: light-dark(
        hsl(240deg 40% 50%),
        hsl(240deg 55% 72% / 100%)
    );
    --color-navbar-spectator-low-attention-brand-button-background-hover: light-dark(
        hsl(240deg 100% 30% / 5%),
        hsl(240deg 56% 70% / 10%)
    );
    --color-navbar-spectator-low-attention-brand-button-background-active: light-dark(
        hsl(240deg 100% 30% / 8%),
        hsl(240deg 56% 70% / 13%)
    );
    --color-navbar-spectator-medium-attention-brand-button-text: light-dark(
        hsl(240deg 40% 40% / 100%),
        hsl(240deg 64% 76% / 100%)
    );
    --color-navbar-spectator-medium-attention-brand-button-background: light-dark(
        hsl(244deg 64% 47% / 10%),
        hsl(240deg 56% 70% / 12%)
    );
    --color-navbar-spectator-medium-attention-brand-button-background-hover: light-dark(
        hsl(244deg 64% 47% / 15%),
        hsl(240deg 56% 70% / 17%)
    );
    --color-navbar-spectator-medium-attention-brand-button-background-active: light-dark(
        hsl(244deg 64% 47% / 18%),
        hsl(240deg 56% 70% / 12%)
    );
    --color-gear-menu-lighter-text: light-dark(
        hsl(0deg 0% 40%),
        hsl(0deg 0% 50%)
    );
    --color-gear-menu-blue-text: light-dark(
        hsl(217deg 100% 50%),
        hsl(217deg 100% 65%)
    );
    --color-header-button-hover: light-dark(
        hsl(0deg 0% 0% / 5%),
        hsl(0deg 0% 100% / 4%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-header-button-hover-no-alpha: light-dark(
        rgb(235, 235, 235),
        rgb(42, 42, 42)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-header-button-focus: light-dark(
        hsl(0deg 0% 0% / 8%),
        hsl(0deg 0% 100% / 7%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-header-button-focus-no-alpha: light-dark(
        rgb(228, 228, 228),
        rgb(49, 49, 49)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-fill-user-invite-copy-icon: light-dark(
        hsl(0deg 0% 46.7%),
        hsl(236deg 33% 90%)
    );
    --color-background-zulip-button: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-zulip-button-hover: light-dark(
        var(--color-background-zulip-button),
        hsl(0deg 0% 0% / 15%)
    );
    --color-background-zulip-button-active: light-dark(
        hsl(0deg 0% 95%),
        var(--color-background-zulip-button-hover)
    );
    --color-background-zulip-button-disabled: light-dark(
        hsl(0deg 0% 93%),
        var(--color-background-zulip-button)
    );
    --color-border-zulip-button: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-border-zulip-button-interactive: light-dark(
        hsl(0deg 0% 60%),
        var(--color-border-zulip-button)
    );
    --color-border-rendered-checkbox: light-dark(
        hsl(0deg 0% 0% / 60%),
        hsl(0deg 0% 100% / 40%)
    );
    --color-background-emoji-picker-popover: light-dark(
        hsl(0deg 0% 93%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-emoji-picker-popover-tab-item-active: light-dark(
        hsl(0deg 0% 100% / 20%),
        hsl(0deg 0% 0% / 50%)
    );
    --color-background-emoji-picker-emoji-focus: light-dark(
        hsl(0deg 0% 93%),
        hsl(212deg 28% 8% / 75%)
    );
    --color-box-shadow-emoji-picker-emoji-focus: light-dark(
        transparent,
        hsl(0deg 0% 98%)
    );
    --color-background-emoji-picker-emoji-reacted: light-dark(
        hsl(195deg 50% 95%),
        hsl(0deg 0% 0% / 50%)
    );
    --color-border-emoji-picker-emoji-reacted: light-dark(
        hsl(195deg 52% 79%),
        hsl(0deg 0% 0% / 90%)
    );
    --color-background-emoji-picker-emoji-reacted-focus: light-dark(
        hsl(195deg 55% 88%),
        hsl(0deg 0% 20% / 70%)
    );
    --color-border-emoji-picker-tippy-arrow: light-dark(
        hsl(0deg 0% 93%),
        hsl(211.58deg 33.33% 11.18%)
    );
    --color-dropdown-item: light-dark(hsl(0deg 0% 20%), hsl(0deg 0% 75%));
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-dropdown-item-link-underline: light-dark(
        hsl(0deg 0% 20% 60%),
        hsl(0deg 0% 75% 60%)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-active-dropdown-item: light-dark(hsl(0deg 0% 0%), hsl(0deg 0% 90%));
    --background-color-active-dropdown-item: light-dark(
        hsl(220deg 12% 4.9% / 5%),
        hsl(220deg 12% 100% / 7%)
    );
    --background-color-active-typeahead-item: light-dark(
        hsl(220deg 12% 4.9% / 5%),
        hsl(220deg 12% 100% / 7%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-typeahead-option-label: light-dark(
        var(--grey-500),
        var(--grey-400)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-outline-button-focus: light-dark(
        hsl(0deg 0% 0%),
        hsl(0deg 0% 100%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-inner-shadow-action-button: light-dark(
        rgba(0, 0, 0, 0.2),
        rgba(255, 255, 255, 0.21)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-neutral-primary-action-button: light-dark(
        hsl(0deg 0% 100%),
        rgba(255, 255, 255, 0.85)
    );
    --color-background-neutral-primary-action-button: light-dark(
        hsl(229deg 7% 50%),
        hsl(229deg 9% 36%)
    );
    --color-background-neutral-primary-action-button-hover: light-dark(
        hsl(229deg 7% 47%),
        hsl(229deg 8% 42%)
    );
    --color-background-neutral-primary-action-button-active: light-dark(
        hsl(232deg 7% 44%),
        hsl(229deg 9% 36%)
    );
    --color-text-neutral-quiet-action-button: light-dark(
        hsl(229deg 12% 25%),
        hsl(231deg 11% 76%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-background-neutral-quiet-action-button: light-dark(
        rgba(119, 122, 136, 0.12),
        rgba(187, 189, 201, 0.12)
    );
    --color-background-neutral-quiet-action-button-hover: light-dark(
        rgba(119, 122, 136, 0.17),
        rgba(187, 189, 201, 0.17)
    );
    --color-background-neutral-quiet-action-button-active: light-dark(
        rgba(119, 122, 136, 0.22),
        rgba(187, 189, 201, 0.12)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-neutral-borderless-action-button: light-dark(
        hsl(229deg 9% 36%),
        hsl(229deg 10% 70%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-background-neutral-borderless-action-button-hover: light-dark(
        rgba(84, 87, 100, 0.07),
        rgba(144, 147, 162, 0.14)
    );
    --color-background-neutral-borderless-action-button-active: light-dark(
        rgba(84, 87, 100, 0.11),
        rgba(144, 147, 162, 0.18)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-brand-primary-action-button: light-dark(
        hsl(0deg 0% 100%),
        rgba(255, 255, 255, 0.85)
    );
    --color-background-brand-primary-action-button: light-dark(
        hsl(254deg 99% 68%),
        hsl(261deg 79% 43%)
    );
    --color-background-brand-primary-action-button-hover: light-dark(
        hsl(255deg 81% 61%),
        hsl(258deg 66% 51%)
    );
    --color-background-brand-primary-action-button-active: light-dark(
        hsl(258deg 66% 51%),
        hsl(261deg 79% 43%)
    );
    --color-text-brand-quiet-action-button: light-dark(
        hsl(264deg 95% 34%),
        hsl(244deg 96% 82%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-background-brand-quiet-action-button: light-dark(
        rgba(130, 93, 254, 0.12),
        rgba(160, 150, 253, 0.12)
    );
    --color-background-brand-quiet-action-button-hover: light-dark(
        rgba(130, 93, 254, 0.17),
        rgba(160, 150, 253, 0.17)
    );
    --color-background-brand-quiet-action-button-active: light-dark(
        rgba(130, 93, 254, 0.22),
        rgba(160, 150, 253, 0.12)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-brand-borderless-action-button: light-dark(
        hsl(255deg 54% 50%),
        hsl(246deg 96% 79%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-background-brand-borderless-action-button-hover: light-dark(
        rgba(45, 0, 112, 0.05),
        rgba(138, 112, 255, 0.14)
    );
    --color-background-brand-borderless-action-button-active: light-dark(
        rgba(45, 0, 112, 0.1),
        rgba(138, 112, 255, 0.18)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-info-primary-action-button: light-dark(
        hsl(0deg 0% 100%),
        rgba(255, 255, 255, 0.85)
    );
    --color-background-info-primary-action-button: light-dark(
        hsl(226deg 100% 62%),
        hsl(228deg 75% 47%)
    );
    --color-text-info-quiet-action-button: light-dark(
        hsl(231deg 82% 36%),
        hsl(222deg 98% 79%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-background-info-quiet-action-button: light-dark(
        rgba(61, 106, 255, 0.12),
        rgba(149, 180, 254, 0.12)
    );
    --color-background-info-quiet-action-button-hover: light-dark(
        rgba(61, 106, 255, 0.17),
        rgba(149, 180, 254, 0.17)
    );
    --color-background-info-quiet-action-button-active: light-dark(
        rgba(61, 106, 255, 0.22),
        rgba(149, 180, 254, 0.12)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-info-borderless-action-button: light-dark(
        hsl(227deg 70% 46%),
        hsl(222deg 97% 75%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-background-info-borderless-action-button-hover: light-dark(
        rgba(5, 3, 124, 0.05),
        rgba(78, 125, 253, 0.12)
    );
    --color-background-info-borderless-action-button-active: light-dark(
        rgba(5, 3, 124, 0.09),
        rgba(78, 125, 253, 0.17)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-success-primary-action-button: light-dark(
        hsl(0deg 0% 100%),
        rgba(255, 255, 255, 0.85)
    );
    --color-background-success-primary-action-button: light-dark(
        hsl(146deg 90% 27%),
        hsl(144deg 84% 22%)
    );
    --color-text-success-quiet-action-button: light-dark(
        hsl(144deg 88% 16%),
        hsl(135deg 56% 63%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-background-success-quiet-action-button: light-dark(
        rgba(7, 131, 61, 0.13),
        rgba(65, 175, 98, 0.12)
    );
    --color-background-success-quiet-action-button-hover: light-dark(
        rgba(7, 131, 61, 0.18),
        rgba(65, 175, 98, 0.17)
    );
    --color-background-success-quiet-action-button-active: light-dark(
        rgba(7, 131, 61, 0.23),
        rgba(65, 175, 98, 0.12)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-success-borderless-action-button: light-dark(
        hsl(146deg 90% 27%),
        hsl(136deg 47% 55%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-background-success-borderless-action-button-hover: light-dark(
        rgba(9, 103, 47, 0.08),
        rgba(47, 157, 82, 0.12)
    );
    --color-background-success-borderless-action-button-active: light-dark(
        rgba(9, 103, 47, 0.12),
        rgba(47, 157, 82, 0.17)
    );
    --color-text-warning-primary-action-button: light-dark(
        rgba(0, 0, 0, 0.88),
        rgba(0, 0, 0, 0.9)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-warning-primary-action-button: light-dark(
        hsl(40deg 99% 62%),
        hsl(39deg 89% 45%)
    );
    --color-background-warning-primary-action-button-hover: light-dark(
        hsl(40deg 94% 56%),
        hsl(41deg 98% 46%)
    );
    --color-background-warning-primary-action-button-active: light-dark(
        hsl(41deg 98% 46%),
        hsl(39deg 89% 45%)
    );
    --color-text-warning-quiet-action-button: light-dark(
        hsl(34deg 89% 25%),
        hsl(40deg 94% 56%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-background-warning-quiet-action-button: light-dark(
        rgba(232, 159, 2, 0.18),
        rgba(217, 145, 13, 0.12)
    );
    --color-background-warning-quiet-action-button-hover: light-dark(
        rgba(232, 159, 2, 0.23),
        rgba(217, 145, 13, 0.17)
    );
    --color-background-warning-quiet-action-button-active: light-dark(
        rgba(232, 159, 2, 0.28),
        rgba(217, 145, 13, 0.12)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-warning-borderless-action-button: light-dark(
        hsl(37deg 94% 34%),
        hsl(41deg 98% 46%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-background-warning-borderless-action-button-hover: light-dark(
        rgba(168, 106, 5, 0.1),
        rgba(201, 135, 13, 0.12)
    );
    --color-background-warning-borderless-action-button-active: light-dark(
        rgba(168, 106, 5, 0.14),
        rgba(201, 135, 13, 0.17)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-danger-primary-action-button: light-dark(
        hsl(0deg 0% 100%),
        rgba(255, 255, 255, 0.85)
    );
    --color-background-danger-primary-action-button: light-dark(
        hsl(4deg 75% 53%),
        hsl(2deg 74% 47%)
    );
    --color-background-danger-primary-action-button-hover: light-dark(
        hsl(2deg 74% 47%),
        hsl(4deg 75% 53%)
    );
    --color-background-danger-primary-action-button-active: light-dark(
        hsl(359deg 93% 39%),
        hsl(2deg 74% 47%)
    );
    --color-text-danger-quiet-action-button: light-dark(
        hsl(359deg 94% 35%),
        hsl(7deg 100% 74%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-background-danger-quiet-action-button: light-dark(
        rgba(225, 57, 45, 0.13),
        rgba(253, 93, 78, 0.12)
    );
    --color-background-danger-quiet-action-button-hover: light-dark(
        rgba(225, 57, 45, 0.18),
        rgba(253, 93, 78, 0.17)
    );
    --color-background-danger-quiet-action-button-active: light-dark(
        rgba(225, 57, 45, 0.23),
        rgba(253, 93, 78, 0.12)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-danger-borderless-action-button: light-dark(
        hsl(359deg 93% 39%),
        hsl(7deg 100% 74%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-background-danger-borderless-action-button-hover: light-dark(
        rgba(192, 7, 10, 0.09),
        rgba(243, 78, 63, 0.12)
    );
    --color-background-danger-borderless-action-button-active: light-dark(
        rgba(192, 7, 10, 0.13),
        rgba(243, 78, 63, 0.17)
    );
    --color-text-neutral-icon-button: light-dark(
        rgba(84, 87, 100, 0.7),
        rgba(171, 174, 186, 0.7)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-neutral-icon-button-hover: light-dark(
        hsl(229deg 9% 36%),
        hsl(229deg 10% 70%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-text-neutral-icon-button-active: light-dark(
        rgba(84, 87, 100, 0.7),
        rgba(171, 174, 186, 0.7)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-neutral-icon-button-square-active: light-dark(
        hsl(229deg 9% 36%),
        hsl(229deg 10% 70%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-background-neutral-icon-button-square-hover: light-dark(
        rgba(84, 87, 100, 0.07),
        rgba(144, 147, 162, 0.14)
    );
    --color-background-neutral-icon-button-square-active: light-dark(
        rgba(84, 87, 100, 0.11),
        rgba(144, 147, 162, 0.18)
    );
    --color-text-brand-icon-button: light-dark(
        rgba(93, 59, 196, 0.7),
        rgba(160, 150, 253, 0.7)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-brand-icon-button-hover: light-dark(
        hsl(255deg 54% 50%),
        hsl(246deg 96% 79%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-text-brand-icon-button-active: light-dark(
        rgba(93, 59, 196, 0.7),
        rgba(160, 150, 253, 0.7)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-brand-icon-button-square-active: light-dark(
        hsl(255deg 54% 50%),
        hsl(246deg 96% 79%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-background-brand-icon-button-square-hover: light-dark(
        rgba(45, 0, 112, 0.05),
        rgba(138, 112, 255, 0.14)
    );
    --color-background-brand-icon-button-square-active: light-dark(
        rgba(45, 0, 112, 0.1),
        rgba(138, 112, 255, 0.18)
    );
    --color-text-info-icon-button: light-dark(
        rgba(35, 71, 199, 0.7),
        rgba(129, 167, 253, 0.7)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-info-icon-button-hover: light-dark(
        hsl(227deg 70% 46%),
        hsl(222deg 97% 75%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-text-info-icon-button-active: light-dark(
        rgba(35, 71, 199, 0.7),
        rgba(129, 167, 253, 0.7)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-info-icon-button-square-active: light-dark(
        hsl(227deg 70% 46%),
        hsl(222deg 97% 75%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-background-info-icon-button-square-hover: light-dark(
        rgba(5, 3, 124, 0.05),
        rgba(78, 125, 253, 0.12)
    );
    --color-background-info-icon-button-square-active: light-dark(
        rgba(5, 3, 124, 0.09),
        rgba(78, 125, 253, 0.17)
    );
    --color-text-success-icon-button: light-dark(
        rgba(7, 131, 61, 0.7),
        rgba(86, 194, 115, 0.7)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-success-icon-button-hover: light-dark(
        hsl(146deg 90% 27%),
        hsl(136deg 47% 55%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-text-success-icon-button-active: light-dark(
        rgba(7, 131, 61, 0.7),
        rgba(86, 194, 115, 0.7)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-success-icon-button-square-active: light-dark(
        hsl(146deg 90% 27%),
        hsl(136deg 47% 55%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-background-success-icon-button-square-hover: light-dark(
        rgba(9, 103, 47, 0.08),
        rgba(47, 157, 82, 0.12)
    );
    --color-background-success-icon-button-square-active: light-dark(
        rgba(9, 103, 47, 0.12),
        rgba(47, 157, 82, 0.17)
    );
    --color-text-warning-icon-button: light-dark(
        rgba(168, 106, 5, 0.7),
        rgba(232, 159, 2, 0.7)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-warning-icon-button-hover: light-dark(
        hsl(37deg 94% 34%),
        hsl(41deg 98% 46%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-text-warning-icon-button-active: light-dark(
        rgba(168, 106, 5, 0.7),
        rgba(232, 159, 2, 0.7)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-warning-icon-button-square-active: light-dark(
        hsl(37deg 94% 34%),
        hsl(41deg 98% 46%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-background-warning-icon-button-square-hover: light-dark(
        rgba(168, 106, 5, 0.1),
        rgba(201, 135, 13, 0.12)
    );
    --color-background-warning-icon-button-square-active: light-dark(
        rgba(168, 106, 5, 0.14),
        rgba(201, 135, 13, 0.17)
    );
    --color-text-danger-icon-button: light-dark(
        rgba(192, 7, 10, 0.7),
        rgba(255, 138, 122, 0.7)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-danger-icon-button-hover: light-dark(
        hsl(359deg 93% 39%),
        hsl(7deg 100% 74%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-text-danger-icon-button-active: light-dark(
        rgba(192, 7, 10, 0.7),
        rgba(255, 138, 122, 0.7)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-danger-icon-button-square-active: light-dark(
        hsl(359deg 93% 39%),
        hsl(7deg 100% 74%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-background-danger-icon-button-square-hover: light-dark(
        rgba(192, 7, 10, 0.09),
        rgba(243, 78, 63, 0.12)
    );
    --color-background-danger-icon-button-square-active: light-dark(
        rgba(192, 7, 10, 0.13),
        rgba(243, 78, 63, 0.17)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-neutral-banner: light-dark(
        hsl(229deg 12% 25%),
        hsl(231deg 11% 76%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-border-neutral-banner: light-dark(
        rgba(75, 75, 78, 0.4),
        rgba(162, 162, 174, 0.4)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-neutral-banner: light-dark(
        hsl(240deg 7% 93%),
        hsl(240deg 7% 17%)
    );
    --color-text-brand-banner: light-dark(
        hsl(264deg 95% 34%),
        hsl(244deg 96% 82%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-border-brand-banner: light-dark(
        rgba(87, 51, 204, 0.4),
        rgba(216, 207, 247, 0.4)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-brand-banner: light-dark(
        hsl(254deg 42% 94%),
        hsl(254deg 49% 16%)
    );
    --color-text-info-banner: light-dark(
        hsl(241deg 95% 25%),
        hsl(221deg 93% 89%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-border-info-banner: light-dark(
        rgba(38, 81, 110, 0.4),
        rgba(130, 184, 222, 0.4)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-info-banner: light-dark(
        hsl(204deg 58% 92%),
        hsl(204deg 100% 12%)
    );
    --color-text-success-banner: light-dark(
        hsl(144deg 88% 16%),
        hsl(135deg 56% 63%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-border-success-banner: light-dark(
        rgba(27, 100, 60, 0.4),
        rgba(74, 191, 131, 0.4)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-success-banner: light-dark(
        hsl(147deg 43% 92%),
        hsl(146deg 90% 7%)
    );
    --color-text-warning-banner: light-dark(
        hsl(34deg 89% 25%),
        hsl(40deg 94% 56%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-border-warning-banner: light-dark(
        rgba(99, 77, 39, 0.4),
        rgba(206, 186, 130, 0.4)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-warning-banner: light-dark(
        hsl(50deg 75% 92%),
        hsl(50deg 100% 10%)
    );
    --color-text-danger-banner: light-dark(
        hsl(359deg 94% 35%),
        hsl(7deg 100% 74%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-border-danger-banner: light-dark(
        rgba(132, 41, 36, 0.4),
        rgba(237, 145, 140, 0.4)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-danger-banner: light-dark(
        hsl(0deg 35% 92%),
        hsl(0deg 52% 18%)
    );
    --color-background-legacy-input: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-border-legacy-input: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-border-legacy-input-focus: light-dark(
        hsl(206deg 80% 62% / 80%),
        hsl(0deg 0% 0% / 90%)
    );
    --color-text-input: light-dark(hsl(0deg 0% 14%), hsl(0deg 0% 95%));
    --color-background-input: light-dark(hsl(0deg 0% 100%), hsl(225deg 6% 10%));
    --color-background-input-focus: light-dark(
        hsl(0deg 0% 100%),
        hsl(225deg 6% 7%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-outline-input: light-dark(
        rgba(20, 22, 31, 0.3),
        rgba(255, 255, 255, 0.2)
    );
    --color-outline-input-hover: light-dark(
        rgba(20, 22, 31, 0.6),
        rgba(255, 255, 255, 0.4)
    );
    --color-outline-input-focus: light-dark(
        rgba(20, 22, 31, 0.8),
        rgba(255, 255, 255, 0.5)
    );
    --color-box-shadow-input-focus: light-dark(
        rgba(46, 48, 56, 0.3),
        rgba(255, 255, 255, 0.4)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-border-settings-radio-input-parent: light-dark(
        hsl(0deg 0% 87%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-success-main-view-banner: light-dark(
        hsl(147deg 57% 25%),
        hsl(147deg 51% 80%)
    );
    --color-background-success-main-view-banner: light-dark(
        hsl(147deg 43% 92%),
        hsl(147deg 100% 8%)
    );
    --color-border-success-main-view-banner: light-dark(
        hsl(147deg 57% 25% / 40%),
        hsl(149deg 48% 52% / 40%)
    );
    --color-success-main-view-banner-close-button: light-dark(
        hsl(147deg 57% 25% / 50%),
        hsl(147deg 51% 55% / 50%)
    );
    --color-success-main-view-banner-close-button-hover: light-dark(
        hsl(147deg 57% 25%),
        hsl(147deg 51% 55%)
    );
    --color-success-main-view-banner-close-button-active: light-dark(
        hsl(147deg 57% 25% / 75%),
        hsl(147deg 51% 55% / 75%)
    );
    --color-background-success-main-view-banner-action-button: light-dark(
        hsl(147deg 57% 25% / 10%),
        hsl(147deg 51% 55% / 10%)
    );
    --color-background-success-main-view-banner-action-button-hover: light-dark(
        hsl(147deg 57% 25% / 12%),
        hsl(147deg 51% 55% / 15%)
    );
    --color-background-success-main-view-banner-action-button-active: light-dark(
        hsl(147deg 57% 25% / 15%),
        hsl(147deg 51% 55% / 20%)
    );
    --color-warning-main-view-banner: light-dark(
        hsl(38deg 44% 27%),
        hsl(50deg 45% 80%)
    );
    --color-background-warning-main-view-banner: light-dark(
        hsl(50deg 75% 92%),
        hsl(53deg 100% 11%)
    );
    --color-border-warning-main-view-banner: light-dark(
        hsl(38deg 44% 27% / 40%),
        hsl(38deg 44% 60% / 40%)
    );
    --color-warning-main-view-banner-close-button: light-dark(
        hsl(38deg 44% 27% / 50%),
        hsl(50deg 45% 61% / 50%)
    );
    --color-warning-main-view-banner-close-button-hover: light-dark(
        hsl(38deg 44% 27%),
        hsl(50deg 45% 61%)
    );
    --color-warning-main-view-banner-close-button-active: light-dark(
        hsl(38deg 44% 27% / 75%),
        hsl(50deg 45% 61% / 75%)
    );
    --color-warning-main-view-banner-action-button: light-dark(
        inherit,
        hsl(50deg 45% 61%)
    );
    --color-background-warning-main-view-banner-action-button: light-dark(
        hsl(38deg 44% 27% / 10%),
        hsl(50deg 45% 61% / 10%)
    );
    --color-background-warning-main-view-banner-action-button-hover: light-dark(
        hsl(38deg 44% 27% / 12%),
        hsl(50deg 45% 61% / 15%)
    );
    --color-background-warning-main-view-banner-action-button-active: light-dark(
        hsl(38deg 44% 27% / 15%),
        hsl(50deg 45% 61% / 20%)
    );
    --color-error-main-view-banner: light-dark(
        hsl(4deg 58% 33%),
        hsl(3deg 73% 80%)
    );
    --color-background-error-main-view-banner: light-dark(
        hsl(4deg 35% 90%),
        hsl(0deg 60% 19%)
    );
    --color-border-error-main-view-banner: light-dark(
        hsl(3deg 57% 33% / 40%),
        hsl(3deg 73% 74% / 40%)
    );
    --color-error-main-view-banner-close-button: light-dark(
        hsl(4deg 58% 33% / 50%),
        hsl(3deg 73% 74% / 50%)
    );
    --color-error-main-view-banner-close-button-hover: light-dark(
        hsl(4deg 58% 33%),
        hsl(3deg 73% 74%)
    );
    --color-error-main-view-banner-close-button-active: light-dark(
        hsl(4deg 58% 33% / 75%),
        hsl(3deg 73% 74% / 75%)
    );
    --color-error-main-view-banner-action-button: light-dark(
        inherit,
        hsl(3deg 73% 74%)
    );
    --color-background-error-main-view-banner-action-button: light-dark(
        hsl(3deg 57% 33% / 10%),
        hsl(3deg 73% 74% / 10%)
    );
    --color-background-error-main-view-banner-action-button-hover: light-dark(
        hsl(3deg 57% 33% / 12%),
        hsl(3deg 73% 74% / 15%)
    );
    --color-background-error-main-view-banner-action-button-active: light-dark(
        hsl(3deg 57% 33% / 15%),
        hsl(3deg 73% 74% / 20%)
    );
    --color-info-main-view-banner: light-dark(
        hsl(204deg 49% 29%),
        hsl(205deg 58% 80%)
    );
    --color-background-info-main-view-banner: light-dark(
        hsl(204deg 58% 92%),
        hsl(204deg 100% 12%)
    );
    --color-border-info-main-view-banner: light-dark(
        hsl(204deg 49% 29% / 40%),
        hsl(205deg 58% 69% / 40%)
    );
    --color-info-main-view-banner-close-button: light-dark(
        hsl(204deg 49% 29% / 50%),
        hsl(205deg 58% 69% / 50%)
    );
    --color-info-main-view-banner-close-button-hover: light-dark(
        hsl(204deg 49% 29%),
        hsl(205deg 58% 69%)
    );
    --color-info-main-view-banner-close-button-active: light-dark(
        hsl(204deg 49% 29% / 75%),
        hsl(205deg 58% 69% / 75%)
    );
    --color-info-main-view-banner-action-button: light-dark(
        inherit,
        hsl(205deg 58% 69%)
    );
    --color-background-info-main-view-banner-action-button: light-dark(
        hsl(204deg 49% 29% / 10%),
        hsl(205deg 58% 69% / 10%)
    );
    --color-background-info-main-view-banner-action-button-hover: light-dark(
        hsl(204deg 49% 29% / 12%),
        hsl(205deg 58% 69% / 15%)
    );
    --color-background-info-main-view-banner-action-button-active: light-dark(
        hsl(204deg 49% 29% / 15%),
        hsl(205deg 58% 69% / 20%)
    );
    --color-main-view-banner-action-link: light-dark(
        var(--color-text-generic-link),
        hsl(200deg 100% 50%)
    );
    --color-background-main-view-banner-moving-bar: light-dark(
        hsl(204deg 63% 85%),
        hsl(204deg 63% 18%)
    );
    --color-info-density-control-border: light-dark(
        hsl(0deg 0% 0% / 20%),
        hsl(0deg 0% 90% / 20%)
    );
    --color-info-denisty-button-icon: light-dark(
        hsl(229deg 9% 36%),
        hsl(0deg 0% 100% / 80%)
    );
    --color-info-density-button-hover-background: light-dark(
        hsl(229deg 9% 36% / 7%),
        hsl(229deg 10% 50% / 30%)
    );
}
}

@supports not (color: light-dark(tan, tan)) {

:root * {
    --csstools-light-dark-toggle--458: var(--csstools-color-scheme--light) rgb(46, 46, 46);
    --color-background-active-narrow-filter: var(--csstools-light-dark-toggle--458, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--459: var(--csstools-color-scheme--light) rgb(46, 46, 46);
    --color-background-hover-narrow-filter: var(--csstools-light-dark-toggle--459, hsl(0deg 0% 97%));
    --csstools-light-dark-toggle--460: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.08);
    --color-border-modal: var(--csstools-light-dark-toggle--460, rgba(140, 140, 140, 0.25));
    --csstools-light-dark-toggle--461: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.05);
    --color-border-modal-bar: var(--csstools-light-dark-toggle--461, rgba(194, 194, 194, 0.8));
    --csstools-light-dark-toggle--462: var(--csstools-color-scheme--light) rgb(58, 58, 67);
    --color-background-unread-counter-no-alpha: var(--csstools-light-dark-toggle--462, rgb(215, 215, 220));
    --csstools-light-dark-toggle--463: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 80%);
    --color-compose-recipient-box-border-color: var(--csstools-light-dark-toggle--463, rgb(207, 208, 215));
    --csstools-light-dark-toggle--464: var(--csstools-color-scheme--light) rgba(0, 170, 255, 0.2);
    --color-text-link-decoration: var(--csstools-light-dark-toggle--464, rgba(6, 107, 208, 0.2));
    --csstools-light-dark-toggle--465: var(--csstools-color-scheme--light) rgba(51, 187, 255, 0.7);
    --color-text-link-decoration-hover: var(--csstools-light-dark-toggle--465, rgba(0, 119, 255, 0.7));
    --csstools-light-dark-toggle--466: var(--csstools-color-scheme--light) rgba(69, 153, 161, 0.7);
    --color-border-todo-checkbox: var(--csstools-light-dark-toggle--466, hsl(156deg 28% 70%));
    --csstools-light-dark-toggle--467: var(--csstools-color-scheme--light) rgba(171, 174, 186, 0.7);
    --color-copy-button: var(--csstools-light-dark-toggle--467, rgba(84, 87, 100, 0.7));
    --csstools-light-dark-toggle--468: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.14);
    --color-copy-button-square-bg-hover: var(--csstools-light-dark-toggle--468, rgba(84, 87, 100, 0.07));
    --csstools-light-dark-toggle--469: var(--csstools-color-scheme--light) rgba(171, 174, 186, 0.7);
    --color-copy-button-active: var(--csstools-light-dark-toggle--469, rgba(84, 87, 100, 0.7));
    --csstools-light-dark-toggle--470: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.18);
    --color-copy-button-square-bg-active: var(--csstools-light-dark-toggle--470, rgba(84, 87, 100, 0.11));
    --csstools-light-dark-toggle--471: var(--csstools-color-scheme--light) rgb(47, 47, 47);
    --color-background-inbox-row-hover: var(--csstools-light-dark-toggle--471, rgb(242, 242, 242));
    --csstools-light-dark-toggle--472: var(--csstools-color-scheme--light) rgb(42, 42, 42);
    --color-header-button-hover-no-alpha: var(--csstools-light-dark-toggle--472, rgb(235, 235, 235));
    --csstools-light-dark-toggle--473: var(--csstools-color-scheme--light) rgb(49, 49, 49);
    --color-header-button-focus-no-alpha: var(--csstools-light-dark-toggle--473, rgb(228, 228, 228));
    --csstools-light-dark-toggle--474: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.21);
    --color-inner-shadow-action-button: var(--csstools-light-dark-toggle--474, rgba(0, 0, 0, 0.2));
    --csstools-light-dark-toggle--475: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.85);
    --color-text-neutral-primary-action-button: var(--csstools-light-dark-toggle--475, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--476: var(--csstools-color-scheme--light) rgba(187, 189, 201, 0.12);
    --color-background-neutral-quiet-action-button: var(--csstools-light-dark-toggle--476, rgba(119, 122, 136, 0.12));
    --csstools-light-dark-toggle--477: var(--csstools-color-scheme--light) rgba(187, 189, 201, 0.17);
    --color-background-neutral-quiet-action-button-hover: var(--csstools-light-dark-toggle--477, rgba(119, 122, 136, 0.17));
    --csstools-light-dark-toggle--478: var(--csstools-color-scheme--light) rgba(187, 189, 201, 0.12);
    --color-background-neutral-quiet-action-button-active: var(--csstools-light-dark-toggle--478, rgba(119, 122, 136, 0.22));
    --csstools-light-dark-toggle--479: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.14);
    --color-background-neutral-borderless-action-button-hover: var(--csstools-light-dark-toggle--479, rgba(84, 87, 100, 0.07));
    --csstools-light-dark-toggle--480: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.18);
    --color-background-neutral-borderless-action-button-active: var(--csstools-light-dark-toggle--480, rgba(84, 87, 100, 0.11));
    --csstools-light-dark-toggle--481: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.85);
    --color-text-brand-primary-action-button: var(--csstools-light-dark-toggle--481, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--482: var(--csstools-color-scheme--light) rgba(160, 150, 253, 0.12);
    --color-background-brand-quiet-action-button: var(--csstools-light-dark-toggle--482, rgba(130, 93, 254, 0.12));
    --csstools-light-dark-toggle--483: var(--csstools-color-scheme--light) rgba(160, 150, 253, 0.17);
    --color-background-brand-quiet-action-button-hover: var(--csstools-light-dark-toggle--483, rgba(130, 93, 254, 0.17));
    --csstools-light-dark-toggle--484: var(--csstools-color-scheme--light) rgba(160, 150, 253, 0.12);
    --color-background-brand-quiet-action-button-active: var(--csstools-light-dark-toggle--484, rgba(130, 93, 254, 0.22));
    --csstools-light-dark-toggle--485: var(--csstools-color-scheme--light) rgba(138, 112, 255, 0.14);
    --color-background-brand-borderless-action-button-hover: var(--csstools-light-dark-toggle--485, rgba(45, 0, 112, 0.05));
    --csstools-light-dark-toggle--486: var(--csstools-color-scheme--light) rgba(138, 112, 255, 0.18);
    --color-background-brand-borderless-action-button-active: var(--csstools-light-dark-toggle--486, rgba(45, 0, 112, 0.1));
    --csstools-light-dark-toggle--487: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.85);
    --color-text-info-primary-action-button: var(--csstools-light-dark-toggle--487, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--488: var(--csstools-color-scheme--light) rgba(149, 180, 254, 0.12);
    --color-background-info-quiet-action-button: var(--csstools-light-dark-toggle--488, rgba(61, 106, 255, 0.12));
    --csstools-light-dark-toggle--489: var(--csstools-color-scheme--light) rgba(149, 180, 254, 0.17);
    --color-background-info-quiet-action-button-hover: var(--csstools-light-dark-toggle--489, rgba(61, 106, 255, 0.17));
    --csstools-light-dark-toggle--490: var(--csstools-color-scheme--light) rgba(149, 180, 254, 0.12);
    --color-background-info-quiet-action-button-active: var(--csstools-light-dark-toggle--490, rgba(61, 106, 255, 0.22));
    --csstools-light-dark-toggle--491: var(--csstools-color-scheme--light) rgba(78, 125, 253, 0.12);
    --color-background-info-borderless-action-button-hover: var(--csstools-light-dark-toggle--491, rgba(5, 3, 124, 0.05));
    --csstools-light-dark-toggle--492: var(--csstools-color-scheme--light) rgba(78, 125, 253, 0.17);
    --color-background-info-borderless-action-button-active: var(--csstools-light-dark-toggle--492, rgba(5, 3, 124, 0.09));
    --csstools-light-dark-toggle--493: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.85);
    --color-text-success-primary-action-button: var(--csstools-light-dark-toggle--493, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--494: var(--csstools-color-scheme--light) rgba(65, 175, 98, 0.12);
    --color-background-success-quiet-action-button: var(--csstools-light-dark-toggle--494, rgba(7, 131, 61, 0.13));
    --csstools-light-dark-toggle--495: var(--csstools-color-scheme--light) rgba(65, 175, 98, 0.17);
    --color-background-success-quiet-action-button-hover: var(--csstools-light-dark-toggle--495, rgba(7, 131, 61, 0.18));
    --csstools-light-dark-toggle--496: var(--csstools-color-scheme--light) rgba(65, 175, 98, 0.12);
    --color-background-success-quiet-action-button-active: var(--csstools-light-dark-toggle--496, rgba(7, 131, 61, 0.23));
    --csstools-light-dark-toggle--497: var(--csstools-color-scheme--light) rgba(47, 157, 82, 0.12);
    --color-background-success-borderless-action-button-hover: var(--csstools-light-dark-toggle--497, rgba(9, 103, 47, 0.08));
    --csstools-light-dark-toggle--498: var(--csstools-color-scheme--light) rgba(47, 157, 82, 0.17);
    --color-background-success-borderless-action-button-active: var(--csstools-light-dark-toggle--498, rgba(9, 103, 47, 0.12));
    --csstools-light-dark-toggle--499: var(--csstools-color-scheme--light) rgba(0, 0, 0, 0.9);
    --color-text-warning-primary-action-button: var(--csstools-light-dark-toggle--499, rgba(0, 0, 0, 0.88));
    --csstools-light-dark-toggle--500: var(--csstools-color-scheme--light) rgba(217, 145, 13, 0.12);
    --color-background-warning-quiet-action-button: var(--csstools-light-dark-toggle--500, rgba(232, 159, 2, 0.18));
    --csstools-light-dark-toggle--501: var(--csstools-color-scheme--light) rgba(217, 145, 13, 0.17);
    --color-background-warning-quiet-action-button-hover: var(--csstools-light-dark-toggle--501, rgba(232, 159, 2, 0.23));
    --csstools-light-dark-toggle--502: var(--csstools-color-scheme--light) rgba(217, 145, 13, 0.12);
    --color-background-warning-quiet-action-button-active: var(--csstools-light-dark-toggle--502, rgba(232, 159, 2, 0.28));
    --csstools-light-dark-toggle--503: var(--csstools-color-scheme--light) rgba(201, 135, 13, 0.12);
    --color-background-warning-borderless-action-button-hover: var(--csstools-light-dark-toggle--503, rgba(168, 106, 5, 0.1));
    --csstools-light-dark-toggle--504: var(--csstools-color-scheme--light) rgba(201, 135, 13, 0.17);
    --color-background-warning-borderless-action-button-active: var(--csstools-light-dark-toggle--504, rgba(168, 106, 5, 0.14));
    --csstools-light-dark-toggle--505: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.85);
    --color-text-danger-primary-action-button: var(--csstools-light-dark-toggle--505, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--506: var(--csstools-color-scheme--light) rgba(253, 93, 78, 0.12);
    --color-background-danger-quiet-action-button: var(--csstools-light-dark-toggle--506, rgba(225, 57, 45, 0.13));
    --csstools-light-dark-toggle--507: var(--csstools-color-scheme--light) rgba(253, 93, 78, 0.17);
    --color-background-danger-quiet-action-button-hover: var(--csstools-light-dark-toggle--507, rgba(225, 57, 45, 0.18));
    --csstools-light-dark-toggle--508: var(--csstools-color-scheme--light) rgba(253, 93, 78, 0.12);
    --color-background-danger-quiet-action-button-active: var(--csstools-light-dark-toggle--508, rgba(225, 57, 45, 0.23));
    --csstools-light-dark-toggle--509: var(--csstools-color-scheme--light) rgba(243, 78, 63, 0.12);
    --color-background-danger-borderless-action-button-hover: var(--csstools-light-dark-toggle--509, rgba(192, 7, 10, 0.09));
    --csstools-light-dark-toggle--510: var(--csstools-color-scheme--light) rgba(243, 78, 63, 0.17);
    --color-background-danger-borderless-action-button-active: var(--csstools-light-dark-toggle--510, rgba(192, 7, 10, 0.13));
    --csstools-light-dark-toggle--511: var(--csstools-color-scheme--light) rgba(171, 174, 186, 0.7);
    --color-text-neutral-icon-button: var(--csstools-light-dark-toggle--511, rgba(84, 87, 100, 0.7));
    --csstools-light-dark-toggle--512: var(--csstools-color-scheme--light) rgba(171, 174, 186, 0.7);
    --color-text-neutral-icon-button-active: var(--csstools-light-dark-toggle--512, rgba(84, 87, 100, 0.7));
    --csstools-light-dark-toggle--513: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.14);
    --color-background-neutral-icon-button-square-hover: var(--csstools-light-dark-toggle--513, rgba(84, 87, 100, 0.07));
    --csstools-light-dark-toggle--514: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.18);
    --color-background-neutral-icon-button-square-active: var(--csstools-light-dark-toggle--514, rgba(84, 87, 100, 0.11));
    --csstools-light-dark-toggle--515: var(--csstools-color-scheme--light) rgba(160, 150, 253, 0.7);
    --color-text-brand-icon-button: var(--csstools-light-dark-toggle--515, rgba(93, 59, 196, 0.7));
    --csstools-light-dark-toggle--516: var(--csstools-color-scheme--light) rgba(160, 150, 253, 0.7);
    --color-text-brand-icon-button-active: var(--csstools-light-dark-toggle--516, rgba(93, 59, 196, 0.7));
    --csstools-light-dark-toggle--517: var(--csstools-color-scheme--light) rgba(138, 112, 255, 0.14);
    --color-background-brand-icon-button-square-hover: var(--csstools-light-dark-toggle--517, rgba(45, 0, 112, 0.05));
    --csstools-light-dark-toggle--518: var(--csstools-color-scheme--light) rgba(138, 112, 255, 0.18);
    --color-background-brand-icon-button-square-active: var(--csstools-light-dark-toggle--518, rgba(45, 0, 112, 0.1));
    --csstools-light-dark-toggle--519: var(--csstools-color-scheme--light) rgba(129, 167, 253, 0.7);
    --color-text-info-icon-button: var(--csstools-light-dark-toggle--519, rgba(35, 71, 199, 0.7));
    --csstools-light-dark-toggle--520: var(--csstools-color-scheme--light) rgba(129, 167, 253, 0.7);
    --color-text-info-icon-button-active: var(--csstools-light-dark-toggle--520, rgba(35, 71, 199, 0.7));
    --csstools-light-dark-toggle--521: var(--csstools-color-scheme--light) rgba(78, 125, 253, 0.12);
    --color-background-info-icon-button-square-hover: var(--csstools-light-dark-toggle--521, rgba(5, 3, 124, 0.05));
    --csstools-light-dark-toggle--522: var(--csstools-color-scheme--light) rgba(78, 125, 253, 0.17);
    --color-background-info-icon-button-square-active: var(--csstools-light-dark-toggle--522, rgba(5, 3, 124, 0.09));
    --csstools-light-dark-toggle--523: var(--csstools-color-scheme--light) rgba(86, 194, 115, 0.7);
    --color-text-success-icon-button: var(--csstools-light-dark-toggle--523, rgba(7, 131, 61, 0.7));
    --csstools-light-dark-toggle--524: var(--csstools-color-scheme--light) rgba(86, 194, 115, 0.7);
    --color-text-success-icon-button-active: var(--csstools-light-dark-toggle--524, rgba(7, 131, 61, 0.7));
    --csstools-light-dark-toggle--525: var(--csstools-color-scheme--light) rgba(47, 157, 82, 0.12);
    --color-background-success-icon-button-square-hover: var(--csstools-light-dark-toggle--525, rgba(9, 103, 47, 0.08));
    --csstools-light-dark-toggle--526: var(--csstools-color-scheme--light) rgba(47, 157, 82, 0.17);
    --color-background-success-icon-button-square-active: var(--csstools-light-dark-toggle--526, rgba(9, 103, 47, 0.12));
    --csstools-light-dark-toggle--527: var(--csstools-color-scheme--light) rgba(232, 159, 2, 0.7);
    --color-text-warning-icon-button: var(--csstools-light-dark-toggle--527, rgba(168, 106, 5, 0.7));
    --csstools-light-dark-toggle--528: var(--csstools-color-scheme--light) rgba(232, 159, 2, 0.7);
    --color-text-warning-icon-button-active: var(--csstools-light-dark-toggle--528, rgba(168, 106, 5, 0.7));
    --csstools-light-dark-toggle--529: var(--csstools-color-scheme--light) rgba(201, 135, 13, 0.12);
    --color-background-warning-icon-button-square-hover: var(--csstools-light-dark-toggle--529, rgba(168, 106, 5, 0.1));
    --csstools-light-dark-toggle--530: var(--csstools-color-scheme--light) rgba(201, 135, 13, 0.17);
    --color-background-warning-icon-button-square-active: var(--csstools-light-dark-toggle--530, rgba(168, 106, 5, 0.14));
    --csstools-light-dark-toggle--531: var(--csstools-color-scheme--light) rgba(255, 138, 122, 0.7);
    --color-text-danger-icon-button: var(--csstools-light-dark-toggle--531, rgba(192, 7, 10, 0.7));
    --csstools-light-dark-toggle--532: var(--csstools-color-scheme--light) rgba(255, 138, 122, 0.7);
    --color-text-danger-icon-button-active: var(--csstools-light-dark-toggle--532, rgba(192, 7, 10, 0.7));
    --csstools-light-dark-toggle--533: var(--csstools-color-scheme--light) rgba(243, 78, 63, 0.12);
    --color-background-danger-icon-button-square-hover: var(--csstools-light-dark-toggle--533, rgba(192, 7, 10, 0.09));
    --csstools-light-dark-toggle--534: var(--csstools-color-scheme--light) rgba(243, 78, 63, 0.17);
    --color-background-danger-icon-button-square-active: var(--csstools-light-dark-toggle--534, rgba(192, 7, 10, 0.13));
    --csstools-light-dark-toggle--535: var(--csstools-color-scheme--light) rgba(162, 162, 174, 0.4);
    --color-border-neutral-banner: var(--csstools-light-dark-toggle--535, rgba(75, 75, 78, 0.4));
    --csstools-light-dark-toggle--536: var(--csstools-color-scheme--light) rgba(216, 207, 247, 0.4);
    --color-border-brand-banner: var(--csstools-light-dark-toggle--536, rgba(87, 51, 204, 0.4));
    --csstools-light-dark-toggle--537: var(--csstools-color-scheme--light) rgba(130, 184, 222, 0.4);
    --color-border-info-banner: var(--csstools-light-dark-toggle--537, rgba(38, 81, 110, 0.4));
    --csstools-light-dark-toggle--538: var(--csstools-color-scheme--light) rgba(74, 191, 131, 0.4);
    --color-border-success-banner: var(--csstools-light-dark-toggle--538, rgba(27, 100, 60, 0.4));
    --csstools-light-dark-toggle--539: var(--csstools-color-scheme--light) rgba(206, 186, 130, 0.4);
    --color-border-warning-banner: var(--csstools-light-dark-toggle--539, rgba(99, 77, 39, 0.4));
    --csstools-light-dark-toggle--540: var(--csstools-color-scheme--light) rgba(237, 145, 140, 0.4);
    --color-border-danger-banner: var(--csstools-light-dark-toggle--540, rgba(132, 41, 36, 0.4));
    --csstools-light-dark-toggle--541: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.2);
    --color-outline-input: var(--csstools-light-dark-toggle--541, rgba(20, 22, 31, 0.3));
    --csstools-light-dark-toggle--542: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.4);
    --color-outline-input-hover: var(--csstools-light-dark-toggle--542, rgba(20, 22, 31, 0.6));
    --csstools-light-dark-toggle--543: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.5);
    --color-outline-input-focus: var(--csstools-light-dark-toggle--543, rgba(20, 22, 31, 0.8));
    --csstools-light-dark-toggle--544: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.4);
    --color-box-shadow-input-focus: var(--csstools-light-dark-toggle--544, rgba(46, 48, 56, 0.3));
    }
}

@supports not (color: light-dark(tan, tan)) {

:root * {
    --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 75%);
    --color-date: var(--csstools-light-dark-toggle--0, hsl(0deg 0% 15% / 75%));
    --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) hsl(46deg 15% 20%);
    --color-background-private-message-header: var(--csstools-light-dark-toggle--1, hsl(46deg 35% 93%));
    --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) hsl(46deg 7% 16%);
    --color-background-private-message-content: var(--csstools-light-dark-toggle--2, hsl(45deg 20% 96%));
    --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) hsl(0deg 0% 13.5%);
    --color-background-stream-message-content: var(--csstools-light-dark-toggle--3, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) hsl(217deg 64% 59% / 70%);
    --color-selected-message-outline: var(--csstools-light-dark-toggle--4, hsl(217deg 64% 59% / 60%));
    --csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 40%);
    --color-message-list-border: var(--csstools-light-dark-toggle--5, hsl(0deg 0% 0% / 16%));
    --csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-message-header-contents-border: var(--csstools-light-dark-toggle--6, hsl(0deg 0% 0% / 10%));
    --csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 48%);
    --color-private-message-header-border: var(--csstools-light-dark-toggle--7, hsl(0deg 0% 0% / 10%));
    --csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 50%);
    --color-message-header-contents-border-bottom: var(--csstools-light-dark-toggle--8, hsl(0deg 0% 0% / 5%));
    --csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 37%);
    --color-private-message-header-border-bottom: var(--csstools-light-dark-toggle--9, hsl(0deg 0% 0% / 7%));
    --csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 30%);
    --color-message-header-icon-non-interactive: var(--csstools-light-dark-toggle--10, hsl(0deg 0% 0% / 30%));
    --csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-message-header-icon-interactive: var(--csstools-light-dark-toggle--11, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) hsl(0deg 0% 11%);
    --color-background: var(--csstools-light-dark-toggle--12, hsl(0deg 0% 94%));
    --csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) hsl(225deg 6% 10%);
    --color-background-widget-input: var(--csstools-light-dark-toggle--13, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-widget-button: var(--csstools-light-dark-toggle--14, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) hsl(0deg 0% 13%);
    --color-background-navbar: var(--csstools-light-dark-toggle--15, hsl(0deg 0% 97%));
    --csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 85%);
    --color-text-sidebar-row: var(--csstools-light-dark-toggle--16, hsl(0deg 0% 20%));
    --csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) hsl(0deg 0% 90%);
    --color-text-active-narrow-filter: var(--csstools-light-dark-toggle--17, hsl(0deg 0% 15%));
    --csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 30%);
    --color-shadow-sidebar-row-hover: var(--csstools-light-dark-toggle--18, hsl(0deg 0% 0% / 30%));
    --csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) hsl(240deg 25% 35%);
    --color-background-sidebar-action-hover: var(--csstools-light-dark-toggle--19, hsl(240deg 100% 93%));
    --csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) hsl(240deg 100% 75% / 20%);
    --color-background-navigation-item-hover: var(--csstools-light-dark-toggle--20, hsl(240deg 100% 50% / 7%));
    --csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-navbar-bottom-border: var(--csstools-light-dark-toggle--21, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) hsl(0deg 0% 30%);
    --color-masked-unread-marker: var(--csstools-light-dark-toggle--22, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-active-row-modal: var(--csstools-light-dark-toggle--23, hsl(0deg 0% 98%));
    --csstools-light-dark-toggle--24: var(--csstools-color-scheme--light) hsl(212deg 28% 8% / 75%);
    --color-background-overlay: var(--csstools-light-dark-toggle--24, hsl(0deg 0% 13% / 80%));
    --csstools-light-dark-toggle--25: var(--csstools-color-scheme--light) hsl(212deg 28% 8% / 75%);
    --color-background-non-empty-overlay-indicator: var(--csstools-light-dark-toggle--25, hsl(0deg 0% 100% / 90%));
    --csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) #242424;
    --color-background-modal: var(--csstools-light-dark-toggle--26, #ededed);
    --csstools-light-dark-toggle--27: var(--csstools-color-scheme--light) #333;
    --color-background-modal-bar: var(--csstools-light-dark-toggle--27, #f5f5f5);
    --csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 20%);
    --color-border-modal-footer: var(--csstools-light-dark-toggle--28, hsl(0deg 0% 87%));
    --csstools-light-dark-toggle--29: var(--csstools-color-scheme--light) hsl(236deg 33% 90%);
    --color-modal-close-button: var(--csstools-light-dark-toggle--29, inherit);
    --csstools-light-dark-toggle--30: var(--csstools-color-scheme--light) hsl(0deg 0% 91% / 10%);
    --color-background-modal-close-button-hover: var(--csstools-light-dark-toggle--30, hsl(0deg 0% 90%));
    --csstools-light-dark-toggle--31: var(--csstools-color-scheme--light) hsl(240deg 35% 68%);
    --color-modal-selectable-icon: var(--csstools-light-dark-toggle--31, hsl(240deg 30% 40%));
    --csstools-light-dark-toggle--32: var(--csstools-color-scheme--light) hsl(240deg 100% 90%);
    --color-modal-selectable-icon-hover: var(--csstools-light-dark-toggle--32, hsl(240deg 100% 15%));
    --csstools-light-dark-toggle--33: var(--csstools-color-scheme--light) hsl(240deg 100% 75% / 20%);
    --background-color-modal-selectable-icon-hover: var(--csstools-light-dark-toggle--33, hsl(240deg 100% 50% / 7%));
    --csstools-light-dark-toggle--34: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-pill-container-without-placeholder: var(--csstools-light-dark-toggle--34, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--35: var(--csstools-color-scheme--light) hsl(236deg 33% 90%);
    --color-unmuted-or-followed-topic-list-item: var(--csstools-light-dark-toggle--35, hsl(0deg 0% 20%));
    --csstools-light-dark-toggle--36: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 19%);
    --color-topic-indent-border: var(--csstools-light-dark-toggle--36, hsl(0deg 0% 0% / 19%));
    --csstools-light-dark-toggle--37: var(--csstools-color-scheme--light) hsl(0deg 0% 17%);
    --color-background-search: var(--csstools-light-dark-toggle--37, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--38: var(--csstools-color-scheme--light) hsl(0deg 0% 20%);
    --color-background-search-collapsed: var(--csstools-light-dark-toggle--38, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--39: var(--csstools-color-scheme--light) hsl(0deg 0% 20%);
    --color-background-search-option-hover: var(--csstools-light-dark-toggle--39, hsl(0deg 0% 94%));
    --csstools-light-dark-toggle--40: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 30%);
    --color-search-box-hover-shadow: var(--csstools-light-dark-toggle--40, hsl(0deg 0% 0% / 10%));
    --csstools-light-dark-toggle--41: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 35%);
    --color-search-dropdown-top-border: var(--csstools-light-dark-toggle--41, hsl(0deg 0% 0% / 10%));
    --csstools-light-dark-toggle--42: var(--csstools-color-scheme--light) hsl(0deg 0% 78%);
    --color-search-icons: var(--csstools-light-dark-toggle--42, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--43: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 10%);
    --color-background-image-loader: var(--csstools-light-dark-toggle--43, hsl(0deg 0% 0% / 10%));
    --csstools-light-dark-toggle--44: var(--csstools-color-scheme--light) hsl(0deg 0% 17%);
    --color-background-popover-menu: var(--csstools-light-dark-toggle--44, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--45: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 40%);
    --color-border-popover-menu-separator: var(--csstools-light-dark-toggle--45, hsl(0deg 0% 0% / 10%));
    --csstools-light-dark-toggle--46: var(--csstools-color-scheme--light) hsl(225deg 100% 84%);
    --color-hotkey-hint: var(--csstools-light-dark-toggle--46, hsl(227deg 78% 59%));
    --csstools-light-dark-toggle--47: var(--csstools-color-scheme--light) hsl(0deg 0% 65%);
    --color-popover-hotkey-hint: var(--csstools-light-dark-toggle--47, hsl(0deg 0% 40%));
    --csstools-light-dark-toggle--48: var(--csstools-color-scheme--light) hsl(0deg 0% 65% / 50%);
    --color-border-popover-hotkey-hint: var(--csstools-light-dark-toggle--48, hsl(0deg 0% 40% / 50%));
    --csstools-light-dark-toggle--49: var(--csstools-color-scheme--light) hsl(220deg 12% 95% / 5%);
    --color-background-hover-popover-menu: var(--csstools-light-dark-toggle--49, hsl(220deg 12% 5% / 5%));
    --csstools-light-dark-toggle--50: var(--csstools-color-scheme--light) hsl(220deg 12% 95% / 7%);
    --color-background-active-popover-menu: var(--csstools-light-dark-toggle--50, hsl(220deg 12% 5% / 7%));
    --csstools-light-dark-toggle--51: var(--csstools-color-scheme--light) hsl(0deg 0% 0%);
    --color-border-popover-menu: var(--csstools-light-dark-toggle--51, hsl(0deg 0% 0% / 40%));
    --csstools-light-dark-toggle--52: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 20%);
    --color-border-personal-menu-avatar: var(--csstools-light-dark-toggle--52, hsl(0deg 0% 0% / 10%));
    --csstools-light-dark-toggle--53: var(--csstools-color-scheme--light) hsl(240deg 18.37% 34.42%);
    --color-background-unread-counter-prominent: var(--csstools-light-dark-toggle--53, hsl(240deg 10% 50% / 70%));
    --csstools-light-dark-toggle--54: var(--csstools-color-scheme--light) hsl(240deg 10% 50% / 35%);
    --color-background-unread-counter-normal: var(--csstools-light-dark-toggle--54, hsl(240deg 10% 50% / 20%));
    --csstools-light-dark-toggle--55: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 85%);
    --color-unread-counter-normal: var(--csstools-light-dark-toggle--55, hsl(0deg 0% 0% / 90%));
    --csstools-light-dark-toggle--56: var(--csstools-color-scheme--light) hsl(240deg 15% 65%);
    --color-unread-counter-quiet: var(--csstools-light-dark-toggle--56, hsl(240deg 15% 50%));
    --csstools-light-dark-toggle--57: var(--csstools-color-scheme--light) hsl(0deg 0% 67%);
    --color-border-add-subscription-button-focus: var(--csstools-light-dark-toggle--57, hsl(0deg 0% 20%));
    --csstools-light-dark-toggle--58: var(--csstools-color-scheme--light) hsl(240deg 35% 68%);
    --color-background-unread-counter-dot: var(--csstools-light-dark-toggle--58, hsl(240deg 30% 40%));
    --csstools-light-dark-toggle--59: var(--csstools-color-scheme--light) hsl(105deg 2% 50%);
    --color-border-unread-counter: var(--csstools-light-dark-toggle--59, var(--color-background-unread-counter));
    --csstools-light-dark-toggle--60: var(--csstools-color-scheme--light) var(--color-border-unread-counter);
    --color-border-unread-counter-popover-menu: var(--csstools-light-dark-toggle--60, inherit);
    --csstools-light-dark-toggle--61: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 30%);
    --color-background-tab-picker-container: var(--csstools-light-dark-toggle--61, hsl(0deg 0% 0% / 7%));
    --csstools-light-dark-toggle--62: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 7%);
    --color-background-tab-picker-selected-tab: var(--csstools-light-dark-toggle--62, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--63: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 12%);
    --color-outline-tab-picker-tab-option: var(--csstools-light-dark-toggle--63, hsl(0deg 0% 0% / 30%));
    --csstools-light-dark-toggle--64: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 5%);
    --color-background-tab-picker-tab-option-hover: var(--csstools-light-dark-toggle--64, hsl(0deg 0% 100% / 60%));
    --csstools-light-dark-toggle--65: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 3%);
    --color-background-tab-picker-tab-option-active: var(--csstools-light-dark-toggle--65, hsl(0deg 0% 100% / 35%));
    --csstools-light-dark-toggle--66: var(--csstools-color-scheme--light) hsl(0deg 0% 17%);
    --color-background-popover: var(--csstools-light-dark-toggle--66, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--67: var(--csstools-color-scheme--light) hsl(22deg 70% 35%);
    --color-background-alert-word: var(--csstools-light-dark-toggle--67, hsl(18deg 100% 84%));
    --csstools-light-dark-toggle--68: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 10%);
    --color-buddy-list-avatar-loading: var(--csstools-light-dark-toggle--68, hsl(0deg 0% 0% / 10%));
    --csstools-light-dark-toggle--69: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-border-sidebar: var(--csstools-light-dark-toggle--69, hsl(0deg 0% 87%));
    --csstools-light-dark-toggle--70: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-text-sidebar-base: var(--csstools-light-dark-toggle--70, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--71: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 15%);
    --color-border-sidebar-subheader: var(--csstools-light-dark-toggle--71, hsl(0deg 0% 0% / 15%));
    --csstools-light-dark-toggle--72: var(--csstools-color-scheme--light) hsl(236deg 33% 90%);
    --color-request-progress-status-alert-text: var(--csstools-light-dark-toggle--72, hsl(0deg 0% 20%));
    --csstools-light-dark-toggle--73: var(--csstools-color-scheme--light) hsl(46deg 28% 38% / 27%);
    --color-background-tip: var(--csstools-light-dark-toggle--73, hsl(46deg 63% 95%));
    --csstools-light-dark-toggle--74: var(--csstools-color-scheme--light) hsl(49deg 38% 46%);
    --color-border-tip: var(--csstools-light-dark-toggle--74, hsl(49deg 20% 84%));
    --csstools-light-dark-toggle--75: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 66.6%);
    --color-box-shadow-animated-purple-button-focus: var(--csstools-light-dark-toggle--75, hsl(235deg 18% 7%));
    --csstools-light-dark-toggle--76: var(--csstools-color-scheme--light) hsl(211deg 29% 14%);
    --color-background-animated-button: var(--csstools-light-dark-toggle--76, hsl(0deg 0% 90%));
    --csstools-light-dark-toggle--77: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-animated-button-text: var(--csstools-light-dark-toggle--77, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--78: var(--csstools-color-scheme--light) hsl(3deg 73% 74%);
    --color-invalid-input-border: var(--csstools-light-dark-toggle--78, hsl(3deg 57% 33%));
    --csstools-light-dark-toggle--79: var(--csstools-color-scheme--light) hsl(3deg 73% 74%);
    --color-invalid-input-box-shadow: var(--csstools-light-dark-toggle--79, hsl(3deg 57% 33%));
    --csstools-light-dark-toggle--80: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-white-box: var(--csstools-light-dark-toggle--80, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--81: var(--csstools-color-scheme--light) hsl(240deg 96% 68% / 50%);
    --color-stream-group-row-checked-icon-disabled: var(--csstools-light-dark-toggle--81, hsl(240deg 96% 68% / 100%));
    --csstools-light-dark-toggle--82: var(--csstools-color-scheme--light) hsl(218deg 14% 33%);
    --color-stream-group-row-plus-icon: var(--csstools-light-dark-toggle--82, hsl(0deg 0% 72%));
    --csstools-light-dark-toggle--83: var(--csstools-color-scheme--light) hsl(230deg 11% 67%);
    --color-stream-group-row-plus-icon-hover: var(--csstools-light-dark-toggle--83, hsl(0deg 0% 27%));
    --csstools-light-dark-toggle--84: var(--csstools-color-scheme--light) hsl(218deg 14% 33% / 50%);
    --color-stream-group-row-plus-icon-disabled: var(--csstools-light-dark-toggle--84, hsl(0deg 0% 87% / 100%));
    --csstools-light-dark-toggle--85: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-border-recent-view-row: var(--csstools-light-dark-toggle--85, hsl(0deg 0% 87%));
    --csstools-light-dark-toggle--86: var(--csstools-color-scheme--light) hsl(0deg 0% 88%);
    --color-border-recent-view-table: var(--csstools-light-dark-toggle--86, hsl(0deg 0% 0% / 60%));
    --csstools-light-dark-toggle--87: var(--csstools-color-scheme--light) hsl(0deg 0% 11%);
    --color-background-recent-view-row: var(--csstools-light-dark-toggle--87, hsl(100deg 11% 96%));
    --csstools-light-dark-toggle--88: var(--csstools-color-scheme--light) hsl(208deg 26% 11% / 60%);
    --color-background-recent-view-row-hover: var(--csstools-light-dark-toggle--88, hsl(210deg 100% 97%));
    --csstools-light-dark-toggle--89: var(--csstools-color-scheme--light) hsl(212deg 30% 22% / 40%);
    --color-background-recent-view-unread-row: var(--csstools-light-dark-toggle--89, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--90: var(--csstools-color-scheme--light) hsl(212deg 30% 22% / 60%);
    --color-background-recent-view-unread-row-hover: var(--csstools-light-dark-toggle--90, hsl(210deg 100% 97%));
    --csstools-light-dark-toggle--91: var(--csstools-color-scheme--light) hsl(206deg 89% 74%);
    --color-recent-view-link: var(--csstools-light-dark-toggle--91, hsl(205deg 47% 42%));
    --csstools-light-dark-toggle--92: var(--csstools-color-scheme--light) hsl(208deg 64% 52%);
    --color-recent-view-link-hover: var(--csstools-light-dark-toggle--92, hsl(214deg 40% 58%));
    --csstools-light-dark-toggle--93: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 50%);
    --color-background-recent-filters-button-focus: var(--csstools-light-dark-toggle--93, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--94: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 50%);
    --color-background-recent-filters-button-disabled: var(--csstools-light-dark-toggle--94, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--95: var(--csstools-color-scheme--light) hsl(0deg 0% 0%);
    --color-border-recent-filters-button-disabled: var(--csstools-light-dark-toggle--95, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--96: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-recent-view-participant-overflow-text: var(--csstools-light-dark-toggle--96, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--97: var(--csstools-color-scheme--light) hsl(211deg 18% 25%);
    --color-background-recent-view-participant-overflow: var(--csstools-light-dark-toggle--97, hsl(0deg 0% 88%));
    --csstools-light-dark-toggle--98: var(--csstools-color-scheme--light) hsl(228deg 11% 17%);
    --color-background-recent-view-selected: var(--csstools-light-dark-toggle--98, hsl(0deg 11% 93%));
    --csstools-light-dark-toggle--99: var(--csstools-color-scheme--light) hsl(228deg 11% 17%);
    --color-background-recent-view-table-thead-th: var(--csstools-light-dark-toggle--99, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--100: var(--csstools-color-scheme--light) hsl(211deg 29% 14%);
    --color-background-recent-view-table-thead-sort-header: var(--csstools-light-dark-toggle--100, hsl(0deg 0% 95%));
    --csstools-light-dark-toggle--101: var(--csstools-color-scheme--light) hsl(228deg 11% 17%);
    --color-compose-box-background: var(--csstools-light-dark-toggle--101, hsl(232deg 30% 92%));
    --csstools-light-dark-toggle--102: var(--csstools-color-scheme--light) color-mix(
            in srgb,
            var(--color-compose-box-background),
            hsl(0deg 0% 0%) 20%
        );
    --color-compose-message-content-background: var(--csstools-light-dark-toggle--102, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--103: var(--csstools-color-scheme--light) hsl(3deg 50% 12%);
    --color-compose-message-content-background-over-limit: var(--csstools-light-dark-toggle--103, hsl(3deg 35% 90%));
    --csstools-light-dark-toggle--104: var(--csstools-color-scheme--light) hsl(50deg 75% 12%);
    --color-compose-message-content-background-approaching-limit: var(--csstools-light-dark-toggle--104, hsl(50deg 75% 92%));
    --csstools-light-dark-toggle--105: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 40%);
    --color-border-compose-content: var(--csstools-light-dark-toggle--105, hsl(0deg 0% 0% / 10%));
    --csstools-light-dark-toggle--106: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 80%);
    --color-compose-send-button-focus-shadow: var(--csstools-light-dark-toggle--106, hsl(230deg 100% 20%));
    --csstools-light-dark-toggle--107: var(--csstools-color-scheme--light) hsl(240deg 30% 70%);
    --color-compose-send-control-button: var(--csstools-light-dark-toggle--107, hsl(240deg 30% 50% / 80%));
    --csstools-light-dark-toggle--108: var(--csstools-color-scheme--light) var(--color-compose-send-control-button);
    --color-compose-send-control-button-interactive: var(--csstools-light-dark-toggle--108, hsl(240deg 30% 50%));
    --csstools-light-dark-toggle--109: var(--csstools-color-scheme--light) hsl(235deg 100% 70% / 11%);
    --color-compose-send-control-button-background-interactive: var(--csstools-light-dark-toggle--109, hsl(240deg 100% 30% / 5%));
    --csstools-light-dark-toggle--110: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-compose-recipient-box-background-color: var(--csstools-light-dark-toggle--110, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--111: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 12%);
    --color-compose-recipient-box-hover: var(--csstools-light-dark-toggle--111, hsl(0deg 0% 69%));
    --csstools-light-dark-toggle--112: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 27%);
    --color-compose-recipient-box-has-focus: var(--csstools-light-dark-toggle--112, hsl(0deg 0% 57%));
    --csstools-light-dark-toggle--113: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-compose-collapsed-reply-button-area-background: var(--csstools-light-dark-toggle--113, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--114: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 15%);
    --color-compose-collapsed-reply-button-area-background-interactive: var(--csstools-light-dark-toggle--114, var(--color-compose-collapsed-reply-button-area-background));
    --csstools-light-dark-toggle--115: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-compose-collapsed-reply-button-area-border: var(--csstools-light-dark-toggle--115, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--116: var(--csstools-color-scheme--light) var(--color-compose-collapsed-reply-button-area-border);
    --color-compose-collapsed-reply-button-area-border-interactive: var(--csstools-light-dark-toggle--116, hsl(0deg 0% 60%));
    --csstools-light-dark-toggle--117: var(--csstools-color-scheme--light) hsl(231deg 30% 65%);
    --color-compose-embedded-button-text-color: var(--csstools-light-dark-toggle--117, hsl(231deg 20% 55%));
    --csstools-light-dark-toggle--118: var(--csstools-color-scheme--light) hsl(231deg 30% 70%);
    --color-compose-embedded-button-text-color-hover: var(--csstools-light-dark-toggle--118, hsl(231deg 20% 30%));
    --csstools-light-dark-toggle--119: var(--csstools-color-scheme--light) hsl(235deg 100% 70% / 11%);
    --color-compose-embedded-button-background-hover: var(--csstools-light-dark-toggle--119, hsl(231deg 100% 90% / 50%));
    --csstools-light-dark-toggle--120: var(--csstools-color-scheme--light) hsl(235deg 100% 70% / 20%);
    --color-compose-embedded-button-background-interactive: var(--csstools-light-dark-toggle--120, hsl(231deg 100% 90% / 90%));
    --csstools-light-dark-toggle--121: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-compose-new-message-button: var(--csstools-light-dark-toggle--121, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--122: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 15%);
    --color-background-compose-new-message-button-hover: var(--csstools-light-dark-toggle--122, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--123: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-compose-new-message-button-active: var(--csstools-light-dark-toggle--123, hsl(0deg 0% 95%));
    --csstools-light-dark-toggle--124: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-border-compose-new-message-button: var(--csstools-light-dark-toggle--124, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--125: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-border-compose-new-message-button-hover: var(--csstools-light-dark-toggle--125, hsl(0deg 0% 60%));
    --csstools-light-dark-toggle--126: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-border-compose-new-message-button-active: var(--csstools-light-dark-toggle--126, hsl(0deg 0% 60%));
    --csstools-light-dark-toggle--127: var(--csstools-color-scheme--light) hsl(38deg 100% 70%);
    --color-limit-indicator: var(--csstools-light-dark-toggle--127, hsl(38deg 100% 36%));
    --csstools-light-dark-toggle--128: var(--csstools-color-scheme--light) hsl(3deg 80% 60%);
    --color-limit-indicator-over-limit: var(--csstools-light-dark-toggle--128, hsl(3deg 80% 40%));
    --csstools-light-dark-toggle--129: var(--csstools-color-scheme--light) hsl(227deg 80% 60% / 25%);
    --color-narrow-to-compose-recipients-background: var(--csstools-light-dark-toggle--129, hsl(227deg 100% 70% / 25%));
    --csstools-light-dark-toggle--130: var(--csstools-color-scheme--light) hsl(227deg 80% 60% / 35%);
    --color-narrow-to-compose-recipients-background-hover: var(--csstools-light-dark-toggle--130, hsl(227deg 100% 70% / 35%));
    --csstools-light-dark-toggle--131: var(--csstools-color-scheme--light) hsl(224deg 28% 81%);
    --color-narrow-to-compose-recipients: var(--csstools-light-dark-toggle--131, hsl(227deg 76% 64%));
    --csstools-light-dark-toggle--132: var(--csstools-color-scheme--light) hsl(221deg 100% 95%);
    --color-narrow-to-compose-recipients-hover: var(--csstools-light-dark-toggle--132, hsl(227deg 78% 59%));
    --csstools-light-dark-toggle--133: var(--csstools-color-scheme--light) hsl(0deg 100% 100% / 55%);
    --color-composebox-button: var(--csstools-light-dark-toggle--133, hsl(0deg 100% 0% / 55%));
    --csstools-light-dark-toggle--134: var(--csstools-color-scheme--light) hsl(231deg 8% 13.5% / 80%);
    --color-composebox-button-background: var(--csstools-light-dark-toggle--134, hsl(0deg 100% 100% / 60%));
    --csstools-light-dark-toggle--135: var(--csstools-color-scheme--light) hsl(231deg 12% 18%);
    --color-composebox-button-background-hover: var(--csstools-light-dark-toggle--135, hsl(0deg 0% 95%));
    --csstools-light-dark-toggle--136: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 8%);
    --color-message-formatting-controls-container: var(--csstools-light-dark-toggle--136, hsl(232deg 30% 96%));
    --csstools-light-dark-toggle--137: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 80%);
    --color-message-content-container-border: var(--csstools-light-dark-toggle--137, hsl(0deg 0% 0% / 10%));
    --csstools-light-dark-toggle--138: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 27%);
    --color-message-content-container-border-focus: var(--csstools-light-dark-toggle--138, hsl(0deg 0% 57%));
    --csstools-light-dark-toggle--139: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 5%);
    --color-compose-control-button-background-hover: var(--csstools-light-dark-toggle--139, hsl(0deg 0% 0% / 5%));
    --csstools-light-dark-toggle--140: var(--csstools-color-scheme--light) hsl(236deg 33% 90% / 25%);
    --color-compose-formatting-button-divider: var(--csstools-light-dark-toggle--140, hsl(0deg 0% 75%));
    --csstools-light-dark-toggle--141: var(--csstools-color-scheme--light) hsl(0deg 0% 67%);
    --color-compose-focus-ring: var(--csstools-light-dark-toggle--141, var(--color-outline-focus));
    --csstools-light-dark-toggle--142: var(--csstools-color-scheme--light) hsl(234deg 21% 24%);
    --csstools-light-dark-toggle--143: var(--csstools-color-scheme--light) hsl(234deg 21% 24% / 76.9%);
    --gradient-compose-scroll-backward: linear-gradient(
        90deg,
        var(--csstools-light-dark-toggle--142, hsl(234deg 100% 95%)) 35%,
        var(--csstools-light-dark-toggle--143, hsl(234deg 100% 95%)) 50%,
        transparent 100%
    );
    --csstools-light-dark-toggle--144: var(--csstools-color-scheme--light) hsl(234deg 30% 28%);
    --csstools-light-dark-toggle--145: var(--csstools-color-scheme--light) hsl(234deg 30% 28% / 76.9%);
    --gradient-compose-scroll-backward-hover: linear-gradient(
        90deg,
        var(--csstools-light-dark-toggle--144, hsl(234deg 100% 93%)) 35%,
        var(--csstools-light-dark-toggle--145, hsl(234deg 100% 93%)) 50%,
        transparent 100%
    );
    --csstools-light-dark-toggle--146: var(--csstools-color-scheme--light) hsl(234deg 35% 30%);
    --gradient-compose-scroll-backward-active: linear-gradient(
        90deg,
        var(--csstools-light-dark-toggle--146, hsl(234deg 100% 90%)) 45%,
        transparent 100%
    );
    --csstools-light-dark-toggle--147: var(--csstools-color-scheme--light) hsl(234deg 21% 24% / 76.9%);
    --csstools-light-dark-toggle--148: var(--csstools-color-scheme--light) hsl(234deg 21% 24%);
    --gradient-compose-scroll-forward: linear-gradient(
        90deg,
        transparent 0%,
        var(--csstools-light-dark-toggle--147, hsl(234deg 100% 95%)) 50%,
        var(--csstools-light-dark-toggle--148, hsl(234deg 100% 95%)) 65%
    );
    --csstools-light-dark-toggle--149: var(--csstools-color-scheme--light) hsl(234deg 30% 28% / 76.9%);
    --csstools-light-dark-toggle--150: var(--csstools-color-scheme--light) hsl(234deg 30% 28%);
    --gradient-compose-scroll-forward-hover: linear-gradient(
        90deg,
        transparent 0%,
        var(--csstools-light-dark-toggle--149, hsl(234deg 100% 93%)) 50%,
        var(--csstools-light-dark-toggle--150, hsl(234deg 100% 93%)) 65%
    );
    --csstools-light-dark-toggle--151: var(--csstools-color-scheme--light) hsl(234deg 35% 30%);
    --gradient-compose-scroll-forward-active: linear-gradient(
        90deg,
        transparent 0%,
        var(--csstools-light-dark-toggle--151, hsl(234deg 100% 90%)) 55%
    );
    --csstools-light-dark-toggle--152: var(--csstools-color-scheme--light) hsl(0deg 0% 87%);
    --color-text-default: var(--csstools-light-dark-toggle--152, hsl(0deg 0% 20%));
    --csstools-light-dark-toggle--153: var(--csstools-color-scheme--light) var(--color-text-default);
    --color-text-message-default: var(--csstools-light-dark-toggle--153, hsl(0deg 0% 15%));
    --csstools-light-dark-toggle--154: var(--csstools-color-scheme--light) hsl(0deg 0% 87% / 40%);
    --color-text-message-blockquote-border: var(--csstools-light-dark-toggle--154, hsl(0deg 0% 15% / 25%));
    --csstools-light-dark-toggle--155: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 85%);
    --color-text-message-view-header: var(--csstools-light-dark-toggle--155, hsl(0deg 0% 20% / 100%));
    --csstools-light-dark-toggle--156: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 85%);
    --color-text-message-header: var(--csstools-light-dark-toggle--156, hsl(0deg 0% 15%));
    --csstools-light-dark-toggle--157: var(--csstools-color-scheme--light) hsl(0deg 0% 95%);
    --color-text-dropdown-input: var(--csstools-light-dark-toggle--157, hsl(0deg 0% 13.33%));
    --csstools-light-dark-toggle--158: var(--csstools-color-scheme--light) hsl(240deg 100% 88% / 100%);
    --color-text-self-direct-mention: var(--csstools-light-dark-toggle--158, hsl(240deg 52% 45% / 100%));
    --csstools-light-dark-toggle--159: var(--csstools-color-scheme--light) hsl(184deg 52% 63% / 100%);
    --color-text-self-group-mention: var(--csstools-light-dark-toggle--159, hsl(183deg 52% 26% / 100%));
    --csstools-light-dark-toggle--160: var(--csstools-color-scheme--light) hsl(240deg 30% 65%);
    --color-text-show-more-less-button: var(--csstools-light-dark-toggle--160, hsl(240deg 52% 53%));
    --csstools-light-dark-toggle--161: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 75%);
    --color-text-search: var(--csstools-light-dark-toggle--161, hsl(0deg 0% 35%));
    --csstools-light-dark-toggle--162: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-text-search-hover: var(--csstools-light-dark-toggle--162, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--163: var(--csstools-color-scheme--light) hsl(0deg 0% 55%);
    --color-text-placeholder: var(--csstools-light-dark-toggle--163, hsl(0deg 0% 45%));
    --csstools-light-dark-toggle--164: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 50%);
    --color-text-search-placeholder: var(--csstools-light-dark-toggle--164, hsl(0deg 0% 50%));
    --csstools-light-dark-toggle--165: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 80%);
    --color-text-popover-menu: var(--csstools-light-dark-toggle--165, hsl(0deg 0% 15%));
    --csstools-light-dark-toggle--166: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-text-full-name: var(--csstools-light-dark-toggle--166, hsl(0deg 0% 15%));
    --csstools-light-dark-toggle--167: var(--csstools-color-scheme--light) hsl(0deg 0% 50%);
    --color-text-item: var(--csstools-light-dark-toggle--167, hsl(0deg 0% 40%));
    --csstools-light-dark-toggle--168: var(--csstools-color-scheme--light) hsl(0deg 0% 100% 35%);
    --color-text-personal-menu-no-status: var(--csstools-light-dark-toggle--168, hsl(0deg 0% 50%));
    --csstools-light-dark-toggle--169: var(--csstools-color-scheme--light) hsl(0deg 0% 100% 50%);
    --color-text-personal-menu-some-status: var(--csstools-light-dark-toggle--169, hsl(0deg 0% 40%));
    --csstools-light-dark-toggle--170: var(--csstools-color-scheme--light) hsl(216deg 50% 75%);
    --color-text-sidebar-heading: var(--csstools-light-dark-toggle--170, hsl(216deg 65% 20%));
    --csstools-light-dark-toggle--171: var(--csstools-color-scheme--light) hsl(240deg 35% 68%);
    --color-text-sidebar-action-heading: var(--csstools-light-dark-toggle--171, hsl(240deg 30% 40%));
    --csstools-light-dark-toggle--172: var(--csstools-color-scheme--light) hsl(240deg 100% 90%);
    --color-text-sidebar-action-heading-hover: var(--csstools-light-dark-toggle--172, hsl(240deg 100% 15%));
    --csstools-light-dark-toggle--173: var(--csstools-color-scheme--light) hsl(236deg 33% 90%);
    --color-text-sidebar-popover-menu: var(--csstools-light-dark-toggle--173, hsl(0deg 0% 20%));
    --csstools-light-dark-toggle--174: var(--csstools-color-scheme--light) var(--grey-400);
    --color-text-user-card-secondary: var(--csstools-light-dark-toggle--174, var(--grey-550));
    --csstools-light-dark-toggle--175: var(--csstools-color-scheme--light) hsl(200deg 79% 66%);
    --color-text-url-hover: var(--csstools-light-dark-toggle--175, hsl(200deg 100% 25%));
    --csstools-light-dark-toggle--176: var(--csstools-color-scheme--light) hsl(0deg 0% 52%);
    --color-text-settings-field-hint: var(--csstools-light-dark-toggle--176, hsl(0deg 0% 57%));
    --csstools-light-dark-toggle--177: var(--csstools-color-scheme--light) hsl(236deg 33% 80%);
    --color-text-clear-search-button: var(--csstools-light-dark-toggle--177, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--178: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-text-clear-search-button-hover: var(--csstools-light-dark-toggle--178, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--179: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-text-settings-plus-button: var(--csstools-light-dark-toggle--179, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--180: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-settings-plus-button: var(--csstools-light-dark-toggle--180, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--181: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-border-settings-plus-button: var(--csstools-light-dark-toggle--181, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--182: var(--csstools-color-scheme--light) hsl(236deg 33% 90%);
    --color-user-profile-field-name: var(--csstools-light-dark-toggle--182, hsl(0deg 0% 20%));
    --csstools-light-dark-toggle--183: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 40%);
    --color-border-user-profile-table: var(--csstools-light-dark-toggle--183, hsl(0deg 0% 87%));
    --csstools-light-dark-toggle--184: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 20%);
    --color-border-manage-profile-footer: var(--csstools-light-dark-toggle--184, hsl(0deg 0% 87%));
    --csstools-light-dark-toggle--185: var(--csstools-color-scheme--light) hsl(200deg 100% 50%);
    --color-text-link: var(--csstools-light-dark-toggle--185, hsl(210deg 94% 42%));
    --csstools-light-dark-toggle--186: var(--csstools-color-scheme--light) hsl(200deg 100% 60%);
    --color-text-link-hover: var(--csstools-light-dark-toggle--186, hsl(212deg 100% 50%));
    --csstools-light-dark-toggle--187: var(--csstools-color-scheme--light) hsl(200deg 100% 50%);
    --color-text-link-active: var(--csstools-light-dark-toggle--187, hsl(212deg 100% 30%));
    --csstools-light-dark-toggle--188: var(--csstools-color-scheme--light) hsl(200deg 79% 66%);
    --color-text-generic-link-interactive: var(--csstools-light-dark-toggle--188, #005580);
    --csstools-light-dark-toggle--189: var(--csstools-color-scheme--light) hsl(0deg 0% 0%);
    --color-background-tippy-box: var(--csstools-light-dark-toggle--189, hsl(0deg 0% 20%));
    --csstools-light-dark-toggle--190: var(--csstools-color-scheme--light) hsl(240deg 5% 16%);
    --color-background-dropdown-widget: var(--csstools-light-dark-toggle--190, hsl(240deg 20% 98%));
    --csstools-light-dark-toggle--191: var(--csstools-color-scheme--light) hsl(0deg 0% 0%);
    --color-border-dropdown-widget: var(--csstools-light-dark-toggle--191, hsl(0deg 0% 0% / 40%));
    --csstools-light-dark-toggle--192: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-border-dropdown-widget-button: var(--csstools-light-dark-toggle--192, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--193: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-dropdown-widget-button: var(--csstools-light-dark-toggle--193, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--194: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-disabled-dropdown-widget-button: var(--csstools-light-dark-toggle--194, hsl(0deg 0% 93%));
    --csstools-light-dark-toggle--195: var(--csstools-color-scheme--light) hsl(185deg 35% 65%);
    --color-poll-vote: var(--csstools-light-dark-toggle--195, hsl(156deg 41% 40%));
    --csstools-light-dark-toggle--196: var(--csstools-color-scheme--light) hsl(185deg 50% 70%);
    --color-poll-vote-hover: var(--csstools-light-dark-toggle--196, hsl(156deg 41% 40%));
    --csstools-light-dark-toggle--197: var(--csstools-color-scheme--light) hsl(185deg 50% 65%);
    --color-poll-vote-focus: var(--csstools-light-dark-toggle--197, hsl(156deg 41% 40%));
    --csstools-light-dark-toggle--198: var(--csstools-color-scheme--light) hsl(185deg 35% 35%);
    --color-border-poll-vote: var(--csstools-light-dark-toggle--198, hsl(156deg 28% 70%));
    --csstools-light-dark-toggle--199: var(--csstools-color-scheme--light) hsl(185deg 40% 40%);
    --color-border-poll-vote-hover: var(--csstools-light-dark-toggle--199, hsl(156deg 30% 50%));
    --csstools-light-dark-toggle--200: var(--csstools-color-scheme--light) hsl(185deg 40% 50%);
    --color-border-poll-vote-focus: var(--csstools-light-dark-toggle--200, hsl(156deg 30% 50%));
    --csstools-light-dark-toggle--201: var(--csstools-color-scheme--light) hsl(185deg 20% 20%);
    --color-background-poll-vote-hover: var(--csstools-light-dark-toggle--201, var(--color-background-widget-button));
    --csstools-light-dark-toggle--202: var(--csstools-color-scheme--light) hsl(185deg 40% 35%);
    --color-background-poll-vote-focus: var(--csstools-light-dark-toggle--202, hsl(156deg 41% 90%));
    --csstools-light-dark-toggle--203: var(--csstools-color-scheme--light) hsl(236deg 15% 70%);
    --color-poll-names: var(--csstools-light-dark-toggle--203, hsl(0deg 0% 45%));
    --csstools-light-dark-toggle--204: var(--csstools-color-scheme--light) hsl(185deg 40% 35%);
    --color-border-todo-checkbox-hover: var(--csstools-light-dark-toggle--204, hsl(156deg 30% 50%));
    --csstools-light-dark-toggle--205: var(--csstools-color-scheme--light) hsl(185deg 40% 45%);
    --color-border-todo-checkbox-checked: var(--csstools-light-dark-toggle--205, hsl(156deg 41% 40%));
    --csstools-light-dark-toggle--206: var(--csstools-color-scheme--light) hsl(185deg 20% 20%);
    --color-background-todo-checkbox-hover: var(--csstools-light-dark-toggle--206, transparent);
    --csstools-light-dark-toggle--207: var(--csstools-color-scheme--light) hsl(185deg 40% 45%);
    --color-background-todo-checkbox-checked: var(--csstools-light-dark-toggle--207, hsl(156deg 41% 40%));
    --csstools-light-dark-toggle--208: var(--csstools-color-scheme--light) hsl(211deg 29% 14%);
    --color-kbd-background: var(--csstools-light-dark-toggle--208, hsl(0deg 0% 98%));
    --csstools-light-dark-toggle--209: var(--csstools-color-scheme--light) hsl(211deg 29% 14%);
    --color-kbd-border: var(--csstools-light-dark-toggle--209, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--210: var(--csstools-color-scheme--light) hsl(236deg 33% 90%);
    --color-kbd-text: var(--csstools-light-dark-toggle--210, hsl(0deg 0% 20%));
    --csstools-light-dark-toggle--211: var(--csstools-color-scheme--light) hsl(236deg 33% 90%);
    --color-kbd-enter-sends: var(--csstools-light-dark-toggle--211, hsl(0deg 0% 40%));
    --csstools-light-dark-toggle--212: var(--csstools-color-scheme--light) hsl(236deg 33% 90%);
    --color-realm-enable-spectator-access-link: var(--csstools-light-dark-toggle--212, hsl(0deg 0% 20%));
    --csstools-light-dark-toggle--213: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-stream-email: var(--csstools-light-dark-toggle--213, hsl(0deg 0% 98%));
    --csstools-light-dark-toggle--214: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-integration-url: var(--csstools-light-dark-toggle--214, transparent);
    --csstools-light-dark-toggle--215: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-tbody-th-odd: var(--csstools-light-dark-toggle--215, transparent);
    --csstools-light-dark-toggle--216: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 50%);
    --color-background-rendered-markdown-thead: var(--csstools-light-dark-toggle--216, hsl(0deg 0% 93%));
    --csstools-light-dark-toggle--217: var(--csstools-color-scheme--light) hsl(0deg 0% 33%);
    --color-border-rendered-markdown-table: var(--csstools-light-dark-toggle--217, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--218: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-tab-switcher-ind-tab: var(--csstools-light-dark-toggle--218, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--219: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 50%);
    --color-background-tab-switcher-ind-tab-selected: var(--csstools-light-dark-toggle--219, hsl(0deg 0% 53%));
    --csstools-light-dark-toggle--220: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-border-tab-switcher-ind-tab: var(--csstools-light-dark-toggle--220, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--221: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 90%);
    --color-border-tab-switcher-ind-tab-selected: var(--csstools-light-dark-toggle--221, hsl(0deg 0% 47%));
    --csstools-light-dark-toggle--222: var(--csstools-color-scheme--light) hsl(0deg 0% 42% / 90%);
    --color-text-tab-switcher-ind-tab-disabled: var(--csstools-light-dark-toggle--222, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--223: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-border-tab-switcher-ind-tab-disabled: var(--csstools-light-dark-toggle--223, hsl(0deg 0% 87%));
    --csstools-light-dark-toggle--224: var(--csstools-color-scheme--light) hsl(0deg 0% 0%);
    --color-background-table-header: var(--csstools-light-dark-toggle--224, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--225: var(--csstools-color-scheme--light) hsl(211deg 29% 14%);
    --color-background-table-header-sortable-hover: var(--csstools-light-dark-toggle--225, hsl(0deg 0% 95%));
    --csstools-light-dark-toggle--226: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-border-table-striped: var(--csstools-light-dark-toggle--226, hsl(0deg 0% 87%));
    --csstools-light-dark-toggle--227: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-border-table-bordered: var(--csstools-light-dark-toggle--227, hsl(0deg 0% 87%));
    --csstools-light-dark-toggle--228: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-border-table-subscriber-list: var(--csstools-light-dark-toggle--228, hsl(0deg 0% 87%));
    --csstools-light-dark-toggle--229: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 85%);
    --color-markdown-code-text: var(--csstools-light-dark-toggle--229, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--230: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 8%);
    --color-markdown-code-background: var(--csstools-light-dark-toggle--230, hsl(0deg 0% 0% / 6%));
    --csstools-light-dark-toggle--231: var(--csstools-color-scheme--light) var(--color-markdown-code-background);
    --color-markdown-code-background-mentions: var(--csstools-light-dark-toggle--231, hsl(0deg 0% 0% / 7%));
    --csstools-light-dark-toggle--232: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 4%);
    --color-markdown-pre-background: var(--csstools-light-dark-toggle--232, hsl(0deg 0% 0% / 4%));
    --csstools-light-dark-toggle--233: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 5%);
    --color-markdown-pre-background-mentions: var(--csstools-light-dark-toggle--233, hsl(0deg 0% 0% / 4%));
    --csstools-light-dark-toggle--234: var(--csstools-color-scheme--light) var(--color-markdown-pre-border);
    --color-markdown-pre-border-mentions: var(--csstools-light-dark-toggle--234, transparent);
    --csstools-light-dark-toggle--235: var(--csstools-color-scheme--light) var(--color-text-generic-link);
    --color-markdown-link: var(--csstools-light-dark-toggle--235, hsl(200deg 100% 40%));
    --csstools-light-dark-toggle--236: var(--csstools-color-scheme--light) var(--color-text-generic-link-interactive);
    --color-markdown-link-hover: var(--csstools-light-dark-toggle--236, hsl(200deg 100% 25%));
    --csstools-light-dark-toggle--237: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 3%);
    --color-background-image-thumbnail: var(--csstools-light-dark-toggle--237, hsl(0deg 0% 0% / 3%));
    --csstools-light-dark-toggle--238: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 45%);
    --color-background-image-thumbnail-hover: var(--csstools-light-dark-toggle--238, hsl(0deg 0% 0% / 30%));
    --csstools-light-dark-toggle--239: var(--csstools-color-scheme--light) hsl(180deg 5% 50% / 100%);
    --color-icon-bot: var(--csstools-light-dark-toggle--239, hsl(180deg 8% 65% / 100%));
    --csstools-light-dark-toggle--240: var(--csstools-color-scheme--light) hsl(217deg 41% 90% / 50%);
    --color-message-action-visible: var(--csstools-light-dark-toggle--240, hsl(216deg 43% 20% / 50%));
    --csstools-light-dark-toggle--241: var(--csstools-color-scheme--light) hsl(217deg 41% 90% / 100%);
    --color-message-action-interactive: var(--csstools-light-dark-toggle--241, hsl(216deg 43% 20% / 100%));
    --csstools-light-dark-toggle--242: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-left-sidebar-follow-icon-hover: var(--csstools-light-dark-toggle--242, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--243: var(--csstools-color-scheme--light) hsl(240deg 35% 68%);
    --color-left-sidebar-navigation-icon: var(--csstools-light-dark-toggle--243, hsl(240deg 30% 40%));
    --csstools-light-dark-toggle--244: var(--csstools-color-scheme--light) hsl(240deg 35% 68%);
    --color-left-sidebar-heads-up-icon: var(--csstools-light-dark-toggle--244, hsl(240deg 30% 40%));
    --csstools-light-dark-toggle--245: var(--csstools-color-scheme--light) hsl(240deg 100% 90%);
    --color-left-sidebar-heads-up-icon-hover: var(--csstools-light-dark-toggle--245, hsl(240deg 100% 15%));
    --csstools-light-dark-toggle--246: var(--csstools-color-scheme--light) hsl(240deg 35% 58%);
    --color-left-sidebar-dm-partners-icon: var(--csstools-light-dark-toggle--246, hsl(240deg 30% 60%));
    --csstools-light-dark-toggle--247: var(--csstools-color-scheme--light) hsl(240deg 100% 75% / 20%);
    --background-color-left-sidebar-heads-up-icon-hover: var(--csstools-light-dark-toggle--247, hsl(240deg 100% 50% / 7%));
    --csstools-light-dark-toggle--248: var(--csstools-color-scheme--light) hsl(240deg 35% 38%);
    --color-vdots-hint: var(--csstools-light-dark-toggle--248, hsl(240deg 30% 80%));
    --csstools-light-dark-toggle--249: var(--csstools-color-scheme--light) hsl(240deg 35% 68%);
    --color-vdots-visible: var(--csstools-light-dark-toggle--249, hsl(240deg 30% 40%));
    --csstools-light-dark-toggle--250: var(--csstools-color-scheme--light) hsl(240deg 100% 90%);
    --color-vdots-hover: var(--csstools-light-dark-toggle--250, hsl(240deg 100% 15%));
    --csstools-light-dark-toggle--251: var(--csstools-color-scheme--light) hsl(0deg 0% 80%);
    --color-tab-picker-icon: var(--csstools-light-dark-toggle--251, hsl(200deg 100% 40%));
    --csstools-light-dark-toggle--252: var(--csstools-color-scheme--light) #4cdc75;
    --color-user-circle-active: var(--csstools-light-dark-toggle--252, #43a35e);
    --csstools-light-dark-toggle--253: var(--csstools-color-scheme--light) #ae640a;
    --color-user-circle-idle: var(--csstools-light-dark-toggle--253, #f5b266);
    --csstools-light-dark-toggle--254: var(--csstools-color-scheme--light) #545764;
    --color-user-circle-offline: var(--csstools-light-dark-toggle--254, #bcc0cf);
    --csstools-light-dark-toggle--255: var(--csstools-color-scheme--light) #646671;
    --color-user-circle-offline-typeahead-highlight: var(--csstools-light-dark-toggle--255, #adb2c5);
    --csstools-light-dark-toggle--256: var(--csstools-color-scheme--light) var(--color-user-circle-idle);
    --gradient-user-circle-idle: linear-gradient(
        to right,
        var(--color-user-circle-idle) 5%,
        var(--csstools-light-dark-toggle--256, color-mix(
                    in srgb,
                    var(--color-user-circle-idle) 78.9%,
                    transparent
                ))
            25%,
        transparent 100%
    );
    --csstools-light-dark-toggle--257: var(--csstools-color-scheme--light) var(--color-user-circle-idle);
    --gradient-user-circle-idle-avatar: linear-gradient(
        to right,
        var(--color-user-circle-idle) 5%,
        var(--csstools-light-dark-toggle--257, color-mix(
                    in srgb,
                    var(--color-user-circle-idle) 78.9%,
                    var(--color-background)
                ))
            25%,
        var(--color-background) 100%
    );
    --csstools-light-dark-toggle--258: var(--csstools-color-scheme--light) var(--grey-300);
    --color-copy-button-hover: var(--csstools-light-dark-toggle--258, var(--grey-600));
    --csstools-light-dark-toggle--259: var(--csstools-color-scheme--light) var(--grey-300);
    --color-copy-button-square-active: var(--csstools-light-dark-toggle--259, var(--grey-600));
    --csstools-light-dark-toggle--260: var(--csstools-color-scheme--light) var(--green-300);
    --color-copy-button-success: var(--csstools-light-dark-toggle--260, var(--green-500));
    --csstools-light-dark-toggle--261: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 15%);
    --color-message-reaction-border: var(--csstools-light-dark-toggle--261, hsl(0deg 0% 0% / 10%));
    --csstools-light-dark-toggle--262: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 70%);
    --color-message-reaction-border-reacted: var(--csstools-light-dark-toggle--262, hsl(0deg 0% 0% / 45%));
    --csstools-light-dark-toggle--263: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 30%);
    --color-message-reaction-background: var(--csstools-light-dark-toggle--263, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--264: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 80%);
    --color-message-reaction-background-reacted: var(--csstools-light-dark-toggle--264, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--265: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 10%);
    --color-message-reaction-background-hover: var(--csstools-light-dark-toggle--265, hsl(210deg 30% 96%));
    --csstools-light-dark-toggle--266: var(--csstools-color-scheme--light) transparent;
    --color-message-reaction-shadow-inner: var(--csstools-light-dark-toggle--266, hsl(210deg 50% 50% / 8%));
    --csstools-light-dark-toggle--267: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 75%);
    --color-message-reaction-text: var(--csstools-light-dark-toggle--267, hsl(210deg 20% 25% / 100%));
    --csstools-light-dark-toggle--268: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 85%);
    --color-message-reaction-text-reacted: var(--csstools-light-dark-toggle--268, hsl(210deg 20% 20% / 100%));
    --csstools-light-dark-toggle--269: var(--csstools-color-scheme--light) var(--color-message-reaction-text);
    --color-message-reaction-button-text: var(--csstools-light-dark-toggle--269, hsl(210deg 20% 20% / 60%));
    --csstools-light-dark-toggle--270: var(--csstools-color-scheme--light) var(--color-message-reaction-text-reacted);
    --color-message-reaction-button-text-hover: var(--csstools-light-dark-toggle--270, var(--color-message-reaction-text));
    --csstools-light-dark-toggle--271: var(--csstools-color-scheme--light) var(--color-message-reaction-background-hover);
    --color-message-reaction-button-background-hover: var(--csstools-light-dark-toggle--271, var(--color-message-reaction-background));
    --csstools-light-dark-toggle--272: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 50%);
    --color-zulip-logo: var(--csstools-light-dark-toggle--272, hsl(0deg 0% 0% / 34%));
    --csstools-light-dark-toggle--273: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-zulip-logo-loading: var(--csstools-light-dark-toggle--273, hsl(0deg 0% 27%));
    --csstools-light-dark-toggle--274: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 60%);
    --color-recent-view-loading-spinner: var(--csstools-light-dark-toggle--274, hsl(0deg 0% 27%));
    --csstools-light-dark-toggle--275: var(--csstools-color-scheme--light) hsl(214deg 27% 18%);
    --color-zulip-logo-z: var(--csstools-light-dark-toggle--275, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--276: var(--csstools-color-scheme--light) hsl(240deg 44% 56% / 15%);
    --color-show-more-less-button-background: var(--csstools-light-dark-toggle--276, hsl(240deg 44% 56% / 8%));
    --csstools-light-dark-toggle--277: var(--csstools-color-scheme--light) hsl(240deg 44% 56% / 25%);
    --color-show-more-less-button-background-hover: var(--csstools-light-dark-toggle--277, hsl(240deg 44% 56% / 15%));
    --csstools-light-dark-toggle--278: var(--csstools-color-scheme--light) hsl(240deg 44% 56% / 15%);
    --color-show-more-less-button-background-active: var(--csstools-light-dark-toggle--278, hsl(240deg 44% 56% / 20%));
    --csstools-light-dark-toggle--279: var(--csstools-color-scheme--light) hsl(122deg 100% 81%);
    --color-message-edit-history-text-inserted: var(--csstools-light-dark-toggle--279, hsl(122deg 72% 30%));
    --csstools-light-dark-toggle--280: var(--csstools-color-scheme--light) hsl(120deg 64% 95% / 30%);
    --color-message-edit-history-background-inserted: var(--csstools-light-dark-toggle--280, hsl(120deg 64% 95%));
    --csstools-light-dark-toggle--281: var(--csstools-color-scheme--light) hsl(0deg 90% 67%);
    --color-message-edit-history-text-deleted: var(--csstools-light-dark-toggle--281, hsl(0deg 100% 50%));
    --csstools-light-dark-toggle--282: var(--csstools-color-scheme--light) hsl(7deg 54% 62% / 38%);
    --color-message-edit-history-background-deleted: var(--csstools-light-dark-toggle--282, hsl(7deg 90% 92%));
    --csstools-light-dark-toggle--283: var(--csstools-color-scheme--light) hsl(240deg 13% 16%);
    --color-background-direct-mention: var(--csstools-light-dark-toggle--283, hsl(240deg 52% 95%));
    --csstools-light-dark-toggle--284: var(--csstools-color-scheme--light) hsl(180deg 13% 14%);
    --color-background-group-mention: var(--csstools-light-dark-toggle--284, hsl(180deg 40% 94%));
    --csstools-light-dark-toggle--285: var(--csstools-color-scheme--light) hsl(240deg 52% 60% / 25%);
    --color-background-text-direct-mention: var(--csstools-light-dark-toggle--285, hsl(240deg 70% 70% / 20%));
    --csstools-light-dark-toggle--286: var(--csstools-color-scheme--light) hsl(240deg 52% 60% / 45%);
    --color-background-text-hover-direct-mention: var(--csstools-light-dark-toggle--286, hsl(240deg 70% 70% / 30%));
    --csstools-light-dark-toggle--287: var(--csstools-color-scheme--light) hsl(183deg 52% 40% / 20%);
    --color-background-text-group-mention: var(--csstools-light-dark-toggle--287, hsl(183deg 60% 45% / 18%));
    --csstools-light-dark-toggle--288: var(--csstools-color-scheme--light) hsl(183deg 52% 40% / 30%);
    --color-background-text-hover-group-mention: var(--csstools-light-dark-toggle--288, hsl(183deg 60% 45% / 30%));
    --csstools-light-dark-toggle--289: var(--csstools-color-scheme--light) hsl(240deg 65% 60% / 38%);
    --color-background-input-pill: var(--csstools-light-dark-toggle--289, hsl(237deg 68% 94%));
    --csstools-light-dark-toggle--290: var(--csstools-color-scheme--light) hsl(240deg 65% 60% / 30%);
    --color-background-input-pill-search: var(--csstools-light-dark-toggle--290, hsl(237deg 68% 94%));
    --csstools-light-dark-toggle--291: var(--csstools-color-scheme--light) hsl(240deg 52% 60% / 45%);
    --color-background-input-pill-hover: var(--csstools-light-dark-toggle--291, hsl(240deg 70% 70% / 30%));
    --csstools-light-dark-toggle--292: var(--csstools-color-scheme--light) hsl(240deg 65% 60% / 60%);
    --color-border-input-pill-image: var(--csstools-light-dark-toggle--292, hsl(237deg 68% 94% / 50%));
    --csstools-light-dark-toggle--293: var(--csstools-color-scheme--light) hsl(240deg 65% 60% / 22%);
    --color-outline-low-attention-input-pill: var(--csstools-light-dark-toggle--293, hsl(237deg 68% 88%));
    --csstools-light-dark-toggle--294: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 60%);
    --color-focus-outline-input-pill: var(--csstools-light-dark-toggle--294, hsl(240deg 50% 50%));
    --csstools-light-dark-toggle--295: var(--csstools-color-scheme--light) hsl(240deg 50% 74%);
    --color-input-pill-close: var(--csstools-light-dark-toggle--295, hsl(240deg 60% 65%));
    --csstools-light-dark-toggle--296: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 7%);
    --color-background-input-pill-exit-hover: var(--csstools-light-dark-toggle--296, hsl(240deg 70% 70% / 15%));
    --csstools-light-dark-toggle--297: var(--csstools-color-scheme--light) hsl(360deg 97% 25%);
    --color-background-deactivated-user-pill: var(--csstools-light-dark-toggle--297, hsl(8deg 96% 91%));
    --csstools-light-dark-toggle--298: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 70%);
    --color-focus-outline-deactivated-user-pill: var(--csstools-light-dark-toggle--298, hsl(4deg 75% 53%));
    --csstools-light-dark-toggle--299: var(--csstools-color-scheme--light) hsl(7deg 100% 74%);
    --color-close-deactivated-user-pill: var(--csstools-light-dark-toggle--299, hsl(4deg 75% 53%));
    --csstools-light-dark-toggle--300: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 7%);
    --color-background-exit-hover-deactivated-user-pill: var(--csstools-light-dark-toggle--300, hsl(4deg 75% 53% / 15%));
    --csstools-light-dark-toggle--301: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 40%);
    --color-background-user-pill: var(--csstools-light-dark-toggle--301, hsl(0deg 0% 100% / 85%));
    --csstools-light-dark-toggle--302: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-pill-container: var(--csstools-light-dark-toggle--302, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--303: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-pill-container-input-disabled: var(--csstools-light-dark-toggle--303, hsl(0deg 0% 93%));
    --csstools-light-dark-toggle--304: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-border-pill-container: var(--csstools-light-dark-toggle--304, hsl(0deg 0% 0% / 15%));
    --csstools-light-dark-toggle--305: var(--csstools-color-scheme--light) hsl(147deg 40% 55%);
    --color-background-inbox-no-unreads-illustration: var(--csstools-light-dark-toggle--305, hsl(147deg 57% 25%));
    --csstools-light-dark-toggle--306: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-icon-search-inbox: var(--csstools-light-dark-toggle--306, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--307: var(--csstools-color-scheme--light) hsl(0deg 0% 95%);
    --color-inbox-search-text: var(--csstools-light-dark-toggle--307, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--308: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 20%);
    --color-border-inbox-search: var(--csstools-light-dark-toggle--308, hsl(229.09deg 21.57% 10% / 30%));
    --csstools-light-dark-toggle--309: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 40%);
    --color-border-inbox-search-hover: var(--csstools-light-dark-toggle--309, hsl(229.09deg 21.57% 10% / 60%));
    --csstools-light-dark-toggle--310: var(--csstools-color-scheme--light) hsl(225deg 6% 10%);
    --color-background-inbox-search: var(--csstools-light-dark-toggle--310, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--311: var(--csstools-color-scheme--light) hsl(225deg 6% 8%);
    --color-background-inbox-search-hover: var(--csstools-light-dark-toggle--311, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--312: var(--csstools-color-scheme--light) hsl(225deg 6% 7%);
    --color-background-inbox-search-focus: var(--csstools-light-dark-toggle--312, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--313: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 50%);
    --color-border-inbox-search-focus: var(--csstools-light-dark-toggle--313, hsl(229.09deg 21.57% 10% / 80%));
    --csstools-light-dark-toggle--314: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 40%);
    --color-box-shadow-inbox-search-focus: var(--csstools-light-dark-toggle--314, hsl(228deg 9.8% 20% / 30%));
    --csstools-light-dark-toggle--315: var(--csstools-color-scheme--light) hsl(0deg 0% 14%);
    --color-background-inbox-row: var(--csstools-light-dark-toggle--315, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--316: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 5%);
    --color-background-button-inbox-selected: var(--csstools-light-dark-toggle--316, hsl(0deg 0% 0% / 5%));
    --csstools-light-dark-toggle--317: var(--csstools-color-scheme--light) hsl(0deg 0% 20%);
    --color-background-button-inbox-focus: var(--csstools-light-dark-toggle--317, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--318: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-icons-inbox: var(--csstools-light-dark-toggle--318, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--319: var(--csstools-color-scheme--light) hsl(216deg 50% 75%);
    --color-folder-header: var(--csstools-light-dark-toggle--319, hsl(216deg 43% 20%));
    --csstools-light-dark-toggle--320: var(--csstools-color-scheme--light) #aaadba;
    --color-inbox-row-chevron: var(--csstools-light-dark-toggle--320, #535663);
    --csstools-light-dark-toggle--321: var(--csstools-color-scheme--light) hsl(240deg 35% 60%);
    --color-navbar-icon: var(--csstools-light-dark-toggle--321, hsl(240deg 20% 50%));
    --csstools-light-dark-toggle--322: var(--csstools-color-scheme--light) hsl(240deg 55% 72% / 100%);
    --color-navbar-spectator-low-attention-brand-button-text: var(--csstools-light-dark-toggle--322, hsl(240deg 40% 50%));
    --csstools-light-dark-toggle--323: var(--csstools-color-scheme--light) hsl(240deg 56% 70% / 10%);
    --color-navbar-spectator-low-attention-brand-button-background-hover: var(--csstools-light-dark-toggle--323, hsl(240deg 100% 30% / 5%));
    --csstools-light-dark-toggle--324: var(--csstools-color-scheme--light) hsl(240deg 56% 70% / 13%);
    --color-navbar-spectator-low-attention-brand-button-background-active: var(--csstools-light-dark-toggle--324, hsl(240deg 100% 30% / 8%));
    --csstools-light-dark-toggle--325: var(--csstools-color-scheme--light) hsl(240deg 64% 76% / 100%);
    --color-navbar-spectator-medium-attention-brand-button-text: var(--csstools-light-dark-toggle--325, hsl(240deg 40% 40% / 100%));
    --csstools-light-dark-toggle--326: var(--csstools-color-scheme--light) hsl(240deg 56% 70% / 12%);
    --color-navbar-spectator-medium-attention-brand-button-background: var(--csstools-light-dark-toggle--326, hsl(244deg 64% 47% / 10%));
    --csstools-light-dark-toggle--327: var(--csstools-color-scheme--light) hsl(240deg 56% 70% / 17%);
    --color-navbar-spectator-medium-attention-brand-button-background-hover: var(--csstools-light-dark-toggle--327, hsl(244deg 64% 47% / 15%));
    --csstools-light-dark-toggle--328: var(--csstools-color-scheme--light) hsl(240deg 56% 70% / 12%);
    --color-navbar-spectator-medium-attention-brand-button-background-active: var(--csstools-light-dark-toggle--328, hsl(244deg 64% 47% / 18%));
    --csstools-light-dark-toggle--329: var(--csstools-color-scheme--light) hsl(0deg 0% 50%);
    --color-gear-menu-lighter-text: var(--csstools-light-dark-toggle--329, hsl(0deg 0% 40%));
    --csstools-light-dark-toggle--330: var(--csstools-color-scheme--light) hsl(217deg 100% 65%);
    --color-gear-menu-blue-text: var(--csstools-light-dark-toggle--330, hsl(217deg 100% 50%));
    --csstools-light-dark-toggle--331: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 4%);
    --color-header-button-hover: var(--csstools-light-dark-toggle--331, hsl(0deg 0% 0% / 5%));
    --csstools-light-dark-toggle--332: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 7%);
    --color-header-button-focus: var(--csstools-light-dark-toggle--332, hsl(0deg 0% 0% / 8%));
    --csstools-light-dark-toggle--333: var(--csstools-color-scheme--light) hsl(236deg 33% 90%);
    --color-fill-user-invite-copy-icon: var(--csstools-light-dark-toggle--333, hsl(0deg 0% 46.7%));
    --csstools-light-dark-toggle--334: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-zulip-button: var(--csstools-light-dark-toggle--334, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--335: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 15%);
    --color-background-zulip-button-hover: var(--csstools-light-dark-toggle--335, var(--color-background-zulip-button));
    --csstools-light-dark-toggle--336: var(--csstools-color-scheme--light) var(--color-background-zulip-button-hover);
    --color-background-zulip-button-active: var(--csstools-light-dark-toggle--336, hsl(0deg 0% 95%));
    --csstools-light-dark-toggle--337: var(--csstools-color-scheme--light) var(--color-background-zulip-button);
    --color-background-zulip-button-disabled: var(--csstools-light-dark-toggle--337, hsl(0deg 0% 93%));
    --csstools-light-dark-toggle--338: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-border-zulip-button: var(--csstools-light-dark-toggle--338, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--339: var(--csstools-color-scheme--light) var(--color-border-zulip-button);
    --color-border-zulip-button-interactive: var(--csstools-light-dark-toggle--339, hsl(0deg 0% 60%));
    --csstools-light-dark-toggle--340: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 40%);
    --color-border-rendered-checkbox: var(--csstools-light-dark-toggle--340, hsl(0deg 0% 0% / 60%));
    --csstools-light-dark-toggle--341: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-emoji-picker-popover: var(--csstools-light-dark-toggle--341, hsl(0deg 0% 93%));
    --csstools-light-dark-toggle--342: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 50%);
    --color-background-emoji-picker-popover-tab-item-active: var(--csstools-light-dark-toggle--342, hsl(0deg 0% 100% / 20%));
    --csstools-light-dark-toggle--343: var(--csstools-color-scheme--light) hsl(212deg 28% 8% / 75%);
    --color-background-emoji-picker-emoji-focus: var(--csstools-light-dark-toggle--343, hsl(0deg 0% 93%));
    --csstools-light-dark-toggle--344: var(--csstools-color-scheme--light) hsl(0deg 0% 98%);
    --color-box-shadow-emoji-picker-emoji-focus: var(--csstools-light-dark-toggle--344, transparent);
    --csstools-light-dark-toggle--345: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 50%);
    --color-background-emoji-picker-emoji-reacted: var(--csstools-light-dark-toggle--345, hsl(195deg 50% 95%));
    --csstools-light-dark-toggle--346: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 90%);
    --color-border-emoji-picker-emoji-reacted: var(--csstools-light-dark-toggle--346, hsl(195deg 52% 79%));
    --csstools-light-dark-toggle--347: var(--csstools-color-scheme--light) hsl(0deg 0% 20% / 70%);
    --color-background-emoji-picker-emoji-reacted-focus: var(--csstools-light-dark-toggle--347, hsl(195deg 55% 88%));
    --csstools-light-dark-toggle--348: var(--csstools-color-scheme--light) hsl(211.58deg 33.33% 11.18%);
    --color-border-emoji-picker-tippy-arrow: var(--csstools-light-dark-toggle--348, hsl(0deg 0% 93%));
    --csstools-light-dark-toggle--349: var(--csstools-color-scheme--light) hsl(0deg 0% 75%);
    --color-dropdown-item: var(--csstools-light-dark-toggle--349, hsl(0deg 0% 20%));
    --csstools-light-dark-toggle--350: var(--csstools-color-scheme--light) hsl(0deg 0% 75% 60%);
    --color-dropdown-item-link-underline: var(--csstools-light-dark-toggle--350, hsl(0deg 0% 20% 60%));
    --csstools-light-dark-toggle--351: var(--csstools-color-scheme--light) hsl(0deg 0% 90%);
    --color-active-dropdown-item: var(--csstools-light-dark-toggle--351, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--352: var(--csstools-color-scheme--light) hsl(220deg 12% 100% / 7%);
    --background-color-active-dropdown-item: var(--csstools-light-dark-toggle--352, hsl(220deg 12% 4.9% / 5%));
    --csstools-light-dark-toggle--353: var(--csstools-color-scheme--light) hsl(220deg 12% 100% / 7%);
    --background-color-active-typeahead-item: var(--csstools-light-dark-toggle--353, hsl(220deg 12% 4.9% / 5%));
    --csstools-light-dark-toggle--354: var(--csstools-color-scheme--light) var(--grey-400);
    --color-typeahead-option-label: var(--csstools-light-dark-toggle--354, var(--grey-500));
    --csstools-light-dark-toggle--355: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-outline-button-focus: var(--csstools-light-dark-toggle--355, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--356: var(--csstools-color-scheme--light) hsl(229deg 9% 36%);
    --color-background-neutral-primary-action-button: var(--csstools-light-dark-toggle--356, hsl(229deg 7% 50%));
    --csstools-light-dark-toggle--357: var(--csstools-color-scheme--light) hsl(229deg 8% 42%);
    --color-background-neutral-primary-action-button-hover: var(--csstools-light-dark-toggle--357, hsl(229deg 7% 47%));
    --csstools-light-dark-toggle--358: var(--csstools-color-scheme--light) hsl(229deg 9% 36%);
    --color-background-neutral-primary-action-button-active: var(--csstools-light-dark-toggle--358, hsl(232deg 7% 44%));
    --csstools-light-dark-toggle--359: var(--csstools-color-scheme--light) hsl(231deg 11% 76%);
    --color-text-neutral-quiet-action-button: var(--csstools-light-dark-toggle--359, hsl(229deg 12% 25%));
    --csstools-light-dark-toggle--360: var(--csstools-color-scheme--light) hsl(229deg 10% 70%);
    --color-text-neutral-borderless-action-button: var(--csstools-light-dark-toggle--360, hsl(229deg 9% 36%));
    --csstools-light-dark-toggle--361: var(--csstools-color-scheme--light) hsl(261deg 79% 43%);
    --color-background-brand-primary-action-button: var(--csstools-light-dark-toggle--361, hsl(254deg 99% 68%));
    --csstools-light-dark-toggle--362: var(--csstools-color-scheme--light) hsl(258deg 66% 51%);
    --color-background-brand-primary-action-button-hover: var(--csstools-light-dark-toggle--362, hsl(255deg 81% 61%));
    --csstools-light-dark-toggle--363: var(--csstools-color-scheme--light) hsl(261deg 79% 43%);
    --color-background-brand-primary-action-button-active: var(--csstools-light-dark-toggle--363, hsl(258deg 66% 51%));
    --csstools-light-dark-toggle--364: var(--csstools-color-scheme--light) hsl(244deg 96% 82%);
    --color-text-brand-quiet-action-button: var(--csstools-light-dark-toggle--364, hsl(264deg 95% 34%));
    --csstools-light-dark-toggle--365: var(--csstools-color-scheme--light) hsl(246deg 96% 79%);
    --color-text-brand-borderless-action-button: var(--csstools-light-dark-toggle--365, hsl(255deg 54% 50%));
    --csstools-light-dark-toggle--366: var(--csstools-color-scheme--light) hsl(228deg 75% 47%);
    --color-background-info-primary-action-button: var(--csstools-light-dark-toggle--366, hsl(226deg 100% 62%));
    --csstools-light-dark-toggle--367: var(--csstools-color-scheme--light) hsl(222deg 98% 79%);
    --color-text-info-quiet-action-button: var(--csstools-light-dark-toggle--367, hsl(231deg 82% 36%));
    --csstools-light-dark-toggle--368: var(--csstools-color-scheme--light) hsl(222deg 97% 75%);
    --color-text-info-borderless-action-button: var(--csstools-light-dark-toggle--368, hsl(227deg 70% 46%));
    --csstools-light-dark-toggle--369: var(--csstools-color-scheme--light) hsl(144deg 84% 22%);
    --color-background-success-primary-action-button: var(--csstools-light-dark-toggle--369, hsl(146deg 90% 27%));
    --csstools-light-dark-toggle--370: var(--csstools-color-scheme--light) hsl(135deg 56% 63%);
    --color-text-success-quiet-action-button: var(--csstools-light-dark-toggle--370, hsl(144deg 88% 16%));
    --csstools-light-dark-toggle--371: var(--csstools-color-scheme--light) hsl(136deg 47% 55%);
    --color-text-success-borderless-action-button: var(--csstools-light-dark-toggle--371, hsl(146deg 90% 27%));
    --csstools-light-dark-toggle--372: var(--csstools-color-scheme--light) hsl(39deg 89% 45%);
    --color-background-warning-primary-action-button: var(--csstools-light-dark-toggle--372, hsl(40deg 99% 62%));
    --csstools-light-dark-toggle--373: var(--csstools-color-scheme--light) hsl(41deg 98% 46%);
    --color-background-warning-primary-action-button-hover: var(--csstools-light-dark-toggle--373, hsl(40deg 94% 56%));
    --csstools-light-dark-toggle--374: var(--csstools-color-scheme--light) hsl(39deg 89% 45%);
    --color-background-warning-primary-action-button-active: var(--csstools-light-dark-toggle--374, hsl(41deg 98% 46%));
    --csstools-light-dark-toggle--375: var(--csstools-color-scheme--light) hsl(40deg 94% 56%);
    --color-text-warning-quiet-action-button: var(--csstools-light-dark-toggle--375, hsl(34deg 89% 25%));
    --csstools-light-dark-toggle--376: var(--csstools-color-scheme--light) hsl(41deg 98% 46%);
    --color-text-warning-borderless-action-button: var(--csstools-light-dark-toggle--376, hsl(37deg 94% 34%));
    --csstools-light-dark-toggle--377: var(--csstools-color-scheme--light) hsl(2deg 74% 47%);
    --color-background-danger-primary-action-button: var(--csstools-light-dark-toggle--377, hsl(4deg 75% 53%));
    --csstools-light-dark-toggle--378: var(--csstools-color-scheme--light) hsl(4deg 75% 53%);
    --color-background-danger-primary-action-button-hover: var(--csstools-light-dark-toggle--378, hsl(2deg 74% 47%));
    --csstools-light-dark-toggle--379: var(--csstools-color-scheme--light) hsl(2deg 74% 47%);
    --color-background-danger-primary-action-button-active: var(--csstools-light-dark-toggle--379, hsl(359deg 93% 39%));
    --csstools-light-dark-toggle--380: var(--csstools-color-scheme--light) hsl(7deg 100% 74%);
    --color-text-danger-quiet-action-button: var(--csstools-light-dark-toggle--380, hsl(359deg 94% 35%));
    --csstools-light-dark-toggle--381: var(--csstools-color-scheme--light) hsl(7deg 100% 74%);
    --color-text-danger-borderless-action-button: var(--csstools-light-dark-toggle--381, hsl(359deg 93% 39%));
    --csstools-light-dark-toggle--382: var(--csstools-color-scheme--light) hsl(229deg 10% 70%);
    --color-text-neutral-icon-button-hover: var(--csstools-light-dark-toggle--382, hsl(229deg 9% 36%));
    --csstools-light-dark-toggle--383: var(--csstools-color-scheme--light) hsl(229deg 10% 70%);
    --color-text-neutral-icon-button-square-active: var(--csstools-light-dark-toggle--383, hsl(229deg 9% 36%));
    --csstools-light-dark-toggle--384: var(--csstools-color-scheme--light) hsl(246deg 96% 79%);
    --color-text-brand-icon-button-hover: var(--csstools-light-dark-toggle--384, hsl(255deg 54% 50%));
    --csstools-light-dark-toggle--385: var(--csstools-color-scheme--light) hsl(246deg 96% 79%);
    --color-text-brand-icon-button-square-active: var(--csstools-light-dark-toggle--385, hsl(255deg 54% 50%));
    --csstools-light-dark-toggle--386: var(--csstools-color-scheme--light) hsl(222deg 97% 75%);
    --color-text-info-icon-button-hover: var(--csstools-light-dark-toggle--386, hsl(227deg 70% 46%));
    --csstools-light-dark-toggle--387: var(--csstools-color-scheme--light) hsl(222deg 97% 75%);
    --color-text-info-icon-button-square-active: var(--csstools-light-dark-toggle--387, hsl(227deg 70% 46%));
    --csstools-light-dark-toggle--388: var(--csstools-color-scheme--light) hsl(136deg 47% 55%);
    --color-text-success-icon-button-hover: var(--csstools-light-dark-toggle--388, hsl(146deg 90% 27%));
    --csstools-light-dark-toggle--389: var(--csstools-color-scheme--light) hsl(136deg 47% 55%);
    --color-text-success-icon-button-square-active: var(--csstools-light-dark-toggle--389, hsl(146deg 90% 27%));
    --csstools-light-dark-toggle--390: var(--csstools-color-scheme--light) hsl(41deg 98% 46%);
    --color-text-warning-icon-button-hover: var(--csstools-light-dark-toggle--390, hsl(37deg 94% 34%));
    --csstools-light-dark-toggle--391: var(--csstools-color-scheme--light) hsl(41deg 98% 46%);
    --color-text-warning-icon-button-square-active: var(--csstools-light-dark-toggle--391, hsl(37deg 94% 34%));
    --csstools-light-dark-toggle--392: var(--csstools-color-scheme--light) hsl(7deg 100% 74%);
    --color-text-danger-icon-button-hover: var(--csstools-light-dark-toggle--392, hsl(359deg 93% 39%));
    --csstools-light-dark-toggle--393: var(--csstools-color-scheme--light) hsl(7deg 100% 74%);
    --color-text-danger-icon-button-square-active: var(--csstools-light-dark-toggle--393, hsl(359deg 93% 39%));
    --csstools-light-dark-toggle--394: var(--csstools-color-scheme--light) hsl(231deg 11% 76%);
    --color-text-neutral-banner: var(--csstools-light-dark-toggle--394, hsl(229deg 12% 25%));
    --csstools-light-dark-toggle--395: var(--csstools-color-scheme--light) hsl(240deg 7% 17%);
    --color-background-neutral-banner: var(--csstools-light-dark-toggle--395, hsl(240deg 7% 93%));
    --csstools-light-dark-toggle--396: var(--csstools-color-scheme--light) hsl(244deg 96% 82%);
    --color-text-brand-banner: var(--csstools-light-dark-toggle--396, hsl(264deg 95% 34%));
    --csstools-light-dark-toggle--397: var(--csstools-color-scheme--light) hsl(254deg 49% 16%);
    --color-background-brand-banner: var(--csstools-light-dark-toggle--397, hsl(254deg 42% 94%));
    --csstools-light-dark-toggle--398: var(--csstools-color-scheme--light) hsl(221deg 93% 89%);
    --color-text-info-banner: var(--csstools-light-dark-toggle--398, hsl(241deg 95% 25%));
    --csstools-light-dark-toggle--399: var(--csstools-color-scheme--light) hsl(204deg 100% 12%);
    --color-background-info-banner: var(--csstools-light-dark-toggle--399, hsl(204deg 58% 92%));
    --csstools-light-dark-toggle--400: var(--csstools-color-scheme--light) hsl(135deg 56% 63%);
    --color-text-success-banner: var(--csstools-light-dark-toggle--400, hsl(144deg 88% 16%));
    --csstools-light-dark-toggle--401: var(--csstools-color-scheme--light) hsl(146deg 90% 7%);
    --color-background-success-banner: var(--csstools-light-dark-toggle--401, hsl(147deg 43% 92%));
    --csstools-light-dark-toggle--402: var(--csstools-color-scheme--light) hsl(40deg 94% 56%);
    --color-text-warning-banner: var(--csstools-light-dark-toggle--402, hsl(34deg 89% 25%));
    --csstools-light-dark-toggle--403: var(--csstools-color-scheme--light) hsl(50deg 100% 10%);
    --color-background-warning-banner: var(--csstools-light-dark-toggle--403, hsl(50deg 75% 92%));
    --csstools-light-dark-toggle--404: var(--csstools-color-scheme--light) hsl(7deg 100% 74%);
    --color-text-danger-banner: var(--csstools-light-dark-toggle--404, hsl(359deg 94% 35%));
    --csstools-light-dark-toggle--405: var(--csstools-color-scheme--light) hsl(0deg 52% 18%);
    --color-background-danger-banner: var(--csstools-light-dark-toggle--405, hsl(0deg 35% 92%));
    --csstools-light-dark-toggle--406: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-legacy-input: var(--csstools-light-dark-toggle--406, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--407: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-border-legacy-input: var(--csstools-light-dark-toggle--407, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--408: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 90%);
    --color-border-legacy-input-focus: var(--csstools-light-dark-toggle--408, hsl(206deg 80% 62% / 80%));
    --csstools-light-dark-toggle--409: var(--csstools-color-scheme--light) hsl(0deg 0% 95%);
    --color-text-input: var(--csstools-light-dark-toggle--409, hsl(0deg 0% 14%));
    --csstools-light-dark-toggle--410: var(--csstools-color-scheme--light) hsl(225deg 6% 10%);
    --color-background-input: var(--csstools-light-dark-toggle--410, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--411: var(--csstools-color-scheme--light) hsl(225deg 6% 7%);
    --color-background-input-focus: var(--csstools-light-dark-toggle--411, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--412: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-border-settings-radio-input-parent: var(--csstools-light-dark-toggle--412, hsl(0deg 0% 87%));
    --csstools-light-dark-toggle--413: var(--csstools-color-scheme--light) hsl(147deg 51% 80%);
    --color-success-main-view-banner: var(--csstools-light-dark-toggle--413, hsl(147deg 57% 25%));
    --csstools-light-dark-toggle--414: var(--csstools-color-scheme--light) hsl(147deg 100% 8%);
    --color-background-success-main-view-banner: var(--csstools-light-dark-toggle--414, hsl(147deg 43% 92%));
    --csstools-light-dark-toggle--415: var(--csstools-color-scheme--light) hsl(149deg 48% 52% / 40%);
    --color-border-success-main-view-banner: var(--csstools-light-dark-toggle--415, hsl(147deg 57% 25% / 40%));
    --csstools-light-dark-toggle--416: var(--csstools-color-scheme--light) hsl(147deg 51% 55% / 50%);
    --color-success-main-view-banner-close-button: var(--csstools-light-dark-toggle--416, hsl(147deg 57% 25% / 50%));
    --csstools-light-dark-toggle--417: var(--csstools-color-scheme--light) hsl(147deg 51% 55%);
    --color-success-main-view-banner-close-button-hover: var(--csstools-light-dark-toggle--417, hsl(147deg 57% 25%));
    --csstools-light-dark-toggle--418: var(--csstools-color-scheme--light) hsl(147deg 51% 55% / 75%);
    --color-success-main-view-banner-close-button-active: var(--csstools-light-dark-toggle--418, hsl(147deg 57% 25% / 75%));
    --csstools-light-dark-toggle--419: var(--csstools-color-scheme--light) hsl(147deg 51% 55% / 10%);
    --color-background-success-main-view-banner-action-button: var(--csstools-light-dark-toggle--419, hsl(147deg 57% 25% / 10%));
    --csstools-light-dark-toggle--420: var(--csstools-color-scheme--light) hsl(147deg 51% 55% / 15%);
    --color-background-success-main-view-banner-action-button-hover: var(--csstools-light-dark-toggle--420, hsl(147deg 57% 25% / 12%));
    --csstools-light-dark-toggle--421: var(--csstools-color-scheme--light) hsl(147deg 51% 55% / 20%);
    --color-background-success-main-view-banner-action-button-active: var(--csstools-light-dark-toggle--421, hsl(147deg 57% 25% / 15%));
    --csstools-light-dark-toggle--422: var(--csstools-color-scheme--light) hsl(50deg 45% 80%);
    --color-warning-main-view-banner: var(--csstools-light-dark-toggle--422, hsl(38deg 44% 27%));
    --csstools-light-dark-toggle--423: var(--csstools-color-scheme--light) hsl(53deg 100% 11%);
    --color-background-warning-main-view-banner: var(--csstools-light-dark-toggle--423, hsl(50deg 75% 92%));
    --csstools-light-dark-toggle--424: var(--csstools-color-scheme--light) hsl(38deg 44% 60% / 40%);
    --color-border-warning-main-view-banner: var(--csstools-light-dark-toggle--424, hsl(38deg 44% 27% / 40%));
    --csstools-light-dark-toggle--425: var(--csstools-color-scheme--light) hsl(50deg 45% 61% / 50%);
    --color-warning-main-view-banner-close-button: var(--csstools-light-dark-toggle--425, hsl(38deg 44% 27% / 50%));
    --csstools-light-dark-toggle--426: var(--csstools-color-scheme--light) hsl(50deg 45% 61%);
    --color-warning-main-view-banner-close-button-hover: var(--csstools-light-dark-toggle--426, hsl(38deg 44% 27%));
    --csstools-light-dark-toggle--427: var(--csstools-color-scheme--light) hsl(50deg 45% 61% / 75%);
    --color-warning-main-view-banner-close-button-active: var(--csstools-light-dark-toggle--427, hsl(38deg 44% 27% / 75%));
    --csstools-light-dark-toggle--428: var(--csstools-color-scheme--light) hsl(50deg 45% 61%);
    --color-warning-main-view-banner-action-button: var(--csstools-light-dark-toggle--428, inherit);
    --csstools-light-dark-toggle--429: var(--csstools-color-scheme--light) hsl(50deg 45% 61% / 10%);
    --color-background-warning-main-view-banner-action-button: var(--csstools-light-dark-toggle--429, hsl(38deg 44% 27% / 10%));
    --csstools-light-dark-toggle--430: var(--csstools-color-scheme--light) hsl(50deg 45% 61% / 15%);
    --color-background-warning-main-view-banner-action-button-hover: var(--csstools-light-dark-toggle--430, hsl(38deg 44% 27% / 12%));
    --csstools-light-dark-toggle--431: var(--csstools-color-scheme--light) hsl(50deg 45% 61% / 20%);
    --color-background-warning-main-view-banner-action-button-active: var(--csstools-light-dark-toggle--431, hsl(38deg 44% 27% / 15%));
    --csstools-light-dark-toggle--432: var(--csstools-color-scheme--light) hsl(3deg 73% 80%);
    --color-error-main-view-banner: var(--csstools-light-dark-toggle--432, hsl(4deg 58% 33%));
    --csstools-light-dark-toggle--433: var(--csstools-color-scheme--light) hsl(0deg 60% 19%);
    --color-background-error-main-view-banner: var(--csstools-light-dark-toggle--433, hsl(4deg 35% 90%));
    --csstools-light-dark-toggle--434: var(--csstools-color-scheme--light) hsl(3deg 73% 74% / 40%);
    --color-border-error-main-view-banner: var(--csstools-light-dark-toggle--434, hsl(3deg 57% 33% / 40%));
    --csstools-light-dark-toggle--435: var(--csstools-color-scheme--light) hsl(3deg 73% 74% / 50%);
    --color-error-main-view-banner-close-button: var(--csstools-light-dark-toggle--435, hsl(4deg 58% 33% / 50%));
    --csstools-light-dark-toggle--436: var(--csstools-color-scheme--light) hsl(3deg 73% 74%);
    --color-error-main-view-banner-close-button-hover: var(--csstools-light-dark-toggle--436, hsl(4deg 58% 33%));
    --csstools-light-dark-toggle--437: var(--csstools-color-scheme--light) hsl(3deg 73% 74% / 75%);
    --color-error-main-view-banner-close-button-active: var(--csstools-light-dark-toggle--437, hsl(4deg 58% 33% / 75%));
    --csstools-light-dark-toggle--438: var(--csstools-color-scheme--light) hsl(3deg 73% 74%);
    --color-error-main-view-banner-action-button: var(--csstools-light-dark-toggle--438, inherit);
    --csstools-light-dark-toggle--439: var(--csstools-color-scheme--light) hsl(3deg 73% 74% / 10%);
    --color-background-error-main-view-banner-action-button: var(--csstools-light-dark-toggle--439, hsl(3deg 57% 33% / 10%));
    --csstools-light-dark-toggle--440: var(--csstools-color-scheme--light) hsl(3deg 73% 74% / 15%);
    --color-background-error-main-view-banner-action-button-hover: var(--csstools-light-dark-toggle--440, hsl(3deg 57% 33% / 12%));
    --csstools-light-dark-toggle--441: var(--csstools-color-scheme--light) hsl(3deg 73% 74% / 20%);
    --color-background-error-main-view-banner-action-button-active: var(--csstools-light-dark-toggle--441, hsl(3deg 57% 33% / 15%));
    --csstools-light-dark-toggle--442: var(--csstools-color-scheme--light) hsl(205deg 58% 80%);
    --color-info-main-view-banner: var(--csstools-light-dark-toggle--442, hsl(204deg 49% 29%));
    --csstools-light-dark-toggle--443: var(--csstools-color-scheme--light) hsl(204deg 100% 12%);
    --color-background-info-main-view-banner: var(--csstools-light-dark-toggle--443, hsl(204deg 58% 92%));
    --csstools-light-dark-toggle--444: var(--csstools-color-scheme--light) hsl(205deg 58% 69% / 40%);
    --color-border-info-main-view-banner: var(--csstools-light-dark-toggle--444, hsl(204deg 49% 29% / 40%));
    --csstools-light-dark-toggle--445: var(--csstools-color-scheme--light) hsl(205deg 58% 69% / 50%);
    --color-info-main-view-banner-close-button: var(--csstools-light-dark-toggle--445, hsl(204deg 49% 29% / 50%));
    --csstools-light-dark-toggle--446: var(--csstools-color-scheme--light) hsl(205deg 58% 69%);
    --color-info-main-view-banner-close-button-hover: var(--csstools-light-dark-toggle--446, hsl(204deg 49% 29%));
    --csstools-light-dark-toggle--447: var(--csstools-color-scheme--light) hsl(205deg 58% 69% / 75%);
    --color-info-main-view-banner-close-button-active: var(--csstools-light-dark-toggle--447, hsl(204deg 49% 29% / 75%));
    --csstools-light-dark-toggle--448: var(--csstools-color-scheme--light) hsl(205deg 58% 69%);
    --color-info-main-view-banner-action-button: var(--csstools-light-dark-toggle--448, inherit);
    --csstools-light-dark-toggle--449: var(--csstools-color-scheme--light) hsl(205deg 58% 69% / 10%);
    --color-background-info-main-view-banner-action-button: var(--csstools-light-dark-toggle--449, hsl(204deg 49% 29% / 10%));
    --csstools-light-dark-toggle--450: var(--csstools-color-scheme--light) hsl(205deg 58% 69% / 15%);
    --color-background-info-main-view-banner-action-button-hover: var(--csstools-light-dark-toggle--450, hsl(204deg 49% 29% / 12%));
    --csstools-light-dark-toggle--451: var(--csstools-color-scheme--light) hsl(205deg 58% 69% / 20%);
    --color-background-info-main-view-banner-action-button-active: var(--csstools-light-dark-toggle--451, hsl(204deg 49% 29% / 15%));
    --csstools-light-dark-toggle--452: var(--csstools-color-scheme--light) hsl(200deg 100% 50%);
    --color-main-view-banner-action-link: var(--csstools-light-dark-toggle--452, var(--color-text-generic-link));
    --csstools-light-dark-toggle--453: var(--csstools-color-scheme--light) hsl(204deg 63% 18%);
    --color-background-main-view-banner-moving-bar: var(--csstools-light-dark-toggle--453, hsl(204deg 63% 85%));
    --csstools-light-dark-toggle--454: var(--csstools-color-scheme--light) hsl(0deg 0% 90% / 20%);
    --color-info-density-control-border: var(--csstools-light-dark-toggle--454, hsl(0deg 0% 0% / 20%));
    --csstools-light-dark-toggle--455: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 80%);
    --color-info-denisty-button-icon: var(--csstools-light-dark-toggle--455, hsl(229deg 9% 36%));
    --csstools-light-dark-toggle--456: var(--csstools-color-scheme--light) hsl(229deg 10% 50% / 30%);
    --color-info-density-button-hover-background: var(--csstools-light-dark-toggle--456, hsl(229deg 9% 36% / 7%));
    }
}

@media screen {
    .dark-theme:root {
    /* There is no lefthand border to cover in dark mode, so
       don't apply negative margin that would otherwise pull
       the unread marker to the left. */
    --unread-marker-left: 0;

    /* Box shadow for overlays across the web app */
    --box-shadow-overlay: 0 0 30px hsl(212deg 32% 7%);

    /* Colors used across the app */
    --color-recipient-bar-controls-spinner: hsl(0deg 0% 100%);
    --box-shadow-unread-counter-normal: none;

    /* Text colors */
    --color-text-sender-name: hsl(0deg 0% 100% / 85%);
    --color-text-other-mention: hsl(0deg 0% 100% / 80%);
    --color-text-empty-list-message: hsl(0deg 0% 67%);

    /* Settings table colors */
    --color-background-notification-table-thead: hsl(0deg 0% 0% / 20%);

    /* Reaction container colors */
    --font-weight-message-reaction: 550;
    /* Navbar dropdown menu constants - Values from Figma design */
    --box-shadow-popover-menu:
        0 2.78px 4.12px 0 hsl(0deg 0% 0% / 10%),
        0 5.5113px 8.5783px 0 hsl(0deg 0% 0% / 9%),
        0 8.4377px 13.9271px 0 hsl(0deg 0% 0% / 11%),
        0 12.177px 21.4737px 0 hsl(0deg 0% 0% / 11%),
        0 18.7257px 35.4802px 0 hsl(0deg 0% 0% / 15%),
        0 41px 80px 0 hsl(0deg 0% 0% / 20%);
    --icon-chevron-down: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27%23DEDEDE%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath clip-rule=%27evenodd%27 d=%27M3.52977 5.52973C3.78947 5.27004 4.21053 5.27004 4.47023 5.52973L8 9.05951L11.5298 5.52973C11.7895 5.27004 12.2105 5.27004 12.4702 5.52973C12.7299 5.78943 12.7299 6.21049 12.4702 6.47019L8.47023 10.4702C8.21053 10.7299 7.78947 10.7299 7.52977 10.4702L3.52977 6.47019C3.27008 6.21049 3.27008 5.78943 3.52977 5.52973Z%27/%3E%3C/svg%3E");

    /* Button colors on modals and message editing. */
    --color-exit-button-text: hsl(0deg 0% 100%);
    --color-exit-button-background: hsl(226deg 1% 30% / 50%);
    --color-exit-button-background-interactive: hsl(226deg 1% 30% / 65%);

    /* Zulip-style checkbox values. */
    /* The SVG must be adjusted when changing the border color above. */
    --svg-url-rendered-checkbox: url(files/images/checkbox-dark-mode.svg);

    /* Theme-dependent SVGs */
    --svg-url-thumbnail-loader: url(files/images/loading/loader-white.svg);
    }
}

@media screen and (prefers-color-scheme: dark) {
    .color-scheme-automatic:root {
    /* There is no lefthand border to cover in dark mode, so
       don't apply negative margin that would otherwise pull
       the unread marker to the left. */
    --unread-marker-left: 0;

    /* Box shadow for overlays across the web app */
    --box-shadow-overlay: 0 0 30px hsl(212deg 32% 7%);

    /* Colors used across the app */
    --color-recipient-bar-controls-spinner: hsl(0deg 0% 100%);
    --box-shadow-unread-counter-normal: none;

    /* Text colors */
    --color-text-sender-name: hsl(0deg 0% 100% / 85%);
    --color-text-other-mention: hsl(0deg 0% 100% / 80%);
    --color-text-empty-list-message: hsl(0deg 0% 67%);

    /* Settings table colors */
    --color-background-notification-table-thead: hsl(0deg 0% 0% / 20%);

    /* Reaction container colors */
    --font-weight-message-reaction: 550;
    /* Navbar dropdown menu constants - Values from Figma design */
    --box-shadow-popover-menu:
        0 2.78px 4.12px 0 hsl(0deg 0% 0% / 10%),
        0 5.5113px 8.5783px 0 hsl(0deg 0% 0% / 9%),
        0 8.4377px 13.9271px 0 hsl(0deg 0% 0% / 11%),
        0 12.177px 21.4737px 0 hsl(0deg 0% 0% / 11%),
        0 18.7257px 35.4802px 0 hsl(0deg 0% 0% / 15%),
        0 41px 80px 0 hsl(0deg 0% 0% / 20%);
    --icon-chevron-down: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27%23DEDEDE%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath clip-rule=%27evenodd%27 d=%27M3.52977 5.52973C3.78947 5.27004 4.21053 5.27004 4.47023 5.52973L8 9.05951L11.5298 5.52973C11.7895 5.27004 12.2105 5.27004 12.4702 5.52973C12.7299 5.78943 12.7299 6.21049 12.4702 6.47019L8.47023 10.4702C8.21053 10.7299 7.78947 10.7299 7.52977 10.4702L3.52977 6.47019C3.27008 6.21049 3.27008 5.78943 3.52977 5.52973Z%27/%3E%3C/svg%3E");

    /* Button colors on modals and message editing. */
    --color-exit-button-text: hsl(0deg 0% 100%);
    --color-exit-button-background: hsl(226deg 1% 30% / 50%);
    --color-exit-button-background-interactive: hsl(226deg 1% 30% / 65%);

    /* Zulip-style checkbox values. */
    /* The SVG must be adjusted when changing the border color above. */
    --svg-url-rendered-checkbox: url(files/images/checkbox-dark-mode.svg);

    /* Theme-dependent SVGs */
    --svg-url-thumbnail-loader: url(files/images/loading/loader-white.svg);
    }
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.2_webpack@5.102.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].use[1]!../node_modules/.pnpm/postcss-loader@8.2.0_postcss@8.5.6_typescript@5.9.3_webpack@5.102.1/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].use[2]!./styles/buttons.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************/
.action-button {
    position: relative;
    display: flex;
    gap: 0.75ch;
    justify-content: center;
    align-items: center;
    line-height: 1.25;
    font-size: var(--base-font-size-px);
    font-family: "Source Sans 3 VF", sans-serif;
    font-weight: 500;
    letter-spacing: 0.02ch;
    padding: 0.25em 0.625em;
    color: var(--color-text-neutral-quiet-action-button);
    background-color: var(--color-background-neutral-quiet-action-button);
    border-radius: 4px;
    white-space: nowrap;
    -webkit-user-select: none;
            user-select: none;
    border: none;
    cursor: pointer;
    clip-path: inset(-1px);
    transition: 0.05s ease-in;
    transition-property: background-color, clip-path;
}

.action-button:hover,.action-button:focus-visible {
        background-color: var(
            --color-background-neutral-quiet-action-button-hover
        );
        transition: 0.1s ease-out;
        transition-property: background-color, clip-path;
    }

.action-button:active {
        background-color: var(
            --color-background-neutral-quiet-action-button-active
        );
        clip-path: inset(1px round 4px);
    }

.action-button:focus {
        /* Override common button outline style set in zulip.css and dark_theme.css */
        outline: none;
    }

.action-button:focus-visible {
        /* Override common button outline style set in zulip.css and dark_theme.css */
        outline: var(--outline-width-button-focus) solid
            var(--color-outline-button-focus) !important;
        outline-offset: var(--outline-offset-button-focus);
        clip-path: inset(
            calc(
                    -1 *
                        (
                            var(--outline-width-button-focus) +
                                var(--outline-offset-button-focus)
                        )
                )
                round 4px
        );
    }

.action-button:disabled {
        cursor: default;
        pointer-events: none;
        opacity: 0.5;
    }

.action-button-label {
    max-width: 32ch;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Action buttons -- Neutral Intent */
.action-button-primary-neutral {
    color: var(--color-text-neutral-primary-action-button);
    background-color: var(--color-background-neutral-primary-action-button);
}
.action-button-primary-neutral:hover,.action-button-primary-neutral:focus-visible {
        background-color: var(
            --color-background-neutral-primary-action-button-hover
        );
    }
.action-button-primary-neutral:active {
        background-color: var(
            --color-background-neutral-primary-action-button-active
        );
    }

.action-button-quiet-neutral {
    color: var(--color-text-neutral-quiet-action-button);
    background-color: var(--color-background-neutral-quiet-action-button);
    box-shadow: 0 0 0.5px 0.5px var(--color-inner-shadow-action-button) inset;
}

.action-button-quiet-neutral:hover,.action-button-quiet-neutral:focus-visible {
        background-color: var(
            --color-background-neutral-quiet-action-button-hover
        );
    }

.action-button-quiet-neutral:active {
        background-color: var(
            --color-background-neutral-quiet-action-button-active
        );
    }

.action-button-borderless-neutral {
    color: var(--color-text-neutral-borderless-action-button);
    background-color: transparent;
}

.action-button-borderless-neutral:hover,.action-button-borderless-neutral:focus-visible {
        background-color: var(
            --color-background-neutral-borderless-action-button-hover
        );
    }

.action-button-borderless-neutral:active {
        background-color: var(
            --color-background-neutral-borderless-action-button-active
        );
    }

/* Action buttons -- Brand Intent */
.action-button-primary-brand {
    color: var(--color-text-brand-primary-action-button);
    background-color: var(--color-background-brand-primary-action-button);
}
.action-button-primary-brand:hover,.action-button-primary-brand:focus-visible {
        background-color: var(
            --color-background-brand-primary-action-button-hover
        );
    }
.action-button-primary-brand:active {
        background-color: var(
            --color-background-brand-primary-action-button-active
        );
    }

.action-button-quiet-brand {
    color: var(--color-text-brand-quiet-action-button);
    background-color: var(--color-background-brand-quiet-action-button);
    box-shadow: 0 0 0.5px 0.5px var(--color-inner-shadow-action-button) inset;
}

.action-button-quiet-brand:hover,.action-button-quiet-brand:focus-visible {
        background-color: var(
            --color-background-brand-quiet-action-button-hover
        );
    }

.action-button-quiet-brand:active {
        background-color: var(
            --color-background-brand-quiet-action-button-active
        );
    }

.action-button-borderless-brand {
    color: var(--color-text-brand-borderless-action-button);
    background-color: transparent;
}

.action-button-borderless-brand:hover,.action-button-borderless-brand:focus-visible {
        background-color: var(
            --color-background-brand-borderless-action-button-hover
        );
    }

.action-button-borderless-brand:active {
        background-color: var(
            --color-background-brand-borderless-action-button-active
        );
    }

/* Action buttons -- Info Intent */
.action-button-primary-info {
    color: var(--color-text-info-primary-action-button);
    background-color: var(--color-background-info-primary-action-button);
}
.action-button-primary-info:hover,.action-button-primary-info:focus-visible {
        background-color: var(
            --color-background-info-primary-action-button-hover
        );
    }
.action-button-primary-info:active {
        background-color: var(
            --color-background-info-primary-action-button-active
        );
    }

.action-button-quiet-info {
    color: var(--color-text-info-quiet-action-button);
    background-color: var(--color-background-info-quiet-action-button);
    box-shadow: 0 0 0.5px 0.5px var(--color-inner-shadow-action-button) inset;
}

.action-button-quiet-info:hover,.action-button-quiet-info:focus-visible {
        background-color: var(
            --color-background-info-quiet-action-button-hover
        );
    }

.action-button-quiet-info:active {
        background-color: var(
            --color-background-info-quiet-action-button-active
        );
    }

.action-button-borderless-info {
    color: var(--color-text-info-borderless-action-button);
    background-color: transparent;
}

.action-button-borderless-info:hover,.action-button-borderless-info:focus-visible {
        background-color: var(
            --color-background-info-borderless-action-button-hover
        );
    }

.action-button-borderless-info:active {
        background-color: var(
            --color-background-info-borderless-action-button-active
        );
    }

/* Action buttons -- Success Intent */
.action-button-primary-success {
    color: var(--color-text-success-primary-action-button);
    background-color: var(--color-background-success-primary-action-button);
}
.action-button-primary-success:hover,.action-button-primary-success:focus-visible {
        background-color: var(
            --color-background-success-primary-action-button-hover
        );
    }
.action-button-primary-success:active {
        background-color: var(
            --color-background-success-primary-action-button-active
        );
    }

.action-button-quiet-success {
    color: var(--color-text-success-quiet-action-button);
    background-color: var(--color-background-success-quiet-action-button);
    box-shadow: 0 0 0.5px 0.5px var(--color-inner-shadow-action-button) inset;
}

.action-button-quiet-success:hover,.action-button-quiet-success:focus-visible {
        background-color: var(
            --color-background-success-quiet-action-button-hover
        );
    }

.action-button-quiet-success:active {
        background-color: var(
            --color-background-success-quiet-action-button-active
        );
    }

.action-button-borderless-success {
    color: var(--color-text-success-borderless-action-button);
    background-color: transparent;
}

.action-button-borderless-success:hover,.action-button-borderless-success:focus-visible {
        background-color: var(
            --color-background-success-borderless-action-button-hover
        );
    }

.action-button-borderless-success:active {
        background-color: var(
            --color-background-success-borderless-action-button-active
        );
    }

/* Action buttons -- Warning Intent */
.action-button-primary-warning {
    color: var(--color-text-warning-primary-action-button);
    background-color: var(--color-background-warning-primary-action-button);
}
.action-button-primary-warning:hover,.action-button-primary-warning:focus-visible {
        background-color: var(
            --color-background-warning-primary-action-button-hover
        );
    }
.action-button-primary-warning:active {
        background-color: var(
            --color-background-warning-primary-action-button-active
        );
    }

.action-button-quiet-warning {
    color: var(--color-text-warning-quiet-action-button);
    background-color: var(--color-background-warning-quiet-action-button);
    box-shadow: 0 0 0.5px 0.5px var(--color-inner-shadow-action-button) inset;
}

.action-button-quiet-warning:hover,.action-button-quiet-warning:focus-visible {
        background-color: var(
            --color-background-warning-quiet-action-button-hover
        );
    }

.action-button-quiet-warning:active {
        background-color: var(
            --color-background-warning-quiet-action-button-active
        );
    }

.action-button-borderless-warning {
    color: var(--color-text-warning-borderless-action-button);
    background-color: transparent;
}

.action-button-borderless-warning:hover,.action-button-borderless-warning:focus-visible {
        background-color: var(
            --color-background-warning-borderless-action-button-hover
        );
    }

.action-button-borderless-warning:active {
        background-color: var(
            --color-background-warning-borderless-action-button-active
        );
    }

/* Action buttons -- Danger Intent */
.action-button-primary-danger {
    color: var(--color-text-danger-primary-action-button);
    background-color: var(--color-background-danger-primary-action-button);
}
.action-button-primary-danger:hover,.action-button-primary-danger:focus-visible {
        background-color: var(
            --color-background-danger-primary-action-button-hover
        );
    }
.action-button-primary-danger:active {
        background-color: var(
            --color-background-danger-primary-action-button-active
        );
    }

.action-button-quiet-danger {
    color: var(--color-text-danger-quiet-action-button);
    background-color: var(--color-background-danger-quiet-action-button);
    box-shadow: 0 0 0.5px 0.5px var(--color-inner-shadow-action-button) inset;
}

.action-button-quiet-danger:hover,.action-button-quiet-danger:focus-visible {
        background-color: var(
            --color-background-danger-quiet-action-button-hover
        );
    }

.action-button-quiet-danger:active {
        background-color: var(
            --color-background-danger-quiet-action-button-active
        );
    }

.action-button-borderless-danger {
    color: var(--color-text-danger-borderless-action-button);
    background-color: transparent;
}

.action-button-borderless-danger:hover,.action-button-borderless-danger:focus-visible {
        background-color: var(
            --color-background-danger-borderless-action-button-hover
        );
    }

.action-button-borderless-danger:active {
        background-color: var(
            --color-background-danger-borderless-action-button-active
        );
    }

.icon-button {
    /* This class should always be used with an icon-button-* class
       defining the color scheme of the button, defined below. */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    font-size: var(--base-font-size-px);
    background-color: transparent; /* Override button default background color */
    padding: 0.375em;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    clip-path: inset(-1px);
    transition: 0.05s ease-in;
    transition-property: background-color, clip-path;
}

.icon-button:hover,.icon-button:focus-visible {
        transition: 0.1s ease-out;
        transition-property: background-color, clip-path;
    }

.icon-button:active {
        clip-path: inset(1px round 4px);
    }

.icon-button:focus {
        /* Override common button outline style set in zulip.css and dark_theme.css */
        outline: none;
    }

.icon-button:focus-visible {
        /* Override common button outline style set in zulip.css and dark_theme.css */
        outline: var(--outline-width-button-focus) solid
            var(--color-outline-button-focus) !important;
        outline-offset: var(--outline-offset-button-focus);
        clip-path: inset(
            calc(
                    -1 *
                        (
                            var(--outline-width-button-focus) +
                                var(--outline-offset-button-focus)
                        )
                )
                round 4px
        );
    }

.icon-button:disabled {
        cursor: default;
        pointer-events: none;
        opacity: 0.5;
    }

.icon-button-neutral {
    color: var(--color-text-neutral-icon-button);
}

.icon-button-neutral:hover,.icon-button-neutral:focus-visible {
        color: var(--color-text-neutral-icon-button-hover);
    }

.icon-button-neutral:active {
        color: var(--color-text-neutral-icon-button-active);
    }

.icon-button-neutral.icon-button-square:hover,.icon-button-neutral.icon-button-square:focus-visible {
            background-color: var(
                --color-background-neutral-icon-button-square-hover
            );
        }

.icon-button-neutral.icon-button-square:active {
            color: var(--color-text-neutral-icon-button-square-active);
            background-color: var(
                --color-background-neutral-icon-button-square-active
            );
        }

.icon-button-brand {
    color: var(--color-text-brand-icon-button);
}

.icon-button-brand:hover,.icon-button-brand:focus-visible {
        color: var(--color-text-brand-icon-button-hover);
    }

.icon-button-brand:active {
        color: var(--color-text-brand-icon-button-active);
    }

.icon-button-brand.icon-button-square:hover,.icon-button-brand.icon-button-square:focus-visible {
            background-color: var(
                --color-background-brand-icon-button-square-hover
            );
        }

.icon-button-brand.icon-button-square:active {
            color: var(--color-text-brand-icon-button-square-active);
            background-color: var(
                --color-background-brand-icon-button-square-active
            );
        }

.icon-button-info {
    color: var(--color-text-info-icon-button);
}

.icon-button-info:hover,.icon-button-info:focus-visible {
        color: var(--color-text-info-icon-button-hover);
    }

.icon-button-info:active {
        color: var(--color-text-info-icon-button-active);
    }

.icon-button-info.icon-button-square:hover,.icon-button-info.icon-button-square:focus-visible {
            background-color: var(
                --color-background-info-icon-button-square-hover
            );
        }

.icon-button-info.icon-button-square:active {
            color: var(--color-text-info-icon-button-square-active);
            background-color: var(
                --color-background-info-icon-button-square-active
            );
        }

.icon-button-success {
    color: var(--color-text-success-icon-button);
}

.icon-button-success:hover,.icon-button-success:focus-visible {
        color: var(--color-text-success-icon-button-hover);
    }

.icon-button-success:active {
        color: var(--color-text-success-icon-button-active);
    }

.icon-button-success.icon-button-square:hover,.icon-button-success.icon-button-square:focus-visible {
            background-color: var(
                --color-background-success-icon-button-square-hover
            );
        }

.icon-button-success.icon-button-square:active {
            color: var(--color-text-success-icon-button-square-active);
            background-color: var(
                --color-background-success-icon-button-square-active
            );
        }

.icon-button-warning {
    color: var(--color-text-warning-icon-button);
}

.icon-button-warning:hover,.icon-button-warning:focus-visible {
        color: var(--color-text-warning-icon-button-hover);
    }

.icon-button-warning:active {
        color: var(--color-text-warning-icon-button-active);
    }

.icon-button-warning.icon-button-square:hover,.icon-button-warning.icon-button-square:focus-visible {
            background-color: var(
                --color-background-warning-icon-button-square-hover
            );
        }

.icon-button-warning.icon-button-square:active {
            color: var(--color-text-warning-icon-button-square-active);
            background-color: var(
                --color-background-warning-icon-button-square-active
            );
        }

.icon-button-danger {
    color: var(--color-text-danger-icon-button);
}

.icon-button-danger:hover,.icon-button-danger:focus-visible {
        color: var(--color-text-danger-icon-button-hover);
    }

.icon-button-danger:active {
        color: var(--color-text-danger-icon-button-active);
    }

.icon-button-danger.icon-button-square:hover,.icon-button-danger.icon-button-square:focus-visible {
            background-color: var(
                --color-background-danger-icon-button-square-hover
            );
        }

.icon-button-danger.icon-button-square:active {
            color: var(--color-text-danger-icon-button-square-active);
            background-color: var(
                --color-background-danger-icon-button-square-active
            );
        }

.button-loading-indicator {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

.button-loading-indicator .loading_indicator_spinner {
        /* Override standard values defined
           in web/styles/app_components.css */
        height: 100%;
        width: unset;
        aspect-ratio: 1;
    }

.button-loading-indicator .loading_indicator_spinner path {
            /* Set the loading indicator color
               to the font color of the button. */
            fill: currentcolor;
        }

.button-hide-loading-indicator-on-hover:hover .button-loading-indicator {
        visibility: hidden;
    }

.button-hide-loading-indicator-on-hover:hover .action-button-label,.button-hide-loading-indicator-on-hover:hover .zulip-icon {
        visibility: visible !important;
    }

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.2_webpack@5.102.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].use[1]!../node_modules/.pnpm/postcss-loader@8.2.0_postcss@8.5.6_typescript@5.9.3_webpack@5.102.1/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].use[2]!./styles/inputs.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************/
.input-active-styles {
    color: var(--color-text-input);
    background-color: var(--color-background-input-focus);
    outline-color: var(--color-outline-input-focus);
}

.input-element-wrapper {
    display: grid;
    grid-template:
        /* We present a variable to set a uniform row height when needed;
           otherwise, we fall back to the sensible `auto` value. */
        [input-element-start] "icon-starting-offset input-icon icon-content-gap content button-content-gap input-button button-ending-offset" var(
            --input-element-row-height,
            auto
        )
        [input-element-end] / [input-element-start] var(
            --input-icon-starting-offset
        )
        var(--input-icon-width) var(--input-icon-content-gap) minmax(0, 1fr)
        var(--input-button-content-gap) var(--input-button-width) var(
            --input-button-ending-offset
        )
        [input-element-end];
    align-items: center;
}

.input-element-wrapper .input-element {
        grid-area: input-element;
        box-sizing: border-box;
        padding: 0.25em 0.5em; /* 4px at 16px/1em and 8px at 16px/1em */
        font-size: var(--base-font-size-px);
        font-family: "Source Sans 3 VF", sans-serif;
        line-height: 1.25;
        text-overflow: ellipsis;
        color: var(--color-text-input);
        background: var(--color-background-input);
        outline: 1px solid var(--color-outline-input);
        outline-offset: -1px;
        border: none;
        border-radius: 4px;
        transition: 0.1s linear;
        transition-property: outline-color, box-shadow;
    }

.input-element-wrapper .input-element:hover {
            outline-color: var(--color-outline-input-hover);
        }

.input-element-wrapper .input-element:focus {
    color: var(--color-text-input);
    background-color: var(--color-background-input-focus);
    outline-color: var(--color-outline-input-focus);
        }

.input-element-wrapper .input-element:focus {

            box-shadow: 0 0 5px var(--color-box-shadow-input-focus);
        }

.input-element-wrapper.has-input-icon .input-element {
        padding-left: calc(
            var(--input-icon-starting-offset) + var(--input-icon-width) +
                var(--input-icon-content-gap)
        );
    }

.input-element-wrapper.has-input-button .input-element {
        padding-right: calc(
            var(--input-button-content-gap) + var(--input-button-width) +
                var(--input-button-ending-offset)
        );
    }

/* Special styles for input with pills */

.input-element-wrapper.has-input-pills .pill-container .input {
            flex-grow: 1;
            /* Override default values in web/styles/input_pill.css  */
            padding: 0;
            line-height: inherit;
        }

.input-element-wrapper.has-input-pills .pill-container .input:empty::before {
                color: var(--color-text-placeholder);
                content: attr(data-placeholder);
            }

.input-element-wrapper.has-input-pills .pill-container .pill {
            height: 1.25em; /* 20px at 16px/1em */
        }

.input-element-wrapper.has-input-pills .pill-container:has(.input:hover) {
            outline-color: var(--color-outline-input-hover);
        }

.input-element-wrapper.has-input-pills .pill-container:has(.input:focus) {
    color: var(--color-text-input);
    background-color: var(--color-background-input-focus);
    outline-color: var(--color-outline-input-focus);
        }

.input-element-wrapper.has-input-pills .pill-container:has(.input:focus) {

            box-shadow: 0 0 5px var(--color-box-shadow-input-focus);
        }

.input-icon {
    grid-area: input-icon;
    /* Matching the color of input icon on the left to
       that of a neutral icon button gives us a consistent
       look when paired with the input button on the right. */
    color: var(--color-text-neutral-icon-button);
    /* We need to set the z-index, since the input icon
       comes before the input element in the DOM, but we
       want to display it over the input element in the UI. */
    z-index: 1;
    pointer-events: none;
}

.input-button {
    grid-area: input-button;
    padding: 0.25em; /* 4px at 16px/1em */
}

/* We use the `input` tag in the selector to avoid conflicts
       with the pill containing counterpart, which uses a `contenteditable`
       div instead of an input element, and thus doesn't support the
       placeholder pseudo-classes. */

.filter-input input.input-element:placeholder-shown {
            /* In case of filter inputs, when the input field
            is empty, we hide the input button and adjust
            the right padding to compensate for the same. */
            padding-right: 0.5em;
        }

.filter-input input.input-element:placeholder-shown  ~ .input-close-filter-button {
                visibility: hidden;
            }

.filter-input input.input-element:not(:placeholder-shown) {
    color: var(--color-text-input);
    background-color: var(--color-background-input-focus);
    outline-color: var(--color-outline-input-focus);
        }

/* Specific styles for filter input with pills */

.filter-input.has-input-pills:not(:has(.pill)):has(.input:empty) .input-element {
                padding-right: 0.5em;
            }

.filter-input.has-input-pills:not(:has(.pill)):has(.input:empty) .input-close-filter-button {
                visibility: hidden;
            }

.filter-input.has-input-pills:has(.pill):not(:has(.input:empty)) .input-element {
    color: var(--color-text-input);
    background-color: var(--color-background-input-focus);
    outline-color: var(--color-outline-input-focus);
        }

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.2_webpack@5.102.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].use[1]!../node_modules/.pnpm/postcss-loader@8.2.0_postcss@8.5.6_typescript@5.9.3_webpack@5.102.1/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].use[2]!./styles/banners.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************/
.banner-wrapper {
    container: banner / inline-size;
}

.banner {
    box-sizing: border-box;
    display: grid;
    grid-template: var(--banner-grid-template-rows) / var(
            --banner-grid-template-columns
        );
    grid-template-areas: var(--banner-grid-template-areas);
    place-items: start;
    border: 1px solid;
    border-radius: 6px;
}

.banner-link {
    color: var(--color-text-link);
    -webkit-text-decoration: none;
    text-decoration: none;
    text-decoration-color: var(--color-text-link-decoration);
}

.banner-link:hover {
        color: var(--color-text-link-hover);
        text-decoration-color: var(--color-text-link-decoration-hover);
    }

.banner-link:active {
        color: var(--color-text-link-active);
        text-decoration-color: currentcolor;
    }

.banner-content {
    grid-area: banner-content;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
    gap: 0 0.625em; /* 10px at 16px/1em */
}

.banner-label {
    /* We allow the banner label to grow and shrink, and set
       the flex basis to 60% of the query container's width.
       When the width of the banner label goes below this
       flex basis value, the banner action buttons are wrapped
       on to the next line.  */
    flex: 1 1 60cqw;
    /* The padding and line-height values for the banner label
       are identical to those of the action buttons', to match
       the height of both of these elements. This is required to
       align the banner children elements vertically, since we
       cannot use flexbox center alignment as we also need to
       account for the UI when the banner has a muli-line label.
    */
    padding: 0.25em 0; /* 4px at 16px/1em */
    line-height: 1.25; /* 20px at 16px/1em */
    text-align: start;
}

.banner-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em; /* 8px at 16px/1em */
}

.banner-action-buttons:empty {
    display: none;
}

.banner-close-button {
    display: flex;
    grid-area: banner-close-button;
    padding: 0.6875em; /* 11px at 16px/1em */
    margin-left: 0.3125em; /* 5px at 16px/1em */
}

.banner-close-button:focus-visible {
        outline-offset: -2px;
    }

.navbar-alert-banner {
    border: unset;
    border-bottom: 1px solid;
    border-radius: 0;
    place-items: start center;
}

.navbar-alert-banner .banner-content {
        justify-content: center;
        flex-wrap: nowrap;
    }

.navbar-alert-banner .banner-label {
        /* Reset to initial value */
        flex: 0 1 auto;
    }

.navbar-alert-banner .banner-action-buttons {
        flex-wrap: nowrap;
    }

/* This utility class defines the structure of the medium-type
   navbar banners where the banner action buttons are placed
   below the banner label. This utility class is required since
   unlike the normal banners, the navbar counterparts have
   horizontally centered elements, wherein the flex-basis logic
   won't apply and we need to manually apply these properties
   based on the container size queries below. */
.navbar-alert-medium-banner .banner-content {
        flex-direction: column;
        align-items: center;
    }
.navbar-alert-medium-banner .banner-label {
        text-align: center;
    }
.navbar-alert-medium-banner .banner-action-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }

@container banner (width >= 44em) and (width < 63em) {
    .navbar-alert-banner[data-process="desktop-notifications"] .banner-content {
        flex-direction: column;
        align-items: center;
    }
    .navbar-alert-banner[data-process="desktop-notifications"] .banner-label {
        text-align: center;
    }
    .navbar-alert-banner[data-process="desktop-notifications"] .banner-action-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@container banner (width < 44em) {
    .navbar-alert-banner .banner-content {
        flex-direction: column;
        align-items: center;
    }
    .navbar-alert-banner .banner-label {
        text-align: center;
    }
    .navbar-alert-banner .banner-action-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@container banner (width < 25em) {
    .banner-content {
        flex-direction: column;
    }

    .banner-label {
        /* Reset to initial value */
        flex: 0 1 auto;
    }

    .banner-action-buttons {
        flex-direction: column;
        width: 100%;
    }
}

.banner-neutral {
    background-color: var(--color-background-neutral-banner);
    color: var(--color-text-neutral-banner);
    border-color: var(--color-border-neutral-banner);
}

.banner-brand {
    background-color: var(--color-background-brand-banner);
    color: var(--color-text-brand-banner);
    border-color: var(--color-border-brand-banner);
}

.banner-info {
    background-color: var(--color-background-info-banner);
    color: var(--color-text-info-banner);
    border-color: var(--color-border-info-banner);
}

.banner-success {
    background-color: var(--color-background-success-banner);
    color: var(--color-text-success-banner);
    border-color: var(--color-border-success-banner);
}

.banner-warning {
    background-color: var(--color-background-warning-banner);
    color: var(--color-text-warning-banner);
    border-color: var(--color-border-warning-banner);
}

.banner-danger {
    background-color: var(--color-background-danger-banner);
    color: var(--color-text-danger-banner);
    border-color: var(--color-border-danger-banner);
}

@keyframes popup-banner-fadeIn {
    0% {
        opacity: 0;
        transform: translateY(
            calc(-1 * var(--popup-banner-translate-y-distance))
        );
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes popup-banner-fadeOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(
            calc(-1 * var(--popup-banner-translate-y-distance))
        );
    }
}

.popup-banner-animations {
    animation-name: popup-banner-fadeIn;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

.popup-banner-animations.fade-out {
        animation-name: popup-banner-fadeOut;
    }

.popup-banner {
    animation-name: popup-banner-fadeIn;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

.popup-banner.fade-out {
        animation-name: popup-banner-fadeOut;
}

.popup-banner {

    width: 100%;
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.2_webpack@5.102.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].use[1]!../node_modules/.pnpm/postcss-loader@8.2.0_postcss@8.5.6_typescript@5.9.3_webpack@5.102.1/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].use[2]!./styles/app_components.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Reusable, object-oriented CSS base components for the Zulip web app
   (not included in the portico CSS) */

.flex,
.show.flex {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hide {
    display: none;
}

.show {
    display: block;
}

.hidden {
    display: none;
    visibility: hidden;
}

kbd {
    display: inline-block;
    border: 1px solid var(--color-kbd-border);
    border-radius: 4px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    background-color: var(--color-kbd-background);
    color: var(--color-kbd-text);
    margin: 0.25em 0.1em;
    padding: 0.2em 0.4em;
    text-shadow: 0 1px 0 hsl(0deg 0% 100%);
    /* Prevent selection */
    -webkit-user-select: none;
            user-select: none;
    position: relative;
    min-height: 1em;
    min-width: 1em;
}

kbd .zulip-icon::before {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

@media (max-width: 575.98px) {
    .hide-sm {
        display: none !important;
    }
}

.light {
    font-weight: 300;
}

.highlighted-element {
    font-weight: 600;
}

.inline-block {
    display: inline-block;
}

.display-block {
    display: block !important;
}

.box-shadow {
    box-shadow: 0 0 10px hsl(0deg 0% 0% / 10%);
}

.clear-float {
    clear: both;
}

.invisible {
    visibility: hidden;
}

.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

.order-3 {
    order: 3;
}

.lowercase {
    text-transform: lowercase;
}

/*
Consistent placeholder styling, introduced to allow us to style the
Reply box like a placeholder.  Chrome uses color to set placeholder,
while Firefox uses opacity, so we need to set both properties to avoid
mixed styling.

While we usually prefer opacity for text color in Zulip, there's some
evidence Edge may have bugs in its handling of placeholder opacity
CSS: https://github.com/necolas/normalize.css/issues/741
*/
.placeholder {
    color: var(--color-text-placeholder);
    opacity: 1;
}

textarea::placeholder,
input::placeholder {
    color: var(--color-text-placeholder);
    opacity: 1;
}

/* -- base button styling -- */

.button {
    padding: 7px 14px;
    margin: 0;
    min-width: 130px;

    font-weight: 400;
    line-height: normal;
    text-align: center;

    background-color: var(--color-background-zulip-button);
    color: inherit;
    outline: none;
    border: 1px solid var(--color-border-zulip-button);
    border-radius: 2px;

    box-shadow: none;

    cursor: pointer;

    /* -- button style variations -- */
}

.button.no-style {
        padding: 0;
        background-color: transparent;
        border: none;
        min-width: 0;
        width: auto;
        outline: none;
        box-shadow: none !important;
    }

.button.rounded {
        border-radius: 4px;
    }

.button.green {
        background-color: hsl(150deg 31% 53%);
    }

.button.grey {
        background-color: hsl(0deg 0% 67%);
    }

.button.small {
        /* 16 / 14 * 0.8 = 0.9143, from original 0.8rem */
        font-size: 0.9143em;
        min-width: inherit;
        padding: 6px 10px;
    }

.button:hover,.button:focus,.button:active {
        border-color: var(--color-border-zulip-button-interactive);
    }

.button:hover {
        background-color: var(--color-background-zulip-button-hover);
        /* Reset styles on a.button instances. */
        -webkit-text-decoration: none;
        text-decoration: none;
        color: inherit;
    }

.button:focus {
        /* Maintain no outline for pointer focus. */
        outline: 0;
    }

.button:focus-visible {
        /* Set Zulip outline style with keyboard/assistive focus. */
        outline: 2px solid var(--color-outline-focus);
    }

.button:active {
        color: inherit;
        background-color: var(--color-background-zulip-button-active);
    }

.button.add-subscription-button:focus-visible {
            border: 1px solid;
            border-color: var(
                --color-border-add-subscription-button-focus
            ) !important;
        }

.button.sea-green {
        color: hsl(156deg 41% 40%);
        border-color: hsl(156deg 28% 70%);
    }

.button.sea-green:hover,.button.sea-green:focus {
            border-color: hsl(156deg 30% 50%);
        }

.button.sea-green:active {
            border-color: hsl(156deg 30% 40%);
            color: hsl(156deg 44% 43%);
        }

.button.button-warning {
        color: hsl(35deg 70% 56%);
        border-color: hsl(35deg 98% 84%);
    }

.button.button-warning:hover,.button.button-warning:focus {
            border-color: hsl(35deg 55% 70%);
        }

.button.button-warning:active {
            color: hsl(35deg 82% 40%);
            border-color: hsl(35deg 55% 70%);
        }

.button.button-danger {
        color: hsl(357deg 64% 72%);
        border-color: hsl(4deg 56% 82%);
    }

.button.button-danger:hover,.button.button-danger:focus {
            border-color: hsl(2deg 46% 68%);
        }

.button.button-danger:active {
            color: hsl(357deg 55% 63%);
            border-color: hsl(2deg 46% 68%);
        }

.button:disabled {
        cursor: not-allowed;
        filter: saturate(0);
        background-color: var(--color-background-zulip-button-disabled);
        color: hsl(0deg 3% 52%);
    }

.button:disabled:hover {
            background-color: var(--color-background-zulip-button-disabled);
            color: hsl(156deg 39% 54%);
            border-color: hsl(156deg 39% 77%);
        }

/* -- tab switcher -- */

.tab-switcher {
    font-weight: initial;
    margin: 2px 4px;
    display: inline-block;
}

.tab-switcher .ind-tab {
        display: inline-block;
        width: 90px;
        margin: 0 -0.5px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        vertical-align: bottom; /* See https://stackoverflow.com/a/43266155/ */
        padding: 3px 10px;
        background-color: var(--color-background-tab-switcher-ind-tab);
        cursor: pointer;
        justify-content: center;
        align-items: center;
    }

.tab-switcher .ind-tab:focus {
            outline: none;
        }

.tab-switcher .ind-tab:not(.selected) {
            border: 1px solid var(--color-border-tab-switcher-ind-tab);
        }

.tab-switcher .ind-tab.first {
            border-radius: 5px 0 0 5px;
            border-right: 1px solid transparent;
        }

.tab-switcher .ind-tab.middle {
            border-right: 1px solid transparent;
        }

.tab-switcher .ind-tab.last {
            border-radius: 0 5px 5px 0;
        }

.tab-switcher .ind-tab.selected {
            position: relative;
            background-color: var(
                --color-background-tab-switcher-ind-tab-selected
            );
            color: hsl(0deg 0% 100%);
            border: 1px solid var(--color-border-tab-switcher-ind-tab-selected);
            z-index: 2;
        }

.tab-switcher .ind-tab.disabled {
            cursor: default;
            color: var(--color-text-tab-switcher-ind-tab-disabled);
            border-color: var(--color-border-tab-switcher-ind-tab-disabled);
        }

.tab-switcher.large .ind-tab {
        width: 100%;
    }

.tab-switcher.allow-overflow {
        display: flex;
    }

.tab-switcher.allow-overflow .ind-tab {
            display: flex;
            text-overflow: initial;
            white-space: initial;
            vertical-align: middle;
        }

/* -- unified overlay design component -- */
div.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;

    background-color: var(--color-background-overlay);
    z-index: 105;

    pointer-events: none;
    opacity: 0;
    visibility: hidden;

    transition: 0.2s ease-in;
    transition-property: opacity, visibility;
    overflow: hidden;
}
div.overlay .overlay-content {
        transform: translateY(20px);
        transition: transform 0.2s ease-in;
        z-index: 102;
    }
div.overlay.show {
        opacity: 1;
        pointer-events: all;
        visibility: visible;
        transition: opacity 0.2s ease-out;
    }
div.overlay.show .overlay-content {
            transform: translateY(0);
            transition-timing-function: ease-out;
        }
div.overlay .overlay-scroll-container {
        max-height: 60vh;
        padding: 15px;
    }
div.overlay .overlay-container {
        background-color: var(--color-background-modal);
    }

.input-append {
    font-size: 90%;
    letter-spacing: -0.3em;
    display: block;
}

.input-append input[type="text"],
input.settings_text_input {
    border-radius: 5px;
    box-shadow: none;
    margin: 0;
}

.clear_search_button {
    grid-area: 1 / 2 / 2 / 3;
    padding: 0;
    background: none;
    color: var(--color-icons-inbox);
    opacity: 0.4;
    display: grid;
    border: none;
}

.clear_search_button:hover {
        opacity: 1;
    }

.clear_search_button:focus,.clear_search_button:focus-visible,.clear_search_button:active {
        box-shadow: none;
        outline: none;
    }

.clear_search_button .zulip-icon-close {
        align-self: center;
    }

.settings-highlight-box {
    margin: 0;
    padding: 5px 10px;
    background-color: var(--color-background-modal-bar);
    border: 1px solid var(--color-border-modal-bar);
    border-radius: 4px;

    list-style-type: none;
}

.white-box {
    background-color: var(--color-background-white-box);
    border: 1px solid hsl(0deg 0% 87%);
}

.guest-avatar {
    position: relative;
    overflow: hidden;
}

.guest-avatar::after {
        content: " ";
        background-color: hsl(0deg 0% 47%);
        position: absolute;
        bottom: -30%;
        right: -30%;
        width: 50%;
        height: 50%;
        transform: rotate(45deg);
    }

.dependent-settings-block {
    margin: 15px 0 -5px 23px;
}

.edit-controls .fa-angle-right {
    font-size: 0.9em;
    -webkit-text-stroke: 0.05em;
    position: relative;
    margin: 0 5px;
    top: 9px;
}

/* Standard loading indicators generated by the loading.ts API */
.loading_indicator_spinner {
    /* If you change these, make sure to adjust the constants in
       loading.make_indicator as well. 38px at 14px/1em */
    height: 2.7143em;
    width: 2.7143em;
    float: left;
}

.loading_indicator_text {
    /* If you change these, make sure to adjust the constants in
       loading.make_indicator as well */
    margin-left: 5px;
    font-size: 1.2em;
    font-weight: 300;
    line-height: 38px;
}

.upgrade-tip,
.upgrade-or-sponsorship-tip {
    width: -moz-fit-content;
    width: fit-content;
}

.upgrade-tip::before {
        content: "\f135";
        margin-right: 6px;
    }

.upgrade-or-sponsorship-tip::before {
        content: "\f135";
        margin-right: 6px;
    }

.upgrade-tip:hover {
    color: hsl(0deg 0% 20%);
    border: 1px solid hsl(49deg 20% 60%);
    box-shadow: 0 0 4px hsl(199deg 79% 56% / 20%);

    -webkit-text-decoration: none;

    text-decoration: none;
}

.upgrade-tip,
.upgrade-or-sponsorship-tip,
.tip,
.invite-stream-notice {
    position: relative;
    display: block;
    background-color: var(--color-background-tip);
    border: 1px solid var(--color-border-tip);
    border-radius: 4px;
    padding: 10px;
    /* previously 1rem = 16px at 14px em = 1.1428em */
    font-size: 1.1428em;
    line-height: 1.5;
    color: hsl(0deg 0% 40%);
}

.upgrade-tip::before {
        display: inline;

        font-family: FontAwesome;
        font-weight: 600;
    }

.upgrade-or-sponsorship-tip::before {
        display: inline;

        font-family: FontAwesome;
        font-weight: 600;
    }

.tip::before {
        display: inline;

        font-family: FontAwesome;
        font-weight: 600;
    }

.invite-stream-notice::before {
        display: inline;

        font-family: FontAwesome;
        font-weight: 600;
    }

.upgrade-tip,
.upgrade-or-sponsorship-tip,
.tip {
    margin: 10px 0;
}

.demo-organization-add-email-banner {
    margin-bottom: 10px;
}

#convert-demo-organization-form .banner-action-buttons,#invite-user-form .banner-action-buttons {
        padding: 0.085em 0;
    }

.create-group-button-container .upgrade-organization-banner-container {
        display: flex;
        justify-content: center;
    }

.organization-upgrade-banner,
.mobile-push-notifications-banner,
.admin-permissions-banner,
.desktop-setting-notifications {
    margin-bottom: 10px;
    width: -moz-fit-content;
    width: fit-content;
}

.mobile-push-notifications-banner .banner-content,.desktop-setting-notifications .banner-content,.organization-upgrade-banner .banner-content {
        flex-wrap: nowrap;
    }

.mobile-push-notifications-banner .banner-content .banner-action-buttons,.desktop-setting-notifications .banner-content .banner-action-buttons,.organization-upgrade-banner .banner-content .banner-action-buttons {
            flex-wrap: nowrap;
        }

.invite-stream-notice {
    margin-bottom: 20px;
}

.tip::before {
    content: "\f0a2";
    margin-right: 8px;
}

.demo-organization-warning {
    margin: 10px 0;
}

.user_status_icon_wrapper {
    display: inline;
    white-space: nowrap;
}

.user-status-microlayout {
    display: inline-grid;
    grid-template-columns: minmax(0, 1fr) auto;
}

.user-status-microlayout .user-name {
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* We are mostly consistent in how we style
   unread counts, except for starred messages.
   This is the common section.
*/
.unread_count {
    float: right;
    padding: 0 4px;
    /* 12px at 14px/em */
    font-size: 0.8571em;
    /* 16px at 12px/em, owing to font-size above. */
    height: 1.3333em;
    line-height: 1.3333em;
    font-weight: normal;
    border-radius: 4px;
    background-color: var(--color-background-unread-counter);
    color: hsl(0deg 0% 100%);
}

/* Unread-count attention levels. */

.prominent-count {
    background-color: var(--color-background-unread-counter-prominent);
    color: var(--color-unread-counter-prominent);
}

.normal-count {
    background-color: var(--color-background-unread-counter-normal);
    color: var(--color-unread-counter-normal);
    box-shadow: var(--box-shadow-unread-counter-normal);
}

.quiet-count {
    background-color: var(--color-background-unread-counter-quiet);
    color: var(--color-unread-counter-quiet);
    font-weight: 475;
}

.unread_mention_info:not(:empty) {
    margin-right: 5px;
    margin-left: 2px;
    opacity: var(--opacity-unread-mention-info);
}

.unread_mention_info.no-display {
    display: none;
}

/* Implement the web app's default-hidden convention for alert
   elements.  Portico pages lack this CSS and thus show them by
   default. */
.alert {
    display: none;
}
.alert.show {
        display: block;
    }
#organization-status.alert {
        margin: 20px;
    }
.alert.stream_create_info {
        margin: 10px 10px 0;
    }
.alert .bankruptcy_unread_count {
        font-weight: 600;
    }

.only-visible-for-spectators {
    display: none;
}

/* Add this class to elements which a
     * spectator cannot use. */

.spectator-view .hidden-for-spectators {
        display: none !important;
    }

.spectator-view .only-visible-for-spectators {
        display: revert;
    }

.animated-purple-button {
    color: hsl(0deg 0% 100%);
    transition: 80ms linear;
    transition-property: background-color, box-shadow;
    box-shadow: none;
    /* This color just passes WCAG AA */
    background-color: hsl(240deg 96% 68%);
    cursor: pointer;
    border: none;
    border-radius: 4px;
    text-align: center;
    white-space: nowrap;
}

.animated-purple-button:hover {
        /* This color passes WCAG AAA */
        background-color: hsl(240deg 41% 50%);
        box-shadow: 0 1px 4px hsl(0deg 0% 0% / 30%);
    }

.animated-purple-button:focus {
        background-color: hsl(240deg 41% 50%);
        box-shadow: 0 1px 4px 0
            var(--color-box-shadow-animated-purple-button-focus);
        outline: none;
    }

.animated-purple-button:disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }

.color_animated_button {
    display: flex;
    justify-content: center;
    background-color: var(--color-background-animated-button);
    color: hsl(0deg 0% 0%);
    border-radius: 4px;
}

.color_animated_button .color-animated-button-text {
        color: var(--color-animated-button-text);
    }

.color_animated_button:hover {
        cursor: pointer;
        background-color: var(--color-background-animated-button-hover);
        color: hsl(0deg 0% 100%);
    }

.color_animated_button:hover .color-animated-button-text {
            color: hsl(0deg 0% 100%);
            transition: color 0.2s ease;
        }

.color_animated_button:hover {

        transition: 0.2s ease;
        transition-property: background-color, color;
    }

.color_animated_button .zulip-icon,.color_animated_button .color-animated-button-text {
        padding: 6px 3px;
    }

.color_animated_button .fa {
        position: relative;
        top: 3px;
    }

.table-striped {
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 20px;
    width: 100%;
}

.table-striped:not(.table-bordered) thead th {
            border-top: 1px solid hsl(0deg 0% 0% / 20%) !important;
            border-bottom: 1px solid hsl(0deg 0% 0% / 20%) !important;
        }

.table-striped:not(.table-bordered) tbody tr:first-child td {
            border-top: 0;
        }

.table-striped thead {
        background-color: var(--color-background-table-header);
    }

.table-striped thead th {
        /* Prevent headers from collapsing.
           For headers that sort, this keeps
           the icon on the same line as the
           header text. */
        min-width: max-content;
        white-space: nowrap;
        color: inherit;
        word-break: normal;
    }

.table-striped thead th .table-sortable-arrow {
            /* Sub alignment works perfectly in this context,
               where the table header is a text node. */
            vertical-align: sub;
            transform: rotate(180deg);
            opacity: 0;
            transition: opacity 100ms ease-out;
        }

.table-striped thead th.descend .table-sortable-arrow {
            transform: rotate(0deg);
        }

.table-striped thead th[data-sort]:not(.active):hover .table-sortable-arrow {
            opacity: 0.3;
        }

.table-striped thead th.active .table-sortable-arrow {
            opacity: 1;
        }

.table-striped thead th.active {
            opacity: 1;
            transition: opacity 100ms ease-out;
        }

.table-striped thead th[data-sort]:hover {
            cursor: pointer;
            background-color: var(
                --color-background-table-header-sortable-hover
            );
            transition: background-color 100ms ease-in-out;
        }

.table-striped tbody > tr:nth-child(odd) td {
            background-color: var(--color-background-modal);
        }

.table-striped tbody > tr:nth-child(odd) th {
            background-color: var(--color-background-tbody-th-odd);
        }

/* Force the actions column to use the minimum space necessary */

.table-striped .actions {
        width: 1%;
        white-space: nowrap;
    }

.table-striped .actions .icon-button {
            display: inline-flex;
            align-items: center;
            min-height: 2.1875em; /* 35px at 16px/1em */
        }

.table-striped th.actions {
        padding-right: 1em;
    }

.table-striped th,.table-striped td {
        padding: 4px 5px;
    }

.table-striped th {
        text-align: left;
    }

.table-striped td {
        border-top: 1px solid var(--color-border-table-striped);
    }

.table-bordered {
    border: 1px solid var(--color-border-table-bordered);
    border-collapse: separate;
    border-left: 0;
    border-radius: 4px;
    border-spacing: 0;
    width: 100%;
    margin-bottom: 20px;
}

.table-bordered th,.table-bordered td {
        border-left: 1px solid var(--color-border-table-bordered);
        border-top: 1px solid var(--color-border-table-bordered);
        padding: 4px 5px;
        text-align: left;
    }

.table-bordered thead tr:first-child th {
        border-top: 0;
    }

.table-bordered thead tr:first-child > th:first-child {
        border-top-left-radius: 4px;
    }

.table-bordered thead tr:first-child > th:last-child {
        border-top-right-radius: 4px;
    }

.table-bordered tbody:last-child tr:last-child > td:first-child {
        border-bottom-left-radius: 4px;
    }

.table-bordered tbody:last-child tr:last-child > td:last-child {
        border-bottom-right-radius: 4px;
    }

.subsection-header {
    display: flex;
    flex-wrap: wrap;
    margin: 0.2857em 0;
    gap: 0 0.625em; /* 10px at 16px em */
    align-items: center;
}

.save-button-controls {
    display: flex;
    align-items: center;
    gap: 0.3125em; /* 5px at 16px em */
}

.save-button-controls.hide {
        display: none;
    }

.save-button-controls .save-button[data-status="saved"] {
        pointer-events: none;
    }

.channel-privacy-type-icon {
    position: relative;
    top: 0.06rem;
    padding-right: 1px;
    width: 12px;
}

.channel-privacy-type-icon.zulip-icon-globe,.channel-privacy-type-icon.zulip-icon-archive,.channel-privacy-type-icon.zulip-icon-hashtag {
        font-size: 0.75em;
    }

.channel-privacy-type-icon.zulip-icon-lock,.channel-privacy-type-icon.zulip-icon-users {
        font-size: 0.8em;
    }

.zulip-icon-lock {
    /* The lock icon is bottom heavy, so to make it
       appear better aligned, we pull it up by a
       uniform margin throughout the UI. */
    /* 3.5px at 16px/1em */
    margin-top: -0.2188em !important;
}

.dropdown-list-container
    .dropdown-list
    .dropdown-list-item-common-styles
    .zulip-icon-lock {
    /* We do not need to pull up lock icons in dropdowns
       so we reset their margin-top to the original value
       for a dropdown's .zulip-icon */
    margin-top: 0 !important;
}

/* This includes css needed to display messages in an overlay. */
.overlay-messages-container {
    position: relative;
    height: 95%;
    background-color: var(--color-background-modal);
    border-radius: 4px;
    padding: 0;
    width: 58%;
    overflow: hidden;
    max-width: 1200px;
    max-height: 1000px;
    display: flex;
    flex-direction: column;
}
@media (max-width: 767.98px) {
.overlay-messages-container {
        height: 95%;
        max-width: none;
        width: 90%;
}
    }
.overlay-messages-container .overlay-messages-header {
        padding-top: 4px;
        padding-bottom: 8px;
        text-align: center;
        background-color: var(--color-background-modal-bar);
        border-bottom: 1px solid var(--color-border-modal-bar);
    }
.overlay-messages-container .overlay-messages-header h1 {
            margin: 0;
            font-size: 1.1em;
            text-transform: uppercase;
        }
.overlay-messages-container .overlay-messages-header .exit {
            font-weight: 400;
            position: absolute;
            top: 10px;
            right: 10px;
            color: hsl(0deg 0% 67%);
            cursor: pointer;
        }
.overlay-messages-container .overlay-messages-header .exit .exit-sign {
                position: relative;
                top: 1px;
                margin-left: 3px;
                font-size: 1.5rem;
                line-height: 1;
                font-weight: 600;
                cursor: pointer;
            }
.overlay-messages-container .overlay-messages-list {
        padding: 10px 25px;
        overflow: auto;
    }
.overlay-messages-container .overlay-messages-list .no-overlay-messages {
            display: block;
            margin-top: calc(45vh - 30px - 1.5em);
            text-align: center;
            font-size: 1.5em;
            color: hsl(0deg 0% 67%);
            pointer-events: none;
        }

.overlay-messages-container .overlay-message-row {
    padding: 5px 0;
}

.overlay-messages-container .overlay-message-row .overlay-message-info-box {
        width: 100%;
        margin-bottom: 10px;
    }

.overlay-messages-container .overlay-message-row .overlay-message-info-box.active {
            outline: 2px solid var(--color-outline-focus);
            border-radius: 7px;
        }

.overlay-messages-container .overlay-message-row .overlay-message-info-box .message_row {
            border-radius: 0 0 7px 7px;
            border: 1px solid var(--color-message-list-border);
            border-top: 0;
        }

.overlay-messages-container .overlay-message-row .overlay-message-info-box .messagebox-content {
            grid-template: auto / auto max-content;
            grid-template-areas:
                "message controls"
                "message .       ";
            /* to space from restore draft button */
            -moz-column-gap: 5px;
                 column-gap: 5px;
            padding: 10px;
        }

.overlay-messages-container .overlay-message-row .overlay-message-info-box .messagebox-content .message_content {
                cursor: pointer;
                grid-area: message;
            }

.overlay-messages-container .overlay-message-row .overlay-message-info-box .messagebox-content .message_top_line {
                grid-area: controls;
            }

.overlay-messages-container .overlay-message-row .overlay-message-info-box .messagebox {
            cursor: auto;
            box-shadow: none;
            border-radius: 0 0 7px 7px;
        }

.overlay-messages-container .overlay-message-row .overlay-message-info-box .overlay_message_controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            font-size: 0.9em;
        }

.overlay-messages-container .overlay-message-row .overlay-message-info-box .overlay_message_controls [data-tippy-root] {
                width: max-content;
                overflow-wrap: unset;
            }

.overlay-messages-container .overlay-message-row .overlay-message-info-box .overlay_message_controls .copy-overlay-message {
                font-size: 1.2em;
            }

.overlay-messages-container .overlay-message-row .overlay-message-info-box .overlay_message_controls .restore-overlay-message {
                cursor: pointer;
                color: hsl(170deg 48% 54%);
                opacity: 0.7;
            }

.overlay-messages-container .overlay-message-row .overlay-message-info-box .overlay_message_controls .restore-overlay-message:hover {
                    opacity: 1;
                }

.overlay-messages-container .overlay-message-row .overlay-message-info-box .overlay_message_controls .delete-overlay-message {
                cursor: pointer;
                color: hsl(357deg 52% 57%);
                opacity: 0.7;
                padding: 0;
                font-size: 1.2em;
            }

.overlay-messages-container .overlay-message-row .overlay-message-info-box .overlay_message_controls .delete-overlay-message:hover {
                    opacity: 1;
                }

.overlay-messages-container .overlay-message-row .overlay-message-info-box .message_header {
            /* We don't need these effects applied for message list in the drafts overlay. */
            box-shadow: none !important;
            border: 0 !important;
            background: transparent;
        }

div.overlay .flex.overlay-content > .overlay-container,
#settings_page,
.informational-overlays .overlay-content {
    box-shadow: var(--box-shadow-overlay);
}

.delete-selected-drafts-button-container {
    display: flex;
}

.dropdown-widget-button {
    background-color: var(--color-background-dropdown-widget-button);
    padding: 4px 6px;
    border: 1px solid var(--color-border-dropdown-widget-button);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    outline: none;
    color: var(--color-text-default);
    width: var(--width-dropdown-widget-button);
}

.dropdown-widget-button:disabled {
        cursor: not-allowed;
        background-color: var(
            --color-background-disabled-dropdown-widget-button
        );
        opacity: 0.7;
    }

#edit_bot_owner_widget .dropdown_widget_value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown_widget_with_label_wrapper {
    margin-top: 0 !important;
}

.dropdown-current-value-not-in-options,
.setting-disabled-option {
    color: hsl(38deg 46% 54%);
}

.dropdown-current-value-not-in-options .setting-disabled-option-icon,.setting-disabled-option .setting-disabled-option-icon {
        /* Values set to match text alignment in stream dropdown. */
        padding: 0 5px 0 1px;
    }

.empty-list-message,
.empty-table-message {
    background-color: inherit;
    color: var(--color-text-default);
    font-size: 1.5em;
    padding: 3em 1em !important;
    text-align: center;
}

.filter_text_input {
    padding: 4px 6px;
    color: var(--color-text-default);
    border: 1px solid hsl(0deg 0% 80%);
    transition:
        border-color linear 0.2s,
        box-shadow linear 0.2s;
    box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
    border-radius: 4px;
}

.filter_text_input:focus {
        border-color: hsl(206deg 80% 62% / 80%);
        outline: 0;
        box-shadow:
            inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
            0 0 8px hsl(206deg 80% 62% / 60%);
    }

/**
 * Use the "tab-picker-vertical" class in conjunction
 * for a vertical tab picker.
 */
.tab-picker {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--grid-gap-tab-picker);
    box-sizing: border-box;
    border-radius: 5px;
    /* Using max-content ensures equal width tabs. */
    min-width: max-content;
    padding: 1px;
    background-color: var(--color-background-tab-picker-container);
    /* 16px at 15px/1em */
    font-size: 1.0666em;
}
.tab-picker input[type="radio"] {
        display: none;
    }
.tab-picker .tab-option-content {
        z-index: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        /* Avoids layout shift while showing a border when pressed.  */
        border: 1px solid transparent;
        border-radius: 4px;
        box-sizing: border-box;
        padding: 3px 7px;
        color: var(--color-text-dropdown-menu);
    }
.tab-picker .tab-option-content .zulip-icon {
            /* Clear inherited position. */
            position: static;
            color: var(--color-icon-purple);
        }
.tab-picker .tab-option:not(:checked) + .tab-option-content:hover {
            background-color: var(
                --color-background-tab-picker-tab-option-hover
            );
        }
.tab-picker .tab-option:not(:checked) + .tab-option-content:focus-visible {
            background-color: var(
                --color-background-tab-picker-tab-option-hover
            );
        }
.tab-picker .tab-option:not(:checked) + .tab-option-content:active {
            background-color: var(
                --color-background-tab-picker-tab-option-active
            );
        }
.tab-picker .tab-option:nth-of-type(1):checked ~ .slider {
            --tab-selected-tab-picker: 0;
        }
.tab-picker .tab-option:nth-of-type(2):checked ~ .slider {
            --tab-selected-tab-picker: 1;
        }
.tab-picker .tab-option:nth-of-type(3):checked ~ .slider {
            --tab-selected-tab-picker: 2;
        }
.tab-picker .tab-option:nth-of-type(4):checked ~ .slider {
            --tab-selected-tab-picker: 3;
        }
.tab-picker .tab-option:nth-of-type(5):checked ~ .slider {
            --tab-selected-tab-picker: 4;
        }
/* If a tab picker with more than 5 tabs is required,
           extend this using the same pattern as above. */
.tab-picker .slider {
        position: absolute;
        z-index: 1;
        inset: 0;
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        /* Move along X-axis: own width + gap between two tabs. */
        transform: translateX(
            calc(
                (100% + var(--grid-gap-tab-picker)) *
                    var(--tab-selected-tab-picker)
            )
        );
        transition: transform 0.25s cubic-bezier(0.64, 0, 0.78, 0);
        box-sizing: border-box;
        border: 1px solid var(--color-outline-tab-picker-tab-option);
        border-radius: 4px;
        background-color: var(--color-background-tab-picker-selected-tab);
    }
/* Detect if a user has enabled a setting on their device
        to minimize the amount of non-essential motion. */
@media (prefers-reduced-motion) {
        .tab-picker .slider {
            transition: none;
        }

        .tab-picker .tab-option:not(:checked) + .tab-option-content:active {
            border-color: var(--color-outline-tab-picker-tab-option);
        }
    }
/* Related to vertical tab picker. */
.tab-picker.tab-picker-vertical {
        grid-auto-flow: row;
        grid-auto-rows: 1fr;
    }
.tab-picker.tab-picker-vertical .slider {
            /* Move along Y-axis: own height + gap between two tabs. */
            transform: translateY(
                calc(
                    (100% + var(--grid-gap-tab-picker)) *
                        var(--tab-selected-tab-picker)
                )
            );
        }

.copy-button {
    display: flex;
    border-radius: 4px;
    color: var(--color-copy-button);
    /* 2px at 16px/1em */
    padding: 0.125em;
    cursor: pointer;
}

.copy-button:hover,.copy-button:focus-visible {
        color: var(--color-copy-button-hover);
    }

.copy-button:active {
        color: var(--color-copy-button-active);
    }

.copy-button.copy-button-square:hover,.copy-button.copy-button-square :focus-visible {
            background-color: var(--color-copy-button-square-bg-hover);
        }

.copy-button.copy-button-square:active {
            background-color: var(--color-copy-button-square-bg-active);
            color: var(--color-copy-button-square-active);
        }

.copy-button.copy-button-success {
        color: var(--color-copy-button-success);
    }

.text-success {
    color: hsl(120.91deg 32.04% 40.39%);
}

.text-error {
    color: hsl(1.06deg 44.66% 50.39%);
}

.sticky-bottom-option-button {
    width: 100%;
    display: flex;
    padding: 7px 14px;
    background-color: var(--color-background-zulip-button);
    justify-content: flex-start;
    color: var(--color-dropdown-item);
    border: none;
    border-top: 1px solid var(--color-border-zulip-button);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.sticky-bottom-option-button:hover {
        color: var(--color-dropdown-item);
        background-color: var(--background-color-active-dropdown-item);
        border-color: var(--color-border-zulip-button-interactive);
    }

.sticky-bottom-option-button:focus,.sticky-bottom-option-button.current_selection {
        background-color: var(--background-color-active-dropdown-item);
        outline: none;
    }

/* Styling for invalid inputs */
input.invalid-input {
    /* The use of !important is necessary here to override
       border-color specified for text input elements in
       dark_theme.css which has a higher specificity. */
    border-color: var(--color-invalid-input-border) !important;
}
input.invalid-input:focus {
        box-shadow: var(--invalid-input-box-shadow);
    }

/* This is a utility class for line clamping. */
.line-clamp {
    /* Despite the below prefixed properties being deprecated,
       the co-dependency of these three properties is a fully
       specified behavior and will continue to be supported.
       Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/line-clamp */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* The value of --line-clamp-value is not defined globally and instead
       inherits the value from another class or the parent element. If it
       is not defined, it defaults to 2. */
    -webkit-line-clamp: var(--line-clamp-value, 2);
    /* Also define the standard property 'line-clamp' for compatibility,
       for when the vendor prefix "-webkit-" is no longer required. */
    line-clamp: var(--line-clamp-value, 2);
    text-overflow: ellipsis;
    overflow: hidden;
}

.info-density-controls .button-group {
        border-radius: 5px;
        border: 1px solid var(--color-info-density-control-border);
        width: 100%;
        display: grid;
        grid-auto-flow: column;
    }

.info-density-controls .button-group .info-density-button-container {
            display: inline-flex;
            flex-direction: column;
        }

.info-density-controls .button-group .info-density-button-container:first-of-type .info-density-button {
                    border-top-left-radius: 5px;
                    border-bottom-left-radius: 5px;
                }

.info-density-controls .button-group .info-density-button-container:last-of-type .info-density-button {
                    border-top-right-radius: 5px;
                    border-bottom-right-radius: 5px;
                }

.info-density-controls .button-group .info-density-button {
            border: none;
            background-color: var(--color-background-popover);
            padding: 0.25em 0.4375em;
            display: inline-flex;
            align-items: center;
            vertical-align: unset;
            justify-content: center;
            margin: 0;
        }

.info-density-controls .button-group .info-density-button:hover:not(:disabled) {
                background-color: var(
                    --color-info-density-button-hover-background
                );
            }

.info-density-controls .button-group .info-density-button:focus {
                outline: none;
            }

.info-density-controls .button-group .info-density-button:disabled {
                cursor: default;
                opacity: 0.4;
            }

.info-density-controls .button-group .info-density-button .zulip-icon {
                display: flex;
                align-items: center;
                color: var(--color-info-denisty-button-icon);
                opacity: 0.7;
            }


/*# sourceMappingURL=src_inputs_ts-src_templates_ts-templates_components_banner_hbs-styles_app_components_css-styl-674c47.css.map*/