@layer normalize, compound-legacy, compound;
@layer compound{
@layer cpd-semantic, custom, cpd-base;
}
/*
Copyright 2021-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/
/* inter-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-cyrillic-ext-400-normal-Dc4VJyIJ.woff2) format('woff2'), url(/assets/inter-cyrillic-ext-400-normal-BE2fNs0E.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* inter-cyrillic-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-cyrillic-400-normal-BLGc9T1a.woff2) format('woff2'), url(/assets/inter-cyrillic-400-normal-alAqRL36.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* inter-greek-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-greek-ext-400-normal-Bput3-QP.woff2) format('woff2'), url(/assets/inter-greek-ext-400-normal-XIH6-K3k.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}
/* inter-greek-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-greek-400-normal-DxZsaF_h.woff2) format('woff2'), url(/assets/inter-greek-400-normal-C3I71FoW.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
/* inter-vietnamese-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-vietnamese-400-normal-DMkecbls.woff2) format('woff2'), url(/assets/inter-vietnamese-400-normal-Bbgyi5SW.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
/* inter-latin-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-latin-ext-400-normal-C1nco2VV.woff2) format('woff2'), url(/assets/inter-latin-ext-400-normal-77YHD8bZ.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* inter-latin-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inter-latin-400-normal-C38fXH4l.woff2) format('woff2'), url(/assets/inter-latin-400-normal-CyCys3Eg.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* inter-cyrillic-ext-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/inter-cyrillic-ext-500-normal-BShVwWPj.woff2) format('woff2'), url(/assets/inter-cyrillic-ext-500-normal-NrhEyngK.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* inter-cyrillic-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/inter-cyrillic-500-normal-D4Vwzodn.woff2) format('woff2'), url(/assets/inter-cyrillic-500-normal-BoeW9iIj.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* inter-greek-ext-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/inter-greek-ext-500-normal-B6guLgqG.woff2) format('woff2'), url(/assets/inter-greek-ext-500-normal-1SJLBQ3N.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}
/* inter-greek-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/inter-greek-500-normal-CeQXL5ds.woff2) format('woff2'), url(/assets/inter-greek-500-normal-CSBZZ4CI.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
/* inter-vietnamese-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/inter-vietnamese-500-normal-DOriooB6.woff2) format('woff2'), url(/assets/inter-vietnamese-500-normal-mJboJaSs.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
/* inter-latin-ext-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/inter-latin-ext-500-normal-CV4jyFjo.woff2) format('woff2'), url(/assets/inter-latin-ext-500-normal-BxGbmqWO.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* inter-latin-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/inter-latin-500-normal-Cerq10X2.woff2) format('woff2'), url(/assets/inter-latin-500-normal-BL9OpVg8.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* inter-cyrillic-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-cyrillic-ext-600-normal-CaqZN2hq.woff2) format('woff2'), url(/assets/inter-cyrillic-ext-600-normal-t7rHAwBu.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* inter-cyrillic-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-cyrillic-600-normal-BGBWG807.woff2) format('woff2'), url(/assets/inter-cyrillic-600-normal-vZ-N8GHY.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* inter-greek-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-greek-ext-600-normal-Cnui8OiR.woff2) format('woff2'), url(/assets/inter-greek-ext-600-normal-CCFnzSpK.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}
/* inter-greek-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-greek-600-normal-Dhlb-90d.woff2) format('woff2'), url(/assets/inter-greek-600-normal-BVGIV3oK.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
/* inter-vietnamese-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-vietnamese-600-normal-Cc8MFFhd.woff2) format('woff2'), url(/assets/inter-vietnamese-600-normal-BuLX-rYi.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
/* inter-latin-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-latin-ext-600-normal-D2bJ5OIk.woff2) format('woff2'), url(/assets/inter-latin-ext-600-normal-CIVaiw4L.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* inter-latin-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/inter-latin-600-normal-LgqL8muc.woff2) format('woff2'), url(/assets/inter-latin-600-normal-CiBQ2DWP.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* inter-cyrillic-ext-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/inter-cyrillic-ext-700-normal-ClVoMEGq.woff2) format('woff2'), url(/assets/inter-cyrillic-ext-700-normal-Cg0zx2i8.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* inter-cyrillic-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/inter-cyrillic-700-normal-bGtGjVdZ.woff2) format('woff2'), url(/assets/inter-cyrillic-700-normal-oWiwobpV.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
/* inter-greek-ext-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/inter-greek-ext-700-normal-SzCdnevJ.woff2) format('woff2'), url(/assets/inter-greek-ext-700-normal-D0KHSs-V.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}
/* inter-greek-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/inter-greek-700-normal-Cxpycf-U.woff2) format('woff2'), url(/assets/inter-greek-700-normal-DtGkhywV.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
/* inter-vietnamese-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/inter-vietnamese-700-normal-CGpBpxLq.woff2) format('woff2'), url(/assets/inter-vietnamese-700-normal-DL6eWghQ.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
/* inter-latin-ext-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/inter-latin-ext-700-normal-CfWAu3Qq.woff2) format('woff2'), url(/assets/inter-latin-ext-700-normal-Z3s-4e5M.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* inter-latin-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/inter-latin-700-normal-Drs_5D37.woff2) format('woff2'), url(/assets/inter-latin-700-normal-KTwiWvO9.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* inconsolata-vietnamese-400-normal */
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inconsolata-vietnamese-400-normal-DfC_iMic.woff2) format('woff2'), url(/assets/inconsolata-vietnamese-400-normal-ByiM2lek.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
/* inconsolata-latin-ext-400-normal */
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inconsolata-latin-ext-400-normal-BaHVOdFB.woff2) format('woff2'), url(/assets/inconsolata-latin-ext-400-normal-yvPjCxxx.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* inconsolata-latin-400-normal */
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/inconsolata-latin-400-normal-DTZQ6lD6.woff2) format('woff2'), url(/assets/inconsolata-latin-400-normal-HYADljCo.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* inconsolata-vietnamese-700-normal */
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/inconsolata-vietnamese-700-normal-DuasYmn8.woff2) format('woff2'), url(/assets/inconsolata-vietnamese-700-normal-DLCFFAUf.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
/* inconsolata-latin-ext-700-normal */
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/inconsolata-latin-ext-700-normal-D0Kpgs_9.woff2) format('woff2'), url(/assets/inconsolata-latin-ext-700-normal-Dlt-daqV.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* inconsolata-latin-700-normal */
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/inconsolata-latin-700-normal-ByjKuJjN.woff2) format('woff2'), url(/assets/inconsolata-latin-700-normal-DzgUY3Rl.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@layer normalize{

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}
}
@layer compound{
/* Establish a layer order that allows semantic tokens to be customized, but not base tokens.
 * The layers are prefixed by 'cpd-' because Tailwind will interpret '@layer base' directives.
 */
}
@layer compound{
/* Fallback for Inter regular */
@font-face {
  font-family: "Inter Fallback: Helvetica Neue";
  src: local('Helvetica Neue'), local('HelveticaNeue');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  ascent-override: 91.2883%;
  descent-override: 22.7301%;
  line-gap-override: 0%;
  size-adjust: 106.1198%;
}
@font-face {
  font-family: "Inter Fallback: Segoe UI";
  src: local('Segoe UI'), local('SegoeUI');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  ascent-override: 89.9412%;
  descent-override: 22.3946%;
  size-adjust: 107.7093%;
}
@font-face {
  font-family: "Inter Fallback: Roboto";
  src: local('Roboto Regular'), local('Roboto-Regular');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  ascent-override: 90.2384%;
  descent-override: 22.4686%;
  size-adjust: 107.3546%;
}
@font-face {
  font-family: "Inter Fallback: Ubuntu";
  src: local('Ubuntu Regular'), local('Ubuntu-Regular');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  ascent-override: 92.3027%;
  descent-override: 22.9826%;
  line-gap-override: 0%;
  size-adjust: 104.9536%;
}
@font-face {
  font-family: "Inter Fallback: Fira Sans";
  src: local('Fira Sans Regular'), local('FiraSans-Regular');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  ascent-override: 92.9112%;
  descent-override: 23.1342%;
  size-adjust: 104.2662%;
}
@font-face {
  font-family: "Inter Fallback: Noto Sans";
  src: local('Noto Sans Regular'), local('NotoSans-Regular');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  ascent-override: 96.1571%;
  descent-override: 23.9423%;
  size-adjust: 100.7466%;
}
@font-face {
  font-family: "Inter Fallback: Arial";
  src: local('Arial'), local('ArialMT');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  ascent-override: 90.4365%;
  descent-override: 22.518%;
  line-gap-override: 0%;
  size-adjust: 107.1194%;
}

@font-face {
  font-family: "Inter Fallback: Helvetica Neue";
  src: local('Helvetica Neue Italic'), local('HelveticaNeue-Italic');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  ascent-override: 90.3285%;
  descent-override: 22.4911%;
  line-gap-override: 0%;
  size-adjust: 107.2475%;
}
@font-face {
  font-family: "Inter Fallback: Segoe UI";
  src: local('Segoe UI Italic'), local('SegoeUI-Italic');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  ascent-override: 87.4238%;
  descent-override: 21.7678%;
  size-adjust: 110.8108%;
}
@font-face {
  font-family: "Inter Fallback: Roboto";
  src: local('Roboto Italic'), local('Roboto-Italic');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  ascent-override: 87.2269%;
  descent-override: 21.7188%;
  size-adjust: 111.0609%;
}
@font-face {
  font-family: "Inter Fallback: Ubuntu";
  src: local('Ubuntu Italic'), local('Ubuntu-Italic');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  ascent-override: 88.7154%;
  descent-override: 22.0894%;
  line-gap-override: 0%;
  size-adjust: 109.1974%;
}
@font-face {
  font-family: "Inter Fallback: Fira Sans";
  src: local('Fira Sans Italic'), local('FiraSans-Italic');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  ascent-override: 91.3366%;
  descent-override: 22.7421%;
  size-adjust: 106.0637%;
}
@font-face {
  font-family: "Inter Fallback: Noto Sans";
  src: local('Noto Sans Italic'), local('NotoSans-Italic');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  ascent-override: 90.1268%;
  descent-override: 22.4409%;
  size-adjust: 107.4874%;
}
@font-face {
  font-family: "Inter Fallback: Arial";
  src: local('Arial Italic'), local('Arial-ItalicMT');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  ascent-override: 89.885%;
  descent-override: 22.3806%;
  line-gap-override: 0%;
  size-adjust: 107.7766%;
}


/* Fallback for Inter medium */
@font-face {
  font-family: "Inter Fallback: Helvetica Neue";
  src: local('Helvetica Neue Medium'), local('HelveticaNeue-Medium');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  ascent-override: 93.3765%;
  descent-override: 23.25%;
  line-gap-override: 0%;
  size-adjust: 103.7466%;
}
@font-face {
  font-family: "Inter Fallback: Segoe UI";
  src: local('Segoe UI Semibold'), local('SegoeUI-Semibold');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  ascent-override: 91.8744%;
  descent-override: 22.876%;
  size-adjust: 105.4429%;
}
@font-face {
  font-family: "Inter Fallback: Roboto";
  src: local('Roboto Medium'), local('Roboto-Medium');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  ascent-override: 90.1094%;
  descent-override: 22.4365%;
  size-adjust: 107.5082%;
}
@font-face {
  font-family: "Inter Fallback: Ubuntu";
  src: local('Ubuntu Medium'), local('Ubuntu-Medium');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  ascent-override: 93.5773%;
  descent-override: 23.3%;
  line-gap-override: 0%;
  size-adjust: 103.524%;
}
@font-face {
  font-family: "Inter Fallback: Fira Sans";
  src: local('Fira Sans Medium'), local('FiraSans-Medium');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  ascent-override: 92.1717%;
  descent-override: 22.95%;
  size-adjust: 105.1028%;
}
@font-face {
  font-family: "Inter Fallback: Noto Sans";
  src: local('Noto Sans Medium'), local('NotoSans-Medium');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  ascent-override: 96.7903%;
  descent-override: 24.1%;
  size-adjust: 100.0875%;
}

@font-face {
  font-family: "Inter Fallback: Helvetica Neue";
  src: local('Helvetica Neue Medium Italic'), local('HelveticaNeue-MediumItalic');
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  ascent-override: 92.8129%;
  descent-override: 23.1097%;
  line-gap-override: 0%;
  size-adjust: 104.3767%;
}
@font-face {
  font-family: "Inter Fallback: Segoe UI";
  src: local('Segoe UI Semibold Italic'), local('SegoeUI-SemiboldItalic');
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  ascent-override: 90.3452%;
  descent-override: 22.4952%;
  line-gap-override: 0%;
  size-adjust: 107.2276%;
}
@font-face {
  font-family: "Inter Fallback: Roboto";
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic');
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  ascent-override: 87.0316%;
  descent-override: 21.6702%;
  size-adjust: 111.3102%;
}
@font-face {
  font-family: "Inter Fallback: Ubuntu";
  src: local('Ubuntu Medium Italic'), local('Ubuntu-MediumItalic');
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  ascent-override: 90.6173%;
  descent-override: 22.563%;
  line-gap-override: 0%;
  size-adjust: 106.9056%;
}
@font-face {
  font-family: "Inter Fallback: Fira Sans";
  src: local('Fira Sans Medium Italic'), local('FiraSans-MediumItalic');
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  ascent-override: 90.2181%;
  descent-override: 22.4636%;
  size-adjust: 107.3787%;
}
@font-face {
  font-family: "Inter Fallback: Noto Sans";
  src: local('Noto Sans Medium Italic'), local('NotoSans-MediumItalic');
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  ascent-override: 91.0165%;
  descent-override: 22.6624%;
  size-adjust: 106.4367%;
}


/* Fallback for Inter semibold */
@font-face {
  font-family: "Inter Fallback: Helvetica Neue";
  src: local('Helvetica Neue Bold'), local('HelveticaNeue-Bold');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  ascent-override: 95.4228%;
  descent-override: 23.7595%;
  line-gap-override: 0%;
  size-adjust: 101.5218%;
}
@font-face {
  font-family: "Inter Fallback: Segoe UI";
  src: local('Segoe UI Bold'), local('SegoeUI-Bold');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  ascent-override: 94.4483%;
  descent-override: 23.5169%;
  size-adjust: 102.5694%;
}
@font-face {
  font-family: "Inter Fallback: Roboto";
  src: local('Roboto Bold'), local('Roboto-Bold');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  ascent-override: 89.886%;
  descent-override: 22.3809%;
  size-adjust: 107.7754%;
}
@font-face {
  font-family: "Inter Fallback: Ubuntu";
  src: local('Ubuntu Bold'), local('Ubuntu-Bold');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  ascent-override: 95.4228%;
  descent-override: 23.7595%;
  line-gap-override: 0%;
  size-adjust: 101.5218%;
}
@font-face {
  font-family: "Inter Fallback: Fira Sans";
  src: local('Fira Sans SemiBold'), local('FiraSans-SemiBold');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  ascent-override: 91.2481%;
  descent-override: 22.72%;
  size-adjust: 106.1666%;
}
@font-face {
  font-family: "Inter Fallback: Noto Sans";
  src: local('Noto Sans SemiBold'), local('NotoSans-SemiBold');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  ascent-override: 97.8084%;
  descent-override: 24.3535%;
  size-adjust: 99.0457%;
}
@font-face {
  font-family: "Inter Fallback: Arial";
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  ascent-override: 95.419%;
  descent-override: 23.7586%;
  line-gap-override: 0%;
  size-adjust: 101.5259%;
}

@font-face {
  font-family: "Inter Fallback: Helvetica Neue";
  src: local('Helvetica Neue Bold Italic'), local('HelveticaNeue-BoldItalic');
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  ascent-override: 94.9556%;
  descent-override: 23.6432%;
  line-gap-override: 0%;
  size-adjust: 102.0213%;
}
@font-face {
  font-family: "Inter Fallback: Segoe UI";
  src: local('Segoe UI Bold Italic'), local('SegoeUI-BoldItalic');
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  ascent-override: 93.4049%;
  descent-override: 23.2571%;
  size-adjust: 103.7152%;
}
@font-face {
  font-family: "Inter Fallback: Roboto";
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic');
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  ascent-override: 86.7537%;
  descent-override: 21.601%;
  size-adjust: 111.6667%;
}
@font-face {
  font-family: "Inter Fallback: Ubuntu";
  src: local('Ubuntu Bold Italic'), local('Ubuntu-BoldItalic');
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  ascent-override: 92.3893%;
  descent-override: 23.0042%;
  line-gap-override: 0%;
  size-adjust: 104.8553%;
}
@font-face {
  font-family: "Inter Fallback: Fira Sans";
  src: local('Fira Sans SemiBold Italic'), local('FiraSans-SemiBoldItalic');
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  ascent-override: 89.2306%;
  descent-override: 22.2177%;
  size-adjust: 108.567%;
}
@font-face {
  font-family: "Inter Fallback: Noto Sans";
  src: local('Noto Sans SemiBold Italic'), local('NotoSans-SemiBoldItalic');
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  ascent-override: 91.9944%;
  descent-override: 22.9059%;
  size-adjust: 105.3053%;
}
@font-face {
  font-family: "Inter Fallback: Arial";
  src: local('Arial Bold Italic'), local('Arial-BoldItalicMT');
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  ascent-override: 94.7544%;
  descent-override: 23.5931%;
  line-gap-override: 0%;
  size-adjust: 102.238%;
}
}
@layer compound{
@media screen{
@layer cpd-base{
:root, [class*="cpd-theme-"] {
  --cpd-space-scale: 4px;
  --cpd-space-0x: 0;
  --cpd-space-6x: 24px;
  --cpd-space-10x: 40px;
  --cpd-space-11x: 44px;
  --cpd-space-12x: 48px;
  --cpd-space-16x: 64px;
  --cpd-space-36x: 144px;
  --cpd-space-56x: 224px;
  --cpd-border-width-1: 1px;
  --cpd-border-width-2: 2px;
  --cpd-border-width-4: 4px;
  --cpd-border-width-0-5: 0.5px;
  --cpd-font-family-sans: Inter, "Inter Fallback: Helvetica Neue", "Inter Fallback: Segoe UI", "Inter Fallback: Roboto", "Inter Fallback: Ubuntu", "Inter Fallback: Fira Sans", "Inter Fallback: Noto Sans", "Inter Fallback: Arial", "Helvetica Neue", "Segoe UI", Roboto, Ubuntu, "Fira Sans", "Noto Sans", Arial, sans-serif;
  --cpd-font-family-mono: Inconsolata, ui-monospace, monospace;
  --cpd-font-weight-regular: 400;
  --cpd-font-weight-medium: 500;
  --cpd-font-weight-semibold: 600;
  --cpd-font-line-height-minimum: 1;
  --cpd-font-line-height-tight: 1.25;
  --cpd-font-line-height-regular: 1.5;
  --cpd-font-size-body-xs: 0.6875rem;
  --cpd-font-size-body-sm: 0.8125rem;
  --cpd-font-size-body-md: 0.9375rem;
  --cpd-font-size-body-lg: 1.0625rem;
  --cpd-font-size-heading-sm: 1.25rem;
  --cpd-font-size-heading-md: 1.5rem;
  --cpd-font-size-heading-lg: 1.75rem;
  --cpd-font-size-heading-xl: 2rem;
  --cpd-font-size-root: 1rem;
  --cpd-font-letter-spacing-body-xs: 0.0048em;
  --cpd-font-letter-spacing-body-sm: -0.0031em;
  --cpd-font-letter-spacing-body-md: -0.0088em;
  --cpd-font-letter-spacing-body-lg: -0.0128em;
  --cpd-font-letter-spacing-heading-sm: -0.0166em;
  --cpd-font-letter-spacing-heading-md: -0.0195em;
  --cpd-font-letter-spacing-heading-lg: -0.0209em;
  --cpd-font-letter-spacing-heading-xl: -0.0216em;
  --cpd-space-0-5x: 2px;
  --cpd-space-1x: var(--cpd-space-scale);
  --cpd-space-1-5x: 6px;
  --cpd-space-2x: 8px;
  --cpd-space-3x: 12px;
  --cpd-space-4x: 16px;
  --cpd-space-5x: 20px;
  --cpd-space-7x: 28px;
  --cpd-space-8x: 32px;
  --cpd-space-9x: 36px;
  --cpd-space-13x: 52px;
  --cpd-space-14x: 56px;
  --cpd-space-15x: 60px;
  --cpd-space-20x: 80px;
  --cpd-space-24x: 96px;
  --cpd-space-28x: 112px;
  --cpd-space-32x: 128px;
  --cpd-space-40x: 160px;
  --cpd-space-48x: 192px;
  --cpd-space-64x: 256px;
  --cpd-font-body-xs-regular: var(--cpd-font-weight-regular) var(--cpd-font-size-body-xs)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
  --cpd-font-body-xs-medium: var(--cpd-font-weight-medium) var(--cpd-font-size-body-xs)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
  --cpd-font-body-xs-semibold: var(--cpd-font-weight-semibold) var(--cpd-font-size-body-xs)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
  --cpd-font-body-sm-regular: var(--cpd-font-weight-regular) var(--cpd-font-size-body-sm)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
  --cpd-font-body-sm-medium: var(--cpd-font-weight-medium) var(--cpd-font-size-body-sm)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
  --cpd-font-body-sm-semibold: var(--cpd-font-weight-semibold) var(--cpd-font-size-body-sm)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
  --cpd-font-body-md-regular: var(--cpd-font-weight-regular) var(--cpd-font-size-body-md)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
  --cpd-font-body-md-medium: var(--cpd-font-weight-medium) var(--cpd-font-size-body-md)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
  --cpd-font-body-md-semibold: var(--cpd-font-weight-semibold) var(--cpd-font-size-body-md)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
  --cpd-font-body-lg-regular: var(--cpd-font-weight-regular) var(--cpd-font-size-body-lg)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
  --cpd-font-body-lg-medium: var(--cpd-font-weight-medium) var(--cpd-font-size-body-lg)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
  --cpd-font-body-lg-semibold: var(--cpd-font-weight-semibold) var(--cpd-font-size-body-lg)/var(--cpd-font-line-height-regular) var(--cpd-font-family-sans);
  --cpd-font-heading-sm-regular: var(--cpd-font-weight-regular) var(--cpd-font-size-heading-sm)/var(--cpd-font-line-height-tight) var(--cpd-font-family-sans);
  --cpd-font-heading-sm-medium: var(--cpd-font-weight-medium) var(--cpd-font-size-heading-sm)/var(--cpd-font-line-height-tight) var(--cpd-font-family-sans);
  --cpd-font-heading-sm-semibold: var(--cpd-font-weight-semibold) var(--cpd-font-size-heading-sm)/var(--cpd-font-line-height-tight) var(--cpd-font-family-sans);
  --cpd-font-heading-md-regular: var(--cpd-font-weight-regular) var(--cpd-font-size-heading-md)/var(--cpd-font-line-height-tight) var(--cpd-font-family-sans);
  --cpd-font-heading-md-semibold: var(--cpd-font-weight-semibold) var(--cpd-font-size-heading-md)/var(--cpd-font-line-height-tight) var(--cpd-font-family-sans);
  --cpd-font-heading-lg-regular: var(--cpd-font-weight-regular) var(--cpd-font-size-heading-lg)/var(--cpd-font-line-height-tight) var(--cpd-font-family-sans);
  --cpd-font-heading-lg-semibold: var(--cpd-font-weight-semibold) var(--cpd-font-size-heading-lg)/var(--cpd-font-line-height-tight) var(--cpd-font-family-sans);
  --cpd-font-heading-xl-regular: var(--cpd-font-weight-regular) var(--cpd-font-size-heading-xl)/var(--cpd-font-line-height-tight) var(--cpd-font-family-sans);
  --cpd-font-heading-xl-semibold: var(--cpd-font-weight-semibold) var(--cpd-font-size-heading-xl)/var(--cpd-font-line-height-tight) var(--cpd-font-family-sans);
}
}
}
}
@layer compound{
@media screen{
@layer cpd-semantic{
:root, [class*="cpd-theme-"] {
  --cpd-color-text-primary: var(--cpd-color-gray-1400);
  --cpd-color-text-secondary: var(--cpd-color-gray-900);
  --cpd-color-text-disabled: var(--cpd-color-gray-800);
  --cpd-color-text-action-primary: var(--cpd-color-gray-1400);
  --cpd-color-text-action-accent: var(--cpd-color-green-900);
  --cpd-color-text-link-external: var(--cpd-color-blue-900);
  --cpd-color-text-critical-primary: var(--cpd-color-red-900);
  --cpd-color-text-success-primary: var(--cpd-color-green-900);
  --cpd-color-text-info-primary: var(--cpd-color-blue-900);
  --cpd-color-text-on-solid-primary: var(--cpd-color-theme-bg);
  --cpd-color-text-decorative-1: var(--cpd-color-lime-1100);
  --cpd-color-text-decorative-2: var(--cpd-color-cyan-1100);
  --cpd-color-text-decorative-3: var(--cpd-color-fuchsia-1100);
  --cpd-color-text-decorative-4: var(--cpd-color-purple-1100);
  --cpd-color-text-decorative-5: var(--cpd-color-pink-1100);
  --cpd-color-text-decorative-6: var(--cpd-color-orange-1100);
  --cpd-color-text-badge-accent: var(--cpd-color-green-1100);
  --cpd-color-text-badge-info: var(--cpd-color-blue-1100);
  --cpd-color-bg-subtle-primary: var(--cpd-color-gray-400);
  --cpd-color-bg-subtle-secondary: var(--cpd-color-gray-300);
  --cpd-color-bg-canvas-default: var(--cpd-color-theme-bg);
  --cpd-color-bg-canvas-disabled: var(--cpd-color-gray-200);
  --cpd-color-bg-action-primary-rest: var(--cpd-color-gray-1400);
  --cpd-color-bg-action-primary-hovered: var(--cpd-color-gray-1200);
  --cpd-color-bg-action-primary-pressed: var(--cpd-color-gray-1100);
  --cpd-color-bg-action-primary-disabled: var(--cpd-color-gray-700);
  --cpd-color-bg-action-secondary-rest: var(--cpd-color-theme-bg);
  --cpd-color-bg-action-secondary-hovered: var(--cpd-color-alpha-gray-200);
  --cpd-color-bg-action-secondary-pressed: var(--cpd-color-alpha-gray-300);
  --cpd-color-bg-critical-primary: var(--cpd-color-red-900);
  --cpd-color-bg-critical-hovered: var(--cpd-color-red-1000);
  --cpd-color-bg-critical-subtle: var(--cpd-color-red-200);
  --cpd-color-bg-critical-subtle-hovered: var(--cpd-color-red-300);
  --cpd-color-bg-success-subtle: var(--cpd-color-green-200);
  --cpd-color-bg-info-subtle: var(--cpd-color-blue-200);
  --cpd-color-bg-decorative-1: var(--cpd-color-lime-300);
  --cpd-color-bg-decorative-2: var(--cpd-color-cyan-300);
  --cpd-color-bg-decorative-3: var(--cpd-color-fuchsia-300);
  --cpd-color-bg-decorative-4: var(--cpd-color-purple-300);
  --cpd-color-bg-decorative-5: var(--cpd-color-pink-300);
  --cpd-color-bg-decorative-6: var(--cpd-color-orange-300);
  --cpd-color-bg-accent-rest: var(--cpd-color-green-900);
  --cpd-color-bg-accent-hovered: var(--cpd-color-green-1000);
  --cpd-color-bg-accent-pressed: var(--cpd-color-green-1100);
  --cpd-color-bg-accent-selected: var(--cpd-color-alpha-green-300);
  --cpd-color-border-disabled: var(--cpd-color-gray-500);
  --cpd-color-border-focused: var(--cpd-color-blue-900);
  --cpd-color-border-interactive-primary: var(--cpd-color-gray-800);
  --cpd-color-border-interactive-secondary: var(--cpd-color-gray-600);
  --cpd-color-border-interactive-hovered: var(--cpd-color-gray-1100);
  --cpd-color-border-critical-primary: var(--cpd-color-red-900);
  --cpd-color-border-critical-hovered: var(--cpd-color-red-1000);
  --cpd-color-border-critical-subtle: var(--cpd-color-red-500);
  --cpd-color-border-success-subtle: var(--cpd-color-green-500);
  --cpd-color-border-info-subtle: var(--cpd-color-blue-700);
  --cpd-color-border-accent-subtle: var(--cpd-color-green-700);
  --cpd-color-icon-primary: var(--cpd-color-gray-1400);
  --cpd-color-icon-secondary: var(--cpd-color-gray-900);
  --cpd-color-icon-tertiary: var(--cpd-color-gray-800);
  --cpd-color-icon-quaternary: var(--cpd-color-gray-700);
  --cpd-color-icon-disabled: var(--cpd-color-gray-700);
  --cpd-color-icon-primary-alpha: var(--cpd-color-alpha-gray-1400);
  --cpd-color-icon-secondary-alpha: var(--cpd-color-alpha-gray-900);
  --cpd-color-icon-tertiary-alpha: var(--cpd-color-alpha-gray-800);
  --cpd-color-icon-quaternary-alpha: var(--cpd-color-alpha-gray-700);
  --cpd-color-icon-accent-tertiary: var(--cpd-color-green-800);
  --cpd-color-icon-accent-primary: var(--cpd-color-green-900);
  --cpd-color-icon-critical-primary: var(--cpd-color-red-900);
  --cpd-color-icon-success-primary: var(--cpd-color-green-900);
  --cpd-color-icon-info-primary: var(--cpd-color-blue-900);
  --cpd-color-icon-on-solid-primary: var(--cpd-color-theme-bg);
  --cpd-color-gradient-subtle-stop1: var(--cpd-color-alpha-green-500);
  --cpd-color-gradient-subtle-stop2: var(--cpd-color-alpha-green-400);
  --cpd-color-gradient-subtle-stop3: var(--cpd-color-alpha-green-300);
  --cpd-color-gradient-subtle-stop4: var(--cpd-color-alpha-green-200);
  --cpd-color-gradient-subtle-stop5: var(--cpd-color-alpha-green-100);
  --cpd-color-gradient-subtle-stop6: var(--cpd-color-transparent);
  --cpd-color-gradient-info-stop1: var(--cpd-color-alpha-blue-500);
  --cpd-color-gradient-info-stop2: var(--cpd-color-alpha-blue-400);
  --cpd-color-gradient-info-stop3: var(--cpd-color-alpha-blue-300);
  --cpd-color-gradient-info-stop4: var(--cpd-color-alpha-blue-200);
  --cpd-color-gradient-info-stop5: var(--cpd-color-alpha-blue-100);
  --cpd-color-gradient-info-stop6: var(--cpd-color-transparent);
  --cpd-color-gradient-subtle-linear: linear-gradient(180deg, var(--cpd-color-gradient-subtle-stop1) 0%, var(--cpd-color-gradient-subtle-stop2) 20%, var(--cpd-color-gradient-subtle-stop3) 40%, var(--cpd-color-gradient-subtle-stop4) 60%, var(--cpd-color-gradient-subtle-stop5) 80%, var(--cpd-color-gradient-subtle-stop6) 100%);
  --cpd-color-gradient-info-linear: linear-gradient(180deg, var(--cpd-color-gradient-info-stop1) 0%, var(--cpd-color-gradient-info-stop2) 20%, var(--cpd-color-gradient-info-stop3) 40%, var(--cpd-color-gradient-info-stop4) 60%, var(--cpd-color-gradient-info-stop5) 80%, var(--cpd-color-gradient-info-stop6) 100%);
}
}
}
}
@layer compound{
@media screen{
@layer cpd-base{
.cpd-theme-light.cpd-theme-light {
  --cpd-color-theme-bg: #ffffff;
  --cpd-color-gray-100: #fbfcfd;
  --cpd-color-gray-200: #f7f9fa;
  --cpd-color-gray-300: #f0f2f5;
  --cpd-color-gray-400: #e1e6ec;
  --cpd-color-gray-500: #cdd3da;
  --cpd-color-gray-600: #bdc4cc;
  --cpd-color-gray-700: #a6adb7;
  --cpd-color-gray-800: #818a95;
  --cpd-color-gray-900: #656d77;
  --cpd-color-gray-1000: #595e67;
  --cpd-color-gray-1100: #4c5158;
  --cpd-color-gray-1200: #3c4045;
  --cpd-color-gray-1300: #2b2d32;
  --cpd-color-gray-1400: #1b1d22;
  --cpd-color-red-100: #fffaf9;
  --cpd-color-red-200: #fff7f6;
  --cpd-color-red-300: #ffefec;
  --cpd-color-red-400: #ffdfda;
  --cpd-color-red-500: #ffc5bc;
  --cpd-color-red-600: #ffafa5;
  --cpd-color-red-700: #ff8c81;
  --cpd-color-red-800: #ff3d3d;
  --cpd-color-red-900: #d51928;
  --cpd-color-red-1000: #bc0f22;
  --cpd-color-red-1100: #a4041d;
  --cpd-color-red-1200: #850006;
  --cpd-color-red-1300: #620000;
  --cpd-color-red-1400: #450000;
  --cpd-color-orange-100: #fffaf7;
  --cpd-color-orange-200: #fff6ef;
  --cpd-color-orange-300: #ffefe4;
  --cpd-color-orange-400: #ffdfc8;
  --cpd-color-orange-500: #ffc8a1;
  --cpd-color-orange-600: #fdb37c;
  --cpd-color-orange-700: #f89440;
  --cpd-color-orange-800: #dc6700;
  --cpd-color-orange-900: #bc4500;
  --cpd-color-orange-1000: #ac3300;
  --cpd-color-orange-1100: #9b2200;
  --cpd-color-orange-1200: #850000;
  --cpd-color-orange-1300: #620000;
  --cpd-color-orange-1400: #450000;
  --cpd-color-yellow-100: #fffcf0;
  --cpd-color-yellow-200: #fff8e0;
  --cpd-color-yellow-300: #fff2c1;
  --cpd-color-yellow-400: #ffe484;
  --cpd-color-yellow-500: #fbce00;
  --cpd-color-yellow-600: #f1bd00;
  --cpd-color-yellow-700: #dea200;
  --cpd-color-yellow-800: #be7a00;
  --cpd-color-yellow-900: #9f5b00;
  --cpd-color-yellow-1000: #8f4d00;
  --cpd-color-yellow-1100: #803f00;
  --cpd-color-yellow-1200: #692e00;
  --cpd-color-yellow-1300: #541a00;
  --cpd-color-yellow-1400: #410600;
  --cpd-color-lime-100: #f8fdf6;
  --cpd-color-lime-200: #f1fcee;
  --cpd-color-lime-300: #e0f8d9;
  --cpd-color-lime-400: #c8f1ba;
  --cpd-color-lime-500: #99e57e;
  --cpd-color-lime-600: #76db4c;
  --cpd-color-lime-700: #54c424;
  --cpd-color-lime-800: #359d18;
  --cpd-color-lime-900: #197d0c;
  --cpd-color-lime-1000: #006e00;
  --cpd-color-lime-1100: #005f00;
  --cpd-color-lime-1200: #004b00;
  --cpd-color-lime-1300: #003600;
  --cpd-color-lime-1400: #002400;
  --cpd-color-green-100: #f8fdfb;
  --cpd-color-green-200: #f1fbf6;
  --cpd-color-green-300: #e3f7ed;
  --cpd-color-green-400: #c6eedb;
  --cpd-color-green-500: #98e1c1;
  --cpd-color-green-600: #71d7ae;
  --cpd-color-green-700: #0bc491;
  --cpd-color-green-800: #009b78;
  --cpd-color-green-900: #007a61;
  --cpd-color-green-1000: #006b52;
  --cpd-color-green-1100: #005c45;
  --cpd-color-green-1200: #004933;
  --cpd-color-green-1300: #003420;
  --cpd-color-green-1400: #002311;
  --cpd-color-cyan-100: #f8fdfd;
  --cpd-color-cyan-200: #f1fafb;
  --cpd-color-cyan-300: #e3f5f8;
  --cpd-color-cyan-400: #c7ecf0;
  --cpd-color-cyan-500: #9bdde5;
  --cpd-color-cyan-600: #76d1dd;
  --cpd-color-cyan-700: #15becf;
  --cpd-color-cyan-800: #0094c0;
  --cpd-color-cyan-900: #0072ac;
  --cpd-color-cyan-1000: #00629c;
  --cpd-color-cyan-1100: #00548c;
  --cpd-color-cyan-1200: #004077;
  --cpd-color-cyan-1300: #002b61;
  --cpd-color-cyan-1400: #00194f;
  --cpd-color-blue-100: #f9fcff;
  --cpd-color-blue-200: #f4f8ff;
  --cpd-color-blue-300: #e9f2ff;
  --cpd-color-blue-400: #d8e7fe;
  --cpd-color-blue-500: #bad5fc;
  --cpd-color-blue-600: #a3c6fa;
  --cpd-color-blue-700: #7eaff6;
  --cpd-color-blue-800: #4088ee;
  --cpd-color-blue-900: #0467dd;
  --cpd-color-blue-1000: #0558c7;
  --cpd-color-blue-1100: #064ab1;
  --cpd-color-blue-1200: #043894;
  --cpd-color-blue-1300: #012478;
  --cpd-color-blue-1400: #000e65;
  --cpd-color-purple-100: #fbfbff;
  --cpd-color-purple-200: #f8f7ff;
  --cpd-color-purple-300: #f1efff;
  --cpd-color-purple-400: #e6e2ff;
  --cpd-color-purple-500: #d4cdff;
  --cpd-color-purple-600: #c5bbff;
  --cpd-color-purple-700: #b1a0ff;
  --cpd-color-purple-800: #9271fd;
  --cpd-color-purple-900: #7a47f1;
  --cpd-color-purple-1000: #6b37de;
  --cpd-color-purple-1100: #5d26cd;
  --cpd-color-purple-1200: #4c05b5;
  --cpd-color-purple-1300: #33008d;
  --cpd-color-purple-1400: #200066;
  --cpd-color-fuchsia-100: #fefafe;
  --cpd-color-fuchsia-200: #fcf5fd;
  --cpd-color-fuchsia-300: #faeefb;
  --cpd-color-fuchsia-400: #f6dff7;
  --cpd-color-fuchsia-500: #edc6f0;
  --cpd-color-fuchsia-600: #e7b2ea;
  --cpd-color-fuchsia-700: #db93e1;
  --cpd-color-fuchsia-800: #c85ed1;
  --cpd-color-fuchsia-900: #ad33bd;
  --cpd-color-fuchsia-1000: #972aaa;
  --cpd-color-fuchsia-1100: #822198;
  --cpd-color-fuchsia-1200: #671481;
  --cpd-color-fuchsia-1300: #4e0068;
  --cpd-color-fuchsia-1400: #34004c;
  --cpd-color-pink-100: #fffafb;
  --cpd-color-pink-200: #fff5f7;
  --cpd-color-pink-300: #ffecf0;
  --cpd-color-pink-400: #ffdee5;
  --cpd-color-pink-500: #ffc2cf;
  --cpd-color-pink-600: #ffadc0;
  --cpd-color-pink-700: #ff88a6;
  --cpd-color-pink-800: #f7407d;
  --cpd-color-pink-900: #d20c65;
  --cpd-color-pink-1000: #b80a5b;
  --cpd-color-pink-1100: #9f0850;
  --cpd-color-pink-1200: #7e0642;
  --cpd-color-pink-1300: #5f002b;
  --cpd-color-pink-1400: #430017;
  --cpd-color-alpha-gray-100: hsla(210, 48%, 41%, 0.02);
  --cpd-color-alpha-gray-200: hsla(200, 41%, 36%, 0.04);
  --cpd-color-alpha-gray-300: hsla(216, 89%, 18%, 0.06);
  --cpd-color-alpha-gray-400: hsla(213, 90%, 20%, 0.12);
  --cpd-color-alpha-gray-500: hsla(212, 87%, 15%, 0.2);
  --cpd-color-alpha-gray-600: hsla(212, 97%, 12%, 0.26);
  --cpd-color-alpha-gray-700: hsla(215, 96%, 10%, 0.35);
  --cpd-color-alpha-gray-800: hsla(213, 87%, 9%, 0.5);
  --cpd-color-alpha-gray-900: hsla(213, 83%, 7%, 0.61);
  --cpd-color-alpha-gray-1000: hsla(218, 79%, 6%, 0.66);
  --cpd-color-alpha-gray-1100: hsla(215, 74%, 5%, 0.71);
  --cpd-color-alpha-gray-1200: hsla(213, 73%, 3%, 0.77);
  --cpd-color-alpha-gray-1300: hsla(225, 57%, 3%, 0.84);
  --cpd-color-alpha-gray-1400: hsla(223, 64%, 2%, 0.9);
  --cpd-color-alpha-red-100: hsla(10, 100%, 61%, 0.03);
  --cpd-color-alpha-red-200: hsla(7, 100%, 56%, 0.04);
  --cpd-color-alpha-red-300: hsla(9, 100%, 54%, 0.08);
  --cpd-color-alpha-red-400: hsla(8, 100%, 52%, 0.15);
  --cpd-color-alpha-red-500: hsla(8, 100%, 51%, 0.27);
  --cpd-color-alpha-red-600: hsla(7, 100%, 51%, 0.36);
  --cpd-color-alpha-red-700: hsla(5, 100%, 51%, 0.5);
  --cpd-color-alpha-red-800: hsla(0, 100%, 51%, 0.77);
  --cpd-color-alpha-red-900: hsla(355, 98%, 41%, 0.91);
  --cpd-color-alpha-red-1000: hsla(353, 98%, 37%, 0.95);
  --cpd-color-alpha-red-1100: hsla(350, 99%, 32%, 0.99);
  --cpd-color-alpha-red-1200: hsl(357, 100%, 26%, 1);
  --cpd-color-alpha-red-1300: hsl(0, 100%, 19%, 1);
  --cpd-color-alpha-red-1400: hsl(0, 100%, 14%, 1);
  --cpd-color-alpha-orange-100: hsla(22, 100%, 61%, 0.04);
  --cpd-color-alpha-orange-200: hsla(26, 100%, 55%, 0.07);
  --cpd-color-alpha-orange-300: hsla(24, 100%, 52%, 0.11);
  --cpd-color-alpha-orange-400: hsla(25, 100%, 51%, 0.22);
  --cpd-color-alpha-orange-500: hsla(25, 100%, 50%, 0.37);
  --cpd-color-alpha-orange-600: hsla(26, 98%, 50%, 0.52);
  --cpd-color-alpha-orange-700: hsla(27, 100%, 48%, 0.75);
  --cpd-color-alpha-orange-800: hsl(28, 100%, 43%, 1);
  --cpd-color-alpha-orange-900: hsl(22, 100%, 37%, 1);
  --cpd-color-alpha-orange-1000: hsl(18, 100%, 34%, 1);
  --cpd-color-alpha-orange-1100: hsl(13, 100%, 30%, 1);
  --cpd-color-alpha-orange-1200: hsl(0, 100%, 26%, 1);
  --cpd-color-alpha-orange-1300: hsl(0, 100%, 19%, 1);
  --cpd-color-alpha-orange-1400: hsl(0, 100%, 14%, 1);
  --cpd-color-alpha-yellow-100: hsla(48, 100%, 51%, 0.06);
  --cpd-color-alpha-yellow-200: hsla(46, 100%, 53%, 0.13);
  --cpd-color-alpha-yellow-300: hsla(47, 100%, 51%, 0.25);
  --cpd-color-alpha-yellow-400: hsla(47, 100%, 51%, 0.49);
  --cpd-color-alpha-yellow-500: hsl(49, 100%, 49%, 1);
  --cpd-color-alpha-yellow-600: hsl(47, 100%, 47%, 1);
  --cpd-color-alpha-yellow-700: hsl(44, 100%, 44%, 1);
  --cpd-color-alpha-yellow-800: hsl(39, 100%, 37%, 1);
  --cpd-color-alpha-yellow-900: hsl(34, 100%, 31%, 1);
  --cpd-color-alpha-yellow-1000: hsl(32, 100%, 28%, 1);
  --cpd-color-alpha-yellow-1100: hsl(30, 100%, 25%, 1);
  --cpd-color-alpha-yellow-1200: hsl(26, 100%, 21%, 1);
  --cpd-color-alpha-yellow-1300: hsl(19, 100%, 17%, 1);
  --cpd-color-alpha-yellow-1400: hsl(6, 100%, 13%, 1);
  --cpd-color-alpha-lime-100: hsla(103, 75%, 46%, 0.04);
  --cpd-color-alpha-lime-200: hsla(107, 89%, 44%, 0.07);
  --cpd-color-alpha-lime-300: hsla(107, 98%, 41%, 0.15);
  --cpd-color-alpha-lime-400: hsla(105, 92%, 42%, 0.28);
  --cpd-color-alpha-lime-500: hsla(104, 98%, 40%, 0.51);
  --cpd-color-alpha-lime-600: hsla(102, 97%, 41%, 0.71);
  --cpd-color-alpha-lime-700: hsla(102, 100%, 37%, 0.86);
  --cpd-color-alpha-lime-800: hsla(107, 99%, 29%, 0.91);
  --cpd-color-alpha-lime-900: hsla(113, 97%, 24%, 0.96);
  --cpd-color-alpha-lime-1000: hsl(120, 100%, 22%, 1);
  --cpd-color-alpha-lime-1100: hsl(120, 100%, 19%, 1);
  --cpd-color-alpha-lime-1200: hsl(120, 100%, 15%, 1);
  --cpd-color-alpha-lime-1300: hsl(120, 100%, 11%, 1);
  --cpd-color-alpha-lime-1400: hsl(120, 100%, 7%, 1);
  --cpd-color-alpha-green-100: hsla(156, 79%, 41%, 0.03);
  --cpd-color-alpha-green-200: hsla(150, 79%, 41%, 0.06);
  --cpd-color-alpha-green-300: hsla(150, 100%, 36%, 0.11);
  --cpd-color-alpha-green-400: hsla(151, 93%, 37%, 0.23);
  --cpd-color-alpha-green-500: hsla(154, 96%, 37%, 0.41);
  --cpd-color-alpha-green-600: hsla(156, 99%, 36%, 0.56);
  --cpd-color-alpha-green-700: hsla(163, 99%, 38%, 0.96);
  --cpd-color-alpha-green-800: hsl(166, 100%, 30%, 1);
  --cpd-color-alpha-green-900: hsl(168, 100%, 24%, 1);
  --cpd-color-alpha-green-1000: hsl(166, 100%, 21%, 1);
  --cpd-color-alpha-green-1100: hsl(165, 100%, 18%, 1);
  --cpd-color-alpha-green-1200: hsl(162, 100%, 14%, 1);
  --cpd-color-alpha-green-1300: hsl(157, 100%, 10%, 1);
  --cpd-color-alpha-green-1400: hsl(149, 100%, 7%, 1);
  --cpd-color-alpha-cyan-100: hsla(180, 79%, 41%, 0.03);
  --cpd-color-alpha-cyan-200: hsla(186, 79%, 41%, 0.06);
  --cpd-color-alpha-cyan-300: hsla(188, 100%, 38%, 0.11);
  --cpd-color-alpha-cyan-400: hsla(186, 100%, 37%, 0.22);
  --cpd-color-alpha-cyan-500: hsla(186, 95%, 38%, 0.4);
  --cpd-color-alpha-cyan-600: hsla(187, 99%, 38%, 0.54);
  --cpd-color-alpha-cyan-700: hsla(186, 99%, 40%, 0.92);
  --cpd-color-alpha-cyan-800: hsl(194, 100%, 38%, 1);
  --cpd-color-alpha-cyan-900: hsl(200, 100%, 34%, 1);
  --cpd-color-alpha-cyan-1000: hsl(202, 100%, 31%, 1);
  --cpd-color-alpha-cyan-1100: hsl(204, 100%, 28%, 1);
  --cpd-color-alpha-cyan-1200: hsl(208, 100%, 23%, 1);
  --cpd-color-alpha-cyan-1300: hsl(213, 100%, 19%, 1);
  --cpd-color-alpha-cyan-1400: hsl(221, 100%, 16%, 1);
  --cpd-color-alpha-blue-100: hsla(210, 100%, 61%, 0.03);
  --cpd-color-alpha-blue-200: hsla(218, 100%, 57%, 0.05);
  --cpd-color-alpha-blue-300: hsla(215, 100%, 52%, 0.09);
  --cpd-color-alpha-blue-400: hsla(216, 95%, 51%, 0.16);
  --cpd-color-alpha-blue-500: hsla(215, 93%, 50%, 0.28);
  --cpd-color-alpha-blue-600: hsla(216, 95%, 48%, 0.37);
  --cpd-color-alpha-blue-700: hsla(215, 98%, 47%, 0.51);
  --cpd-color-alpha-blue-800: hsla(215, 100%, 46%, 0.75);
  --cpd-color-alpha-blue-900: hsla(213, 99%, 44%, 0.99);
  --cpd-color-alpha-blue-1000: hsla(214, 98%, 39%, 0.99);
  --cpd-color-alpha-blue-1100: hsla(216, 99%, 35%, 0.98);
  --cpd-color-alpha-blue-1200: hsla(218, 99%, 29%, 0.99);
  --cpd-color-alpha-blue-1300: hsl(222, 98%, 24%, 1);
  --cpd-color-alpha-blue-1400: hsl(232, 100%, 20%, 1);
  --cpd-color-alpha-purple-100: hsla(240, 100%, 61%, 0.02);
  --cpd-color-alpha-purple-200: hsla(248, 100%, 61%, 0.04);
  --cpd-color-alpha-purple-300: hsla(248, 100%, 55%, 0.07);
  --cpd-color-alpha-purple-400: hsla(248, 100%, 53%, 0.12);
  --cpd-color-alpha-purple-500: hsla(248, 100%, 51%, 0.2);
  --cpd-color-alpha-purple-600: hsla(249, 100%, 51%, 0.27);
  --cpd-color-alpha-purple-700: hsla(251, 100%, 51%, 0.38);
  --cpd-color-alpha-purple-800: hsla(254, 99%, 49%, 0.56);
  --cpd-color-alpha-purple-900: hsla(258, 98%, 47%, 0.73);
  --cpd-color-alpha-purple-1000: hsla(259, 98%, 42%, 0.79);
  --cpd-color-alpha-purple-1100: hsla(260, 97%, 39%, 0.86);
  --cpd-color-alpha-purple-1200: hsla(264, 98%, 36%, 0.99);
  --cpd-color-alpha-purple-1300: hsl(262, 100%, 28%, 1);
  --cpd-color-alpha-purple-1400: hsl(259, 100%, 20%, 1);
  --cpd-color-alpha-fuchsia-100: hsla(300, 95%, 41%, 0.02);
  --cpd-color-alpha-fuchsia-200: hsla(293, 95%, 41%, 0.04);
  --cpd-color-alpha-fuchsia-300: hsla(295, 89%, 41%, 0.07);
  --cpd-color-alpha-fuchsia-400: hsla(298, 91%, 40%, 0.13);
  --cpd-color-alpha-fuchsia-500: hsla(296, 93%, 39%, 0.23);
  --cpd-color-alpha-fuchsia-600: hsla(297, 93%, 38%, 0.31);
  --cpd-color-alpha-fuchsia-700: hsla(295, 96%, 37%, 0.43);
  --cpd-color-alpha-fuchsia-800: hsla(295, 97%, 37%, 0.64);
  --cpd-color-alpha-fuchsia-900: hsla(293, 100%, 34%, 0.8);
  --cpd-color-alpha-fuchsia-1000: hsla(291, 99%, 30%, 0.84);
  --cpd-color-alpha-fuchsia-1100: hsla(289, 96%, 28%, 0.88);
  --cpd-color-alpha-fuchsia-1200: hsla(286, 97%, 24%, 0.93);
  --cpd-color-alpha-fuchsia-1300: hsl(285, 100%, 20%, 1);
  --cpd-color-alpha-fuchsia-1400: hsl(281, 100%, 15%, 1);
  --cpd-color-alpha-pink-100: hsla(348, 100%, 51%, 0.02);
  --cpd-color-alpha-pink-200: hsla(348, 100%, 51%, 0.04);
  --cpd-color-alpha-pink-300: hsla(347, 100%, 54%, 0.08);
  --cpd-color-alpha-pink-400: hsla(347, 100%, 50%, 0.13);
  --cpd-color-alpha-pink-500: hsla(347, 100%, 50%, 0.24);
  --cpd-color-alpha-pink-600: hsla(346, 100%, 51%, 0.33);
  --cpd-color-alpha-pink-700: hsla(345, 100%, 50%, 0.47);
  --cpd-color-alpha-pink-800: hsla(340, 100%, 48%, 0.75);
  --cpd-color-alpha-pink-900: hsla(333, 98%, 41%, 0.96);
  --cpd-color-alpha-pink-1000: hsla(332, 98%, 36%, 0.97);
  --cpd-color-alpha-pink-1100: hsla(331, 100%, 31%, 0.97);
  --cpd-color-alpha-pink-1200: hsla(330, 98%, 24%, 0.98);
  --cpd-color-alpha-pink-1300: hsl(333, 100%, 19%, 1);
  --cpd-color-alpha-pink-1400: hsl(339, 100%, 13%, 1);
  --cpd-color-transparent: rgba(0,0,0,0);
}
}
}
}
@layer compound{
@media screen and (prefers-color-scheme: light){
@layer cpd-base{
:root {
  --cpd-color-theme-bg: #ffffff;
  --cpd-color-gray-100: #fbfcfd;
  --cpd-color-gray-200: #f7f9fa;
  --cpd-color-gray-300: #f0f2f5;
  --cpd-color-gray-400: #e1e6ec;
  --cpd-color-gray-500: #cdd3da;
  --cpd-color-gray-600: #bdc4cc;
  --cpd-color-gray-700: #a6adb7;
  --cpd-color-gray-800: #818a95;
  --cpd-color-gray-900: #656d77;
  --cpd-color-gray-1000: #595e67;
  --cpd-color-gray-1100: #4c5158;
  --cpd-color-gray-1200: #3c4045;
  --cpd-color-gray-1300: #2b2d32;
  --cpd-color-gray-1400: #1b1d22;
  --cpd-color-red-100: #fffaf9;
  --cpd-color-red-200: #fff7f6;
  --cpd-color-red-300: #ffefec;
  --cpd-color-red-400: #ffdfda;
  --cpd-color-red-500: #ffc5bc;
  --cpd-color-red-600: #ffafa5;
  --cpd-color-red-700: #ff8c81;
  --cpd-color-red-800: #ff3d3d;
  --cpd-color-red-900: #d51928;
  --cpd-color-red-1000: #bc0f22;
  --cpd-color-red-1100: #a4041d;
  --cpd-color-red-1200: #850006;
  --cpd-color-red-1300: #620000;
  --cpd-color-red-1400: #450000;
  --cpd-color-orange-100: #fffaf7;
  --cpd-color-orange-200: #fff6ef;
  --cpd-color-orange-300: #ffefe4;
  --cpd-color-orange-400: #ffdfc8;
  --cpd-color-orange-500: #ffc8a1;
  --cpd-color-orange-600: #fdb37c;
  --cpd-color-orange-700: #f89440;
  --cpd-color-orange-800: #dc6700;
  --cpd-color-orange-900: #bc4500;
  --cpd-color-orange-1000: #ac3300;
  --cpd-color-orange-1100: #9b2200;
  --cpd-color-orange-1200: #850000;
  --cpd-color-orange-1300: #620000;
  --cpd-color-orange-1400: #450000;
  --cpd-color-yellow-100: #fffcf0;
  --cpd-color-yellow-200: #fff8e0;
  --cpd-color-yellow-300: #fff2c1;
  --cpd-color-yellow-400: #ffe484;
  --cpd-color-yellow-500: #fbce00;
  --cpd-color-yellow-600: #f1bd00;
  --cpd-color-yellow-700: #dea200;
  --cpd-color-yellow-800: #be7a00;
  --cpd-color-yellow-900: #9f5b00;
  --cpd-color-yellow-1000: #8f4d00;
  --cpd-color-yellow-1100: #803f00;
  --cpd-color-yellow-1200: #692e00;
  --cpd-color-yellow-1300: #541a00;
  --cpd-color-yellow-1400: #410600;
  --cpd-color-lime-100: #f8fdf6;
  --cpd-color-lime-200: #f1fcee;
  --cpd-color-lime-300: #e0f8d9;
  --cpd-color-lime-400: #c8f1ba;
  --cpd-color-lime-500: #99e57e;
  --cpd-color-lime-600: #76db4c;
  --cpd-color-lime-700: #54c424;
  --cpd-color-lime-800: #359d18;
  --cpd-color-lime-900: #197d0c;
  --cpd-color-lime-1000: #006e00;
  --cpd-color-lime-1100: #005f00;
  --cpd-color-lime-1200: #004b00;
  --cpd-color-lime-1300: #003600;
  --cpd-color-lime-1400: #002400;
  --cpd-color-green-100: #f8fdfb;
  --cpd-color-green-200: #f1fbf6;
  --cpd-color-green-300: #e3f7ed;
  --cpd-color-green-400: #c6eedb;
  --cpd-color-green-500: #98e1c1;
  --cpd-color-green-600: #71d7ae;
  --cpd-color-green-700: #0bc491;
  --cpd-color-green-800: #009b78;
  --cpd-color-green-900: #007a61;
  --cpd-color-green-1000: #006b52;
  --cpd-color-green-1100: #005c45;
  --cpd-color-green-1200: #004933;
  --cpd-color-green-1300: #003420;
  --cpd-color-green-1400: #002311;
  --cpd-color-cyan-100: #f8fdfd;
  --cpd-color-cyan-200: #f1fafb;
  --cpd-color-cyan-300: #e3f5f8;
  --cpd-color-cyan-400: #c7ecf0;
  --cpd-color-cyan-500: #9bdde5;
  --cpd-color-cyan-600: #76d1dd;
  --cpd-color-cyan-700: #15becf;
  --cpd-color-cyan-800: #0094c0;
  --cpd-color-cyan-900: #0072ac;
  --cpd-color-cyan-1000: #00629c;
  --cpd-color-cyan-1100: #00548c;
  --cpd-color-cyan-1200: #004077;
  --cpd-color-cyan-1300: #002b61;
  --cpd-color-cyan-1400: #00194f;
  --cpd-color-blue-100: #f9fcff;
  --cpd-color-blue-200: #f4f8ff;
  --cpd-color-blue-300: #e9f2ff;
  --cpd-color-blue-400: #d8e7fe;
  --cpd-color-blue-500: #bad5fc;
  --cpd-color-blue-600: #a3c6fa;
  --cpd-color-blue-700: #7eaff6;
  --cpd-color-blue-800: #4088ee;
  --cpd-color-blue-900: #0467dd;
  --cpd-color-blue-1000: #0558c7;
  --cpd-color-blue-1100: #064ab1;
  --cpd-color-blue-1200: #043894;
  --cpd-color-blue-1300: #012478;
  --cpd-color-blue-1400: #000e65;
  --cpd-color-purple-100: #fbfbff;
  --cpd-color-purple-200: #f8f7ff;
  --cpd-color-purple-300: #f1efff;
  --cpd-color-purple-400: #e6e2ff;
  --cpd-color-purple-500: #d4cdff;
  --cpd-color-purple-600: #c5bbff;
  --cpd-color-purple-700: #b1a0ff;
  --cpd-color-purple-800: #9271fd;
  --cpd-color-purple-900: #7a47f1;
  --cpd-color-purple-1000: #6b37de;
  --cpd-color-purple-1100: #5d26cd;
  --cpd-color-purple-1200: #4c05b5;
  --cpd-color-purple-1300: #33008d;
  --cpd-color-purple-1400: #200066;
  --cpd-color-fuchsia-100: #fefafe;
  --cpd-color-fuchsia-200: #fcf5fd;
  --cpd-color-fuchsia-300: #faeefb;
  --cpd-color-fuchsia-400: #f6dff7;
  --cpd-color-fuchsia-500: #edc6f0;
  --cpd-color-fuchsia-600: #e7b2ea;
  --cpd-color-fuchsia-700: #db93e1;
  --cpd-color-fuchsia-800: #c85ed1;
  --cpd-color-fuchsia-900: #ad33bd;
  --cpd-color-fuchsia-1000: #972aaa;
  --cpd-color-fuchsia-1100: #822198;
  --cpd-color-fuchsia-1200: #671481;
  --cpd-color-fuchsia-1300: #4e0068;
  --cpd-color-fuchsia-1400: #34004c;
  --cpd-color-pink-100: #fffafb;
  --cpd-color-pink-200: #fff5f7;
  --cpd-color-pink-300: #ffecf0;
  --cpd-color-pink-400: #ffdee5;
  --cpd-color-pink-500: #ffc2cf;
  --cpd-color-pink-600: #ffadc0;
  --cpd-color-pink-700: #ff88a6;
  --cpd-color-pink-800: #f7407d;
  --cpd-color-pink-900: #d20c65;
  --cpd-color-pink-1000: #b80a5b;
  --cpd-color-pink-1100: #9f0850;
  --cpd-color-pink-1200: #7e0642;
  --cpd-color-pink-1300: #5f002b;
  --cpd-color-pink-1400: #430017;
  --cpd-color-alpha-gray-100: hsla(210, 48%, 41%, 0.02);
  --cpd-color-alpha-gray-200: hsla(200, 41%, 36%, 0.04);
  --cpd-color-alpha-gray-300: hsla(216, 89%, 18%, 0.06);
  --cpd-color-alpha-gray-400: hsla(213, 90%, 20%, 0.12);
  --cpd-color-alpha-gray-500: hsla(212, 87%, 15%, 0.2);
  --cpd-color-alpha-gray-600: hsla(212, 97%, 12%, 0.26);
  --cpd-color-alpha-gray-700: hsla(215, 96%, 10%, 0.35);
  --cpd-color-alpha-gray-800: hsla(213, 87%, 9%, 0.5);
  --cpd-color-alpha-gray-900: hsla(213, 83%, 7%, 0.61);
  --cpd-color-alpha-gray-1000: hsla(218, 79%, 6%, 0.66);
  --cpd-color-alpha-gray-1100: hsla(215, 74%, 5%, 0.71);
  --cpd-color-alpha-gray-1200: hsla(213, 73%, 3%, 0.77);
  --cpd-color-alpha-gray-1300: hsla(225, 57%, 3%, 0.84);
  --cpd-color-alpha-gray-1400: hsla(223, 64%, 2%, 0.9);
  --cpd-color-alpha-red-100: hsla(10, 100%, 61%, 0.03);
  --cpd-color-alpha-red-200: hsla(7, 100%, 56%, 0.04);
  --cpd-color-alpha-red-300: hsla(9, 100%, 54%, 0.08);
  --cpd-color-alpha-red-400: hsla(8, 100%, 52%, 0.15);
  --cpd-color-alpha-red-500: hsla(8, 100%, 51%, 0.27);
  --cpd-color-alpha-red-600: hsla(7, 100%, 51%, 0.36);
  --cpd-color-alpha-red-700: hsla(5, 100%, 51%, 0.5);
  --cpd-color-alpha-red-800: hsla(0, 100%, 51%, 0.77);
  --cpd-color-alpha-red-900: hsla(355, 98%, 41%, 0.91);
  --cpd-color-alpha-red-1000: hsla(353, 98%, 37%, 0.95);
  --cpd-color-alpha-red-1100: hsla(350, 99%, 32%, 0.99);
  --cpd-color-alpha-red-1200: hsl(357, 100%, 26%, 1);
  --cpd-color-alpha-red-1300: hsl(0, 100%, 19%, 1);
  --cpd-color-alpha-red-1400: hsl(0, 100%, 14%, 1);
  --cpd-color-alpha-orange-100: hsla(22, 100%, 61%, 0.04);
  --cpd-color-alpha-orange-200: hsla(26, 100%, 55%, 0.07);
  --cpd-color-alpha-orange-300: hsla(24, 100%, 52%, 0.11);
  --cpd-color-alpha-orange-400: hsla(25, 100%, 51%, 0.22);
  --cpd-color-alpha-orange-500: hsla(25, 100%, 50%, 0.37);
  --cpd-color-alpha-orange-600: hsla(26, 98%, 50%, 0.52);
  --cpd-color-alpha-orange-700: hsla(27, 100%, 48%, 0.75);
  --cpd-color-alpha-orange-800: hsl(28, 100%, 43%, 1);
  --cpd-color-alpha-orange-900: hsl(22, 100%, 37%, 1);
  --cpd-color-alpha-orange-1000: hsl(18, 100%, 34%, 1);
  --cpd-color-alpha-orange-1100: hsl(13, 100%, 30%, 1);
  --cpd-color-alpha-orange-1200: hsl(0, 100%, 26%, 1);
  --cpd-color-alpha-orange-1300: hsl(0, 100%, 19%, 1);
  --cpd-color-alpha-orange-1400: hsl(0, 100%, 14%, 1);
  --cpd-color-alpha-yellow-100: hsla(48, 100%, 51%, 0.06);
  --cpd-color-alpha-yellow-200: hsla(46, 100%, 53%, 0.13);
  --cpd-color-alpha-yellow-300: hsla(47, 100%, 51%, 0.25);
  --cpd-color-alpha-yellow-400: hsla(47, 100%, 51%, 0.49);
  --cpd-color-alpha-yellow-500: hsl(49, 100%, 49%, 1);
  --cpd-color-alpha-yellow-600: hsl(47, 100%, 47%, 1);
  --cpd-color-alpha-yellow-700: hsl(44, 100%, 44%, 1);
  --cpd-color-alpha-yellow-800: hsl(39, 100%, 37%, 1);
  --cpd-color-alpha-yellow-900: hsl(34, 100%, 31%, 1);
  --cpd-color-alpha-yellow-1000: hsl(32, 100%, 28%, 1);
  --cpd-color-alpha-yellow-1100: hsl(30, 100%, 25%, 1);
  --cpd-color-alpha-yellow-1200: hsl(26, 100%, 21%, 1);
  --cpd-color-alpha-yellow-1300: hsl(19, 100%, 17%, 1);
  --cpd-color-alpha-yellow-1400: hsl(6, 100%, 13%, 1);
  --cpd-color-alpha-lime-100: hsla(103, 75%, 46%, 0.04);
  --cpd-color-alpha-lime-200: hsla(107, 89%, 44%, 0.07);
  --cpd-color-alpha-lime-300: hsla(107, 98%, 41%, 0.15);
  --cpd-color-alpha-lime-400: hsla(105, 92%, 42%, 0.28);
  --cpd-color-alpha-lime-500: hsla(104, 98%, 40%, 0.51);
  --cpd-color-alpha-lime-600: hsla(102, 97%, 41%, 0.71);
  --cpd-color-alpha-lime-700: hsla(102, 100%, 37%, 0.86);
  --cpd-color-alpha-lime-800: hsla(107, 99%, 29%, 0.91);
  --cpd-color-alpha-lime-900: hsla(113, 97%, 24%, 0.96);
  --cpd-color-alpha-lime-1000: hsl(120, 100%, 22%, 1);
  --cpd-color-alpha-lime-1100: hsl(120, 100%, 19%, 1);
  --cpd-color-alpha-lime-1200: hsl(120, 100%, 15%, 1);
  --cpd-color-alpha-lime-1300: hsl(120, 100%, 11%, 1);
  --cpd-color-alpha-lime-1400: hsl(120, 100%, 7%, 1);
  --cpd-color-alpha-green-100: hsla(156, 79%, 41%, 0.03);
  --cpd-color-alpha-green-200: hsla(150, 79%, 41%, 0.06);
  --cpd-color-alpha-green-300: hsla(150, 100%, 36%, 0.11);
  --cpd-color-alpha-green-400: hsla(151, 93%, 37%, 0.23);
  --cpd-color-alpha-green-500: hsla(154, 96%, 37%, 0.41);
  --cpd-color-alpha-green-600: hsla(156, 99%, 36%, 0.56);
  --cpd-color-alpha-green-700: hsla(163, 99%, 38%, 0.96);
  --cpd-color-alpha-green-800: hsl(166, 100%, 30%, 1);
  --cpd-color-alpha-green-900: hsl(168, 100%, 24%, 1);
  --cpd-color-alpha-green-1000: hsl(166, 100%, 21%, 1);
  --cpd-color-alpha-green-1100: hsl(165, 100%, 18%, 1);
  --cpd-color-alpha-green-1200: hsl(162, 100%, 14%, 1);
  --cpd-color-alpha-green-1300: hsl(157, 100%, 10%, 1);
  --cpd-color-alpha-green-1400: hsl(149, 100%, 7%, 1);
  --cpd-color-alpha-cyan-100: hsla(180, 79%, 41%, 0.03);
  --cpd-color-alpha-cyan-200: hsla(186, 79%, 41%, 0.06);
  --cpd-color-alpha-cyan-300: hsla(188, 100%, 38%, 0.11);
  --cpd-color-alpha-cyan-400: hsla(186, 100%, 37%, 0.22);
  --cpd-color-alpha-cyan-500: hsla(186, 95%, 38%, 0.4);
  --cpd-color-alpha-cyan-600: hsla(187, 99%, 38%, 0.54);
  --cpd-color-alpha-cyan-700: hsla(186, 99%, 40%, 0.92);
  --cpd-color-alpha-cyan-800: hsl(194, 100%, 38%, 1);
  --cpd-color-alpha-cyan-900: hsl(200, 100%, 34%, 1);
  --cpd-color-alpha-cyan-1000: hsl(202, 100%, 31%, 1);
  --cpd-color-alpha-cyan-1100: hsl(204, 100%, 28%, 1);
  --cpd-color-alpha-cyan-1200: hsl(208, 100%, 23%, 1);
  --cpd-color-alpha-cyan-1300: hsl(213, 100%, 19%, 1);
  --cpd-color-alpha-cyan-1400: hsl(221, 100%, 16%, 1);
  --cpd-color-alpha-blue-100: hsla(210, 100%, 61%, 0.03);
  --cpd-color-alpha-blue-200: hsla(218, 100%, 57%, 0.05);
  --cpd-color-alpha-blue-300: hsla(215, 100%, 52%, 0.09);
  --cpd-color-alpha-blue-400: hsla(216, 95%, 51%, 0.16);
  --cpd-color-alpha-blue-500: hsla(215, 93%, 50%, 0.28);
  --cpd-color-alpha-blue-600: hsla(216, 95%, 48%, 0.37);
  --cpd-color-alpha-blue-700: hsla(215, 98%, 47%, 0.51);
  --cpd-color-alpha-blue-800: hsla(215, 100%, 46%, 0.75);
  --cpd-color-alpha-blue-900: hsla(213, 99%, 44%, 0.99);
  --cpd-color-alpha-blue-1000: hsla(214, 98%, 39%, 0.99);
  --cpd-color-alpha-blue-1100: hsla(216, 99%, 35%, 0.98);
  --cpd-color-alpha-blue-1200: hsla(218, 99%, 29%, 0.99);
  --cpd-color-alpha-blue-1300: hsl(222, 98%, 24%, 1);
  --cpd-color-alpha-blue-1400: hsl(232, 100%, 20%, 1);
  --cpd-color-alpha-purple-100: hsla(240, 100%, 61%, 0.02);
  --cpd-color-alpha-purple-200: hsla(248, 100%, 61%, 0.04);
  --cpd-color-alpha-purple-300: hsla(248, 100%, 55%, 0.07);
  --cpd-color-alpha-purple-400: hsla(248, 100%, 53%, 0.12);
  --cpd-color-alpha-purple-500: hsla(248, 100%, 51%, 0.2);
  --cpd-color-alpha-purple-600: hsla(249, 100%, 51%, 0.27);
  --cpd-color-alpha-purple-700: hsla(251, 100%, 51%, 0.38);
  --cpd-color-alpha-purple-800: hsla(254, 99%, 49%, 0.56);
  --cpd-color-alpha-purple-900: hsla(258, 98%, 47%, 0.73);
  --cpd-color-alpha-purple-1000: hsla(259, 98%, 42%, 0.79);
  --cpd-color-alpha-purple-1100: hsla(260, 97%, 39%, 0.86);
  --cpd-color-alpha-purple-1200: hsla(264, 98%, 36%, 0.99);
  --cpd-color-alpha-purple-1300: hsl(262, 100%, 28%, 1);
  --cpd-color-alpha-purple-1400: hsl(259, 100%, 20%, 1);
  --cpd-color-alpha-fuchsia-100: hsla(300, 95%, 41%, 0.02);
  --cpd-color-alpha-fuchsia-200: hsla(293, 95%, 41%, 0.04);
  --cpd-color-alpha-fuchsia-300: hsla(295, 89%, 41%, 0.07);
  --cpd-color-alpha-fuchsia-400: hsla(298, 91%, 40%, 0.13);
  --cpd-color-alpha-fuchsia-500: hsla(296, 93%, 39%, 0.23);
  --cpd-color-alpha-fuchsia-600: hsla(297, 93%, 38%, 0.31);
  --cpd-color-alpha-fuchsia-700: hsla(295, 96%, 37%, 0.43);
  --cpd-color-alpha-fuchsia-800: hsla(295, 97%, 37%, 0.64);
  --cpd-color-alpha-fuchsia-900: hsla(293, 100%, 34%, 0.8);
  --cpd-color-alpha-fuchsia-1000: hsla(291, 99%, 30%, 0.84);
  --cpd-color-alpha-fuchsia-1100: hsla(289, 96%, 28%, 0.88);
  --cpd-color-alpha-fuchsia-1200: hsla(286, 97%, 24%, 0.93);
  --cpd-color-alpha-fuchsia-1300: hsl(285, 100%, 20%, 1);
  --cpd-color-alpha-fuchsia-1400: hsl(281, 100%, 15%, 1);
  --cpd-color-alpha-pink-100: hsla(348, 100%, 51%, 0.02);
  --cpd-color-alpha-pink-200: hsla(348, 100%, 51%, 0.04);
  --cpd-color-alpha-pink-300: hsla(347, 100%, 54%, 0.08);
  --cpd-color-alpha-pink-400: hsla(347, 100%, 50%, 0.13);
  --cpd-color-alpha-pink-500: hsla(347, 100%, 50%, 0.24);
  --cpd-color-alpha-pink-600: hsla(346, 100%, 51%, 0.33);
  --cpd-color-alpha-pink-700: hsla(345, 100%, 50%, 0.47);
  --cpd-color-alpha-pink-800: hsla(340, 100%, 48%, 0.75);
  --cpd-color-alpha-pink-900: hsla(333, 98%, 41%, 0.96);
  --cpd-color-alpha-pink-1000: hsla(332, 98%, 36%, 0.97);
  --cpd-color-alpha-pink-1100: hsla(331, 100%, 31%, 0.97);
  --cpd-color-alpha-pink-1200: hsla(330, 98%, 24%, 0.98);
  --cpd-color-alpha-pink-1300: hsl(333, 100%, 19%, 1);
  --cpd-color-alpha-pink-1400: hsl(339, 100%, 13%, 1);
  --cpd-color-transparent: rgba(0,0,0,0);
}
}
}
}
@layer compound{
@media screen{
@layer cpd-semantic{
.cpd-theme-light.cpd-theme-light {
  --cpd-color-bg-canvas-default-level-1: var(--cpd-color-theme-bg);
  --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-gray-300);
  --cpd-color-bg-badge-accent: var(--cpd-color-alpha-green-400);
  --cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-400);
  --cpd-color-bg-badge-default: var(--cpd-color-alpha-gray-400);
  --cpd-color-gradient-action-stop1: var(--cpd-color-green-500);
  --cpd-color-gradient-action-stop2: var(--cpd-color-green-700);
  --cpd-color-gradient-action-stop3: var(--cpd-color-green-900);
  --cpd-color-gradient-action-stop4: var(--cpd-color-green-1100);
  --cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
}
}
}
}
@layer compound{
@media screen and (prefers-color-scheme: light){
@layer cpd-semantic{
:root {
  --cpd-color-bg-canvas-default-level-1: var(--cpd-color-theme-bg);
  --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-gray-300);
  --cpd-color-bg-badge-accent: var(--cpd-color-alpha-green-400);
  --cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-400);
  --cpd-color-bg-badge-default: var(--cpd-color-alpha-gray-400);
  --cpd-color-gradient-action-stop1: var(--cpd-color-green-500);
  --cpd-color-gradient-action-stop2: var(--cpd-color-green-700);
  --cpd-color-gradient-action-stop3: var(--cpd-color-green-900);
  --cpd-color-gradient-action-stop4: var(--cpd-color-green-1100);
  --cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
}
}
}
}
@layer compound{
@media screen{
@layer cpd-base{
.cpd-theme-light-hc.cpd-theme-light-hc {
  --cpd-color-theme-bg: #ffffff;
  --cpd-color-gray-100: #f7f9fa;
  --cpd-color-gray-200: #f0f2f5;
  --cpd-color-gray-300: #e1e6ec;
  --cpd-color-gray-400: #d7dce3;
  --cpd-color-gray-500: #bdc4cc;
  --cpd-color-gray-600: #a6adb7;
  --cpd-color-gray-700: #878f9b;
  --cpd-color-gray-800: #6c737e;
  --cpd-color-gray-900: #474a51;
  --cpd-color-gray-1000: #3f4248;
  --cpd-color-gray-1100: #35383d;
  --cpd-color-gray-1200: #2d3034;
  --cpd-color-gray-1300: #1f2126;
  --cpd-color-gray-1400: #1a1c21;
  --cpd-color-red-100: #fff7f6;
  --cpd-color-red-200: #ffefec;
  --cpd-color-red-300: #ffdfda;
  --cpd-color-red-400: #ffd1ca;
  --cpd-color-red-500: #ffafa5;
  --cpd-color-red-600: #ff8c81;
  --cpd-color-red-700: #ff4e49;
  --cpd-color-red-800: #e11e2a;
  --cpd-color-red-900: #99001a;
  --cpd-color-red-1000: #8b000c;
  --cpd-color-red-1100: #770000;
  --cpd-color-red-1200: #670000;
  --cpd-color-red-1300: #4c0000;
  --cpd-color-red-1400: #420000;
  --cpd-color-orange-100: #fff6ef;
  --cpd-color-orange-200: #ffefe4;
  --cpd-color-orange-300: #ffdfc8;
  --cpd-color-orange-400: #ffd4b5;
  --cpd-color-orange-500: #fdb37c;
  --cpd-color-orange-600: #f89440;
  --cpd-color-orange-700: #e26e00;
  --cpd-color-orange-800: #c44d00;
  --cpd-color-orange-900: #931700;
  --cpd-color-orange-1000: #890800;
  --cpd-color-orange-1100: #770000;
  --cpd-color-orange-1200: #670000;
  --cpd-color-orange-1300: #4c0000;
  --cpd-color-orange-1400: #420000;
  --cpd-color-yellow-100: #fff8e0;
  --cpd-color-yellow-200: #fff2c1;
  --cpd-color-yellow-300: #ffe484;
  --cpd-color-yellow-400: #ffda49;
  --cpd-color-yellow-500: #f1bd00;
  --cpd-color-yellow-600: #dea200;
  --cpd-color-yellow-700: #c38100;
  --cpd-color-yellow-800: #a76300;
  --cpd-color-yellow-900: #773800;
  --cpd-color-yellow-1000: #6e3100;
  --cpd-color-yellow-1100: #612600;
  --cpd-color-yellow-1200: #571d00;
  --cpd-color-yellow-1300: #450c00;
  --cpd-color-yellow-1400: #3f0500;
  --cpd-color-lime-100: #f1fcee;
  --cpd-color-lime-200: #e0f8d9;
  --cpd-color-lime-300: #c8f1ba;
  --cpd-color-lime-400: #afeb9b;
  --cpd-color-lime-500: #76db4c;
  --cpd-color-lime-600: #54c424;
  --cpd-color-lime-700: #3aa31a;
  --cpd-color-lime-800: #1f850f;
  --cpd-color-lime-900: #005700;
  --cpd-color-lime-1000: #004f00;
  --cpd-color-lime-1100: #004200;
  --cpd-color-lime-1200: #003900;
  --cpd-color-lime-1300: #002900;
  --cpd-color-lime-1400: #002200;
  --cpd-color-green-100: #f1fbf6;
  --cpd-color-green-200: #e3f7ed;
  --cpd-color-green-300: #c6eedb;
  --cpd-color-green-400: #afe8ce;
  --cpd-color-green-500: #71d7ae;
  --cpd-color-green-600: #0bc491;
  --cpd-color-green-700: #00a27c;
  --cpd-color-green-800: #008268;
  --cpd-color-green-900: #00553d;
  --cpd-color-green-1000: #004d36;
  --cpd-color-green-1100: #00402b;
  --cpd-color-green-1200: #003723;
  --cpd-color-green-1300: #002715;
  --cpd-color-green-1400: #00210f;
  --cpd-color-cyan-100: #f1fafb;
  --cpd-color-cyan-200: #e3f5f8;
  --cpd-color-cyan-300: #c7ecf0;
  --cpd-color-cyan-400: #b1e4eb;
  --cpd-color-cyan-500: #76d1dd;
  --cpd-color-cyan-600: #15becf;
  --cpd-color-cyan-700: #009ac3;
  --cpd-color-cyan-800: #007ab3;
  --cpd-color-cyan-900: #004c84;
  --cpd-color-cyan-1000: #00447b;
  --cpd-color-cyan-1100: #00376e;
  --cpd-color-cyan-1200: #002e64;
  --cpd-color-cyan-1300: #001e53;
  --cpd-color-cyan-1400: #00174d;
  --cpd-color-blue-100: #f4f8ff;
  --cpd-color-blue-200: #e9f2ff;
  --cpd-color-blue-300: #d8e7fe;
  --cpd-color-blue-400: #c8ddfd;
  --cpd-color-blue-500: #a3c6fa;
  --cpd-color-blue-600: #7eaff6;
  --cpd-color-blue-700: #4a8ef0;
  --cpd-color-blue-800: #046ee8;
  --cpd-color-blue-900: #0543a7;
  --cpd-color-blue-1000: #053b9a;
  --cpd-color-blue-1100: #043088;
  --cpd-color-blue-1200: #03277b;
  --cpd-color-blue-1300: #001569;
  --cpd-color-blue-1400: #000c63;
  --cpd-color-purple-100: #f8f7ff;
  --cpd-color-purple-200: #f1efff;
  --cpd-color-purple-300: #e6e2ff;
  --cpd-color-purple-400: #ddd8ff;
  --cpd-color-purple-500: #c5bbff;
  --cpd-color-purple-600: #b1a0ff;
  --cpd-color-purple-700: #9778fe;
  --cpd-color-purple-800: #824ef9;
  --cpd-color-purple-900: #571cc4;
  --cpd-color-purple-1000: #4f0dba;
  --cpd-color-purple-1100: #4200a6;
  --cpd-color-purple-1200: #360094;
  --cpd-color-purple-1300: #240070;
  --cpd-color-purple-1400: #1f0062;
  --cpd-color-fuchsia-100: #fcf5fd;
  --cpd-color-fuchsia-200: #faeefb;
  --cpd-color-fuchsia-300: #f6dff7;
  --cpd-color-fuchsia-400: #f1d2f3;
  --cpd-color-fuchsia-500: #e7b2ea;
  --cpd-color-fuchsia-600: #db93e1;
  --cpd-color-fuchsia-700: #cb68d4;
  --cpd-color-fuchsia-800: #b937c6;
  --cpd-color-fuchsia-900: #781c90;
  --cpd-color-fuchsia-1000: #6c1785;
  --cpd-color-fuchsia-1100: #5c0f76;
  --cpd-color-fuchsia-1200: #52026c;
  --cpd-color-fuchsia-1300: #3b0053;
  --cpd-color-fuchsia-1400: #32004a;
  --cpd-color-pink-100: #fff5f7;
  --cpd-color-pink-200: #ffecf0;
  --cpd-color-pink-300: #ffdee5;
  --cpd-color-pink-400: #ffd0da;
  --cpd-color-pink-500: #ffadc0;
  --cpd-color-pink-600: #ff88a6;
  --cpd-color-pink-700: #f94e84;
  --cpd-color-pink-800: #e00c6a;
  --cpd-color-pink-900: #92084b;
  --cpd-color-pink-1000: #840745;
  --cpd-color-pink-1100: #72003a;
  --cpd-color-pink-1200: #64002f;
  --cpd-color-pink-1300: #4a001c;
  --cpd-color-pink-1400: #410015;
  --cpd-color-alpha-gray-100: hsla(200, 41%, 36%, 0.04);
  --cpd-color-alpha-gray-200: hsla(216, 89%, 18%, 0.06);
  --cpd-color-alpha-gray-300: hsla(213, 90%, 20%, 0.12);
  --cpd-color-alpha-gray-400: hsla(215, 88%, 17%, 0.16);
  --cpd-color-alpha-gray-500: hsla(212, 97%, 12%, 0.26);
  --cpd-color-alpha-gray-600: hsla(215, 96%, 10%, 0.35);
  --cpd-color-alpha-gray-700: hsla(216, 81%, 10%, 0.48);
  --cpd-color-alpha-gray-800: hsla(217, 89%, 7%, 0.58);
  --cpd-color-alpha-gray-900: hsla(223, 70%, 4%, 0.73);
  --cpd-color-alpha-gray-1000: hsla(220, 75%, 3%, 0.76);
  --cpd-color-alpha-gray-1100: hsla(222, 63%, 3%, 0.8);
  --cpd-color-alpha-gray-1200: hsla(210, 67%, 2%, 0.83);
  --cpd-color-alpha-gray-1300: hsla(218, 100%, 2%, 0.88);
  --cpd-color-alpha-gray-1400: hsla(223, 78%, 2%, 0.9);
  --cpd-color-alpha-red-100: hsla(7, 100%, 56%, 0.04);
  --cpd-color-alpha-red-200: hsla(9, 100%, 54%, 0.08);
  --cpd-color-alpha-red-300: hsla(8, 100%, 52%, 0.15);
  --cpd-color-alpha-red-400: hsla(8, 100%, 51%, 0.21);
  --cpd-color-alpha-red-500: hsla(7, 100%, 51%, 0.36);
  --cpd-color-alpha-red-600: hsla(5, 100%, 51%, 0.5);
  --cpd-color-alpha-red-700: hsla(2, 100%, 50%, 0.72);
  --cpd-color-alpha-red-800: hsla(356, 98%, 44%, 0.89);
  --cpd-color-alpha-red-900: hsl(350, 100%, 30%, 1);
  --cpd-color-alpha-red-1000: hsl(355, 100%, 27%, 1);
  --cpd-color-alpha-red-1100: hsl(0, 100%, 23%, 1);
  --cpd-color-alpha-red-1200: hsl(0, 100%, 20%, 1);
  --cpd-color-alpha-red-1300: hsl(0, 100%, 15%, 1);
  --cpd-color-alpha-red-1400: hsl(0, 100%, 13%, 1);
  --cpd-color-alpha-orange-100: hsla(26, 100%, 55%, 0.07);
  --cpd-color-alpha-orange-200: hsla(24, 100%, 52%, 0.11);
  --cpd-color-alpha-orange-300: hsla(25, 100%, 51%, 0.22);
  --cpd-color-alpha-orange-400: hsla(25, 100%, 52%, 0.3);
  --cpd-color-alpha-orange-500: hsla(26, 98%, 50%, 0.52);
  --cpd-color-alpha-orange-600: hsla(27, 100%, 48%, 0.75);
  --cpd-color-alpha-orange-700: hsl(29, 100%, 44%, 1);
  --cpd-color-alpha-orange-800: hsl(24, 100%, 38%, 1);
  --cpd-color-alpha-orange-900: hsl(9, 100%, 29%, 1);
  --cpd-color-alpha-orange-1000: hsl(4, 100%, 27%, 1);
  --cpd-color-alpha-orange-1100: hsl(0, 100%, 23%, 1);
  --cpd-color-alpha-orange-1200: hsl(0, 100%, 20%, 1);
  --cpd-color-alpha-orange-1300: hsl(0, 100%, 15%, 1);
  --cpd-color-alpha-orange-1400: hsl(0, 100%, 13%, 1);
  --cpd-color-alpha-yellow-100: hsla(46, 100%, 53%, 0.13);
  --cpd-color-alpha-yellow-200: hsla(47, 100%, 51%, 0.25);
  --cpd-color-alpha-yellow-300: hsla(47, 100%, 51%, 0.49);
  --cpd-color-alpha-yellow-400: hsla(48, 100%, 50%, 0.72);
  --cpd-color-alpha-yellow-500: hsl(47, 100%, 47%, 1);
  --cpd-color-alpha-yellow-600: hsl(44, 100%, 44%, 1);
  --cpd-color-alpha-yellow-700: hsl(40, 100%, 38%, 1);
  --cpd-color-alpha-yellow-800: hsl(36, 100%, 33%, 1);
  --cpd-color-alpha-yellow-900: hsl(28, 100%, 23%, 1);
  --cpd-color-alpha-yellow-1000: hsl(27, 100%, 22%, 1);
  --cpd-color-alpha-yellow-1100: hsl(24, 100%, 19%, 1);
  --cpd-color-alpha-yellow-1200: hsl(20, 100%, 17%, 1);
  --cpd-color-alpha-yellow-1300: hsl(10, 100%, 14%, 1);
  --cpd-color-alpha-yellow-1400: hsl(5, 100%, 12%, 1);
  --cpd-color-alpha-lime-100: hsla(107, 89%, 44%, 0.07);
  --cpd-color-alpha-lime-200: hsla(107, 98%, 41%, 0.15);
  --cpd-color-alpha-lime-300: hsla(105, 92%, 42%, 0.28);
  --cpd-color-alpha-lime-400: hsla(105, 95%, 41%, 0.4);
  --cpd-color-alpha-lime-500: hsla(102, 97%, 41%, 0.71);
  --cpd-color-alpha-lime-600: hsla(102, 100%, 37%, 0.86);
  --cpd-color-alpha-lime-700: hsla(106, 99%, 30%, 0.9);
  --cpd-color-alpha-lime-800: hsla(112, 97%, 25%, 0.95);
  --cpd-color-alpha-lime-900: hsl(120, 100%, 17%, 1);
  --cpd-color-alpha-lime-1000: hsl(120, 100%, 16%, 1);
  --cpd-color-alpha-lime-1100: hsl(120, 100%, 13%, 1);
  --cpd-color-alpha-lime-1200: hsl(120, 100%, 11%, 1);
  --cpd-color-alpha-lime-1300: hsl(120, 100%, 8%, 1);
  --cpd-color-alpha-lime-1400: hsl(120, 100%, 7%, 1);
  --cpd-color-alpha-green-100: hsla(150, 79%, 41%, 0.06);
  --cpd-color-alpha-green-200: hsla(150, 100%, 36%, 0.11);
  --cpd-color-alpha-green-300: hsla(151, 93%, 37%, 0.23);
  --cpd-color-alpha-green-400: hsla(153, 95%, 37%, 0.32);
  --cpd-color-alpha-green-500: hsla(156, 99%, 36%, 0.56);
  --cpd-color-alpha-green-600: hsla(163, 99%, 38%, 0.96);
  --cpd-color-alpha-green-700: hsl(166, 100%, 32%, 1);
  --cpd-color-alpha-green-800: hsl(168, 100%, 26%, 1);
  --cpd-color-alpha-green-900: hsl(163, 100%, 17%, 1);
  --cpd-color-alpha-green-1000: hsl(162, 100%, 15%, 1);
  --cpd-color-alpha-green-1100: hsl(160, 100%, 13%, 1);
  --cpd-color-alpha-green-1200: hsl(158, 100%, 11%, 1);
  --cpd-color-alpha-green-1300: hsl(152, 100%, 8%, 1);
  --cpd-color-alpha-green-1400: hsl(147, 100%, 7%, 1);
  --cpd-color-alpha-cyan-100: hsla(186, 79%, 41%, 0.06);
  --cpd-color-alpha-cyan-200: hsla(188, 100%, 38%, 0.11);
  --cpd-color-alpha-cyan-300: hsla(186, 100%, 37%, 0.22);
  --cpd-color-alpha-cyan-400: hsla(187, 97%, 38%, 0.31);
  --cpd-color-alpha-cyan-500: hsla(187, 99%, 38%, 0.54);
  --cpd-color-alpha-cyan-600: hsla(186, 99%, 40%, 0.92);
  --cpd-color-alpha-cyan-700: hsl(193, 100%, 38%, 1);
  --cpd-color-alpha-cyan-800: hsl(199, 100%, 35%, 1);
  --cpd-color-alpha-cyan-900: hsl(205, 100%, 26%, 1);
  --cpd-color-alpha-cyan-1000: hsl(207, 100%, 24%, 1);
  --cpd-color-alpha-cyan-1100: hsl(210, 100%, 22%, 1);
  --cpd-color-alpha-cyan-1200: hsl(212, 100%, 20%, 1);
  --cpd-color-alpha-cyan-1300: hsl(218, 100%, 16%, 1);
  --cpd-color-alpha-cyan-1400: hsl(222, 100%, 15%, 1);
  --cpd-color-alpha-blue-100: hsla(218, 100%, 57%, 0.05);
  --cpd-color-alpha-blue-200: hsla(215, 100%, 52%, 0.09);
  --cpd-color-alpha-blue-300: hsla(216, 95%, 51%, 0.16);
  --cpd-color-alpha-blue-400: hsla(216, 96%, 49%, 0.22);
  --cpd-color-alpha-blue-500: hsla(216, 95%, 48%, 0.37);
  --cpd-color-alpha-blue-600: hsla(215, 98%, 47%, 0.51);
  --cpd-color-alpha-blue-700: hsla(215, 100%, 46%, 0.71);
  --cpd-color-alpha-blue-800: hsla(212, 99%, 46%, 0.99);
  --cpd-color-alpha-blue-900: hsla(217, 98%, 33%, 0.99);
  --cpd-color-alpha-blue-1000: hsla(218, 97%, 30%, 0.99);
  --cpd-color-alpha-blue-1100: hsla(220, 99%, 27%, 0.99);
  --cpd-color-alpha-blue-1200: hsla(222, 100%, 24%, 0.99);
  --cpd-color-alpha-blue-1300: hsl(228, 100%, 21%, 1);
  --cpd-color-alpha-blue-1400: hsl(233, 100%, 19%, 1);
  --cpd-color-alpha-purple-100: hsla(248, 100%, 61%, 0.04);
  --cpd-color-alpha-purple-200: hsla(248, 100%, 55%, 0.07);
  --cpd-color-alpha-purple-300: hsla(248, 100%, 53%, 0.12);
  --cpd-color-alpha-purple-400: hsla(248, 100%, 52%, 0.16);
  --cpd-color-alpha-purple-500: hsla(249, 100%, 51%, 0.27);
  --cpd-color-alpha-purple-600: hsla(251, 100%, 51%, 0.38);
  --cpd-color-alpha-purple-700: hsla(254, 100%, 50%, 0.53);
  --cpd-color-alpha-purple-800: hsla(258, 98%, 49%, 0.7);
  --cpd-color-alpha-purple-900: hsla(261, 97%, 38%, 0.9);
  --cpd-color-alpha-purple-1000: hsla(263, 100%, 36%, 0.95);
  --cpd-color-alpha-purple-1100: hsl(264, 100%, 33%, 1);
  --cpd-color-alpha-purple-1200: hsl(262, 100%, 29%, 1);
  --cpd-color-alpha-purple-1300: hsl(259, 100%, 22%, 1);
  --cpd-color-alpha-purple-1400: hsl(259, 100%, 19%, 1);
  --cpd-color-alpha-fuchsia-100: hsla(293, 95%, 41%, 0.04);
  --cpd-color-alpha-fuchsia-200: hsla(295, 89%, 41%, 0.07);
  --cpd-color-alpha-fuchsia-300: hsla(298, 91%, 40%, 0.13);
  --cpd-color-alpha-fuchsia-400: hsla(296, 95%, 38%, 0.18);
  --cpd-color-alpha-fuchsia-500: hsla(297, 93%, 38%, 0.31);
  --cpd-color-alpha-fuchsia-600: hsla(295, 96%, 37%, 0.43);
  --cpd-color-alpha-fuchsia-700: hsla(295, 97%, 37%, 0.6);
  --cpd-color-alpha-fuchsia-800: hsla(294, 98%, 36%, 0.79);
  --cpd-color-alpha-fuchsia-900: hsla(287, 96%, 27%, 0.9);
  --cpd-color-alpha-fuchsia-1000: hsla(286, 100%, 24%, 0.91);
  --cpd-color-alpha-fuchsia-1100: hsla(285, 97%, 22%, 0.95);
  --cpd-color-alpha-fuchsia-1200: hsl(285, 96%, 22%, 1);
  --cpd-color-alpha-fuchsia-1300: hsl(283, 100%, 16%, 1);
  --cpd-color-alpha-fuchsia-1400: hsl(281, 100%, 15%, 1);
  --cpd-color-alpha-pink-100: hsla(348, 100%, 51%, 0.04);
  --cpd-color-alpha-pink-200: hsla(347, 100%, 54%, 0.08);
  --cpd-color-alpha-pink-300: hsla(347, 100%, 50%, 0.13);
  --cpd-color-alpha-pink-400: hsla(347, 100%, 52%, 0.19);
  --cpd-color-alpha-pink-500: hsla(346, 100%, 51%, 0.33);
  --cpd-color-alpha-pink-600: hsla(345, 100%, 50%, 0.47);
  --cpd-color-alpha-pink-700: hsla(341, 98%, 49%, 0.7);
  --cpd-color-alpha-pink-800: hsla(333, 98%, 44%, 0.96);
  --cpd-color-alpha-pink-900: hsla(331, 100%, 28%, 0.97);
  --cpd-color-alpha-pink-1000: hsla(330, 97%, 26%, 0.98);
  --cpd-color-alpha-pink-1100: hsl(329, 100%, 22%, 1);
  --cpd-color-alpha-pink-1200: hsl(332, 100%, 20%, 1);
  --cpd-color-alpha-pink-1300: hsl(337, 100%, 15%, 1);
  --cpd-color-alpha-pink-1400: hsl(341, 100%, 13%, 1);
  --cpd-color-transparent: rgba(0,0,0,0);
}
}
}
}
@layer compound{
@media screen and (prefers-color-scheme: light) and (prefers-contrast: more){
@layer cpd-base{
:root {
  --cpd-color-theme-bg: #ffffff;
  --cpd-color-gray-100: #f7f9fa;
  --cpd-color-gray-200: #f0f2f5;
  --cpd-color-gray-300: #e1e6ec;
  --cpd-color-gray-400: #d7dce3;
  --cpd-color-gray-500: #bdc4cc;
  --cpd-color-gray-600: #a6adb7;
  --cpd-color-gray-700: #878f9b;
  --cpd-color-gray-800: #6c737e;
  --cpd-color-gray-900: #474a51;
  --cpd-color-gray-1000: #3f4248;
  --cpd-color-gray-1100: #35383d;
  --cpd-color-gray-1200: #2d3034;
  --cpd-color-gray-1300: #1f2126;
  --cpd-color-gray-1400: #1a1c21;
  --cpd-color-red-100: #fff7f6;
  --cpd-color-red-200: #ffefec;
  --cpd-color-red-300: #ffdfda;
  --cpd-color-red-400: #ffd1ca;
  --cpd-color-red-500: #ffafa5;
  --cpd-color-red-600: #ff8c81;
  --cpd-color-red-700: #ff4e49;
  --cpd-color-red-800: #e11e2a;
  --cpd-color-red-900: #99001a;
  --cpd-color-red-1000: #8b000c;
  --cpd-color-red-1100: #770000;
  --cpd-color-red-1200: #670000;
  --cpd-color-red-1300: #4c0000;
  --cpd-color-red-1400: #420000;
  --cpd-color-orange-100: #fff6ef;
  --cpd-color-orange-200: #ffefe4;
  --cpd-color-orange-300: #ffdfc8;
  --cpd-color-orange-400: #ffd4b5;
  --cpd-color-orange-500: #fdb37c;
  --cpd-color-orange-600: #f89440;
  --cpd-color-orange-700: #e26e00;
  --cpd-color-orange-800: #c44d00;
  --cpd-color-orange-900: #931700;
  --cpd-color-orange-1000: #890800;
  --cpd-color-orange-1100: #770000;
  --cpd-color-orange-1200: #670000;
  --cpd-color-orange-1300: #4c0000;
  --cpd-color-orange-1400: #420000;
  --cpd-color-yellow-100: #fff8e0;
  --cpd-color-yellow-200: #fff2c1;
  --cpd-color-yellow-300: #ffe484;
  --cpd-color-yellow-400: #ffda49;
  --cpd-color-yellow-500: #f1bd00;
  --cpd-color-yellow-600: #dea200;
  --cpd-color-yellow-700: #c38100;
  --cpd-color-yellow-800: #a76300;
  --cpd-color-yellow-900: #773800;
  --cpd-color-yellow-1000: #6e3100;
  --cpd-color-yellow-1100: #612600;
  --cpd-color-yellow-1200: #571d00;
  --cpd-color-yellow-1300: #450c00;
  --cpd-color-yellow-1400: #3f0500;
  --cpd-color-lime-100: #f1fcee;
  --cpd-color-lime-200: #e0f8d9;
  --cpd-color-lime-300: #c8f1ba;
  --cpd-color-lime-400: #afeb9b;
  --cpd-color-lime-500: #76db4c;
  --cpd-color-lime-600: #54c424;
  --cpd-color-lime-700: #3aa31a;
  --cpd-color-lime-800: #1f850f;
  --cpd-color-lime-900: #005700;
  --cpd-color-lime-1000: #004f00;
  --cpd-color-lime-1100: #004200;
  --cpd-color-lime-1200: #003900;
  --cpd-color-lime-1300: #002900;
  --cpd-color-lime-1400: #002200;
  --cpd-color-green-100: #f1fbf6;
  --cpd-color-green-200: #e3f7ed;
  --cpd-color-green-300: #c6eedb;
  --cpd-color-green-400: #afe8ce;
  --cpd-color-green-500: #71d7ae;
  --cpd-color-green-600: #0bc491;
  --cpd-color-green-700: #00a27c;
  --cpd-color-green-800: #008268;
  --cpd-color-green-900: #00553d;
  --cpd-color-green-1000: #004d36;
  --cpd-color-green-1100: #00402b;
  --cpd-color-green-1200: #003723;
  --cpd-color-green-1300: #002715;
  --cpd-color-green-1400: #00210f;
  --cpd-color-cyan-100: #f1fafb;
  --cpd-color-cyan-200: #e3f5f8;
  --cpd-color-cyan-300: #c7ecf0;
  --cpd-color-cyan-400: #b1e4eb;
  --cpd-color-cyan-500: #76d1dd;
  --cpd-color-cyan-600: #15becf;
  --cpd-color-cyan-700: #009ac3;
  --cpd-color-cyan-800: #007ab3;
  --cpd-color-cyan-900: #004c84;
  --cpd-color-cyan-1000: #00447b;
  --cpd-color-cyan-1100: #00376e;
  --cpd-color-cyan-1200: #002e64;
  --cpd-color-cyan-1300: #001e53;
  --cpd-color-cyan-1400: #00174d;
  --cpd-color-blue-100: #f4f8ff;
  --cpd-color-blue-200: #e9f2ff;
  --cpd-color-blue-300: #d8e7fe;
  --cpd-color-blue-400: #c8ddfd;
  --cpd-color-blue-500: #a3c6fa;
  --cpd-color-blue-600: #7eaff6;
  --cpd-color-blue-700: #4a8ef0;
  --cpd-color-blue-800: #046ee8;
  --cpd-color-blue-900: #0543a7;
  --cpd-color-blue-1000: #053b9a;
  --cpd-color-blue-1100: #043088;
  --cpd-color-blue-1200: #03277b;
  --cpd-color-blue-1300: #001569;
  --cpd-color-blue-1400: #000c63;
  --cpd-color-purple-100: #f8f7ff;
  --cpd-color-purple-200: #f1efff;
  --cpd-color-purple-300: #e6e2ff;
  --cpd-color-purple-400: #ddd8ff;
  --cpd-color-purple-500: #c5bbff;
  --cpd-color-purple-600: #b1a0ff;
  --cpd-color-purple-700: #9778fe;
  --cpd-color-purple-800: #824ef9;
  --cpd-color-purple-900: #571cc4;
  --cpd-color-purple-1000: #4f0dba;
  --cpd-color-purple-1100: #4200a6;
  --cpd-color-purple-1200: #360094;
  --cpd-color-purple-1300: #240070;
  --cpd-color-purple-1400: #1f0062;
  --cpd-color-fuchsia-100: #fcf5fd;
  --cpd-color-fuchsia-200: #faeefb;
  --cpd-color-fuchsia-300: #f6dff7;
  --cpd-color-fuchsia-400: #f1d2f3;
  --cpd-color-fuchsia-500: #e7b2ea;
  --cpd-color-fuchsia-600: #db93e1;
  --cpd-color-fuchsia-700: #cb68d4;
  --cpd-color-fuchsia-800: #b937c6;
  --cpd-color-fuchsia-900: #781c90;
  --cpd-color-fuchsia-1000: #6c1785;
  --cpd-color-fuchsia-1100: #5c0f76;
  --cpd-color-fuchsia-1200: #52026c;
  --cpd-color-fuchsia-1300: #3b0053;
  --cpd-color-fuchsia-1400: #32004a;
  --cpd-color-pink-100: #fff5f7;
  --cpd-color-pink-200: #ffecf0;
  --cpd-color-pink-300: #ffdee5;
  --cpd-color-pink-400: #ffd0da;
  --cpd-color-pink-500: #ffadc0;
  --cpd-color-pink-600: #ff88a6;
  --cpd-color-pink-700: #f94e84;
  --cpd-color-pink-800: #e00c6a;
  --cpd-color-pink-900: #92084b;
  --cpd-color-pink-1000: #840745;
  --cpd-color-pink-1100: #72003a;
  --cpd-color-pink-1200: #64002f;
  --cpd-color-pink-1300: #4a001c;
  --cpd-color-pink-1400: #410015;
  --cpd-color-alpha-gray-100: hsla(200, 41%, 36%, 0.04);
  --cpd-color-alpha-gray-200: hsla(216, 89%, 18%, 0.06);
  --cpd-color-alpha-gray-300: hsla(213, 90%, 20%, 0.12);
  --cpd-color-alpha-gray-400: hsla(215, 88%, 17%, 0.16);
  --cpd-color-alpha-gray-500: hsla(212, 97%, 12%, 0.26);
  --cpd-color-alpha-gray-600: hsla(215, 96%, 10%, 0.35);
  --cpd-color-alpha-gray-700: hsla(216, 81%, 10%, 0.48);
  --cpd-color-alpha-gray-800: hsla(217, 89%, 7%, 0.58);
  --cpd-color-alpha-gray-900: hsla(223, 70%, 4%, 0.73);
  --cpd-color-alpha-gray-1000: hsla(220, 75%, 3%, 0.76);
  --cpd-color-alpha-gray-1100: hsla(222, 63%, 3%, 0.8);
  --cpd-color-alpha-gray-1200: hsla(210, 67%, 2%, 0.83);
  --cpd-color-alpha-gray-1300: hsla(218, 100%, 2%, 0.88);
  --cpd-color-alpha-gray-1400: hsla(223, 78%, 2%, 0.9);
  --cpd-color-alpha-red-100: hsla(7, 100%, 56%, 0.04);
  --cpd-color-alpha-red-200: hsla(9, 100%, 54%, 0.08);
  --cpd-color-alpha-red-300: hsla(8, 100%, 52%, 0.15);
  --cpd-color-alpha-red-400: hsla(8, 100%, 51%, 0.21);
  --cpd-color-alpha-red-500: hsla(7, 100%, 51%, 0.36);
  --cpd-color-alpha-red-600: hsla(5, 100%, 51%, 0.5);
  --cpd-color-alpha-red-700: hsla(2, 100%, 50%, 0.72);
  --cpd-color-alpha-red-800: hsla(356, 98%, 44%, 0.89);
  --cpd-color-alpha-red-900: hsl(350, 100%, 30%, 1);
  --cpd-color-alpha-red-1000: hsl(355, 100%, 27%, 1);
  --cpd-color-alpha-red-1100: hsl(0, 100%, 23%, 1);
  --cpd-color-alpha-red-1200: hsl(0, 100%, 20%, 1);
  --cpd-color-alpha-red-1300: hsl(0, 100%, 15%, 1);
  --cpd-color-alpha-red-1400: hsl(0, 100%, 13%, 1);
  --cpd-color-alpha-orange-100: hsla(26, 100%, 55%, 0.07);
  --cpd-color-alpha-orange-200: hsla(24, 100%, 52%, 0.11);
  --cpd-color-alpha-orange-300: hsla(25, 100%, 51%, 0.22);
  --cpd-color-alpha-orange-400: hsla(25, 100%, 52%, 0.3);
  --cpd-color-alpha-orange-500: hsla(26, 98%, 50%, 0.52);
  --cpd-color-alpha-orange-600: hsla(27, 100%, 48%, 0.75);
  --cpd-color-alpha-orange-700: hsl(29, 100%, 44%, 1);
  --cpd-color-alpha-orange-800: hsl(24, 100%, 38%, 1);
  --cpd-color-alpha-orange-900: hsl(9, 100%, 29%, 1);
  --cpd-color-alpha-orange-1000: hsl(4, 100%, 27%, 1);
  --cpd-color-alpha-orange-1100: hsl(0, 100%, 23%, 1);
  --cpd-color-alpha-orange-1200: hsl(0, 100%, 20%, 1);
  --cpd-color-alpha-orange-1300: hsl(0, 100%, 15%, 1);
  --cpd-color-alpha-orange-1400: hsl(0, 100%, 13%, 1);
  --cpd-color-alpha-yellow-100: hsla(46, 100%, 53%, 0.13);
  --cpd-color-alpha-yellow-200: hsla(47, 100%, 51%, 0.25);
  --cpd-color-alpha-yellow-300: hsla(47, 100%, 51%, 0.49);
  --cpd-color-alpha-yellow-400: hsla(48, 100%, 50%, 0.72);
  --cpd-color-alpha-yellow-500: hsl(47, 100%, 47%, 1);
  --cpd-color-alpha-yellow-600: hsl(44, 100%, 44%, 1);
  --cpd-color-alpha-yellow-700: hsl(40, 100%, 38%, 1);
  --cpd-color-alpha-yellow-800: hsl(36, 100%, 33%, 1);
  --cpd-color-alpha-yellow-900: hsl(28, 100%, 23%, 1);
  --cpd-color-alpha-yellow-1000: hsl(27, 100%, 22%, 1);
  --cpd-color-alpha-yellow-1100: hsl(24, 100%, 19%, 1);
  --cpd-color-alpha-yellow-1200: hsl(20, 100%, 17%, 1);
  --cpd-color-alpha-yellow-1300: hsl(10, 100%, 14%, 1);
  --cpd-color-alpha-yellow-1400: hsl(5, 100%, 12%, 1);
  --cpd-color-alpha-lime-100: hsla(107, 89%, 44%, 0.07);
  --cpd-color-alpha-lime-200: hsla(107, 98%, 41%, 0.15);
  --cpd-color-alpha-lime-300: hsla(105, 92%, 42%, 0.28);
  --cpd-color-alpha-lime-400: hsla(105, 95%, 41%, 0.4);
  --cpd-color-alpha-lime-500: hsla(102, 97%, 41%, 0.71);
  --cpd-color-alpha-lime-600: hsla(102, 100%, 37%, 0.86);
  --cpd-color-alpha-lime-700: hsla(106, 99%, 30%, 0.9);
  --cpd-color-alpha-lime-800: hsla(112, 97%, 25%, 0.95);
  --cpd-color-alpha-lime-900: hsl(120, 100%, 17%, 1);
  --cpd-color-alpha-lime-1000: hsl(120, 100%, 16%, 1);
  --cpd-color-alpha-lime-1100: hsl(120, 100%, 13%, 1);
  --cpd-color-alpha-lime-1200: hsl(120, 100%, 11%, 1);
  --cpd-color-alpha-lime-1300: hsl(120, 100%, 8%, 1);
  --cpd-color-alpha-lime-1400: hsl(120, 100%, 7%, 1);
  --cpd-color-alpha-green-100: hsla(150, 79%, 41%, 0.06);
  --cpd-color-alpha-green-200: hsla(150, 100%, 36%, 0.11);
  --cpd-color-alpha-green-300: hsla(151, 93%, 37%, 0.23);
  --cpd-color-alpha-green-400: hsla(153, 95%, 37%, 0.32);
  --cpd-color-alpha-green-500: hsla(156, 99%, 36%, 0.56);
  --cpd-color-alpha-green-600: hsla(163, 99%, 38%, 0.96);
  --cpd-color-alpha-green-700: hsl(166, 100%, 32%, 1);
  --cpd-color-alpha-green-800: hsl(168, 100%, 26%, 1);
  --cpd-color-alpha-green-900: hsl(163, 100%, 17%, 1);
  --cpd-color-alpha-green-1000: hsl(162, 100%, 15%, 1);
  --cpd-color-alpha-green-1100: hsl(160, 100%, 13%, 1);
  --cpd-color-alpha-green-1200: hsl(158, 100%, 11%, 1);
  --cpd-color-alpha-green-1300: hsl(152, 100%, 8%, 1);
  --cpd-color-alpha-green-1400: hsl(147, 100%, 7%, 1);
  --cpd-color-alpha-cyan-100: hsla(186, 79%, 41%, 0.06);
  --cpd-color-alpha-cyan-200: hsla(188, 100%, 38%, 0.11);
  --cpd-color-alpha-cyan-300: hsla(186, 100%, 37%, 0.22);
  --cpd-color-alpha-cyan-400: hsla(187, 97%, 38%, 0.31);
  --cpd-color-alpha-cyan-500: hsla(187, 99%, 38%, 0.54);
  --cpd-color-alpha-cyan-600: hsla(186, 99%, 40%, 0.92);
  --cpd-color-alpha-cyan-700: hsl(193, 100%, 38%, 1);
  --cpd-color-alpha-cyan-800: hsl(199, 100%, 35%, 1);
  --cpd-color-alpha-cyan-900: hsl(205, 100%, 26%, 1);
  --cpd-color-alpha-cyan-1000: hsl(207, 100%, 24%, 1);
  --cpd-color-alpha-cyan-1100: hsl(210, 100%, 22%, 1);
  --cpd-color-alpha-cyan-1200: hsl(212, 100%, 20%, 1);
  --cpd-color-alpha-cyan-1300: hsl(218, 100%, 16%, 1);
  --cpd-color-alpha-cyan-1400: hsl(222, 100%, 15%, 1);
  --cpd-color-alpha-blue-100: hsla(218, 100%, 57%, 0.05);
  --cpd-color-alpha-blue-200: hsla(215, 100%, 52%, 0.09);
  --cpd-color-alpha-blue-300: hsla(216, 95%, 51%, 0.16);
  --cpd-color-alpha-blue-400: hsla(216, 96%, 49%, 0.22);
  --cpd-color-alpha-blue-500: hsla(216, 95%, 48%, 0.37);
  --cpd-color-alpha-blue-600: hsla(215, 98%, 47%, 0.51);
  --cpd-color-alpha-blue-700: hsla(215, 100%, 46%, 0.71);
  --cpd-color-alpha-blue-800: hsla(212, 99%, 46%, 0.99);
  --cpd-color-alpha-blue-900: hsla(217, 98%, 33%, 0.99);
  --cpd-color-alpha-blue-1000: hsla(218, 97%, 30%, 0.99);
  --cpd-color-alpha-blue-1100: hsla(220, 99%, 27%, 0.99);
  --cpd-color-alpha-blue-1200: hsla(222, 100%, 24%, 0.99);
  --cpd-color-alpha-blue-1300: hsl(228, 100%, 21%, 1);
  --cpd-color-alpha-blue-1400: hsl(233, 100%, 19%, 1);
  --cpd-color-alpha-purple-100: hsla(248, 100%, 61%, 0.04);
  --cpd-color-alpha-purple-200: hsla(248, 100%, 55%, 0.07);
  --cpd-color-alpha-purple-300: hsla(248, 100%, 53%, 0.12);
  --cpd-color-alpha-purple-400: hsla(248, 100%, 52%, 0.16);
  --cpd-color-alpha-purple-500: hsla(249, 100%, 51%, 0.27);
  --cpd-color-alpha-purple-600: hsla(251, 100%, 51%, 0.38);
  --cpd-color-alpha-purple-700: hsla(254, 100%, 50%, 0.53);
  --cpd-color-alpha-purple-800: hsla(258, 98%, 49%, 0.7);
  --cpd-color-alpha-purple-900: hsla(261, 97%, 38%, 0.9);
  --cpd-color-alpha-purple-1000: hsla(263, 100%, 36%, 0.95);
  --cpd-color-alpha-purple-1100: hsl(264, 100%, 33%, 1);
  --cpd-color-alpha-purple-1200: hsl(262, 100%, 29%, 1);
  --cpd-color-alpha-purple-1300: hsl(259, 100%, 22%, 1);
  --cpd-color-alpha-purple-1400: hsl(259, 100%, 19%, 1);
  --cpd-color-alpha-fuchsia-100: hsla(293, 95%, 41%, 0.04);
  --cpd-color-alpha-fuchsia-200: hsla(295, 89%, 41%, 0.07);
  --cpd-color-alpha-fuchsia-300: hsla(298, 91%, 40%, 0.13);
  --cpd-color-alpha-fuchsia-400: hsla(296, 95%, 38%, 0.18);
  --cpd-color-alpha-fuchsia-500: hsla(297, 93%, 38%, 0.31);
  --cpd-color-alpha-fuchsia-600: hsla(295, 96%, 37%, 0.43);
  --cpd-color-alpha-fuchsia-700: hsla(295, 97%, 37%, 0.6);
  --cpd-color-alpha-fuchsia-800: hsla(294, 98%, 36%, 0.79);
  --cpd-color-alpha-fuchsia-900: hsla(287, 96%, 27%, 0.9);
  --cpd-color-alpha-fuchsia-1000: hsla(286, 100%, 24%, 0.91);
  --cpd-color-alpha-fuchsia-1100: hsla(285, 97%, 22%, 0.95);
  --cpd-color-alpha-fuchsia-1200: hsl(285, 96%, 22%, 1);
  --cpd-color-alpha-fuchsia-1300: hsl(283, 100%, 16%, 1);
  --cpd-color-alpha-fuchsia-1400: hsl(281, 100%, 15%, 1);
  --cpd-color-alpha-pink-100: hsla(348, 100%, 51%, 0.04);
  --cpd-color-alpha-pink-200: hsla(347, 100%, 54%, 0.08);
  --cpd-color-alpha-pink-300: hsla(347, 100%, 50%, 0.13);
  --cpd-color-alpha-pink-400: hsla(347, 100%, 52%, 0.19);
  --cpd-color-alpha-pink-500: hsla(346, 100%, 51%, 0.33);
  --cpd-color-alpha-pink-600: hsla(345, 100%, 50%, 0.47);
  --cpd-color-alpha-pink-700: hsla(341, 98%, 49%, 0.7);
  --cpd-color-alpha-pink-800: hsla(333, 98%, 44%, 0.96);
  --cpd-color-alpha-pink-900: hsla(331, 100%, 28%, 0.97);
  --cpd-color-alpha-pink-1000: hsla(330, 97%, 26%, 0.98);
  --cpd-color-alpha-pink-1100: hsl(329, 100%, 22%, 1);
  --cpd-color-alpha-pink-1200: hsl(332, 100%, 20%, 1);
  --cpd-color-alpha-pink-1300: hsl(337, 100%, 15%, 1);
  --cpd-color-alpha-pink-1400: hsl(341, 100%, 13%, 1);
  --cpd-color-transparent: rgba(0,0,0,0);
}
}
}
}
@layer compound{
@media screen{
@layer cpd-semantic{
.cpd-theme-light-hc.cpd-theme-light-hc {
  --cpd-color-bg-canvas-default-level-1: var(--cpd-color-theme-bg);
  --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-gray-300);
  --cpd-color-bg-badge-accent: var(--cpd-color-alpha-green-400);
  --cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-400);
  --cpd-color-bg-badge-default: var(--cpd-color-alpha-gray-400);
  --cpd-color-gradient-action-stop1: var(--cpd-color-green-500);
  --cpd-color-gradient-action-stop2: var(--cpd-color-green-700);
  --cpd-color-gradient-action-stop3: var(--cpd-color-green-900);
  --cpd-color-gradient-action-stop4: var(--cpd-color-green-1100);
  --cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
}
}
}
}
@layer compound{
@media screen and (prefers-color-scheme: light) and (prefers-contrast: more){
@layer cpd-semantic{
:root {
  --cpd-color-bg-canvas-default-level-1: var(--cpd-color-theme-bg);
  --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-gray-300);
  --cpd-color-bg-badge-accent: var(--cpd-color-alpha-green-400);
  --cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-400);
  --cpd-color-bg-badge-default: var(--cpd-color-alpha-gray-400);
  --cpd-color-gradient-action-stop1: var(--cpd-color-green-500);
  --cpd-color-gradient-action-stop2: var(--cpd-color-green-700);
  --cpd-color-gradient-action-stop3: var(--cpd-color-green-900);
  --cpd-color-gradient-action-stop4: var(--cpd-color-green-1100);
  --cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
}
}
}
}
@layer compound{
@media screen{
@layer cpd-base{
.cpd-theme-dark.cpd-theme-dark {
  --cpd-color-theme-bg: #101317;
  --cpd-color-gray-100: #14171b;
  --cpd-color-gray-200: #181a1f;
  --cpd-color-gray-300: #1d1f24;
  --cpd-color-gray-400: #26282d;
  --cpd-color-gray-500: #323539;
  --cpd-color-gray-600: #3c3f44;
  --cpd-color-gray-700: #4a4f55;
  --cpd-color-gray-800: #656c76;
  --cpd-color-gray-900: #808994;
  --cpd-color-gray-1000: #9199a4;
  --cpd-color-gray-1100: #a3aab4;
  --cpd-color-gray-1200: #bdc3cc;
  --cpd-color-gray-1300: #d9dee4;
  --cpd-color-gray-1400: #ebeef2;
  --cpd-color-red-100: #370000;
  --cpd-color-red-200: #3e0000;
  --cpd-color-red-300: #470000;
  --cpd-color-red-400: #590000;
  --cpd-color-red-500: #710000;
  --cpd-color-red-600: #830009;
  --cpd-color-red-700: #9f0d1e;
  --cpd-color-red-800: #d1212a;
  --cpd-color-red-900: #fd3e3c;
  --cpd-color-red-1000: #ff665d;
  --cpd-color-red-1100: #ff877c;
  --cpd-color-red-1200: #ffaea4;
  --cpd-color-red-1300: #ffd4cd;
  --cpd-color-red-1400: #ffe9e6;
  --cpd-color-orange-100: #380000;
  --cpd-color-orange-200: #3c0000;
  --cpd-color-orange-300: #470000;
  --cpd-color-orange-400: #580000;
  --cpd-color-orange-500: #710000;
  --cpd-color-orange-600: #830500;
  --cpd-color-orange-700: #972206;
  --cpd-color-orange-800: #b94607;
  --cpd-color-orange-900: #da670d;
  --cpd-color-orange-1000: #eb7a12;
  --cpd-color-orange-1100: #f6913d;
  --cpd-color-orange-1200: #fbb37e;
  --cpd-color-orange-1300: #ffd5b9;
  --cpd-color-orange-1400: #ffeadb;
  --cpd-color-yellow-100: #360000;
  --cpd-color-yellow-200: #3a0300;
  --cpd-color-yellow-300: #410900;
  --cpd-color-yellow-400: #4c1400;
  --cpd-color-yellow-500: #5c2400;
  --cpd-color-yellow-600: #682e03;
  --cpd-color-yellow-700: #7c3e02;
  --cpd-color-yellow-800: #9d5b00;
  --cpd-color-yellow-900: #bc7a00;
  --cpd-color-yellow-1000: #cc8c00;
  --cpd-color-yellow-1100: #db9f00;
  --cpd-color-yellow-1200: #efbb0b;
  --cpd-color-yellow-1300: #fedb58;
  --cpd-color-yellow-1400: #ffedb1;
  --cpd-color-lime-100: #001b00;
  --cpd-color-lime-200: #002000;
  --cpd-color-lime-300: #002600;
  --cpd-color-lime-400: #003000;
  --cpd-color-lime-500: #003e00;
  --cpd-color-lime-600: #004a00;
  --cpd-color-lime-700: #005c00;
  --cpd-color-lime-800: #1d7c13;
  --cpd-color-lime-900: #389b20;
  --cpd-color-lime-1000: #47ad26;
  --cpd-color-lime-1100: #56c02c;
  --cpd-color-lime-1200: #77d94f;
  --cpd-color-lime-1300: #b6eca3;
  --cpd-color-lime-1400: #daf6d0;
  --cpd-color-green-100: #001c0b;
  --cpd-color-green-200: #001f0e;
  --cpd-color-green-300: #002513;
  --cpd-color-green-400: #002e1b;
  --cpd-color-green-500: #003d29;
  --cpd-color-green-600: #004832;
  --cpd-color-green-700: #005a43;
  --cpd-color-green-800: #007a62;
  --cpd-color-green-900: #129a78;
  --cpd-color-green-1000: #17ac84;
  --cpd-color-green-1100: #1fc090;
  --cpd-color-green-1200: #72d5ae;
  --cpd-color-green-1300: #b5e8d1;
  --cpd-color-green-1400: #d9f4e7;
  --cpd-color-cyan-100: #001144;
  --cpd-color-cyan-200: #001448;
  --cpd-color-cyan-300: #001b4e;
  --cpd-color-cyan-400: #002559;
  --cpd-color-cyan-500: #003468;
  --cpd-color-cyan-600: #003f75;
  --cpd-color-cyan-700: #005188;
  --cpd-color-cyan-800: #0271aa;
  --cpd-color-cyan-900: #0093be;
  --cpd-color-cyan-1000: #02a7c6;
  --cpd-color-cyan-1100: #21bacd;
  --cpd-color-cyan-1200: #78d0dc;
  --cpd-color-cyan-1300: #b8e5eb;
  --cpd-color-cyan-1400: #dbf2f5;
  --cpd-color-blue-100: #00055a;
  --cpd-color-blue-200: #00095d;
  --cpd-color-blue-300: #001264;
  --cpd-color-blue-400: #001e6f;
  --cpd-color-blue-500: #062d80;
  --cpd-color-blue-600: #083891;
  --cpd-color-blue-700: #0b49ab;
  --cpd-color-blue-800: #0e67d9;
  --cpd-color-blue-900: #4187eb;
  --cpd-color-blue-1000: #5e99f0;
  --cpd-color-blue-1100: #7aacf4;
  --cpd-color-blue-1200: #a1c4f8;
  --cpd-color-blue-1300: #cbdffc;
  --cpd-color-blue-1400: #e4eefe;
  --cpd-color-purple-100: #1a0055;
  --cpd-color-purple-200: #1c005a;
  --cpd-color-purple-300: #22006a;
  --cpd-color-purple-400: #2c0080;
  --cpd-color-purple-500: #3d009e;
  --cpd-color-purple-600: #4a0db1;
  --cpd-color-purple-700: #5a27c6;
  --cpd-color-purple-800: #7849ec;
  --cpd-color-purple-900: #9171f9;
  --cpd-color-purple-1000: #9e87fc;
  --cpd-color-purple-1100: #ad9cfe;
  --cpd-color-purple-1200: #c4baff;
  --cpd-color-purple-1300: #dedaff;
  --cpd-color-purple-1400: #eeebff;
  --cpd-color-fuchsia-100: #28003d;
  --cpd-color-fuchsia-200: #2e0044;
  --cpd-color-fuchsia-300: #37004e;
  --cpd-color-fuchsia-400: #46005e;
  --cpd-color-fuchsia-500: #560f6f;
  --cpd-color-fuchsia-600: #65177d;
  --cpd-color-fuchsia-700: #7d2394;
  --cpd-color-fuchsia-800: #aa36ba;
  --cpd-color-fuchsia-900: #c560cf;
  --cpd-color-fuchsia-1000: #cf78d7;
  --cpd-color-fuchsia-1100: #d991de;
  --cpd-color-fuchsia-1200: #e5b1e9;
  --cpd-color-fuchsia-1300: #f1d4f3;
  --cpd-color-fuchsia-1400: #f8e9f9;
  --cpd-color-pink-100: #37000f;
  --cpd-color-pink-200: #3c0012;
  --cpd-color-pink-300: #450018;
  --cpd-color-pink-400: #550024;
  --cpd-color-pink-500: #6d0036;
  --cpd-color-pink-600: #7c0c41;
  --cpd-color-pink-700: #99114f;
  --cpd-color-pink-800: #ce1865;
  --cpd-color-pink-900: #f4427d;
  --cpd-color-pink-1000: #fa658f;
  --cpd-color-pink-1100: #fe84a2;
  --cpd-color-pink-1200: #ffabbe;
  --cpd-color-pink-1300: #ffd2dc;
  --cpd-color-pink-1400: #ffe8ed;
  --cpd-color-alpha-gray-100: hsla(214, 10%, 86%, 0.02);
  --cpd-color-alpha-gray-200: hsla(286, 31%, 82%, 0.04);
  --cpd-color-alpha-gray-300: hsla(280, 41%, 90%, 0.06);
  --cpd-color-alpha-gray-400: hsla(270, 37%, 93%, 0.1);
  --cpd-color-alpha-gray-500: hsla(214, 41%, 97%, 0.15);
  --cpd-color-alpha-gray-600: hsla(225, 46%, 95%, 0.2);
  --cpd-color-alpha-gray-700: hsla(213, 85%, 95%, 0.27);
  --cpd-color-alpha-gray-800: hsla(216, 100%, 94%, 0.41);
  --cpd-color-alpha-gray-900: hsla(211, 94%, 94%, 0.54);
  --cpd-color-alpha-gray-1000: hsla(213, 93%, 94%, 0.61);
  --cpd-color-alpha-gray-1100: hsla(215, 92%, 95%, 0.68);
  --cpd-color-alpha-gray-1200: hsla(215, 74%, 96%, 0.79);
  --cpd-color-alpha-gray-1300: hsla(213, 73%, 97%, 0.89);
  --cpd-color-alpha-gray-1400: hsla(214, 78%, 98%, 0.95);
  --cpd-color-alpha-red-100: hsl(0, 100%, 11%, 1);
  --cpd-color-alpha-red-200: hsl(0, 100%, 12%, 1);
  --cpd-color-alpha-red-300: hsl(0, 100%, 14%, 1);
  --cpd-color-alpha-red-400: hsl(0, 100%, 18%, 1);
  --cpd-color-alpha-red-500: hsl(0, 100%, 22%, 1);
  --cpd-color-alpha-red-600: hsl(356, 100%, 26%, 1);
  --cpd-color-alpha-red-700: hsla(354, 99%, 52%, 0.6);
  --cpd-color-alpha-red-800: hsla(357, 99%, 57%, 0.81);
  --cpd-color-alpha-red-900: hsl(1, 98%, 61%, 1);
  --cpd-color-alpha-red-1000: hsl(3, 100%, 68%, 1);
  --cpd-color-alpha-red-1100: hsl(5, 100%, 74%, 1);
  --cpd-color-alpha-red-1200: hsl(7, 100%, 82%, 1);
  --cpd-color-alpha-red-1300: hsl(8, 100%, 90%, 1);
  --cpd-color-alpha-red-1400: hsl(7, 100%, 95%, 1);
  --cpd-color-alpha-orange-100: hsl(0, 100%, 11%, 1);
  --cpd-color-alpha-orange-200: hsl(0, 100%, 12%, 1);
  --cpd-color-alpha-orange-300: hsl(0, 100%, 14%, 1);
  --cpd-color-alpha-orange-400: hsl(0, 100%, 17%, 1);
  --cpd-color-alpha-orange-500: hsl(0, 100%, 22%, 1);
  --cpd-color-alpha-orange-600: hsl(2, 100%, 26%, 1);
  --cpd-color-alpha-orange-700: hsla(12, 100%, 39%, 0.74);
  --cpd-color-alpha-orange-800: hsla(21, 100%, 50%, 0.71);
  --cpd-color-alpha-orange-900: hsla(26, 99%, 52%, 0.85);
  --cpd-color-alpha-orange-1000: hsla(29, 99%, 53%, 0.92);
  --cpd-color-alpha-orange-1100: hsla(27, 98%, 62%, 0.97);
  --cpd-color-alpha-orange-1200: hsla(26, 97%, 75%, 0.99);
  --cpd-color-alpha-orange-1300: hsl(24, 100%, 86%, 1);
  --cpd-color-alpha-orange-1400: hsl(25, 100%, 93%, 1);
  --cpd-color-alpha-yellow-100: hsl(0, 100%, 11%, 1);
  --cpd-color-alpha-yellow-200: hsl(3, 100%, 11%, 1);
  --cpd-color-alpha-yellow-300: hsl(8, 100%, 13%, 1);
  --cpd-color-alpha-yellow-400: hsl(16, 100%, 15%, 1);
  --cpd-color-alpha-yellow-500: hsl(23, 100%, 18%, 1);
  --cpd-color-alpha-yellow-600: hsla(26, 100%, 23%, 0.87);
  --cpd-color-alpha-yellow-700: hsla(30, 100%, 26%, 0.92);
  --cpd-color-alpha-yellow-800: hsl(35, 100%, 31%, 1);
  --cpd-color-alpha-yellow-900: hsl(39, 100%, 37%, 1);
  --cpd-color-alpha-yellow-1000: hsl(41, 100%, 40%, 1);
  --cpd-color-alpha-yellow-1100: hsl(44, 100%, 43%, 1);
  --cpd-color-alpha-yellow-1200: hsla(46, 98%, 52%, 0.94);
  --cpd-color-alpha-yellow-1300: hsl(47, 99%, 67%, 1);
  --cpd-color-alpha-yellow-1400: hsl(46, 100%, 85%, 1);
  --cpd-color-alpha-lime-100: hsl(120, 100%, 5%, 1);
  --cpd-color-alpha-lime-200: hsl(120, 100%, 6%, 1);
  --cpd-color-alpha-lime-300: hsl(120, 100%, 8%, 1);
  --cpd-color-alpha-lime-400: hsl(120, 100%, 9%, 1);
  --cpd-color-alpha-lime-500: hsl(120, 100%, 12%, 1);
  --cpd-color-alpha-lime-600: hsl(120, 100%, 15%, 1);
  --cpd-color-alpha-lime-700: hsl(120, 100%, 18%, 1);
  --cpd-color-alpha-lime-800: hsla(112, 98%, 52%, 0.45);
  --cpd-color-alpha-lime-900: hsla(107, 98%, 57%, 0.58);
  --cpd-color-alpha-lime-1000: hsla(105, 97%, 58%, 0.66);
  --cpd-color-alpha-lime-1100: hsla(102, 98%, 60%, 0.74);
  --cpd-color-alpha-lime-1200: hsla(102, 100%, 68%, 0.84);
  --cpd-color-alpha-lime-1300: hsla(104, 100%, 84%, 0.92);
  --cpd-color-alpha-lime-1400: hsla(105, 91%, 92%, 0.97);
  --cpd-color-alpha-green-100: hsl(144, 100%, 6%, 1);
  --cpd-color-alpha-green-200: hsl(147, 100%, 6%, 1);
  --cpd-color-alpha-green-300: hsl(151, 100%, 7%, 1);
  --cpd-color-alpha-green-400: hsl(155, 100%, 9%, 1);
  --cpd-color-alpha-green-500: hsl(160, 100%, 12%, 1);
  --cpd-color-alpha-green-600: hsl(162, 100%, 14%, 1);
  --cpd-color-alpha-green-700: hsl(165, 100%, 18%, 1);
  --cpd-color-alpha-green-800: hsl(168, 100%, 24%, 1);
  --cpd-color-alpha-green-900: hsla(164, 98%, 53%, 0.58);
  --cpd-color-alpha-green-1000: hsla(163, 99%, 55%, 0.65);
  --cpd-color-alpha-green-1100: hsla(162, 98%, 57%, 0.74);
  --cpd-color-alpha-green-1200: hsla(156, 97%, 76%, 0.83);
  --cpd-color-alpha-green-1300: hsla(152, 93%, 88%, 0.91);
  --cpd-color-alpha-green-1400: hsla(152, 88%, 94%, 0.96);
  --cpd-color-alpha-cyan-100: hsl(225, 100%, 13%, 1);
  --cpd-color-alpha-cyan-200: hsl(223, 100%, 14%, 1);
  --cpd-color-alpha-cyan-300: hsl(219, 100%, 15%, 1);
  --cpd-color-alpha-cyan-400: hsl(215, 100%, 18%, 1);
  --cpd-color-alpha-cyan-500: hsl(210, 100%, 20%, 1);
  --cpd-color-alpha-cyan-600: hsl(208, 100%, 23%, 1);
  --cpd-color-alpha-cyan-700: hsl(204, 100%, 27%, 1);
  --cpd-color-alpha-cyan-800: hsla(200, 100%, 37%, 0.88);
  --cpd-color-alpha-cyan-900: hsl(194, 100%, 37%, 1);
  --cpd-color-alpha-cyan-1000: hsla(189, 100%, 44%, 0.88);
  --cpd-color-alpha-cyan-1100: hsla(186, 98%, 57%, 0.79);
  --cpd-color-alpha-cyan-1200: hsla(187, 100%, 77%, 0.85);
  --cpd-color-alpha-cyan-1300: hsla(187, 93%, 89%, 0.92);
  --cpd-color-alpha-cyan-1400: hsla(187, 93%, 94%, 0.96);
  --cpd-color-alpha-blue-100: hsl(237, 100%, 18%, 1);
  --cpd-color-alpha-blue-200: hsl(234, 100%, 18%, 1);
  --cpd-color-alpha-blue-300: hsl(229, 100%, 20%, 1);
  --cpd-color-alpha-blue-400: hsl(224, 100%, 22%, 1);
  --cpd-color-alpha-blue-500: hsla(221, 100%, 37%, 0.63);
  --cpd-color-alpha-blue-600: hsla(219, 99%, 50%, 0.53);
  --cpd-color-alpha-blue-700: hsla(217, 99%, 51%, 0.64);
  --cpd-color-alpha-blue-800: hsla(214, 99%, 53%, 0.84);
  --cpd-color-alpha-blue-900: hsla(215, 98%, 63%, 0.92);
  --cpd-color-alpha-blue-1000: hsla(216, 99%, 69%, 0.94);
  --cpd-color-alpha-blue-1100: hsla(215, 97%, 74%, 0.96);
  --cpd-color-alpha-blue-1200: hsla(216, 100%, 82%, 0.97);
  --cpd-color-alpha-blue-1300: hsla(216, 96%, 90%, 0.99);
  --cpd-color-alpha-blue-1400: hsl(217, 93%, 95%, 1);
  --cpd-color-alpha-purple-100: hsl(258, 100%, 17%, 1);
  --cpd-color-alpha-purple-200: hsl(259, 100%, 18%, 1);
  --cpd-color-alpha-purple-300: hsl(259, 100%, 21%, 1);
  --cpd-color-alpha-purple-400: hsl(261, 100%, 25%, 1);
  --cpd-color-alpha-purple-500: hsl(263, 100%, 31%, 1);
  --cpd-color-alpha-purple-600: hsla(263, 98%, 52%, 0.67);
  --cpd-color-alpha-purple-700: hsla(260, 98%, 58%, 0.76);
  --cpd-color-alpha-purple-800: hsla(257, 100%, 65%, 0.92);
  --cpd-color-alpha-purple-900: hsla(254, 99%, 72%, 0.98);
  --cpd-color-alpha-purple-1000: hsla(252, 98%, 77%, 0.99);
  --cpd-color-alpha-purple-1100: hsl(250, 98%, 80%, 1);
  --cpd-color-alpha-purple-1200: hsl(249, 100%, 87%, 1);
  --cpd-color-alpha-purple-1300: hsl(246, 100%, 93%, 1);
  --cpd-color-alpha-purple-1400: hsl(249, 100%, 96%, 1);
  --cpd-color-alpha-fuchsia-100: hsl(279, 100%, 12%, 1);
  --cpd-color-alpha-fuchsia-200: hsl(281, 100%, 13%, 1);
  --cpd-color-alpha-fuchsia-300: hsl(282, 100%, 15%, 1);
  --cpd-color-alpha-fuchsia-400: hsl(285, 100%, 18%, 1);
  --cpd-color-alpha-fuchsia-500: hsla(287, 100%, 52%, 0.38);
  --cpd-color-alpha-fuchsia-600: hsla(288, 100%, 56%, 0.44);
  --cpd-color-alpha-fuchsia-700: hsla(289, 99%, 59%, 0.54);
  --cpd-color-alpha-fuchsia-800: hsla(294, 98%, 63%, 0.71);
  --cpd-color-alpha-fuchsia-900: hsla(295, 97%, 72%, 0.8);
  --cpd-color-alpha-fuchsia-1000: hsla(296, 98%, 78%, 0.83);
  --cpd-color-alpha-fuchsia-1100: hsla(297, 98%, 82%, 0.86);
  --cpd-color-alpha-fuchsia-1200: hsla(296, 97%, 88%, 0.91);
  --cpd-color-alpha-fuchsia-1300: hsla(296, 100%, 94%, 0.95);
  --cpd-color-alpha-fuchsia-1400: hsla(296, 90%, 96%, 0.98);
  --cpd-color-alpha-pink-100: hsl(344, 100%, 11%, 1);
  --cpd-color-alpha-pink-200: hsl(342, 100%, 12%, 1);
  --cpd-color-alpha-pink-300: hsl(339, 100%, 14%, 1);
  --cpd-color-alpha-pink-400: hsl(335, 100%, 17%, 1);
  --cpd-color-alpha-pink-500: hsl(330, 100%, 21%, 1);
  --cpd-color-alpha-pink-600: hsla(333, 97%, 50%, 0.46);
  --cpd-color-alpha-pink-700: hsla(334, 98%, 53%, 0.58);
  --cpd-color-alpha-pink-800: hsla(335, 99%, 55%, 0.8);
  --cpd-color-alpha-pink-900: hsla(340, 99%, 63%, 0.96);
  --cpd-color-alpha-pink-1000: hsla(343, 100%, 70%, 0.98);
  --cpd-color-alpha-pink-1100: hsl(345, 98%, 76%, 1);
  --cpd-color-alpha-pink-1200: hsl(346, 100%, 84%, 1);
  --cpd-color-alpha-pink-1300: hsl(347, 100%, 91%, 1);
  --cpd-color-alpha-pink-1400: hsl(347, 100%, 96%, 1);
  --cpd-color-transparent: rgba(0,0,0,0);
}
}
}
}
@layer compound{
@media screen and (prefers-color-scheme: dark){
@layer cpd-base{
:root {
  --cpd-color-theme-bg: #101317;
  --cpd-color-gray-100: #14171b;
  --cpd-color-gray-200: #181a1f;
  --cpd-color-gray-300: #1d1f24;
  --cpd-color-gray-400: #26282d;
  --cpd-color-gray-500: #323539;
  --cpd-color-gray-600: #3c3f44;
  --cpd-color-gray-700: #4a4f55;
  --cpd-color-gray-800: #656c76;
  --cpd-color-gray-900: #808994;
  --cpd-color-gray-1000: #9199a4;
  --cpd-color-gray-1100: #a3aab4;
  --cpd-color-gray-1200: #bdc3cc;
  --cpd-color-gray-1300: #d9dee4;
  --cpd-color-gray-1400: #ebeef2;
  --cpd-color-red-100: #370000;
  --cpd-color-red-200: #3e0000;
  --cpd-color-red-300: #470000;
  --cpd-color-red-400: #590000;
  --cpd-color-red-500: #710000;
  --cpd-color-red-600: #830009;
  --cpd-color-red-700: #9f0d1e;
  --cpd-color-red-800: #d1212a;
  --cpd-color-red-900: #fd3e3c;
  --cpd-color-red-1000: #ff665d;
  --cpd-color-red-1100: #ff877c;
  --cpd-color-red-1200: #ffaea4;
  --cpd-color-red-1300: #ffd4cd;
  --cpd-color-red-1400: #ffe9e6;
  --cpd-color-orange-100: #380000;
  --cpd-color-orange-200: #3c0000;
  --cpd-color-orange-300: #470000;
  --cpd-color-orange-400: #580000;
  --cpd-color-orange-500: #710000;
  --cpd-color-orange-600: #830500;
  --cpd-color-orange-700: #972206;
  --cpd-color-orange-800: #b94607;
  --cpd-color-orange-900: #da670d;
  --cpd-color-orange-1000: #eb7a12;
  --cpd-color-orange-1100: #f6913d;
  --cpd-color-orange-1200: #fbb37e;
  --cpd-color-orange-1300: #ffd5b9;
  --cpd-color-orange-1400: #ffeadb;
  --cpd-color-yellow-100: #360000;
  --cpd-color-yellow-200: #3a0300;
  --cpd-color-yellow-300: #410900;
  --cpd-color-yellow-400: #4c1400;
  --cpd-color-yellow-500: #5c2400;
  --cpd-color-yellow-600: #682e03;
  --cpd-color-yellow-700: #7c3e02;
  --cpd-color-yellow-800: #9d5b00;
  --cpd-color-yellow-900: #bc7a00;
  --cpd-color-yellow-1000: #cc8c00;
  --cpd-color-yellow-1100: #db9f00;
  --cpd-color-yellow-1200: #efbb0b;
  --cpd-color-yellow-1300: #fedb58;
  --cpd-color-yellow-1400: #ffedb1;
  --cpd-color-lime-100: #001b00;
  --cpd-color-lime-200: #002000;
  --cpd-color-lime-300: #002600;
  --cpd-color-lime-400: #003000;
  --cpd-color-lime-500: #003e00;
  --cpd-color-lime-600: #004a00;
  --cpd-color-lime-700: #005c00;
  --cpd-color-lime-800: #1d7c13;
  --cpd-color-lime-900: #389b20;
  --cpd-color-lime-1000: #47ad26;
  --cpd-color-lime-1100: #56c02c;
  --cpd-color-lime-1200: #77d94f;
  --cpd-color-lime-1300: #b6eca3;
  --cpd-color-lime-1400: #daf6d0;
  --cpd-color-green-100: #001c0b;
  --cpd-color-green-200: #001f0e;
  --cpd-color-green-300: #002513;
  --cpd-color-green-400: #002e1b;
  --cpd-color-green-500: #003d29;
  --cpd-color-green-600: #004832;
  --cpd-color-green-700: #005a43;
  --cpd-color-green-800: #007a62;
  --cpd-color-green-900: #129a78;
  --cpd-color-green-1000: #17ac84;
  --cpd-color-green-1100: #1fc090;
  --cpd-color-green-1200: #72d5ae;
  --cpd-color-green-1300: #b5e8d1;
  --cpd-color-green-1400: #d9f4e7;
  --cpd-color-cyan-100: #001144;
  --cpd-color-cyan-200: #001448;
  --cpd-color-cyan-300: #001b4e;
  --cpd-color-cyan-400: #002559;
  --cpd-color-cyan-500: #003468;
  --cpd-color-cyan-600: #003f75;
  --cpd-color-cyan-700: #005188;
  --cpd-color-cyan-800: #0271aa;
  --cpd-color-cyan-900: #0093be;
  --cpd-color-cyan-1000: #02a7c6;
  --cpd-color-cyan-1100: #21bacd;
  --cpd-color-cyan-1200: #78d0dc;
  --cpd-color-cyan-1300: #b8e5eb;
  --cpd-color-cyan-1400: #dbf2f5;
  --cpd-color-blue-100: #00055a;
  --cpd-color-blue-200: #00095d;
  --cpd-color-blue-300: #001264;
  --cpd-color-blue-400: #001e6f;
  --cpd-color-blue-500: #062d80;
  --cpd-color-blue-600: #083891;
  --cpd-color-blue-700: #0b49ab;
  --cpd-color-blue-800: #0e67d9;
  --cpd-color-blue-900: #4187eb;
  --cpd-color-blue-1000: #5e99f0;
  --cpd-color-blue-1100: #7aacf4;
  --cpd-color-blue-1200: #a1c4f8;
  --cpd-color-blue-1300: #cbdffc;
  --cpd-color-blue-1400: #e4eefe;
  --cpd-color-purple-100: #1a0055;
  --cpd-color-purple-200: #1c005a;
  --cpd-color-purple-300: #22006a;
  --cpd-color-purple-400: #2c0080;
  --cpd-color-purple-500: #3d009e;
  --cpd-color-purple-600: #4a0db1;
  --cpd-color-purple-700: #5a27c6;
  --cpd-color-purple-800: #7849ec;
  --cpd-color-purple-900: #9171f9;
  --cpd-color-purple-1000: #9e87fc;
  --cpd-color-purple-1100: #ad9cfe;
  --cpd-color-purple-1200: #c4baff;
  --cpd-color-purple-1300: #dedaff;
  --cpd-color-purple-1400: #eeebff;
  --cpd-color-fuchsia-100: #28003d;
  --cpd-color-fuchsia-200: #2e0044;
  --cpd-color-fuchsia-300: #37004e;
  --cpd-color-fuchsia-400: #46005e;
  --cpd-color-fuchsia-500: #560f6f;
  --cpd-color-fuchsia-600: #65177d;
  --cpd-color-fuchsia-700: #7d2394;
  --cpd-color-fuchsia-800: #aa36ba;
  --cpd-color-fuchsia-900: #c560cf;
  --cpd-color-fuchsia-1000: #cf78d7;
  --cpd-color-fuchsia-1100: #d991de;
  --cpd-color-fuchsia-1200: #e5b1e9;
  --cpd-color-fuchsia-1300: #f1d4f3;
  --cpd-color-fuchsia-1400: #f8e9f9;
  --cpd-color-pink-100: #37000f;
  --cpd-color-pink-200: #3c0012;
  --cpd-color-pink-300: #450018;
  --cpd-color-pink-400: #550024;
  --cpd-color-pink-500: #6d0036;
  --cpd-color-pink-600: #7c0c41;
  --cpd-color-pink-700: #99114f;
  --cpd-color-pink-800: #ce1865;
  --cpd-color-pink-900: #f4427d;
  --cpd-color-pink-1000: #fa658f;
  --cpd-color-pink-1100: #fe84a2;
  --cpd-color-pink-1200: #ffabbe;
  --cpd-color-pink-1300: #ffd2dc;
  --cpd-color-pink-1400: #ffe8ed;
  --cpd-color-alpha-gray-100: hsla(214, 10%, 86%, 0.02);
  --cpd-color-alpha-gray-200: hsla(286, 31%, 82%, 0.04);
  --cpd-color-alpha-gray-300: hsla(280, 41%, 90%, 0.06);
  --cpd-color-alpha-gray-400: hsla(270, 37%, 93%, 0.1);
  --cpd-color-alpha-gray-500: hsla(214, 41%, 97%, 0.15);
  --cpd-color-alpha-gray-600: hsla(225, 46%, 95%, 0.2);
  --cpd-color-alpha-gray-700: hsla(213, 85%, 95%, 0.27);
  --cpd-color-alpha-gray-800: hsla(216, 100%, 94%, 0.41);
  --cpd-color-alpha-gray-900: hsla(211, 94%, 94%, 0.54);
  --cpd-color-alpha-gray-1000: hsla(213, 93%, 94%, 0.61);
  --cpd-color-alpha-gray-1100: hsla(215, 92%, 95%, 0.68);
  --cpd-color-alpha-gray-1200: hsla(215, 74%, 96%, 0.79);
  --cpd-color-alpha-gray-1300: hsla(213, 73%, 97%, 0.89);
  --cpd-color-alpha-gray-1400: hsla(214, 78%, 98%, 0.95);
  --cpd-color-alpha-red-100: hsl(0, 100%, 11%, 1);
  --cpd-color-alpha-red-200: hsl(0, 100%, 12%, 1);
  --cpd-color-alpha-red-300: hsl(0, 100%, 14%, 1);
  --cpd-color-alpha-red-400: hsl(0, 100%, 18%, 1);
  --cpd-color-alpha-red-500: hsl(0, 100%, 22%, 1);
  --cpd-color-alpha-red-600: hsl(356, 100%, 26%, 1);
  --cpd-color-alpha-red-700: hsla(354, 99%, 52%, 0.6);
  --cpd-color-alpha-red-800: hsla(357, 99%, 57%, 0.81);
  --cpd-color-alpha-red-900: hsl(1, 98%, 61%, 1);
  --cpd-color-alpha-red-1000: hsl(3, 100%, 68%, 1);
  --cpd-color-alpha-red-1100: hsl(5, 100%, 74%, 1);
  --cpd-color-alpha-red-1200: hsl(7, 100%, 82%, 1);
  --cpd-color-alpha-red-1300: hsl(8, 100%, 90%, 1);
  --cpd-color-alpha-red-1400: hsl(7, 100%, 95%, 1);
  --cpd-color-alpha-orange-100: hsl(0, 100%, 11%, 1);
  --cpd-color-alpha-orange-200: hsl(0, 100%, 12%, 1);
  --cpd-color-alpha-orange-300: hsl(0, 100%, 14%, 1);
  --cpd-color-alpha-orange-400: hsl(0, 100%, 17%, 1);
  --cpd-color-alpha-orange-500: hsl(0, 100%, 22%, 1);
  --cpd-color-alpha-orange-600: hsl(2, 100%, 26%, 1);
  --cpd-color-alpha-orange-700: hsla(12, 100%, 39%, 0.74);
  --cpd-color-alpha-orange-800: hsla(21, 100%, 50%, 0.71);
  --cpd-color-alpha-orange-900: hsla(26, 99%, 52%, 0.85);
  --cpd-color-alpha-orange-1000: hsla(29, 99%, 53%, 0.92);
  --cpd-color-alpha-orange-1100: hsla(27, 98%, 62%, 0.97);
  --cpd-color-alpha-orange-1200: hsla(26, 97%, 75%, 0.99);
  --cpd-color-alpha-orange-1300: hsl(24, 100%, 86%, 1);
  --cpd-color-alpha-orange-1400: hsl(25, 100%, 93%, 1);
  --cpd-color-alpha-yellow-100: hsl(0, 100%, 11%, 1);
  --cpd-color-alpha-yellow-200: hsl(3, 100%, 11%, 1);
  --cpd-color-alpha-yellow-300: hsl(8, 100%, 13%, 1);
  --cpd-color-alpha-yellow-400: hsl(16, 100%, 15%, 1);
  --cpd-color-alpha-yellow-500: hsl(23, 100%, 18%, 1);
  --cpd-color-alpha-yellow-600: hsla(26, 100%, 23%, 0.87);
  --cpd-color-alpha-yellow-700: hsla(30, 100%, 26%, 0.92);
  --cpd-color-alpha-yellow-800: hsl(35, 100%, 31%, 1);
  --cpd-color-alpha-yellow-900: hsl(39, 100%, 37%, 1);
  --cpd-color-alpha-yellow-1000: hsl(41, 100%, 40%, 1);
  --cpd-color-alpha-yellow-1100: hsl(44, 100%, 43%, 1);
  --cpd-color-alpha-yellow-1200: hsla(46, 98%, 52%, 0.94);
  --cpd-color-alpha-yellow-1300: hsl(47, 99%, 67%, 1);
  --cpd-color-alpha-yellow-1400: hsl(46, 100%, 85%, 1);
  --cpd-color-alpha-lime-100: hsl(120, 100%, 5%, 1);
  --cpd-color-alpha-lime-200: hsl(120, 100%, 6%, 1);
  --cpd-color-alpha-lime-300: hsl(120, 100%, 8%, 1);
  --cpd-color-alpha-lime-400: hsl(120, 100%, 9%, 1);
  --cpd-color-alpha-lime-500: hsl(120, 100%, 12%, 1);
  --cpd-color-alpha-lime-600: hsl(120, 100%, 15%, 1);
  --cpd-color-alpha-lime-700: hsl(120, 100%, 18%, 1);
  --cpd-color-alpha-lime-800: hsla(112, 98%, 52%, 0.45);
  --cpd-color-alpha-lime-900: hsla(107, 98%, 57%, 0.58);
  --cpd-color-alpha-lime-1000: hsla(105, 97%, 58%, 0.66);
  --cpd-color-alpha-lime-1100: hsla(102, 98%, 60%, 0.74);
  --cpd-color-alpha-lime-1200: hsla(102, 100%, 68%, 0.84);
  --cpd-color-alpha-lime-1300: hsla(104, 100%, 84%, 0.92);
  --cpd-color-alpha-lime-1400: hsla(105, 91%, 92%, 0.97);
  --cpd-color-alpha-green-100: hsl(144, 100%, 6%, 1);
  --cpd-color-alpha-green-200: hsl(147, 100%, 6%, 1);
  --cpd-color-alpha-green-300: hsl(151, 100%, 7%, 1);
  --cpd-color-alpha-green-400: hsl(155, 100%, 9%, 1);
  --cpd-color-alpha-green-500: hsl(160, 100%, 12%, 1);
  --cpd-color-alpha-green-600: hsl(162, 100%, 14%, 1);
  --cpd-color-alpha-green-700: hsl(165, 100%, 18%, 1);
  --cpd-color-alpha-green-800: hsl(168, 100%, 24%, 1);
  --cpd-color-alpha-green-900: hsla(164, 98%, 53%, 0.58);
  --cpd-color-alpha-green-1000: hsla(163, 99%, 55%, 0.65);
  --cpd-color-alpha-green-1100: hsla(162, 98%, 57%, 0.74);
  --cpd-color-alpha-green-1200: hsla(156, 97%, 76%, 0.83);
  --cpd-color-alpha-green-1300: hsla(152, 93%, 88%, 0.91);
  --cpd-color-alpha-green-1400: hsla(152, 88%, 94%, 0.96);
  --cpd-color-alpha-cyan-100: hsl(225, 100%, 13%, 1);
  --cpd-color-alpha-cyan-200: hsl(223, 100%, 14%, 1);
  --cpd-color-alpha-cyan-300: hsl(219, 100%, 15%, 1);
  --cpd-color-alpha-cyan-400: hsl(215, 100%, 18%, 1);
  --cpd-color-alpha-cyan-500: hsl(210, 100%, 20%, 1);
  --cpd-color-alpha-cyan-600: hsl(208, 100%, 23%, 1);
  --cpd-color-alpha-cyan-700: hsl(204, 100%, 27%, 1);
  --cpd-color-alpha-cyan-800: hsla(200, 100%, 37%, 0.88);
  --cpd-color-alpha-cyan-900: hsl(194, 100%, 37%, 1);
  --cpd-color-alpha-cyan-1000: hsla(189, 100%, 44%, 0.88);
  --cpd-color-alpha-cyan-1100: hsla(186, 98%, 57%, 0.79);
  --cpd-color-alpha-cyan-1200: hsla(187, 100%, 77%, 0.85);
  --cpd-color-alpha-cyan-1300: hsla(187, 93%, 89%, 0.92);
  --cpd-color-alpha-cyan-1400: hsla(187, 93%, 94%, 0.96);
  --cpd-color-alpha-blue-100: hsl(237, 100%, 18%, 1);
  --cpd-color-alpha-blue-200: hsl(234, 100%, 18%, 1);
  --cpd-color-alpha-blue-300: hsl(229, 100%, 20%, 1);
  --cpd-color-alpha-blue-400: hsl(224, 100%, 22%, 1);
  --cpd-color-alpha-blue-500: hsla(221, 100%, 37%, 0.63);
  --cpd-color-alpha-blue-600: hsla(219, 99%, 50%, 0.53);
  --cpd-color-alpha-blue-700: hsla(217, 99%, 51%, 0.64);
  --cpd-color-alpha-blue-800: hsla(214, 99%, 53%, 0.84);
  --cpd-color-alpha-blue-900: hsla(215, 98%, 63%, 0.92);
  --cpd-color-alpha-blue-1000: hsla(216, 99%, 69%, 0.94);
  --cpd-color-alpha-blue-1100: hsla(215, 97%, 74%, 0.96);
  --cpd-color-alpha-blue-1200: hsla(216, 100%, 82%, 0.97);
  --cpd-color-alpha-blue-1300: hsla(216, 96%, 90%, 0.99);
  --cpd-color-alpha-blue-1400: hsl(217, 93%, 95%, 1);
  --cpd-color-alpha-purple-100: hsl(258, 100%, 17%, 1);
  --cpd-color-alpha-purple-200: hsl(259, 100%, 18%, 1);
  --cpd-color-alpha-purple-300: hsl(259, 100%, 21%, 1);
  --cpd-color-alpha-purple-400: hsl(261, 100%, 25%, 1);
  --cpd-color-alpha-purple-500: hsl(263, 100%, 31%, 1);
  --cpd-color-alpha-purple-600: hsla(263, 98%, 52%, 0.67);
  --cpd-color-alpha-purple-700: hsla(260, 98%, 58%, 0.76);
  --cpd-color-alpha-purple-800: hsla(257, 100%, 65%, 0.92);
  --cpd-color-alpha-purple-900: hsla(254, 99%, 72%, 0.98);
  --cpd-color-alpha-purple-1000: hsla(252, 98%, 77%, 0.99);
  --cpd-color-alpha-purple-1100: hsl(250, 98%, 80%, 1);
  --cpd-color-alpha-purple-1200: hsl(249, 100%, 87%, 1);
  --cpd-color-alpha-purple-1300: hsl(246, 100%, 93%, 1);
  --cpd-color-alpha-purple-1400: hsl(249, 100%, 96%, 1);
  --cpd-color-alpha-fuchsia-100: hsl(279, 100%, 12%, 1);
  --cpd-color-alpha-fuchsia-200: hsl(281, 100%, 13%, 1);
  --cpd-color-alpha-fuchsia-300: hsl(282, 100%, 15%, 1);
  --cpd-color-alpha-fuchsia-400: hsl(285, 100%, 18%, 1);
  --cpd-color-alpha-fuchsia-500: hsla(287, 100%, 52%, 0.38);
  --cpd-color-alpha-fuchsia-600: hsla(288, 100%, 56%, 0.44);
  --cpd-color-alpha-fuchsia-700: hsla(289, 99%, 59%, 0.54);
  --cpd-color-alpha-fuchsia-800: hsla(294, 98%, 63%, 0.71);
  --cpd-color-alpha-fuchsia-900: hsla(295, 97%, 72%, 0.8);
  --cpd-color-alpha-fuchsia-1000: hsla(296, 98%, 78%, 0.83);
  --cpd-color-alpha-fuchsia-1100: hsla(297, 98%, 82%, 0.86);
  --cpd-color-alpha-fuchsia-1200: hsla(296, 97%, 88%, 0.91);
  --cpd-color-alpha-fuchsia-1300: hsla(296, 100%, 94%, 0.95);
  --cpd-color-alpha-fuchsia-1400: hsla(296, 90%, 96%, 0.98);
  --cpd-color-alpha-pink-100: hsl(344, 100%, 11%, 1);
  --cpd-color-alpha-pink-200: hsl(342, 100%, 12%, 1);
  --cpd-color-alpha-pink-300: hsl(339, 100%, 14%, 1);
  --cpd-color-alpha-pink-400: hsl(335, 100%, 17%, 1);
  --cpd-color-alpha-pink-500: hsl(330, 100%, 21%, 1);
  --cpd-color-alpha-pink-600: hsla(333, 97%, 50%, 0.46);
  --cpd-color-alpha-pink-700: hsla(334, 98%, 53%, 0.58);
  --cpd-color-alpha-pink-800: hsla(335, 99%, 55%, 0.8);
  --cpd-color-alpha-pink-900: hsla(340, 99%, 63%, 0.96);
  --cpd-color-alpha-pink-1000: hsla(343, 100%, 70%, 0.98);
  --cpd-color-alpha-pink-1100: hsl(345, 98%, 76%, 1);
  --cpd-color-alpha-pink-1200: hsl(346, 100%, 84%, 1);
  --cpd-color-alpha-pink-1300: hsl(347, 100%, 91%, 1);
  --cpd-color-alpha-pink-1400: hsl(347, 100%, 96%, 1);
  --cpd-color-transparent: rgba(0,0,0,0);
}
}
}
}
@layer compound{
@media screen{
@layer cpd-semantic{
.cpd-theme-dark.cpd-theme-dark {
  --cpd-color-bg-canvas-default-level-1: var(--cpd-color-gray-300);
  --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-theme-bg);
  --cpd-color-bg-badge-accent: var(--cpd-color-alpha-green-500);
  --cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-500);
  --cpd-color-bg-badge-default: var(--cpd-color-alpha-gray-500);
  --cpd-color-gradient-action-stop1: var(--cpd-color-green-1100);
  --cpd-color-gradient-action-stop2: var(--cpd-color-green-900);
  --cpd-color-gradient-action-stop3: var(--cpd-color-green-700);
  --cpd-color-gradient-action-stop4: var(--cpd-color-green-500);
  --cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
}
}
}
}
@layer compound{
@media screen and (prefers-color-scheme: dark){
@layer cpd-semantic{
:root {
  --cpd-color-bg-canvas-default-level-1: var(--cpd-color-gray-300);
  --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-theme-bg);
  --cpd-color-bg-badge-accent: var(--cpd-color-alpha-green-500);
  --cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-500);
  --cpd-color-bg-badge-default: var(--cpd-color-alpha-gray-500);
  --cpd-color-gradient-action-stop1: var(--cpd-color-green-1100);
  --cpd-color-gradient-action-stop2: var(--cpd-color-green-900);
  --cpd-color-gradient-action-stop3: var(--cpd-color-green-700);
  --cpd-color-gradient-action-stop4: var(--cpd-color-green-500);
  --cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
}
}
}
}
@layer compound{
@media screen{
@layer cpd-base{
.cpd-theme-dark-hc.cpd-theme-dark-hc {
  --cpd-color-theme-bg: #101317;
  --cpd-color-gray-100: #181a1f;
  --cpd-color-gray-200: #1d1f24;
  --cpd-color-gray-300: #26282d;
  --cpd-color-gray-400: #2b2e33;
  --cpd-color-gray-500: #3c3f44;
  --cpd-color-gray-600: #4a4f55;
  --cpd-color-gray-700: #606770;
  --cpd-color-gray-800: #79818d;
  --cpd-color-gray-900: #acb4bd;
  --cpd-color-gray-1000: #b8bfc7;
  --cpd-color-gray-1100: #c8ced5;
  --cpd-color-gray-1200: #d5dae1;
  --cpd-color-gray-1300: #ebeef2;
  --cpd-color-gray-1400: #f2f5f7;
  --cpd-color-red-100: #3e0000;
  --cpd-color-red-200: #470000;
  --cpd-color-red-300: #590000;
  --cpd-color-red-400: #640000;
  --cpd-color-red-500: #830009;
  --cpd-color-red-600: #9f0d1e;
  --cpd-color-red-700: #c81e28;
  --cpd-color-red-800: #f52f33;
  --cpd-color-red-900: #ff968c;
  --cpd-color-red-1000: #ffa79d;
  --cpd-color-red-1100: #ffbdb5;
  --cpd-color-red-1200: #ffcfc8;
  --cpd-color-red-1300: #ffe9e6;
  --cpd-color-red-1400: #fff2ef;
  --cpd-color-orange-100: #3c0000;
  --cpd-color-orange-200: #470000;
  --cpd-color-orange-300: #580000;
  --cpd-color-orange-400: #650000;
  --cpd-color-orange-500: #830500;
  --cpd-color-orange-600: #972206;
  --cpd-color-orange-700: #b44007;
  --cpd-color-orange-800: #d15f0b;
  --cpd-color-orange-900: #f89d58;
  --cpd-color-orange-1000: #faad73;
  --cpd-color-orange-1100: #fdc197;
  --cpd-color-orange-1200: #fed0b1;
  --cpd-color-orange-1300: #ffeadb;
  --cpd-color-orange-1400: #fff2ea;
  --cpd-color-yellow-100: #3a0300;
  --cpd-color-yellow-200: #410900;
  --cpd-color-yellow-300: #4c1400;
  --cpd-color-yellow-400: #541d00;
  --cpd-color-yellow-500: #682e03;
  --cpd-color-yellow-600: #7c3e02;
  --cpd-color-yellow-700: #985600;
  --cpd-color-yellow-800: #b47200;
  --cpd-color-yellow-900: #e3aa00;
  --cpd-color-yellow-1000: #ebb607;
  --cpd-color-yellow-1100: #f7c816;
  --cpd-color-yellow-1200: #fed632;
  --cpd-color-yellow-1300: #ffedb1;
  --cpd-color-yellow-1400: #fff4d0;
  --cpd-color-lime-100: #002000;
  --cpd-color-lime-200: #002600;
  --cpd-color-lime-300: #003000;
  --cpd-color-lime-400: #003700;
  --cpd-color-lime-500: #004a00;
  --cpd-color-lime-600: #005c00;
  --cpd-color-lime-700: #187611;
  --cpd-color-lime-800: #31941d;
  --cpd-color-lime-900: #5eca2f;
  --cpd-color-lime-1000: #6ad639;
  --cpd-color-lime-1100: #92e175;
  --cpd-color-lime-1200: #afe99a;
  --cpd-color-lime-1300: #daf6d0;
  --cpd-color-lime-1400: #e9f9e3;
  --cpd-color-green-100: #001f0e;
  --cpd-color-green-200: #002513;
  --cpd-color-green-300: #002e1b;
  --cpd-color-green-400: #003622;
  --cpd-color-green-500: #004832;
  --cpd-color-green-600: #005a43;
  --cpd-color-green-700: #00745c;
  --cpd-color-green-800: #109173;
  --cpd-color-green-900: #37c998;
  --cpd-color-green-1000: #61d2a6;
  --cpd-color-green-1100: #8fddbc;
  --cpd-color-green-1200: #ace6cc;
  --cpd-color-green-1300: #d9f4e7;
  --cpd-color-green-1400: #e9f8f1;
  --cpd-color-cyan-100: #001448;
  --cpd-color-cyan-200: #001b4e;
  --cpd-color-cyan-300: #002559;
  --cpd-color-cyan-400: #002d61;
  --cpd-color-cyan-500: #003f75;
  --cpd-color-cyan-600: #005188;
  --cpd-color-cyan-700: #006ca4;
  --cpd-color-cyan-800: #008aba;
  --cpd-color-cyan-900: #46c3d2;
  --cpd-color-cyan-1000: #6bccd9;
  --cpd-color-cyan-1100: #93d9e2;
  --cpd-color-cyan-1200: #afe2e9;
  --cpd-color-cyan-1300: #dbf2f5;
  --cpd-color-cyan-1400: #eaf7f9;
  --cpd-color-blue-100: #00095d;
  --cpd-color-blue-200: #001264;
  --cpd-color-blue-300: #001e6f;
  --cpd-color-blue-400: #032677;
  --cpd-color-blue-500: #083891;
  --cpd-color-blue-600: #0b49ab;
  --cpd-color-blue-700: #0e61d1;
  --cpd-color-blue-800: #337fe9;
  --cpd-color-blue-900: #89b5f6;
  --cpd-color-blue-1000: #9ac0f8;
  --cpd-color-blue-1100: #b2cffa;
  --cpd-color-blue-1200: #c5dbfc;
  --cpd-color-blue-1300: #e4eefe;
  --cpd-color-blue-1400: #eff5fe;
  --cpd-color-purple-100: #1c005a;
  --cpd-color-purple-200: #22006a;
  --cpd-color-purple-300: #2c0080;
  --cpd-color-purple-400: #350090;
  --cpd-color-purple-500: #4a0db1;
  --cpd-color-purple-600: #5a27c6;
  --cpd-color-purple-700: #7343e6;
  --cpd-color-purple-800: #8b66f8;
  --cpd-color-purple-900: #b6a7ff;
  --cpd-color-purple-1000: #c0b5ff;
  --cpd-color-purple-1100: #cec7ff;
  --cpd-color-purple-1200: #dad5ff;
  --cpd-color-purple-1300: #eeebff;
  --cpd-color-purple-1400: #f5f3ff;
  --cpd-color-fuchsia-100: #2e0044;
  --cpd-color-fuchsia-200: #37004e;
  --cpd-color-fuchsia-300: #46005e;
  --cpd-color-fuchsia-400: #4f0368;
  --cpd-color-fuchsia-500: #65177d;
  --cpd-color-fuchsia-600: #7d2394;
  --cpd-color-fuchsia-700: #a233b3;
  --cpd-color-fuchsia-800: #c153cb;
  --cpd-color-fuchsia-900: #dd9de3;
  --cpd-color-fuchsia-1000: #e3abe7;
  --cpd-color-fuchsia-1100: #eac0ed;
  --cpd-color-fuchsia-1200: #f0cff2;
  --cpd-color-fuchsia-1300: #f8e9f9;
  --cpd-color-fuchsia-1400: #fbf1fb;
  --cpd-color-pink-100: #3c0012;
  --cpd-color-pink-200: #450018;
  --cpd-color-pink-300: #550024;
  --cpd-color-pink-400: #61002d;
  --cpd-color-pink-500: #7c0c41;
  --cpd-color-pink-600: #99114f;
  --cpd-color-pink-700: #c51761;
  --cpd-color-pink-800: #f12c75;
  --cpd-color-pink-900: #ff92ac;
  --cpd-color-pink-1000: #ffa4b9;
  --cpd-color-pink-1100: #ffbbca;
  --cpd-color-pink-1200: #ffccd7;
  --cpd-color-pink-1300: #ffe8ed;
  --cpd-color-pink-1400: #fff1f4;
  --cpd-color-alpha-gray-100: hsla(286, 31%, 82%, 0.04);
  --cpd-color-alpha-gray-200: hsla(280, 41%, 90%, 0.06);
  --cpd-color-alpha-gray-300: hsla(270, 37%, 93%, 0.1);
  --cpd-color-alpha-gray-400: hsla(227, 29%, 91%, 0.13);
  --cpd-color-alpha-gray-500: hsla(225, 46%, 95%, 0.2);
  --cpd-color-alpha-gray-600: hsla(213, 85%, 95%, 0.27);
  --cpd-color-alpha-gray-700: hsla(214, 79%, 93%, 0.39);
  --cpd-color-alpha-gray-800: hsla(216, 94%, 93%, 0.51);
  --cpd-color-alpha-gray-900: hsla(211, 91%, 96%, 0.72);
  --cpd-color-alpha-gray-1000: hsla(213, 100%, 97%, 0.76);
  --cpd-color-alpha-gray-1100: hsla(212, 100%, 97%, 0.82);
  --cpd-color-alpha-gray-1200: hsla(217, 77%, 97%, 0.88);
  --cpd-color-alpha-gray-1300: hsla(214, 78%, 98%, 0.95);
  --cpd-color-alpha-gray-1400: hsla(204, 71%, 99%, 0.97);
  --cpd-color-alpha-red-100: hsl(0, 100%, 12%, 1);
  --cpd-color-alpha-red-200: hsl(0, 100%, 14%, 1);
  --cpd-color-alpha-red-300: hsl(0, 100%, 18%, 1);
  --cpd-color-alpha-red-400: hsl(0, 100%, 20%, 1);
  --cpd-color-alpha-red-500: hsl(356, 100%, 26%, 1);
  --cpd-color-alpha-red-600: hsla(354, 99%, 52%, 0.6);
  --cpd-color-alpha-red-700: hsla(357, 100%, 57%, 0.77);
  --cpd-color-alpha-red-800: hsla(359, 100%, 59%, 0.96);
  --cpd-color-alpha-red-900: hsl(5, 100%, 78%, 1);
  --cpd-color-alpha-red-1000: hsl(6, 100%, 81%, 1);
  --cpd-color-alpha-red-1100: hsl(6, 100%, 86%, 1);
  --cpd-color-alpha-red-1200: hsl(8, 100%, 89%, 1);
  --cpd-color-alpha-red-1300: hsl(7, 100%, 95%, 1);
  --cpd-color-alpha-red-1400: hsl(11, 100%, 97%, 1);
  --cpd-color-alpha-orange-100: hsl(0, 100%, 12%, 1);
  --cpd-color-alpha-orange-200: hsl(0, 100%, 14%, 1);
  --cpd-color-alpha-orange-300: hsl(0, 100%, 17%, 1);
  --cpd-color-alpha-orange-400: hsl(0, 100%, 20%, 1);
  --cpd-color-alpha-orange-500: hsl(2, 100%, 26%, 1);
  --cpd-color-alpha-orange-600: hsla(12, 100%, 39%, 0.74);
  --cpd-color-alpha-orange-700: hsla(20, 100%, 49%, 0.7);
  --cpd-color-alpha-orange-800: hsla(26, 99%, 51%, 0.81);
  --cpd-color-alpha-orange-900: hsla(26, 98%, 67%, 0.98);
  --cpd-color-alpha-orange-1000: hsla(26, 100%, 73%, 0.98);
  --cpd-color-alpha-orange-1100: hsl(25, 96%, 79%, 1);
  --cpd-color-alpha-orange-1200: hsl(24, 98%, 85%, 1);
  --cpd-color-alpha-orange-1300: hsl(25, 100%, 93%, 1);
  --cpd-color-alpha-orange-1400: hsl(23, 100%, 96%, 1);
  --cpd-color-alpha-yellow-100: hsl(3, 100%, 11%, 1);
  --cpd-color-alpha-yellow-200: hsl(8, 100%, 13%, 1);
  --cpd-color-alpha-yellow-300: hsl(16, 100%, 15%, 1);
  --cpd-color-alpha-yellow-400: hsl(21, 100%, 17%, 1);
  --cpd-color-alpha-yellow-500: hsla(26, 100%, 23%, 0.87);
  --cpd-color-alpha-yellow-600: hsla(30, 100%, 26%, 0.92);
  --cpd-color-alpha-yellow-700: hsl(34, 100%, 30%, 1);
  --cpd-color-alpha-yellow-800: hsl(38, 100%, 35%, 1);
  --cpd-color-alpha-yellow-900: hsl(45, 100%, 45%, 1);
  --cpd-color-alpha-yellow-1000: hsla(46, 99%, 51%, 0.92);
  --cpd-color-alpha-yellow-1100: hsla(48, 99%, 54%, 0.97);
  --cpd-color-alpha-yellow-1200: hsl(48, 99%, 60%, 1);
  --cpd-color-alpha-yellow-1300: hsl(46, 100%, 85%, 1);
  --cpd-color-alpha-yellow-1400: hsl(46, 100%, 91%, 1);
  --cpd-color-alpha-lime-100: hsl(120, 100%, 6%, 1);
  --cpd-color-alpha-lime-200: hsl(120, 100%, 8%, 1);
  --cpd-color-alpha-lime-300: hsl(120, 100%, 9%, 1);
  --cpd-color-alpha-lime-400: hsl(120, 100%, 11%, 1);
  --cpd-color-alpha-lime-500: hsl(120, 100%, 15%, 1);
  --cpd-color-alpha-lime-600: hsl(120, 100%, 18%, 1);
  --cpd-color-alpha-lime-700: hsla(114, 100%, 52%, 0.42);
  --cpd-color-alpha-lime-800: hsla(109, 99%, 57%, 0.55);
  --cpd-color-alpha-lime-900: hsla(101, 99%, 60%, 0.78);
  --cpd-color-alpha-lime-1000: hsla(101, 99%, 62%, 0.83);
  --cpd-color-alpha-lime-1100: hsla(103, 97%, 75%, 0.88);
  --cpd-color-alpha-lime-1200: hsla(103, 98%, 83%, 0.91);
  --cpd-color-alpha-lime-1300: hsla(105, 91%, 92%, 0.97);
  --cpd-color-alpha-lime-1400: hsla(104, 92%, 95%, 0.98);
  --cpd-color-alpha-green-100: hsl(147, 100%, 6%, 1);
  --cpd-color-alpha-green-200: hsl(151, 100%, 7%, 1);
  --cpd-color-alpha-green-300: hsl(155, 100%, 9%, 1);
  --cpd-color-alpha-green-400: hsl(158, 100%, 11%, 1);
  --cpd-color-alpha-green-500: hsl(162, 100%, 14%, 1);
  --cpd-color-alpha-green-600: hsl(165, 100%, 18%, 1);
  --cpd-color-alpha-green-700: hsl(168, 100%, 23%, 1);
  --cpd-color-alpha-green-800: hsla(165, 98%, 53%, 0.54);
  --cpd-color-alpha-green-900: hsla(159, 97%, 62%, 0.78);
  --cpd-color-alpha-green-1000: hsla(156, 100%, 73%, 0.81);
  --cpd-color-alpha-green-1100: hsla(154, 98%, 82%, 0.86);
  --cpd-color-alpha-green-1200: hsla(153, 94%, 87%, 0.9);
  --cpd-color-alpha-green-1300: hsla(152, 88%, 94%, 0.96);
  --cpd-color-alpha-green-1400: hsla(150, 80%, 96%, 0.98);
  --cpd-color-alpha-cyan-100: hsl(223, 100%, 14%, 1);
  --cpd-color-alpha-cyan-200: hsl(219, 100%, 15%, 1);
  --cpd-color-alpha-cyan-300: hsl(215, 100%, 18%, 1);
  --cpd-color-alpha-cyan-400: hsl(212, 100%, 19%, 1);
  --cpd-color-alpha-cyan-500: hsl(208, 100%, 23%, 1);
  --cpd-color-alpha-cyan-600: hsl(204, 100%, 27%, 1);
  --cpd-color-alpha-cyan-700: hsl(200, 100%, 32%, 1);
  --cpd-color-alpha-cyan-800: hsl(195, 100%, 37%, 1);
  --cpd-color-alpha-cyan-900: hsla(186, 99%, 66%, 0.81);
  --cpd-color-alpha-cyan-1000: hsla(187, 99%, 74%, 0.84);
  --cpd-color-alpha-cyan-1100: hsla(187, 98%, 82%, 0.88);
  --cpd-color-alpha-cyan-1200: hsla(188, 97%, 87%, 0.91);
  --cpd-color-alpha-cyan-1300: hsla(187, 93%, 94%, 0.96);
  --cpd-color-alpha-cyan-1400: hsla(187, 89%, 97%, 0.98);
  --cpd-color-alpha-blue-100: hsl(234, 100%, 18%, 1);
  --cpd-color-alpha-blue-200: hsl(229, 100%, 20%, 1);
  --cpd-color-alpha-blue-300: hsl(224, 100%, 22%, 1);
  --cpd-color-alpha-blue-400: hsla(222, 100%, 28%, 0.82);
  --cpd-color-alpha-blue-500: hsla(219, 99%, 50%, 0.53);
  --cpd-color-alpha-blue-600: hsla(217, 99%, 51%, 0.64);
  --cpd-color-alpha-blue-700: hsla(215, 98%, 52%, 0.81);
  --cpd-color-alpha-blue-800: hsla(215, 99%, 60%, 0.91);
  --cpd-color-alpha-blue-900: hsla(216, 97%, 77%, 0.97);
  --cpd-color-alpha-blue-1000: hsla(216, 100%, 81%, 0.97);
  --cpd-color-alpha-blue-1100: hsla(216, 100%, 86%, 0.98);
  --cpd-color-alpha-blue-1200: hsla(216, 97%, 89%, 0.99);
  --cpd-color-alpha-blue-1300: hsl(217, 93%, 95%, 1);
  --cpd-color-alpha-blue-1400: hsl(216, 88%, 97%, 1);
  --cpd-color-alpha-purple-100: hsl(259, 100%, 18%, 1);
  --cpd-color-alpha-purple-200: hsl(259, 100%, 21%, 1);
  --cpd-color-alpha-purple-300: hsl(261, 100%, 25%, 1);
  --cpd-color-alpha-purple-400: hsl(262, 100%, 28%, 1);
  --cpd-color-alpha-purple-500: hsla(263, 98%, 52%, 0.67);
  --cpd-color-alpha-purple-600: hsla(260, 98%, 58%, 0.76);
  --cpd-color-alpha-purple-700: hsla(258, 98%, 64%, 0.9);
  --cpd-color-alpha-purple-800: hsla(255, 100%, 71%, 0.97);
  --cpd-color-alpha-purple-900: hsl(250, 100%, 83%, 1);
  --cpd-color-alpha-purple-1000: hsl(249, 100%, 86%, 1);
  --cpd-color-alpha-purple-1100: hsl(248, 100%, 89%, 1);
  --cpd-color-alpha-purple-1200: hsl(247, 100%, 92%, 1);
  --cpd-color-alpha-purple-1300: hsl(249, 100%, 96%, 1);
  --cpd-color-alpha-purple-1400: hsl(250, 100%, 98%, 1);
  --cpd-color-alpha-fuchsia-100: hsl(281, 100%, 13%, 1);
  --cpd-color-alpha-fuchsia-200: hsl(282, 100%, 15%, 1);
  --cpd-color-alpha-fuchsia-300: hsl(285, 100%, 18%, 1);
  --cpd-color-alpha-fuchsia-400: hsla(286, 100%, 23%, 0.85);
  --cpd-color-alpha-fuchsia-500: hsla(288, 100%, 56%, 0.44);
  --cpd-color-alpha-fuchsia-600: hsla(289, 99%, 59%, 0.54);
  --cpd-color-alpha-fuchsia-700: hsla(293, 97%, 62%, 0.68);
  --cpd-color-alpha-fuchsia-800: hsla(296, 99%, 70%, 0.78);
  --cpd-color-alpha-fuchsia-900: hsla(295, 100%, 85%, 0.88);
  --cpd-color-alpha-fuchsia-1000: hsla(296, 97%, 87%, 0.9);
  --cpd-color-alpha-fuchsia-1100: hsla(296, 92%, 90%, 0.93);
  --cpd-color-alpha-fuchsia-1200: hsla(297, 95%, 92%, 0.95);
  --cpd-color-alpha-fuchsia-1300: hsla(296, 90%, 96%, 0.98);
  --cpd-color-alpha-fuchsia-1400: hsla(300, 71%, 97%, 0.99);
  --cpd-color-alpha-pink-100: hsl(342, 100%, 12%, 1);
  --cpd-color-alpha-pink-200: hsl(339, 100%, 14%, 1);
  --cpd-color-alpha-pink-300: hsl(335, 100%, 17%, 1);
  --cpd-color-alpha-pink-400: hsl(332, 100%, 19%, 1);
  --cpd-color-alpha-pink-500: hsla(333, 97%, 50%, 0.46);
  --cpd-color-alpha-pink-600: hsla(334, 98%, 53%, 0.58);
  --cpd-color-alpha-pink-700: hsla(335, 99%, 55%, 0.76);
  --cpd-color-alpha-pink-800: hsla(338, 98%, 58%, 0.95);
  --cpd-color-alpha-pink-900: hsl(346, 100%, 79%, 1);
  --cpd-color-alpha-pink-1000: hsl(346, 100%, 82%, 1);
  --cpd-color-alpha-pink-1100: hsl(347, 100%, 87%, 1);
  --cpd-color-alpha-pink-1200: hsl(347, 100%, 90%, 1);
  --cpd-color-alpha-pink-1300: hsl(347, 100%, 96%, 1);
  --cpd-color-alpha-pink-1400: hsl(347, 100%, 97%, 1);
  --cpd-color-transparent: rgba(0,0,0,0);
}
}
}
}
@layer compound{
@media screen and (prefers-color-scheme: dark) and (prefers-contrast: more){
@layer cpd-base{
:root {
  --cpd-color-theme-bg: #101317;
  --cpd-color-gray-100: #181a1f;
  --cpd-color-gray-200: #1d1f24;
  --cpd-color-gray-300: #26282d;
  --cpd-color-gray-400: #2b2e33;
  --cpd-color-gray-500: #3c3f44;
  --cpd-color-gray-600: #4a4f55;
  --cpd-color-gray-700: #606770;
  --cpd-color-gray-800: #79818d;
  --cpd-color-gray-900: #acb4bd;
  --cpd-color-gray-1000: #b8bfc7;
  --cpd-color-gray-1100: #c8ced5;
  --cpd-color-gray-1200: #d5dae1;
  --cpd-color-gray-1300: #ebeef2;
  --cpd-color-gray-1400: #f2f5f7;
  --cpd-color-red-100: #3e0000;
  --cpd-color-red-200: #470000;
  --cpd-color-red-300: #590000;
  --cpd-color-red-400: #640000;
  --cpd-color-red-500: #830009;
  --cpd-color-red-600: #9f0d1e;
  --cpd-color-red-700: #c81e28;
  --cpd-color-red-800: #f52f33;
  --cpd-color-red-900: #ff968c;
  --cpd-color-red-1000: #ffa79d;
  --cpd-color-red-1100: #ffbdb5;
  --cpd-color-red-1200: #ffcfc8;
  --cpd-color-red-1300: #ffe9e6;
  --cpd-color-red-1400: #fff2ef;
  --cpd-color-orange-100: #3c0000;
  --cpd-color-orange-200: #470000;
  --cpd-color-orange-300: #580000;
  --cpd-color-orange-400: #650000;
  --cpd-color-orange-500: #830500;
  --cpd-color-orange-600: #972206;
  --cpd-color-orange-700: #b44007;
  --cpd-color-orange-800: #d15f0b;
  --cpd-color-orange-900: #f89d58;
  --cpd-color-orange-1000: #faad73;
  --cpd-color-orange-1100: #fdc197;
  --cpd-color-orange-1200: #fed0b1;
  --cpd-color-orange-1300: #ffeadb;
  --cpd-color-orange-1400: #fff2ea;
  --cpd-color-yellow-100: #3a0300;
  --cpd-color-yellow-200: #410900;
  --cpd-color-yellow-300: #4c1400;
  --cpd-color-yellow-400: #541d00;
  --cpd-color-yellow-500: #682e03;
  --cpd-color-yellow-600: #7c3e02;
  --cpd-color-yellow-700: #985600;
  --cpd-color-yellow-800: #b47200;
  --cpd-color-yellow-900: #e3aa00;
  --cpd-color-yellow-1000: #ebb607;
  --cpd-color-yellow-1100: #f7c816;
  --cpd-color-yellow-1200: #fed632;
  --cpd-color-yellow-1300: #ffedb1;
  --cpd-color-yellow-1400: #fff4d0;
  --cpd-color-lime-100: #002000;
  --cpd-color-lime-200: #002600;
  --cpd-color-lime-300: #003000;
  --cpd-color-lime-400: #003700;
  --cpd-color-lime-500: #004a00;
  --cpd-color-lime-600: #005c00;
  --cpd-color-lime-700: #187611;
  --cpd-color-lime-800: #31941d;
  --cpd-color-lime-900: #5eca2f;
  --cpd-color-lime-1000: #6ad639;
  --cpd-color-lime-1100: #92e175;
  --cpd-color-lime-1200: #afe99a;
  --cpd-color-lime-1300: #daf6d0;
  --cpd-color-lime-1400: #e9f9e3;
  --cpd-color-green-100: #001f0e;
  --cpd-color-green-200: #002513;
  --cpd-color-green-300: #002e1b;
  --cpd-color-green-400: #003622;
  --cpd-color-green-500: #004832;
  --cpd-color-green-600: #005a43;
  --cpd-color-green-700: #00745c;
  --cpd-color-green-800: #109173;
  --cpd-color-green-900: #37c998;
  --cpd-color-green-1000: #61d2a6;
  --cpd-color-green-1100: #8fddbc;
  --cpd-color-green-1200: #ace6cc;
  --cpd-color-green-1300: #d9f4e7;
  --cpd-color-green-1400: #e9f8f1;
  --cpd-color-cyan-100: #001448;
  --cpd-color-cyan-200: #001b4e;
  --cpd-color-cyan-300: #002559;
  --cpd-color-cyan-400: #002d61;
  --cpd-color-cyan-500: #003f75;
  --cpd-color-cyan-600: #005188;
  --cpd-color-cyan-700: #006ca4;
  --cpd-color-cyan-800: #008aba;
  --cpd-color-cyan-900: #46c3d2;
  --cpd-color-cyan-1000: #6bccd9;
  --cpd-color-cyan-1100: #93d9e2;
  --cpd-color-cyan-1200: #afe2e9;
  --cpd-color-cyan-1300: #dbf2f5;
  --cpd-color-cyan-1400: #eaf7f9;
  --cpd-color-blue-100: #00095d;
  --cpd-color-blue-200: #001264;
  --cpd-color-blue-300: #001e6f;
  --cpd-color-blue-400: #032677;
  --cpd-color-blue-500: #083891;
  --cpd-color-blue-600: #0b49ab;
  --cpd-color-blue-700: #0e61d1;
  --cpd-color-blue-800: #337fe9;
  --cpd-color-blue-900: #89b5f6;
  --cpd-color-blue-1000: #9ac0f8;
  --cpd-color-blue-1100: #b2cffa;
  --cpd-color-blue-1200: #c5dbfc;
  --cpd-color-blue-1300: #e4eefe;
  --cpd-color-blue-1400: #eff5fe;
  --cpd-color-purple-100: #1c005a;
  --cpd-color-purple-200: #22006a;
  --cpd-color-purple-300: #2c0080;
  --cpd-color-purple-400: #350090;
  --cpd-color-purple-500: #4a0db1;
  --cpd-color-purple-600: #5a27c6;
  --cpd-color-purple-700: #7343e6;
  --cpd-color-purple-800: #8b66f8;
  --cpd-color-purple-900: #b6a7ff;
  --cpd-color-purple-1000: #c0b5ff;
  --cpd-color-purple-1100: #cec7ff;
  --cpd-color-purple-1200: #dad5ff;
  --cpd-color-purple-1300: #eeebff;
  --cpd-color-purple-1400: #f5f3ff;
  --cpd-color-fuchsia-100: #2e0044;
  --cpd-color-fuchsia-200: #37004e;
  --cpd-color-fuchsia-300: #46005e;
  --cpd-color-fuchsia-400: #4f0368;
  --cpd-color-fuchsia-500: #65177d;
  --cpd-color-fuchsia-600: #7d2394;
  --cpd-color-fuchsia-700: #a233b3;
  --cpd-color-fuchsia-800: #c153cb;
  --cpd-color-fuchsia-900: #dd9de3;
  --cpd-color-fuchsia-1000: #e3abe7;
  --cpd-color-fuchsia-1100: #eac0ed;
  --cpd-color-fuchsia-1200: #f0cff2;
  --cpd-color-fuchsia-1300: #f8e9f9;
  --cpd-color-fuchsia-1400: #fbf1fb;
  --cpd-color-pink-100: #3c0012;
  --cpd-color-pink-200: #450018;
  --cpd-color-pink-300: #550024;
  --cpd-color-pink-400: #61002d;
  --cpd-color-pink-500: #7c0c41;
  --cpd-color-pink-600: #99114f;
  --cpd-color-pink-700: #c51761;
  --cpd-color-pink-800: #f12c75;
  --cpd-color-pink-900: #ff92ac;
  --cpd-color-pink-1000: #ffa4b9;
  --cpd-color-pink-1100: #ffbbca;
  --cpd-color-pink-1200: #ffccd7;
  --cpd-color-pink-1300: #ffe8ed;
  --cpd-color-pink-1400: #fff1f4;
  --cpd-color-alpha-gray-100: hsla(286, 31%, 82%, 0.04);
  --cpd-color-alpha-gray-200: hsla(280, 41%, 90%, 0.06);
  --cpd-color-alpha-gray-300: hsla(270, 37%, 93%, 0.1);
  --cpd-color-alpha-gray-400: hsla(227, 29%, 91%, 0.13);
  --cpd-color-alpha-gray-500: hsla(225, 46%, 95%, 0.2);
  --cpd-color-alpha-gray-600: hsla(213, 85%, 95%, 0.27);
  --cpd-color-alpha-gray-700: hsla(214, 79%, 93%, 0.39);
  --cpd-color-alpha-gray-800: hsla(216, 94%, 93%, 0.51);
  --cpd-color-alpha-gray-900: hsla(211, 91%, 96%, 0.72);
  --cpd-color-alpha-gray-1000: hsla(213, 100%, 97%, 0.76);
  --cpd-color-alpha-gray-1100: hsla(212, 100%, 97%, 0.82);
  --cpd-color-alpha-gray-1200: hsla(217, 77%, 97%, 0.88);
  --cpd-color-alpha-gray-1300: hsla(214, 78%, 98%, 0.95);
  --cpd-color-alpha-gray-1400: hsla(204, 71%, 99%, 0.97);
  --cpd-color-alpha-red-100: hsl(0, 100%, 12%, 1);
  --cpd-color-alpha-red-200: hsl(0, 100%, 14%, 1);
  --cpd-color-alpha-red-300: hsl(0, 100%, 18%, 1);
  --cpd-color-alpha-red-400: hsl(0, 100%, 20%, 1);
  --cpd-color-alpha-red-500: hsl(356, 100%, 26%, 1);
  --cpd-color-alpha-red-600: hsla(354, 99%, 52%, 0.6);
  --cpd-color-alpha-red-700: hsla(357, 100%, 57%, 0.77);
  --cpd-color-alpha-red-800: hsla(359, 100%, 59%, 0.96);
  --cpd-color-alpha-red-900: hsl(5, 100%, 78%, 1);
  --cpd-color-alpha-red-1000: hsl(6, 100%, 81%, 1);
  --cpd-color-alpha-red-1100: hsl(6, 100%, 86%, 1);
  --cpd-color-alpha-red-1200: hsl(8, 100%, 89%, 1);
  --cpd-color-alpha-red-1300: hsl(7, 100%, 95%, 1);
  --cpd-color-alpha-red-1400: hsl(11, 100%, 97%, 1);
  --cpd-color-alpha-orange-100: hsl(0, 100%, 12%, 1);
  --cpd-color-alpha-orange-200: hsl(0, 100%, 14%, 1);
  --cpd-color-alpha-orange-300: hsl(0, 100%, 17%, 1);
  --cpd-color-alpha-orange-400: hsl(0, 100%, 20%, 1);
  --cpd-color-alpha-orange-500: hsl(2, 100%, 26%, 1);
  --cpd-color-alpha-orange-600: hsla(12, 100%, 39%, 0.74);
  --cpd-color-alpha-orange-700: hsla(20, 100%, 49%, 0.7);
  --cpd-color-alpha-orange-800: hsla(26, 99%, 51%, 0.81);
  --cpd-color-alpha-orange-900: hsla(26, 98%, 67%, 0.98);
  --cpd-color-alpha-orange-1000: hsla(26, 100%, 73%, 0.98);
  --cpd-color-alpha-orange-1100: hsl(25, 96%, 79%, 1);
  --cpd-color-alpha-orange-1200: hsl(24, 98%, 85%, 1);
  --cpd-color-alpha-orange-1300: hsl(25, 100%, 93%, 1);
  --cpd-color-alpha-orange-1400: hsl(23, 100%, 96%, 1);
  --cpd-color-alpha-yellow-100: hsl(3, 100%, 11%, 1);
  --cpd-color-alpha-yellow-200: hsl(8, 100%, 13%, 1);
  --cpd-color-alpha-yellow-300: hsl(16, 100%, 15%, 1);
  --cpd-color-alpha-yellow-400: hsl(21, 100%, 17%, 1);
  --cpd-color-alpha-yellow-500: hsla(26, 100%, 23%, 0.87);
  --cpd-color-alpha-yellow-600: hsla(30, 100%, 26%, 0.92);
  --cpd-color-alpha-yellow-700: hsl(34, 100%, 30%, 1);
  --cpd-color-alpha-yellow-800: hsl(38, 100%, 35%, 1);
  --cpd-color-alpha-yellow-900: hsl(45, 100%, 45%, 1);
  --cpd-color-alpha-yellow-1000: hsla(46, 99%, 51%, 0.92);
  --cpd-color-alpha-yellow-1100: hsla(48, 99%, 54%, 0.97);
  --cpd-color-alpha-yellow-1200: hsl(48, 99%, 60%, 1);
  --cpd-color-alpha-yellow-1300: hsl(46, 100%, 85%, 1);
  --cpd-color-alpha-yellow-1400: hsl(46, 100%, 91%, 1);
  --cpd-color-alpha-lime-100: hsl(120, 100%, 6%, 1);
  --cpd-color-alpha-lime-200: hsl(120, 100%, 8%, 1);
  --cpd-color-alpha-lime-300: hsl(120, 100%, 9%, 1);
  --cpd-color-alpha-lime-400: hsl(120, 100%, 11%, 1);
  --cpd-color-alpha-lime-500: hsl(120, 100%, 15%, 1);
  --cpd-color-alpha-lime-600: hsl(120, 100%, 18%, 1);
  --cpd-color-alpha-lime-700: hsla(114, 100%, 52%, 0.42);
  --cpd-color-alpha-lime-800: hsla(109, 99%, 57%, 0.55);
  --cpd-color-alpha-lime-900: hsla(101, 99%, 60%, 0.78);
  --cpd-color-alpha-lime-1000: hsla(101, 99%, 62%, 0.83);
  --cpd-color-alpha-lime-1100: hsla(103, 97%, 75%, 0.88);
  --cpd-color-alpha-lime-1200: hsla(103, 98%, 83%, 0.91);
  --cpd-color-alpha-lime-1300: hsla(105, 91%, 92%, 0.97);
  --cpd-color-alpha-lime-1400: hsla(104, 92%, 95%, 0.98);
  --cpd-color-alpha-green-100: hsl(147, 100%, 6%, 1);
  --cpd-color-alpha-green-200: hsl(151, 100%, 7%, 1);
  --cpd-color-alpha-green-300: hsl(155, 100%, 9%, 1);
  --cpd-color-alpha-green-400: hsl(158, 100%, 11%, 1);
  --cpd-color-alpha-green-500: hsl(162, 100%, 14%, 1);
  --cpd-color-alpha-green-600: hsl(165, 100%, 18%, 1);
  --cpd-color-alpha-green-700: hsl(168, 100%, 23%, 1);
  --cpd-color-alpha-green-800: hsla(165, 98%, 53%, 0.54);
  --cpd-color-alpha-green-900: hsla(159, 97%, 62%, 0.78);
  --cpd-color-alpha-green-1000: hsla(156, 100%, 73%, 0.81);
  --cpd-color-alpha-green-1100: hsla(154, 98%, 82%, 0.86);
  --cpd-color-alpha-green-1200: hsla(153, 94%, 87%, 0.9);
  --cpd-color-alpha-green-1300: hsla(152, 88%, 94%, 0.96);
  --cpd-color-alpha-green-1400: hsla(150, 80%, 96%, 0.98);
  --cpd-color-alpha-cyan-100: hsl(223, 100%, 14%, 1);
  --cpd-color-alpha-cyan-200: hsl(219, 100%, 15%, 1);
  --cpd-color-alpha-cyan-300: hsl(215, 100%, 18%, 1);
  --cpd-color-alpha-cyan-400: hsl(212, 100%, 19%, 1);
  --cpd-color-alpha-cyan-500: hsl(208, 100%, 23%, 1);
  --cpd-color-alpha-cyan-600: hsl(204, 100%, 27%, 1);
  --cpd-color-alpha-cyan-700: hsl(200, 100%, 32%, 1);
  --cpd-color-alpha-cyan-800: hsl(195, 100%, 37%, 1);
  --cpd-color-alpha-cyan-900: hsla(186, 99%, 66%, 0.81);
  --cpd-color-alpha-cyan-1000: hsla(187, 99%, 74%, 0.84);
  --cpd-color-alpha-cyan-1100: hsla(187, 98%, 82%, 0.88);
  --cpd-color-alpha-cyan-1200: hsla(188, 97%, 87%, 0.91);
  --cpd-color-alpha-cyan-1300: hsla(187, 93%, 94%, 0.96);
  --cpd-color-alpha-cyan-1400: hsla(187, 89%, 97%, 0.98);
  --cpd-color-alpha-blue-100: hsl(234, 100%, 18%, 1);
  --cpd-color-alpha-blue-200: hsl(229, 100%, 20%, 1);
  --cpd-color-alpha-blue-300: hsl(224, 100%, 22%, 1);
  --cpd-color-alpha-blue-400: hsla(222, 100%, 28%, 0.82);
  --cpd-color-alpha-blue-500: hsla(219, 99%, 50%, 0.53);
  --cpd-color-alpha-blue-600: hsla(217, 99%, 51%, 0.64);
  --cpd-color-alpha-blue-700: hsla(215, 98%, 52%, 0.81);
  --cpd-color-alpha-blue-800: hsla(215, 99%, 60%, 0.91);
  --cpd-color-alpha-blue-900: hsla(216, 97%, 77%, 0.97);
  --cpd-color-alpha-blue-1000: hsla(216, 100%, 81%, 0.97);
  --cpd-color-alpha-blue-1100: hsla(216, 100%, 86%, 0.98);
  --cpd-color-alpha-blue-1200: hsla(216, 97%, 89%, 0.99);
  --cpd-color-alpha-blue-1300: hsl(217, 93%, 95%, 1);
  --cpd-color-alpha-blue-1400: hsl(216, 88%, 97%, 1);
  --cpd-color-alpha-purple-100: hsl(259, 100%, 18%, 1);
  --cpd-color-alpha-purple-200: hsl(259, 100%, 21%, 1);
  --cpd-color-alpha-purple-300: hsl(261, 100%, 25%, 1);
  --cpd-color-alpha-purple-400: hsl(262, 100%, 28%, 1);
  --cpd-color-alpha-purple-500: hsla(263, 98%, 52%, 0.67);
  --cpd-color-alpha-purple-600: hsla(260, 98%, 58%, 0.76);
  --cpd-color-alpha-purple-700: hsla(258, 98%, 64%, 0.9);
  --cpd-color-alpha-purple-800: hsla(255, 100%, 71%, 0.97);
  --cpd-color-alpha-purple-900: hsl(250, 100%, 83%, 1);
  --cpd-color-alpha-purple-1000: hsl(249, 100%, 86%, 1);
  --cpd-color-alpha-purple-1100: hsl(248, 100%, 89%, 1);
  --cpd-color-alpha-purple-1200: hsl(247, 100%, 92%, 1);
  --cpd-color-alpha-purple-1300: hsl(249, 100%, 96%, 1);
  --cpd-color-alpha-purple-1400: hsl(250, 100%, 98%, 1);
  --cpd-color-alpha-fuchsia-100: hsl(281, 100%, 13%, 1);
  --cpd-color-alpha-fuchsia-200: hsl(282, 100%, 15%, 1);
  --cpd-color-alpha-fuchsia-300: hsl(285, 100%, 18%, 1);
  --cpd-color-alpha-fuchsia-400: hsla(286, 100%, 23%, 0.85);
  --cpd-color-alpha-fuchsia-500: hsla(288, 100%, 56%, 0.44);
  --cpd-color-alpha-fuchsia-600: hsla(289, 99%, 59%, 0.54);
  --cpd-color-alpha-fuchsia-700: hsla(293, 97%, 62%, 0.68);
  --cpd-color-alpha-fuchsia-800: hsla(296, 99%, 70%, 0.78);
  --cpd-color-alpha-fuchsia-900: hsla(295, 100%, 85%, 0.88);
  --cpd-color-alpha-fuchsia-1000: hsla(296, 97%, 87%, 0.9);
  --cpd-color-alpha-fuchsia-1100: hsla(296, 92%, 90%, 0.93);
  --cpd-color-alpha-fuchsia-1200: hsla(297, 95%, 92%, 0.95);
  --cpd-color-alpha-fuchsia-1300: hsla(296, 90%, 96%, 0.98);
  --cpd-color-alpha-fuchsia-1400: hsla(300, 71%, 97%, 0.99);
  --cpd-color-alpha-pink-100: hsl(342, 100%, 12%, 1);
  --cpd-color-alpha-pink-200: hsl(339, 100%, 14%, 1);
  --cpd-color-alpha-pink-300: hsl(335, 100%, 17%, 1);
  --cpd-color-alpha-pink-400: hsl(332, 100%, 19%, 1);
  --cpd-color-alpha-pink-500: hsla(333, 97%, 50%, 0.46);
  --cpd-color-alpha-pink-600: hsla(334, 98%, 53%, 0.58);
  --cpd-color-alpha-pink-700: hsla(335, 99%, 55%, 0.76);
  --cpd-color-alpha-pink-800: hsla(338, 98%, 58%, 0.95);
  --cpd-color-alpha-pink-900: hsl(346, 100%, 79%, 1);
  --cpd-color-alpha-pink-1000: hsl(346, 100%, 82%, 1);
  --cpd-color-alpha-pink-1100: hsl(347, 100%, 87%, 1);
  --cpd-color-alpha-pink-1200: hsl(347, 100%, 90%, 1);
  --cpd-color-alpha-pink-1300: hsl(347, 100%, 96%, 1);
  --cpd-color-alpha-pink-1400: hsl(347, 100%, 97%, 1);
  --cpd-color-transparent: rgba(0,0,0,0);
}
}
}
}
@layer compound{
@media screen{
@layer cpd-semantic{
.cpd-theme-dark-hc.cpd-theme-dark-hc {
  --cpd-color-bg-canvas-default-level-1: var(--cpd-color-gray-300);
  --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-theme-bg);
  --cpd-color-bg-badge-accent: var(--cpd-color-alpha-green-500);
  --cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-500);
  --cpd-color-bg-badge-default: var(--cpd-color-alpha-gray-500);
  --cpd-color-gradient-action-stop1: var(--cpd-color-green-1100);
  --cpd-color-gradient-action-stop2: var(--cpd-color-green-900);
  --cpd-color-gradient-action-stop3: var(--cpd-color-green-700);
  --cpd-color-gradient-action-stop4: var(--cpd-color-green-500);
  --cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
}
}
}
}
@layer compound{
@media screen and (prefers-color-scheme: dark) and (prefers-contrast: more){
@layer cpd-semantic{
:root {
  --cpd-color-bg-canvas-default-level-1: var(--cpd-color-gray-300);
  --cpd-color-bg-subtle-secondary-level-0: var(--cpd-color-theme-bg);
  --cpd-color-bg-badge-accent: var(--cpd-color-alpha-green-500);
  --cpd-color-bg-badge-info: var(--cpd-color-alpha-blue-500);
  --cpd-color-bg-badge-default: var(--cpd-color-alpha-gray-500);
  --cpd-color-gradient-action-stop1: var(--cpd-color-green-1100);
  --cpd-color-gradient-action-stop2: var(--cpd-color-green-900);
  --cpd-color-gradient-action-stop3: var(--cpd-color-green-700);
  --cpd-color-gradient-action-stop4: var(--cpd-color-green-500);
  --cpd-color-gradient-action-linear: linear-gradient(180deg, var(--cpd-color-gradient-action-stop1) 0%, var(--cpd-color-gradient-action-stop2) 33%, var(--cpd-color-gradient-action-stop3) 66%, var(--cpd-color-gradient-action-stop4) 100%);
}
}
}
}
@layer compound.components{

/*
Copyright 2023 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/* TODO: Review entire file for semantic token definiton */

._alert_zx76t_10 {
  container-type: inline-size;
  container-name: alert;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  gap: var(--cpd-space-3x);
  padding: var(--cpd-space-4x);
  border-radius: 8px;
  border: 1px solid;
}

._alert_zx76t_10[data-type="success"] {
  background-color: var(--cpd-color-green-200);
  border-color: var(--cpd-color-green-500);
}

._alert_zx76t_10[data-type="critical"] {
  background-color: var(--cpd-color-red-200);
  border-color: var(--cpd-color-red-500);
}

._alert_zx76t_10[data-type="info"] {
  background-color: var(--cpd-color-blue-200);
  border-color: var(--cpd-color-blue-500);
}

._content_zx76t_37 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: var(--cpd-space-3x);
}

._text-content_zx76t_44 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
}

[data-type="success"] :is(._title_zx76t_48, ._icon_zx76t_48) {
  color: var(--cpd-color-green-900);
}

[data-type="critical"] :is(._title_zx76t_48, ._icon_zx76t_48) {
  color: var(--cpd-color-red-900);
}

[data-type="info"] :is(._title_zx76t_48, ._icon_zx76t_48) {
  color: var(--cpd-color-blue-900);
}

._alert_zx76t_10 p {
  margin: 0;
}

._actions_zx76t_64 {
  -webkit-box-flex: 0;
      -ms-flex: 0;
          flex: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: var(--cpd-space-1x);
  -ms-flex-item-align: center;
      align-self: center;
}

._icon_zx76t_48 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

/* @TODO 600px break should be a token */

/* wrap actions into a stacked layout when the alert is <=600px */
@container alert (max-width: 600px) {
  ._content_zx76t_37 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  ._text-content_zx76t_44 {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 100%;
            flex: 1 0 100%;
  }
}
/*
Copyright 2023 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/**
 * Font – Body – Extra Small
 */

._font-body-xs-regular_6v6n8_12 {
  letter-spacing: var(--cpd-font-letter-spacing-body-xs);
  font: var(--cpd-font-body-xs-regular);
}

._font-body-xs-semibold_6v6n8_17 {
  letter-spacing: var(--cpd-font-letter-spacing-body-xs);
  font: var(--cpd-font-body-xs-semibold);
}

._font-body-xs-medium_6v6n8_22 {
  letter-spacing: var(--cpd-font-letter-spacing-body-xs);
  font: var(--cpd-font-body-xs-medium);
}

/**
 * Font – Body – Small
 */

._font-body-sm-regular_6v6n8_31 {
  letter-spacing: var(--cpd-font-letter-spacing-body-sm);
  font: var(--cpd-font-body-sm-regular);
}

._font-body-sm-semibold_6v6n8_36 {
  letter-spacing: var(--cpd-font-letter-spacing-body-sm);
  font: var(--cpd-font-body-sm-semibold);
}

._font-body-sm-medium_6v6n8_41 {
  letter-spacing: var(--cpd-font-letter-spacing-body-sm);
  font: var(--cpd-font-body-sm-medium);
}

/**
 * Font – Body – Medium
 */

._font-body-md-regular_6v6n8_50 {
  letter-spacing: var(--cpd-font-letter-spacing-body-md);
  font: var(--cpd-font-body-md-regular);
}

._font-body-md-semibold_6v6n8_55 {
  letter-spacing: var(--cpd-font-letter-spacing-body-md);
  font: var(--cpd-font-body-md-semibold);
}

._font-body-md-medium_6v6n8_60 {
  letter-spacing: var(--cpd-font-letter-spacing-body-md);
  font: var(--cpd-font-body-md-medium);
}

/**
 * Font – Body – Large
 */

._font-body-lg-regular_6v6n8_69 {
  letter-spacing: var(--cpd-font-letter-spacing-body-lg);
  font: var(--cpd-font-body-lg-regular);
}

._font-body-lg-semibold_6v6n8_74 {
  letter-spacing: var(--cpd-font-letter-spacing-body-lg);
  font: var(--cpd-font-body-lg-semibold);
}

._font-body-lg-medium_6v6n8_79 {
  letter-spacing: var(--cpd-font-letter-spacing-body-lg);
  font: var(--cpd-font-body-lg-medium);
}

/**
 * Font – Heading – Small
 */

._font-heading-sm-regular_6v6n8_88 {
  letter-spacing: var(--cpd-font-letter-spacing-heading-sm);
  font: var(--cpd-font-heading-sm-regular);
}

._font-heading-sm-semibold_6v6n8_93 {
  letter-spacing: var(--cpd-font-letter-spacing-heading-sm);
  font: var(--cpd-font-heading-sm-semibold);
}

._font-heading-sm-medium_6v6n8_98 {
  letter-spacing: var(--cpd-font-letter-spacing-heading-sm);
  font: var(--cpd-font-heading-sm-medium);
}

/**
 * Font – Heading – Medium
 */

._font-heading-md-regular_6v6n8_107 {
  letter-spacing: var(--cpd-font-letter-spacing-heading-md);
  font: var(--cpd-font-heading-md-regular);
}

._font-heading-md-semibold_6v6n8_112 {
  letter-spacing: var(--cpd-font-letter-spacing-heading-md);
  font: var(--cpd-font-heading-md-semibold);
}

/**
 * Font – Heading – Large
 */

._font-heading-lg-regular_6v6n8_121 {
  letter-spacing: var(--cpd-font-letter-spacing-heading-lg);
  font: var(--cpd-font-heading-lg-regular);
}

._font-heading-lg-semibold_6v6n8_126 {
  letter-spacing: var(--cpd-font-letter-spacing-heading-lg);
  font: var(--cpd-font-heading-lg-semibold);
}

/**
 * Font – Heading – Extra Large
 */

._font-heading-xl-regular_6v6n8_135 {
  letter-spacing: var(--cpd-font-letter-spacing-heading-xl);
  font: var(--cpd-font-heading-xl-regular);
}

._font-heading-xl-semibold_6v6n8_140 {
  letter-spacing: var(--cpd-font-letter-spacing-heading-xl);
  font: var(--cpd-font-heading-xl-semibold);
}

/**
  * Reset font-feature-settings after letter-spacing has been tweaked.
  * We want to apply Inter Dynamic metrics (https://rsms.me/inter/dynmetrics/)
  * We need to tweak the `letter-spacing` property and doing so, disables by
  * default the optional ligatures
  * `font-feature-settings` allows us to override this behaviour and have the
  * correct ligatures and the proper dynamic metric spacing.
  */
._typography_6v6n8_153 {
  -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
          font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-feature-settings: var(--cpd-font-feature-settings);
          font-feature-settings: var(--cpd-font-feature-settings);
}
/*
Copyright 2023 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._icon-button_1pz9o_8 {
  --cpd-icon-button-indicator-border-size: calc(
    var(--cpd-icon-button-size) * 0.0625
  );

  inline-size: var(--cpd-icon-button-size);
  block-size: var(--cpd-icon-button-size);

  /* the icon is 0.75 the size of the button, so add padding to put it in the middle */
  padding: calc(var(--cpd-icon-button-size) * 0.125);
  aspect-ratio: 1 / 1;
  border: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  border-radius: 50%;
  position: relative;
  background: transparent;
  line-height: 0px;
}

._icon-button_1pz9o_8[data-kind="primary"] {
  * {
    color: var(--cpd-color-icon-tertiary);
  }
}

._icon-button_1pz9o_8[data-kind="secondary"] {
  background: var(--cpd-color-bg-subtle-secondary);

  * {
    color: var(--cpd-color-icon-secondary);
  }
}

._no-background_1pz9o_42[data-kind="secondary"] {
  background: transparent;
}

._icon-button_1pz9o_8[aria-disabled="true"] {
  cursor: not-allowed;

  * {
    color: var(--cpd-color-icon-disabled);
  }
}

/**
 * Hover state
 */

@media (hover) {
  ._icon-button_1pz9o_8:not([aria-disabled="true"]):hover {
    background: var(--cpd-color-bg-subtle-primary);

    * {
      color: var(--cpd-color-icon-primary);
    }
  }
}

._icon-button_1pz9o_8:not([aria-disabled="true"]):active {
  background: var(--cpd-color-bg-subtle-primary);

  * {
    color: var(--cpd-color-icon-primary);
  }
}

@media (hover) {
  ._icon-button_1pz9o_8:not([aria-disabled="true"])[data-indicator]:is(:hover)::before {
    /* Same colour as the background */
    border: var(--cpd-icon-button-indicator-border-size) solid
      var(--cpd-color-bg-subtle-primary);
    inset-block-start: 0;
    inset-inline-end: 0;
  }
}

._icon-button_1pz9o_8:not([aria-disabled="true"])[data-indicator]:is(:active)::before {
  /* Same colour as the background */
  border: var(--cpd-icon-button-indicator-border-size) solid
    var(--cpd-color-bg-subtle-primary);
  inset-block-start: 0;
  inset-inline-end: 0;
}

@media (hover) {
  ._icon-button_1pz9o_8:not([aria-disabled="true"])._destructive_1pz9o_95:hover {
    background: var(--cpd-color-bg-critical-subtle-hovered);
    outline: 1px solid var(--cpd-color-border-critical-subtle);
  }
}

._icon-button_1pz9o_8:not([aria-disabled="true"])._destructive_1pz9o_95 {
  * {
    color: var(--cpd-color-icon-critical-primary);
  }
}
/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/*
 * Note this is very closely coupled to the indicator mask SVG as this masks out
 * the icon behind to draw the 'stroke' around the indicator dot.
 *
 * The SVG is a 24x24px black square with a circle of radius 6 positioned
 * 4px above and to the right of the canvas. This is the size of the indicator
 * dot plus the stroke (dimensions calculated from the figma).
 */

._indicator-icon_zr2a0_17 {
  /* This is called 'button size' but the docs say 'icon size' */
  inline-size: var(--cpd-icon-button-size);
  block-size: var(--cpd-icon-button-size);
  aspect-ratio: 1 / 1;
  color: var(--cpd-color-icon-tertiary);
  position: relative;
}

._indicator-icon_zr2a0_17 svg {
  inline-size: 100%;
  block-size: 100%;
}

._indicator-icon_zr2a0_17[data-indicator] svg {
  -webkit-mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20fill='none'%20version='1.1'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m0%200v24h24v-16.359a6%206%200%200%201-2%200.35938%206%206%200%200%201-6-6%206%206%200%200%201%200.35938-2h-16.359z'%20fill='%23000'%20stroke-width='0'/%3e%3c/svg%3e");
          mask-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20fill='none'%20version='1.1'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m0%200v24h24v-16.359a6%206%200%200%201-2%200.35938%206%206%200%200%201-6-6%206%206%200%200%201%200.35938-2h-16.359z'%20fill='%23000'%20stroke-width='0'/%3e%3c/svg%3e");
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
          mask-size: 100%;
}

._indicator-icon_zr2a0_17[data-indicator]::before {
  content: "";
  position: absolute;

  /* The dot is 1/12th above & to the right of the canvas */
  inset-block-start: -8.3333%;
  inset-inline-end: -8.3333%;

  /* and is 1/3rd the size of the canvas */
  inline-size: 33.3333%;
  block-size: 33.333%;
  border-radius: 50%;
  background: var(--cpd-color-icon-primary);
}

._indicator-icon_zr2a0_17[data-indicator="success"]::before {
  background: var(--cpd-color-icon-success-primary);
}

._indicator-icon_zr2a0_17[data-indicator="critical"]::before {
  background: var(--cpd-color-icon-critical-primary);
}
/*
Copyright 2023, 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._tooltip_6ode6_8 {
  font: var(--cpd-font-body-xs-medium);
  padding: var(--cpd-space-1-5x) var(--cpd-space-3x);
  background: var(--cpd-color-alpha-gray-1400);
  color: var(--cpd-color-text-on-solid-primary);
  border-radius: 4px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  cursor: pointer;
}

._tooltip_6ode6_8._invisible_6ode6_21 {
  /* Hide the tooltip in a way that allows it to act as an accessible label,
  even when invisible */
  clip-path: inset(50%);
  pointer-events: none;
}

._caption_6ode6_28 {
  font-weight: var(--cpd-font-weight-regular);
  color: var(--cpd-color-text-secondary);
}

._arrow_6ode6_33 {
  /* same color as the tooltip background */
  fill: var(--cpd-color-alpha-gray-1400);
}
/*
Copyright 2023 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._avatar_1qbcf_8 {
  display: inline-block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  line-height: var(--cpd-avatar-size);
  text-align: center;
  font-size: min(calc(var(--cpd-avatar-size) * 0.5625), 60px);
  text-transform: uppercase;
  speak: none; /* stylelint-disable-line declaration-property-value-no-unknown */
  font-family: var(--cpd-font-family-sans);
  font-weight: bold;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;

  /* Set a background color to help with visual consistency when displaying
   * avatars with a translucent background */
  background: var(--cpd-color-bg-canvas-default);
}

button._avatar_1qbcf_8 {
  /**
   * The avatar can be a button element, we need to reset its style
   */
  padding: 0;
  border: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}

button._avatar_1qbcf_8:disabled {
  cursor: not-allowed;
}

._avatar_1qbcf_8,
._image_1qbcf_41 {
  aspect-ratio: 1 / 1;
  inline-size: var(--cpd-avatar-size);
  border-radius: var(--cpd-avatar-radius);
}

._image_1qbcf_41 {
  -o-object-fit: cover;
     object-fit: cover;
  overflow: hidden;
}

._avatar-imageless_1qbcf_52 {
  /* In the future we'd prefer to pass the HEX code as the data attr
     and use `attr(data-color)` to avoid the style declaration from below
     but this is currently not supported in all browsers */
  background: var(--cpd-avatar-bg);
  color: var(--cpd-avatar-color);
}

._avatar_1qbcf_8[data-color] {
  --cpd-avatar-bg: var(--cpd-color-bg-decorative-1);
  --cpd-avatar-color: var(--cpd-color-text-decorative-1);
}

._avatar_1qbcf_8[data-color="2"] {
  --cpd-avatar-bg: var(--cpd-color-bg-decorative-2);
  --cpd-avatar-color: var(--cpd-color-text-decorative-2);
}

._avatar_1qbcf_8[data-color="3"] {
  --cpd-avatar-bg: var(--cpd-color-bg-decorative-3);
  --cpd-avatar-color: var(--cpd-color-text-decorative-3);
}

._avatar_1qbcf_8[data-color="4"] {
  --cpd-avatar-bg: var(--cpd-color-bg-decorative-4);
  --cpd-avatar-color: var(--cpd-color-text-decorative-4);
}

._avatar_1qbcf_8[data-color="5"] {
  --cpd-avatar-bg: var(--cpd-color-bg-decorative-5);
  --cpd-avatar-color: var(--cpd-color-text-decorative-5);
}

._avatar_1qbcf_8[data-color="6"] {
  --cpd-avatar-bg: var(--cpd-color-bg-decorative-6);
  --cpd-avatar-color: var(--cpd-color-text-decorative-6);
}

._avatar_1qbcf_8[data-type="round"] {
  --cpd-avatar-radius: 50%;
}

._avatar_1qbcf_8[data-type="square"] {
  --cpd-avatar-radius: 25%;
}

/**
 * Stacked avatars 
 */

._stacked-avatars_1qbcf_102::after {
  content: "";
  display: table;
  clear: both;
}

._stacked-avatars_1qbcf_102 ._avatar_1qbcf_8 {
  float: inline-start;
}

._stacked-avatars_1qbcf_102 ._avatar_1qbcf_8:not(:last-child) {
  /* injected in the document from AvatarStack.tsx */
  clip-path: url("#cpdAvatarClip");
}

._stacked-avatars_1qbcf_102 > *:not(:first-child) {
  -webkit-margin-start: calc(var(--cpd-avatar-size) * -0.2);
          margin-inline-start: calc(var(--cpd-avatar-size) * -0.2);
}

._clip-path_1qbcf_121 {
  /* In theory the SVG is invisible, but we still need to ensure it doesn't
  affect the page's layout or otherwise make an appearance */
  position: fixed;
  inset-inline-start: -9999px;
}
/*
Copyright 2023 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._badge_1t12g_8 {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: var(--cpd-space-1x);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 9999px; /* pill effect */
  padding: var(--cpd-space-1x) var(--cpd-space-3x);
}

._badge_1t12g_8[data-kind="default"] {
  border: 1px solid var(--cpd-color-alpha-gray-400);
  color: var(--cpd-color-gray-1100);
}

._badge_1t12g_8[data-kind="grey"] {
  background: var(--cpd-color-alpha-gray-300);
  color: var(--cpd-color-gray-1100);
}

._badge_1t12g_8[data-kind="on-solid"] {
  background: var(--cpd-color-alpha-gray-1200);
  color: var(--cpd-color-text-on-solid-primary);
}

._badge_1t12g_8[data-kind="blue"] {
  background: var(--cpd-color-alpha-blue-300);
  color: var(--cpd-color-blue-1100);
}

._badge_1t12g_8[data-kind="green"] {
  background: var(--cpd-color-alpha-green-300);
  color: var(--cpd-color-green-1100);
}

._badge_1t12g_8[data-kind="red"] {
  background: var(--cpd-color-alpha-red-300);
  color: var(--cpd-color-red-1100);
}
/*
Copyright 2023 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._menu_19sse_8 {
  border-radius: var(--cpd-space-3x);
  background: var(--cpd-color-bg-canvas-default);

  /* Here we use outline to create a border internal to the container. The Radix
  menu component may try to override it with outline: none, hence the need for
  !important. */
  outline: var(--cpd-border-width-1) solid
    var(--cpd-color-border-interactive-secondary) !important;
  outline-offset: calc(-1 * var(--cpd-border-width-1));
  -webkit-box-shadow: 0 4px 24px 0 rgba(0 0 0 / 10%);
          box-shadow: 0 4px 24px 0 rgba(0 0 0 / 10%);
  inline-size: -webkit-fit-content;
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  max-inline-size: 320px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--cpd-space-1x);
  padding-block: var(--cpd-space-5x) var(--cpd-space-4x);

  --cpd-separator-spacing: 0;
  --cpd-separator-inset: var(--cpd-space-4x);
}

@-webkit-keyframes _slide-in_19sse_1 {
  from {
    opacity: 0;
    -webkit-transform: translate(0, var(--cpd-space-3x));
            transform: translate(0, var(--cpd-space-3x));
  }
}

@keyframes _slide-in_19sse_1 {
  from {
    opacity: 0;
    -webkit-transform: translate(0, var(--cpd-space-3x));
            transform: translate(0, var(--cpd-space-3x));
  }
}

@-webkit-keyframes _slide-out_19sse_1 {
  to {
    opacity: 0;
    -webkit-transform: translate(0, var(--cpd-space-2x));
            transform: translate(0, var(--cpd-space-2x));
  }
}

@keyframes _slide-out_19sse_1 {
  to {
    opacity: 0;
    -webkit-transform: translate(0, var(--cpd-space-2x));
            transform: translate(0, var(--cpd-space-2x));
  }
}

._menu_19sse_8[data-state="open"] {
  -webkit-animation: _slide-in_19sse_1 180ms;
          animation: _slide-in_19sse_1 180ms;
}

._menu_19sse_8[data-state="closed"] {
  -webkit-animation: _slide-out_19sse_1 110ms;
          animation: _slide-out_19sse_1 110ms;
}

@-webkit-keyframes _fade-in_19sse_1 {
  from {
    opacity: 0;
  }
}

@keyframes _fade-in_19sse_1 {
  from {
    opacity: 0;
  }
}

@-webkit-keyframes _fade-out_19sse_1 {
  to {
    opacity: 0;
  }
}

@keyframes _fade-out_19sse_1 {
  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion) {
  ._menu_19sse_8[data-state="open"] {
    -webkit-animation-name: _fade-in_19sse_1;
            animation-name: _fade-in_19sse_1;
  }

  ._menu_19sse_8[data-state="closed"] {
    -webkit-animation-name: _fade-out_19sse_1;
            animation-name: _fade-out_19sse_1;
  }
}

._title_19sse_74 {
  /** Override MenuTitle margin top **/
  -webkit-margin-before: 0 !important;
          margin-block-start: 0 !important;
}
/*
 * Copyright 2025 New Vector Ltd
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

._menu-title_1sgvx_8 {
  color: var(--cpd-color-text-secondary);
  padding-inline: var(--cpd-space-4x);
  -webkit-padding-after: calc(var(--cpd-space-2x) - var(--cpd-border-width-1));
          padding-block-end: calc(var(--cpd-space-2x) - var(--cpd-border-width-1));
  -webkit-border-after: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
          border-block-end: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
  margin-block: var(--cpd-space-2x);
}
/*
Copyright 2023 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._bg_1y38p_8 {
  position: fixed;
  inset: 0;

  /* TODO: This value is used across modals and menu drawers, so would be worth
  tokenizing */
  background: rgba(3 12 27 / 52.8%);
}

._drawer_1y38p_17 {
  position: fixed;
  background: var(--cpd-color-bg-canvas-default);
  inset-block-end: 0;
  inset-inline: 0;

  /* Cap the inline content size at 520px, filling the rest of the space with
  padding */
  padding-inline: max(0px, calc((100% - 520px) / 2));
  border-start-start-radius: 28px;
  border-start-start-radius: var(--border-radius);
  border-start-end-radius: 28px;
  border-start-end-radius: var(--border-radius);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;

  /* Drawer comes in the Android style by default */
  --border-radius: 28px;
  --handle-block-size: 4px;
  --handle-inline-size: 32px;
  --handle-inset-block-start: var(--cpd-space-4x);
  --handle-inset-block-end: 0px;
  --content-inset-block-start: calc(
    var(--handle-inset-block-start) + var(--handle-block-size) +
      var(--handle-inset-block-end)
  );
}

._drawer_1y38p_17[data-platform="ios"] {
  --border-radius: 10px;
  --handle-block-size: 5px;
  --handle-inline-size: 36px;
  --handle-inset-block-start: var(--cpd-space-1-5x);
  --handle-inset-block-end: 1px;
}

._body_1y38p_51 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--cpd-space-2x);
  padding-block: calc(var(--content-inset-block-start) + var(--cpd-space-6x))
    var(--cpd-space-12x);
  border-start-start-radius: var(--border-radius);
  border-start-end-radius: var(--border-radius);

  /* Even with overflow: auto, the content can still overflow at the corners
  where it meets with the curved border. A contain: paint fixes that. */
  contain: paint;
  overflow: auto;
  scrollbar-width: none;

  --cpd-separator-spacing: 0;
  --cpd-separator-inset: var(--cpd-space-4x);
}

._body_1y38p_51::before {
  content: "";
  position: absolute;
  block-size: var(--handle-block-size);
  inset-inline: calc((100% - var(--handle-inline-size)) / 2);
  inset-block-start: var(--handle-inset-block-start);
  background: var(--cpd-color-icon-secondary);
  border-radius: 9999px;
  border-radius: var(--cpd-radius-pill-effect);
}
/*
 * Copyright 2025 New Vector Ltd
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

._content_vnv5k_8[data-state="closed"] {
  -webkit-animation: none;
          animation: none;
}
/*
Copyright 2023 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._glass_sepwu_8 {
  border-radius: var(--cpd-space-9x);
  padding: var(--cpd-space-3x);

  /* We use an outline here to create an "inner border", rather than one that
  adds to the component's size */
  outline: var(--cpd-border-width-1) solid var(--cpd-color-alpha-gray-400);
  outline-offset: calc(-1 * var(--cpd-border-width-1));
  background: var(--cpd-color-alpha-gray-400);
  backdrop-filter: blur(20px);
}

._glass_sepwu_8 > :first-child {
  border-radius: var(--cpd-space-6x);
  inline-size: 100%;
  block-size: 100%;
}
/*
Copyright 2023 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._link_1v5rz_8 {
  display: inline-block;
  text-decoration: underline;
  color: var(--cpd-color-text-primary);
  font-weight: var(--cpd-font-weight-medium);
  border-radius: 9999px;
  border-radius: var(--cpd-radius-pill-effect);
  padding-inline: 0.25rem;
}

._link_1v5rz_8[data-kind="primary"] {
  color: var(--cpd-color-text-primary);
}

._link_1v5rz_8[data-kind="critical"] {
  color: var(--cpd-color-text-critical-primary);
}

@media (hover) {
  ._link_1v5rz_8[data-kind="primary"]:hover {
    background: var(--cpd-color-gray-300);
  }

  ._link_1v5rz_8[data-kind="critical"]:hover {
    background: var(--cpd-color-red-300);
  }
}

._link_1v5rz_8:active {
  color: var(--cpd-color-text-on-solid-primary);
}

._link_1v5rz_8[data-kind="primary"]:active {
  background: var(--cpd-color-text-primary);
}

._link_1v5rz_8[data-kind="critical"]:active {
  background: var(--cpd-color-text-critical-primary);
}

._link_1v5rz_8[data-size="small"] {
  font-size: var(--cpd-font-size-body-sm);
}
/*
Copyright 2023 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._item_dyt4i_8 {
  display: grid;
  grid-template: "icon label ." auto "empty1 label empty2" auto / auto auto minmax(
      /* Reserve space for the chevron so that the layout doesn't shift on
      hover */
        var(--cpd-space-2x),
      1fr
    );
  place-items: center end;
  padding-block: var(--cpd-space-2x);
  padding-inline: var(--cpd-space-4x);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 200px;
  color: var(--cpd-color-text-secondary);
  background: var(--cpd-color-bg-action-secondary-rest);
}

._item_dyt4i_8._interactive_dyt4i_26 {
  cursor: pointer;
}

._item_dyt4i_8._no-label_dyt4i_30 {
  grid-template: "icon ." auto / auto 1fr;
}

._label_dyt4i_34 {
  grid-area: label;
  -webkit-margin-end: var(--cpd-space-4x);
          margin-inline-end: var(--cpd-space-4x);
  text-align: start;
  word-break: break-word; /* stylelint-disable-line declaration-property-value-keyword-no-deprecated */
}

._item_dyt4i_8._no-icon_dyt4i_41 {
  grid-template: "label ." auto / auto 1fr;

  ._label_dyt4i_34 {
    /* Without icon, the height changes when hovered */
    min-block-size: 24px;
  }
}

._icon_dyt4i_50 {
  grid-area: icon;
  -webkit-margin-end: var(--cpd-space-3x);
          margin-inline-end: var(--cpd-space-3x);
}

._item_dyt4i_8._no-label_dyt4i_30 ._icon_dyt4i_50 {
  -webkit-margin-end: var(--cpd-space-4x);
          margin-inline-end: var(--cpd-space-4x);
}

._nav-hint_dyt4i_59 {
  /* Hidden until the item is hovered over */
  display: none;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

button._item_dyt4i_8 {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
}

._item_dyt4i_8[data-kind="primary"] > ._label_dyt4i_34 {
  color: var(--cpd-color-text-primary);
}

._item_dyt4i_8[data-kind="primary"] > ._icon_dyt4i_50 {
  color: var(--cpd-color-icon-primary);
}

._item_dyt4i_8[data-kind="primary"] > ._nav-hint_dyt4i_59 {
  color: var(--cpd-color-icon-tertiary);
}

._item_dyt4i_8[data-kind="critical"] > ._label_dyt4i_34 {
  color: var(--cpd-color-text-critical-primary);
}

._item_dyt4i_8[data-kind="critical"] > ._icon_dyt4i_50,
._item_dyt4i_8[data-kind="critical"] > ._nav-hint_dyt4i_59 {
  color: var(--cpd-color-icon-critical-primary);
}

@media (hover) {
  ._item_dyt4i_8._interactive_dyt4i_26[data-kind="primary"]:hover {
    background: var(--cpd-color-bg-action-secondary-hovered);
  }

  ._item_dyt4i_8._interactive_dyt4i_26[data-kind="critical"]:hover {
    background: var(--cpd-color-bg-critical-subtle);
  }

  /* Replace the children with the navigation hint on hover */
  ._item_dyt4i_8._interactive_dyt4i_26:hover > ._nav-hint_dyt4i_59 {
    display: inline;
    display: initial;
  }

  ._item_dyt4i_8._interactive_dyt4i_26:hover > ._nav-hint_dyt4i_59 ~ * {
    display: none;
  }
}

._item_dyt4i_8._interactive_dyt4i_26[data-kind="primary"]:active {
  background: var(--cpd-color-bg-action-secondary-pressed);
}

._item_dyt4i_8._interactive_dyt4i_26[data-kind="critical"]:active {
  background: var(--cpd-color-bg-critical-subtle-hovered);
}

._item_dyt4i_8[data-kind]._disabled_dyt4i_118 {
  pointer-events: none;
}

._item_dyt4i_8[data-kind]._disabled_dyt4i_118 > ._label_dyt4i_34,
._item_dyt4i_8[data-kind]._disabled_dyt4i_118 > ._icon_dyt4i_50,
._item_dyt4i_8[data-kind]._disabled_dyt4i_118 > ._nav-hint_dyt4i_59 {
  color: var(--cpd-color-text-disabled);
}
/*
Copyright 2025 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
Copyright 2023 New Vector Ltd

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._container_1e0uz_10 {
  --size: 20px;

  display: grid;
  inline-size: 20px;
  inline-size: var(--size);
  block-size: 20px;
  block-size: var(--size);
}

._input_1e0uz_18,
._ui_1e0uz_19 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  grid-area: 1/1;
  inline-size: var(--size);
  block-size: var(--size);
}

._input_1e0uz_18 {
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

._ui_1e0uz_19 {
  pointer-events: none;
  border-radius: 50%;
  border: 1px solid;
  border-color: var(--cpd-color-border-interactive-primary);

  /* To align the ::after pseudo-element to the center of the radio button */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

._ui_1e0uz_19::after {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: transparent;
}

._input_1e0uz_18:checked + ._ui_1e0uz_19 {
  background-color: var(--cpd-color-bg-accent-rest);
  border-color: var(--cpd-color-bg-accent-rest);
}

._input_1e0uz_18:checked + ._ui_1e0uz_19::after {
  background: var(--cpd-color-icon-on-solid-primary);
}

._input_1e0uz_18:focus-visible + ._ui_1e0uz_19 {
  outline: 2px solid var(--cpd-color-border-focused);
  outline-offset: 1px;
}

._input_1e0uz_18[readonly] {
  pointer-events: none;
}

._input_1e0uz_18[readonly] + ._ui_1e0uz_19 {
  border-color: var(--cpd-color-border-interactive-secondary);
  background: var(--cpd-color-bg-subtle-secondary);
}

._input_1e0uz_18[disabled] + ._ui_1e0uz_19 {
  border-color: var(--cpd-color-border-disabled);
  background: var(--cpd-color-bg-canvas-disabled);
}

._input_1e0uz_18[disabled]:checked + ._ui_1e0uz_19 {
  border-color: var(--cpd-color-bg-action-primary-disabled);
  background: var(--cpd-color-bg-action-primary-disabled);
}

._input_1e0uz_18[readonly]:checked + ._ui_1e0uz_19::after {
  background-color: var(--cpd-color-icon-secondary);
}

@media (hover) {
  ._input_1e0uz_18:not([disabled], [readonly], :checked):hover + ._ui_1e0uz_19 {
    border-color: var(--cpd-color-bg-accent-hovered);

    /** TODO: have the shadow in the design tokens */
    -webkit-box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
            box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
  }

  ._input_1e0uz_18:not([disabled], [readonly], :checked):hover + ._ui_1e0uz_19::after {
    background: var(--cpd-color-icon-quaternary);
  }

  ._input_1e0uz_18:not([disabled], [readonly]):checked:hover + ._ui_1e0uz_19 {
    border-color: var(--cpd-color-bg-accent-hovered);
    background: var(--cpd-color-bg-accent-hovered);
  }

  ._input_1e0uz_18[data-invalid]:not([disabled], [readonly]):checked:hover + ._ui_1e0uz_19 {
    border-color: var(--cpd-color-bg-critical-hovered);
    background: var(--cpd-color-bg-critical-hovered);
  }
}

._input_1e0uz_18[data-invalid]:not([disabled], [readonly], :checked) + ._ui_1e0uz_19 {
  border-color: var(--cpd-color-border-critical-primary);
}

._input_1e0uz_18[data-invalid]:not([disabled], [readonly]):checked + ._ui_1e0uz_19 {
  background-color: var(--cpd-color-bg-critical-primary);
  border-color: var(--cpd-color-bg-critical-primary);
}
/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._progress-bar_9g67e_8 {
  position: relative;
  background-color: var(--cpd-color-gray-200);
  border: 1px solid var(--cpd-color-gray-400);
  border-radius: 9999px;
  border-radius: var(--cpd-radius-pill-effect);
  overflow: hidden;

  &[data-size="sm"] {
    block-size: var(--cpd-space-2x);
  }

  &[data-size="lg"] {
    block-size: var(--cpd-space-4x);
  }
}

._progress-bar-container_9g67e_24 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--cpd-space-1x);

  --cpd-progress-bar-main: var(--cpd-color-text-secondary);
  --cpd-progress-bar-muted: var(--cpd-color-gray-800);

  &[data-tint="green"] {
    --cpd-progress-bar-main: var(--cpd-color-text-success-primary);
    --cpd-progress-bar-muted: var(--cpd-color-green-800);
  }

  &[data-tint="lime"] {
    --cpd-progress-bar-main: var(--cpd-color-lime-900);
    --cpd-progress-bar-muted: var(--cpd-color-lime-800);
  }

  &[data-tint="orange"] {
    --cpd-progress-bar-main: var(--cpd-color-orange-900);
    --cpd-progress-bar-muted: var(--cpd-color-orange-800);
  }

  &[data-tint="red"] {
    --cpd-progress-bar-main: var(--cpd-color-text-critical-primary);
    --cpd-progress-bar-muted: var(--cpd-color-red-800);
  }
}

._progress-bar-label_9g67e_53 {
  font: var(--cpd-font-body-sm-medium);
  letter-spacing: var(--cpd-font-letter-spacing-body-sm);
  color: var(--cpd-progress-bar-main);
}

._progress-bar-indicator_9g67e_59 {
  position: absolute;
  inset: 0;
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
  background-image: linear-gradient(
    135deg,
    var(--cpd-progress-bar-muted) 0%,
    var(--cpd-progress-bar-muted) 25%,
    var(--cpd-progress-bar-main) 25%,
    var(--cpd-progress-bar-main) 50%,
    var(--cpd-progress-bar-muted) 50%,
    var(--cpd-progress-bar-muted) 75%,
    var(--cpd-progress-bar-main) 75%,
    var(--cpd-progress-bar-main) 100%,
    var(--cpd-progress-bar-muted) 100%
  );

  /* sqrt(number of stripes * 2 * (stripe width)^2) = sqrt(4 * 2 * 2^2) = sqrt(32) */
  background-size: 5.6569px 5.6569px;
}
/*
Copyright 2023 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._search_b2pjl_8 {
  border: 1px solid var(--cpd-color-border-interactive-secondary);
  border-radius: 9999px;
  block-size: 36px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: var(--cpd-color-text-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  /* !important to override Field's default flex settings */
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
      -ms-flex-direction: row !important;
          flex-direction: row !important;
  gap: var(--cpd-space-2x) !important;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: var(--cpd-space-1-5x) var(--cpd-space-3x);
}

@media (hover) {
  ._search_b2pjl_8:hover {
    border-color: var(--cpd-color-border-interactive-hovered);
  }
}

._search_b2pjl_8:active {
  border-color: var(--cpd-color-border-interactive-hovered);
}

._search_b2pjl_8:focus-within {
  border-color: currentcolor;
}

._icon_b2pjl_37 {
  color: var(--cpd-color-icon-secondary);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

@media (hover) {
  ._search_b2pjl_8:hover ._icon_b2pjl_37 {
    color: var(--cpd-color-icon-primary);
  }
}

._search_b2pjl_8:active ._icon_b2pjl_37 {
  color: var(--cpd-color-icon-primary);
}

._input_b2pjl_52 {
  border: 0;
  background: inherit;
  outline: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-inline-size: 0;
}

._input_b2pjl_52::-webkit-input-placeholder {
  color: var(--cpd-color-text-secondary);
}

._input_b2pjl_52::-moz-placeholder {
  color: var(--cpd-color-text-secondary);
}

._input_b2pjl_52:-ms-input-placeholder {
  color: var(--cpd-color-text-secondary);
}

._input_b2pjl_52::-ms-input-placeholder {
  color: var(--cpd-color-text-secondary);
}

._input_b2pjl_52::placeholder {
  color: var(--cpd-color-text-secondary);
}

._input_b2pjl_52:focus::-webkit-input-placeholder {
  color: var(--cpd-color-text-secondary);
}

._input_b2pjl_52:focus::-moz-placeholder {
  color: var(--cpd-color-text-secondary);
}

._input_b2pjl_52:focus:-ms-input-placeholder {
  color: var(--cpd-color-text-secondary);
}

._input_b2pjl_52:focus::-ms-input-placeholder {
  color: var(--cpd-color-text-secondary);
}

._input_b2pjl_52:focus::placeholder {
  color: var(--cpd-color-text-secondary);
}

@media (hover) {
  ._search_b2pjl_8:hover ._input_b2pjl_52::-webkit-input-placeholder {
    color: var(--cpd-color-text-secondary);
  }
  ._search_b2pjl_8:hover ._input_b2pjl_52::-moz-placeholder {
    color: var(--cpd-color-text-secondary);
  }
  ._search_b2pjl_8:hover ._input_b2pjl_52:-ms-input-placeholder {
    color: var(--cpd-color-text-secondary);
  }
  ._search_b2pjl_8:hover ._input_b2pjl_52::-ms-input-placeholder {
    color: var(--cpd-color-text-secondary);
  }
  ._search_b2pjl_8:hover ._input_b2pjl_52::placeholder {
    color: var(--cpd-color-text-secondary);
  }
}
/*
Copyright 2025 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
Copyright 2023 New Vector Ltd

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/* Styling the Radix UI Form component */

/**
 * ROOT: Form Element
 */

._root_19upo_16 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--cpd-space-5x);
}

/**
 * FIELD: Wrapper around label, control and message
 */

._field_19upo_26 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--cpd-space-1x);
}

._inline-field_19upo_32 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: var(--cpd-space-2x);
}

._inline-field-body_19upo_38 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

._inline-field-control_19upo_44 {
  /* The control should have the same height as the label */
  block-size: calc(
    var(--cpd-font-size-body-md) * var(--cpd-font-line-height-regular)
  );

  /* Align the control in the middle of the label */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/**
 * LABEL
 */

._label_19upo_59 {
  font: var(--cpd-font-body-md-medium);
  letter-spacing: var(--cpd-font-letter-spacing-body-md);
}

._label_19upo_59[for] {
  cursor: pointer;
}

._label_19upo_59[data-invalid] {
  color: var(--cpd-color-text-critical-primary);
}

/* Currently working everywhere but on Firefox (only behind a labs flag)
https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility */
._label_19upo_59:has(~ * input[disabled]),
._label_19upo_59:has(~ input[disabled]),
._inline-field-control_19upo_44:has(input[disabled]) ~ ._inline-field-body_19upo_38 ._label_19upo_59 {
  color: var(--cpd-color-text-disabled);
  cursor: not-allowed;
}

/**
 * Help and error messages
 */

._message_19upo_85 {
  font: var(--cpd-font-body-sm-regular);
  letter-spacing: var(--cpd-font-letter-spacing-body-sm);
  -webkit-margin-before: var(--cpd-space-1x);
          margin-block-start: var(--cpd-space-1x);
}

._help-message_19upo_91 {
  color: var(--cpd-color-text-secondary);
}

._error-message_19upo_95 {
  color: var(--cpd-color-text-critical-primary);
}

._success-message_19upo_99 {
  color: var(--cpd-color-text-success-primary);
}

/* Currently working everywhere but on Firefox (only behind a labs flag)
https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility */
input[disabled] ~ ._message_19upo_85,
*:has(input[disabled]) ~ ._message_19upo_85,
._inline-field-control_19upo_44:has(input[disabled]) ~ ._inline-field-body_19upo_38 ._message_19upo_85 {
  color: var(--cpd-color-text-disabled);
}

._message_19upo_85 > svg {
  display: inline-block;
  vertical-align: bottom;
  -webkit-margin-end: var(--cpd-space-2x);
          margin-inline-end: var(--cpd-space-2x);

  /* Calculate the size of the icon based on the font size and line height */
  block-size: calc(1em * var(--cpd-font-line-height-regular));
  inline-size: calc(1em * var(--cpd-font-line-height-regular));
}
/*
Copyright 2023, 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._separator_7ckbw_8 {
  --cpd-separator-color: var(--cpd-color-gray-400);
  --cpd-separator-size: 1px;

  background-color: var(--cpd-separator-color);
}

._separator_7ckbw_8[data-kind="secondary"] {
  --cpd-separator-color: var(--cpd-color-gray-300);
}

._separator_7ckbw_8[data-kind="section"] {
  --cpd-separator-size: 2px;
}

._separator_7ckbw_8[data-orientation="horizontal"] {
  margin-block: var(--cpd-separator-spacing);
  margin-inline: 0;
  margin-inline: var(--cpd-separator-inset);
  block-size: var(--cpd-separator-size);
}

._separator_7ckbw_8[data-orientation="vertical"] {
  margin-inline: var(--cpd-separator-spacing);
  margin-block: 0;
  margin-block: var(--cpd-separator-inset);
  inline-size: var(--cpd-separator-size);
}
/*
Copyright 2025 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
Copyright 2023 New Vector Ltd

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._container_19o42_10 {
  display: grid;
  inline-size: 2.25rem;
  block-size: 1.25rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

._container_19o42_10 > * {
  grid-area: 1/1;
  inline-size: inherit;
  block-size: inherit;
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

._container_19o42_10 > ._input_19o42_24 {
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

._container_19o42_10 > ._input_19o42_24[disabled] {
  cursor: not-allowed;
}

._ui_19o42_34 {
  pointer-events: none;
  border-radius: 9999px;
  border-radius: var(--cpd-radius-pill-effect);
  border: 1px solid var(--cpd-color-border-interactive-primary);
  background: var(--cpd-color-bg-canvas-default);
  position: relative;
  padding: 1px;
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
  -webkit-transition-property: background-color, border-color;
  transition-property: background-color, border-color;
}

._input_19o42_24:checked + ._ui_19o42_34 {
  background: var(--cpd-color-bg-accent-rest);
  border-color: var(--cpd-color-bg-accent-rest);
}

._ui_19o42_34::after {
  content: "";
  display: block;
  block-size: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--cpd-color-icon-secondary);
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
  -webkit-transition-property: background-color, -webkit-transform;
  transition-property: background-color, -webkit-transform;
  transition-property: background-color, transform;
  transition-property: background-color, transform, -webkit-transform;
}

/* Note the use of :focus-visible rather than :focus to avoid showing the focus
ring after a simple click */
._input_19o42_24:focus-visible + ._ui_19o42_34 {
  outline: 2px solid var(--cpd-color-border-focused);
  outline-offset: 1px;
}

:checked + ._ui_19o42_34::after {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  background: var(--cpd-color-icon-on-solid-primary);
}

@media (hover) {
  :checked:not([disabled]):hover + ._ui_19o42_34 {
    background: var(--cpd-color-bg-accent-hovered);
    border-color: var(--cpd-color-bg-accent-hovered);
  }
}

:checked:active + ._ui_19o42_34 {
  background: var(--cpd-color-bg-accent-hovered);
  border-color: var(--cpd-color-bg-accent-hovered);
}

._input_19o42_24[readonly] {
  pointer-events: none;
}

._input_19o42_24[readonly] + ._ui_19o42_34 {
  border-color: var(--cpd-color-border-interactive-secondary);
  background: var(--cpd-color-bg-subtle-secondary);
}

._input_19o42_24[readonly] + ._ui_19o42_34::after {
  background: var(--cpd-color-icon-secondary);
}

._input_19o42_24[disabled] + ._ui_19o42_34 {
  border-color: var(--cpd-color-border-disabled);
  background: var(--cpd-color-bg-canvas-disabled);
}

._input_19o42_24[disabled] + ._ui_19o42_34::after {
  background: var(--cpd-color-bg-action-primary-disabled);
}

._input_19o42_24[readonly]:checked + ._ui_19o42_34 {
  border-color: var(--cpd-color-icon-secondary);
  background: var(--cpd-color-icon-secondary);
}

._input_19o42_24[readonly]:checked + ._ui_19o42_34::after {
  background: var(--cpd-color-icon-on-solid-primary);
}

._input_19o42_24[disabled]:checked + ._ui_19o42_34 {
  background: var(--cpd-color-bg-action-primary-disabled);
  border-color: var(--cpd-color-bg-action-primary-disabled);
}

._input_19o42_24[disabled]:checked + ._ui_19o42_34::after {
  background: var(--cpd-color-icon-on-solid-primary);
}

@media (hover) {
  ._input_19o42_24:not(:checked, [disabled], [readonly]):hover + ._ui_19o42_34 {
    border-color: var(--cpd-color-border-interactive-hovered);

    /** TODO: have the shadow in the design tokens */
    -webkit-box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
            box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
  }
}

._input_19o42_24:not(:checked, [disabled], [readonly]):active + ._ui_19o42_34 {
  border-color: var(--cpd-color-border-interactive-hovered);
}
/*
Copyright 2025 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
Copyright 2023 New Vector Ltd

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._container_1hel1_10 {
  --size: 20px;

  display: grid;
  inline-size: 20px;
  inline-size: var(--size);
  block-size: 20px;
  block-size: var(--size);
}

._input_1hel1_18,
._ui_1hel1_19 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  grid-area: 1/1;
  inline-size: var(--size);
  block-size: var(--size);
}

._input_1hel1_18 {
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

._ui_1hel1_19 {
  pointer-events: none;
  border-radius: 4px; /* TODO: Ought to be a token */
  border: 1px solid;
  border-color: var(--cpd-color-border-interactive-primary);

  /** Default, rest state */
  color: transparent;
}

._ui_1hel1_19 svg {
  inline-size: var(--size);
  block-size: var(--size);

  /* compensate for the parent border */
  margin: -1px;
}

._input_1hel1_18:checked + ._ui_1hel1_19 {
  color: var(--cpd-color-icon-on-solid-primary);
  background-color: var(--cpd-color-bg-accent-rest);
  border-color: var(--cpd-color-bg-accent-rest);
}

._input_1hel1_18:focus-visible + ._ui_1hel1_19 {
  outline: 2px solid var(--cpd-color-border-focused);
  outline-offset: 1px;
}

._input_1hel1_18[disabled] + ._ui_1hel1_19 {
  border-color: var(--cpd-color-border-disabled);
  background: var(--cpd-color-bg-canvas-disabled);
}

._input_1hel1_18[readonly] {
  pointer-events: none;
}

._input_1hel1_18[readonly] + ._ui_1hel1_19 {
  border-color: var(--cpd-color-border-interactive-secondary);
  background: var(--cpd-color-bg-subtle-secondary);
}

._input_1hel1_18[disabled]:checked + ._ui_1hel1_19 {
  border-color: var(--cpd-color-bg-action-primary-disabled);
  background: var(--cpd-color-bg-action-primary-disabled);
}

._input_1hel1_18[readonly]:checked + ._ui_1hel1_19 {
  color: var(--cpd-color-icon-secondary);
}

@media (hover) {
  ._input_1hel1_18:not([disabled], [readonly], :checked):hover + ._ui_1hel1_19 {
    color: var(--cpd-color-icon-quaternary);
    border-color: var(--cpd-color-bg-accent-hovered);

    /** TODO: have the shadow in the design tokens */
    -webkit-box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
            box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
  }

  ._input_1hel1_18:not([disabled], [readonly]):checked:hover + ._ui_1hel1_19 {
    border-color: var(--cpd-color-bg-accent-hovered);
    background: var(--cpd-color-bg-accent-hovered);
  }

  ._input_1hel1_18[data-invalid]:not([disabled], [readonly]):checked:hover + ._ui_1hel1_19 {
    border-color: var(--cpd-color-bg-critical-hovered);
    background: var(--cpd-color-bg-critical-hovered);
  }
}

._input_1hel1_18[data-invalid]:not([disabled], :checked, [readonly]) + ._ui_1hel1_19 {
  border-color: var(--cpd-color-border-critical-primary);
}

._input_1hel1_18[data-invalid]:not([disabled], [readonly]):checked + ._ui_1hel1_19 {
  background-color: var(--cpd-color-bg-critical-primary);
  border-color: var(--cpd-color-bg-critical-primary);
}
/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._toast-container_xzz4o_8 {
  inline-size: -webkit-fit-content;
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  background-color: var(--cpd-color-alpha-gray-1300);
  color: var(--cpd-color-text-on-solid-primary);
  border-radius: 99px;
  font-size: var(--cpd-font-body-sm-medium);
  padding: var(--cpd-space-2x) var(--cpd-space-4x);
}
/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

@-webkit-keyframes _spin_11k6c_1 {
  from {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }

  to {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

@keyframes _spin_11k6c_1 {
  from {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }

  to {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

._icon_11k6c_18 {
  color: var(--cpd-color-icon-secondary);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  inline-size: 100%;
  block-size: 100%;
  -webkit-animation: 1s linear _spin_11k6c_1 infinite;
          animation: 1s linear _spin_11k6c_1 infinite;
}
/*
Copyright 2023, 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._button_vczzf_8 {
  border-radius: 9999px;
  border-radius: var(--cpd-radius-pill-effect);
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: var(--cpd-space-2x);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font: var(--cpd-font-body-md-semibold);
  -webkit-transition-duration: 0.1s;
          transition-duration: 0.1s;
  -webkit-transition-property: color, background-color, border-color;
  transition-property: color, background-color, border-color;
}

a._button_vczzf_8 {
  /* Make the width match that of a real button */
  inline-size: -webkit-max-content;
  inline-size: -moz-max-content;
  inline-size: max-content;
}

._button_vczzf_8 > svg {
  -webkit-transition: color 0.1s;
  transition: color 0.1s;
}

._button_vczzf_8[aria-disabled="true"] {
  cursor: not-allowed;
  pointer-events: all !important;
  color: var(--cpd-color-text-disabled) !important;
}

._button_vczzf_8[aria-disabled="true"] > svg {
  color: var(--cpd-color-icon-disabled) !important;
}

/**
 * SIZES
 */

._button_vczzf_8[data-size="lg"] {
  padding-block: var(--cpd-space-2x);
  padding-inline: var(--cpd-space-8x);
  min-block-size: var(--cpd-space-12x);

  &._icon-only_vczzf_50 {
    padding-inline: var(--cpd-space-2x);
    block-size: var(--cpd-space-12x);
    inline-size: var(--cpd-space-12x);
  }
}

._button_vczzf_8[data-size="lg"]._has-icon_vczzf_57:not(._icon-only_vczzf_50) {
  -webkit-padding-start: var(--cpd-space-7x);
          padding-inline-start: var(--cpd-space-7x);
}

._button_vczzf_8[data-size="sm"] {
  padding-block: var(--cpd-space-1x);
  padding-inline: var(--cpd-space-5x);
  min-block-size: var(--cpd-space-9x);

  &._icon-only_vczzf_50 {
    padding-inline: var(--cpd-space-1x);
    block-size: var(--cpd-space-9x);
    inline-size: var(--cpd-space-9x);
  }
}

._button_vczzf_8[data-size="sm"]._has-icon_vczzf_57:not(._icon-only_vczzf_50) {
  -webkit-padding-start: var(--cpd-space-4x);
          padding-inline-start: var(--cpd-space-4x);
}

/**
 * KINDS
 */

._button_vczzf_8[data-kind="primary"] {
  color: var(--cpd-color-text-on-solid-primary);
  background: var(--cpd-color-bg-action-primary-rest);
  border-width: 0;
}

._button_vczzf_8[data-kind="primary"] > svg {
  color: var(--cpd-color-icon-on-solid-primary);
}

@media (hover) {
  ._button_vczzf_8[data-kind="primary"]:hover {
    background: var(--cpd-color-bg-action-primary-hovered);
  }
}

._button_vczzf_8[data-kind="primary"]:active,
._button_vczzf_8[data-kind="primary"][aria-expanded="true"] {
  background: var(--cpd-color-bg-action-primary-pressed);
}

._button_vczzf_8[data-kind="primary"][aria-disabled="true"] {
  /* !important to override destructive background */
  background: var(--cpd-color-bg-subtle-primary) !important;
}

._button_vczzf_8[data-kind="primary"]._destructive_vczzf_107 {
  background: var(--cpd-color-bg-critical-primary);
}

@media (hover) {
  ._button_vczzf_8[data-kind="primary"]._destructive_vczzf_107:hover {
    background: var(--cpd-color-bg-critical-hovered);
  }
}

._button_vczzf_8[data-kind="primary"]._destructive_vczzf_107:active,
._button_vczzf_8[data-kind="primary"]._destructive_vczzf_107[aria-expanded="true"] {
  /* TODO: We're waiting for this value to be formalized as a semantic token */
  background: var(--cpd-color-red-1100);
}

._button_vczzf_8[data-kind="secondary"] {
  border: 1px solid var(--cpd-color-border-interactive-secondary);
  color: var(--cpd-color-text-primary);
  background: var(--cpd-color-bg-canvas-default);
}

._button_vczzf_8[data-kind="secondary"] > svg {
  color: var(--cpd-color-icon-primary);
}

@media (hover) {
  ._button_vczzf_8[data-kind="secondary"]:hover {
    border-color: var(--cpd-color-border-interactive-hovered);
    background: var(--cpd-color-bg-subtle-secondary);
  }
}

._button_vczzf_8[data-kind="secondary"]:active,
._button_vczzf_8[data-kind="secondary"][aria-expanded="true"] {
  border-color: var(--cpd-color-border-interactive-hovered);
  background: var(--cpd-color-bg-subtle-primary);
}

._button_vczzf_8[data-kind="secondary"][aria-disabled="true"] {
  /* !important to override destructive values */
  border-color: var(--cpd-color-border-interactive-secondary) !important;
  background: var(--cpd-color-bg-subtle-secondary) !important;
}

._button_vczzf_8[data-kind="secondary"]._destructive_vczzf_107 {
  border-color: var(--cpd-color-border-critical-subtle);
  color: var(--cpd-color-text-critical-primary);
}

._button_vczzf_8[data-kind="secondary"]._destructive_vczzf_107 > svg {
  color: var(--cpd-color-icon-critical-primary);
}

@media (hover) {
  ._button_vczzf_8[data-kind="secondary"]._destructive_vczzf_107:hover {
    border-color: var(--cpd-color-border-critical-hovered);
    background: var(--cpd-color-bg-critical-subtle);
  }
}

._button_vczzf_8[data-kind="secondary"]._destructive_vczzf_107:active,
._button_vczzf_8[data-kind="secondary"]._destructive_vczzf_107[aria-expanded="true"] {
  border-color: var(--cpd-color-border-critical-hovered);
  background: var(--cpd-color-bg-critical-subtle-hovered);
}

._button_vczzf_8[data-kind="tertiary"] {
  border: none;
  color: var(--cpd-color-text-primary);
  text-decoration: underline;
  background: transparent;
}

@media (hover) {
  ._button_vczzf_8[data-kind="tertiary"]:hover {
    background: var(--cpd-color-bg-subtle-secondary);
  }
}

._button_vczzf_8[data-kind="tertiary"]:active,
._button_vczzf_8[data-kind="tertiary"][aria-expanded="true"] {
  background: var(--cpd-color-bg-subtle-primary);
}

._button_vczzf_8[data-kind="tertiary"][aria-disabled="true"] {
  color: var(--cpd-color-text-disabled);

  /* !important to override destructive background */
  background: transparent !important;
}

._button_vczzf_8[data-kind="tertiary"]._destructive_vczzf_107 {
  color: var(--cpd-color-text-critical-primary);
}

@media (hover) {
  ._button_vczzf_8[data-kind="tertiary"]._destructive_vczzf_107:hover {
    background: var(--cpd-color-bg-critical-subtle);
  }
}

._button_vczzf_8[data-kind="tertiary"]._destructive_vczzf_107:active,
._button_vczzf_8[data-kind="tertiary"]._destructive_vczzf_107[aria-expanded="true"] {
  background: var(--cpd-color-bg-critical-subtle-hovered);
}
/*
Copyright 2023 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._container_1s836_8 {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
}

._control_1s836_13 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-padding-end: var(--cpd-space-12x) !important;
          padding-inline-end: var(--cpd-space-12x) !important;

  /* From the flexbox spec:
   *   "By default, flex items won’t shrink below their minimum content size"
   * This allows the element to shrink lower than its natural default size.
   */
  min-inline-size: 0;
}

._action_1s836_24 {
  all: unset;
  color: var(--cpd-color-icon-secondary);
  background-color: transparent;
  cursor: pointer;
  position: absolute;
  inset-block: var(--cpd-space-2x);
  inset-inline-end: var(--cpd-space-2x);
  padding: var(--cpd-space-1x);
  overflow: visible;
  border-radius: 50%;
}

._action_1s836_24 > svg {
  inline-size: var(--cpd-space-6x);
  block-size: var(--cpd-space-6x);
}

@media (hover) {
  ._action_1s836_24:hover {
    color: var(--cpd-color-icon-primary);
    background-color: var(--cpd-color-bg-subtle-secondary);
  }
}

._action_1s836_24:focus-visible {
  outline: 2px solid var(--cpd-color-border-focused);
  outline-offset: 1px;
}

._control_1s836_13[disabled] + ._action_1s836_24 {
  pointer-events: none;
  color: var(--cpd-color-text-disabled);
}

._control_1s836_13[readonly] + ._action_1s836_24 {
  pointer-events: none;
  color: var(--cpd-color-text-secondary);
}
/*
Copyright 2025 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
Copyright 2023 New Vector Ltd

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._control_sqdq4_10 {
  border: 1px solid var(--cpd-color-border-interactive-primary);
  background: var(--cpd-color-bg-canvas-default);
  border-radius: 0.5rem;
  padding: var(--cpd-space-3x) var(--cpd-space-4x);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;

  /**
  * Disable contextual alternate ligatures in inputs
  * https://github.com/rsms/inter/issues/222
  * https://github.com/rsms/inter/blob/master/src/features/calt.fea
  */
  -webkit-font-feature-settings: "calt" 0;
          font-feature-settings: "calt" 0;
}

@media (hover) {
  ._control_sqdq4_10:hover {
    border-color: var(--cpd-color-border-interactive-hovered);

    /** TODO: have the shadow in the design tokens */
    -webkit-box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
            box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
  }
}

._control_sqdq4_10:active {
  border-color: var(--cpd-color-border-interactive-hovered);
}

._control_sqdq4_10:focus {
  outline: 2px solid var(--cpd-color-border-focused);
  border-color: transparent;
}

._control_sqdq4_10[data-invalid] {
  border-color: var(--cpd-color-text-critical-primary);
}

._control_sqdq4_10:disabled {
  -webkit-box-shadow: none;
          box-shadow: none;
  background: var(--cpd-color-bg-canvas-disabled);
  border-color: var(--cpd-color-border-disabled);
  color: var(--cpd-color-text-disabled);
  cursor: not-allowed;
}

._control_sqdq4_10[readonly] {
  -webkit-box-shadow: none;
          box-shadow: none;
  background: var(--cpd-color-bg-subtle-secondary);
  border-color: var(--cpd-color-bg-subtle-secondary);
  color: var(--cpd-color-text-secondary);
}

._control_sqdq4_10._enable-ligatures_sqdq4_62 {
  -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
          font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-feature-settings: var(--cpd-font-feature-settings);
          font-feature-settings: var(--cpd-font-feature-settings);
}
/*
Copyright 2025 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
Copyright 2023 New Vector Ltd

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._container_43om7_10 {
  --gap: var(--cpd-space-3x);
  --digit-size: var(--cpd-space-10x);
  --digit-height: var(--cpd-space-12x);

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  inline-size: -webkit-fit-content;
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: var(--gap);

  /* The input is positioned absolutely
     so the container needs to be positioned relatively */
  position: relative;
}

._control_43om7_25 {
  all: unset;

  /** TODO: semantic token */
  font-family: var(--cpd-font-family-mono), ui-monospace, monospace;
  font-weight: 700;

  /* Position the input to fill the container */
  position: absolute;
  inset: 0;

  /* Spacing between digits is set to the gap
     plus the size of one digit box
     minus the size of one character */
  letter-spacing: calc(var(--gap) + var(--digit-size) - 1ch);
  line-height: var(--digit-height);

  /* The padding at the start positions the first digit at the middle of the digit box */
  -webkit-padding-start: calc(var(--cpd-space-10x) / 2 - (1ch / 2));
          padding-inline-start: calc(var(--cpd-space-10x) / 2 - (1ch / 2));

  /* The negative margin at the end is to keep space for the cursor when the input is full */
  -webkit-margin-end: calc(-1 * (var(--cpd-space-10x) + var(--cpd-space-3x)));
          margin-inline-end: calc(-1 * (var(--cpd-space-10x) + var(--cpd-space-3x)));
}

._digit_43om7_49 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  inline-size: var(--cpd-space-10x);
  block-size: var(--cpd-space-12x);
  border: 1px solid var(--cpd-color-border-interactive-primary);
  background: var(--cpd-color-bg-canvas-default);
  border-radius: 0.5rem;
  padding: var(--cpd-space-3x) var(--cpd-space-4x);
}

@media (hover) {
  ._control_43om7_25:hover ~ ._digit_43om7_49 {
    border-color: var(--cpd-color-border-interactive-hovered);

    /** TODO: have the shadow in the design tokens */
    -webkit-box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
            box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
  }
}

._control_43om7_25:disabled {
  color: var(--cpd-color-text-disabled);
  cursor: not-allowed;
}

._control_43om7_25:disabled ~ ._digit_43om7_49 {
  -webkit-box-shadow: none;
          box-shadow: none;
  background: var(--cpd-color-bg-canvas-disabled);
  border-color: var(--cpd-color-border-disabled);
}

._control_43om7_25[readonly] {
  color: var(--cpd-color-text-secondary);
}

._control_43om7_25[readonly] ~ ._digit_43om7_49 {
  -webkit-box-shadow: none;
          box-shadow: none;
  background: var(--cpd-color-bg-subtle-secondary);
  border-color: var(--cpd-color-bg-subtle-secondary);
}

._control_43om7_25[data-invalid] ~ ._digit_43om7_49 {
  border-color: var(--cpd-color-text-critical-primary);
}

._control_43om7_25:focus ~ ._digit_43om7_49:not([data-filled]) {
  outline: 2px solid var(--cpd-color-border-focused);
  border-color: transparent;
}

._digit_43om7_49[data-selected] {
  border-color: var(--cpd-color-border-focused);
  background-color: var(--cpd-color-bg-info-subtle);
}
/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._controls_17lij_8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;

  & > input {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-inline-size: 0;
  }
}

._button-group_17lij_18 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  inset-block-start: var(--cpd-space-1x);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--cpd-space-2x);
}
/*
Copyright 2025 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
Copyright 2023 New Vector Ltd

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

:root {
  --cpd-radius-pill-effect: 9999px;

  /* Default icon and avatar size */
  --cpd-icon-button-size: var(--cpd-space-8x);
  --cpd-avatar-size: var(--cpd-space-16x);

  /**
  * We want to apply Inter Dynamic metrics (https://rsms.me/inter/dynmetrics/)
  * We need to tweak the `letter-spacing` property and doing so, disables by
  * default the optional ligatures
  * `font-feature-settings` allows us to override this behaviour and have the
  * correct ligatures and the proper dynamic metric spacing.
  */
  --cpd-font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  --cpd-separator-spacing: var(--cpd-space-2x);
  --cpd-separator-inset: 0;
}

html,
body,
input {
  font: var(--cpd-font-body-md-regular);
  color: var(--cpd-color-text-primary);
  -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
          font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-feature-settings: var(--cpd-font-feature-settings);
          font-feature-settings: var(--cpd-font-feature-settings);
}

html,
body {
  block-size: 100%;
  font-size: var(--cpd-font-size-root);
}

body {
  background: var(--cpd-color-bg-canvas-default);
}
/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._content_o77nw_8 {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  background-color: var(--cpd-color-bg-subtle-secondary);
  padding: var(--cpd-space-4x);
  border-radius: var(--cpd-space-2x);
  color: var(--cpd-color-icon-secondary);

  > svg {
    inline-size: 32px;
    block-size: 32px;
  }
}

._content_o77nw_8[data-size="medium"] {
  padding: var(--cpd-space-3x);
}

._content_o77nw_8[data-size="small"] {
  padding: var(--cpd-space-3x);

  > svg {
    inline-size: 24px;
    block-size: 24px;
  }
}

._destructive_o77nw_34 {
  background-color: var(--cpd-color-bg-critical-subtle);
  color: var(--cpd-color-icon-critical-primary);
}

._success_o77nw_39 {
  background-color: var(--cpd-color-bg-success-subtle);
  color: var(--cpd-color-icon-success-primary);
}
/* Copyright 2025 New Vector Ltd.
 * Copyright 2023 The Matrix.org Foundation C.I.C.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

._nav-bar_1fp3r_8 {
  -webkit-border-after: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
          border-block-end: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
  margin: var(--cpd-space-6x) 0;
  padding: 0;
}

._nav-bar-items_1fp3r_14 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--cpd-space-3x);
  list-style: none;
  padding: 0;
  margin: 0;
}

._nav-tab_1fp3r_25 {
  padding: var(--cpd-space-4x) 0;
  position: relative;
}

/* Underline effect */
._nav-tab_1fp3r_25::before {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 0;
  border-radius: 9999px 9999px 0 0;
  border-radius: var(--cpd-radius-pill-effect) var(--cpd-radius-pill-effect) 0 0;
  background-color: var(--cpd-color-bg-action-primary-rest);
  -webkit-transition: height 0.1s ease-in-out;
  transition: height 0.1s ease-in-out;
}

._nav-tab_1fp3r_25[data-current]::before {
  /* This is not exactly right: designs says 3px, but there are no variables for that */
  block-size: var(--cpd-border-width-4);
}

._nav-item_1fp3r_47 {
  padding-block: var(--cpd-space-1x);
  padding-inline: var(--cpd-space-2x);
  border-radius: 9999px;
  border-radius: var(--cpd-radius-pill-effect);
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: var(--cpd-space-2x);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: transparent;
  border: 0;
  font: var(--cpd-font-body-md-medium);
  color: var(--cpd-color-text-secondary);
  text-decoration: none;
}

@media (hover) {
  ._nav-item_1fp3r_47:not([disabled]):hover {
    color: var(--cpd-color-text-primary);
    background-color: var(--cpd-color-bg-subtle-secondary);
  }
}

._nav-item_1fp3r_47:focus-visible {
  outline: var(--cpd-color-border-focused) var(--cpd-border-width-2) solid;
}

._nav-item_1fp3r_47:not([disabled]):active {
  color: var(--cpd-color-text-primary);
  background-color: var(--cpd-color-bg-subtle-primary);
}

._nav-item_1fp3r_47[aria-current],
._nav-item_1fp3r_47[aria-selected="true"] {
  color: var(--cpd-color-text-primary);
}

._nav-item_1fp3r_47[disabled] {
  cursor: not-allowed;

  /* Enable pointer events for svgs even with fill=none */
  pointer-events: all !important;
  color: var(--cpd-color-text-disabled);
}
/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._content_3xq91_8 {
  /* 320px + 20px padding left + 20px padding right */
  max-inline-size: 320px;
  border-radius: var(--cpd-space-3x);
  background: var(--cpd-color-bg-action-primary-rest);
  padding: var(--cpd-space-5x) var(--cpd-space-6x);

  /* from figma */
  -webkit-box-shadow: 0 4px 24px 0 rgb(0 0 0 / 10%);
          box-shadow: 0 4px 24px 0 rgb(0 0 0 / 10%);

  /*
  * Grid, we want to have the following layout:
  * ----------------------------------
  * -  ---------------   ----------  -
  * -  | heading     |   |        |  -
  * -  --------------    | button |  -
  * -  ---------------   | button |  -
  * -  | description |   |        |  -
  * -  ---------------   ----------  -
  * ----------------------------------
  */
  display: grid;
  grid-template:
    "header button" auto
    "description button" auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  grid-column-gap: var(--cpd-space-6x);
  -webkit-column-gap: var(--cpd-space-6x);
     -moz-column-gap: var(--cpd-space-6x);
          column-gap: var(--cpd-space-6x);
}

._header_3xq91_37 {
  margin: 0;
  color: var(--cpd-color-text-on-solid-primary);
  grid-area: header;
}

._description_3xq91_43 {
  color: var(--cpd-color-gray-500);
  grid-area: description;
}

._button_3xq91_48 {
  color: var(--cpd-color-bg-subtle-secondary);
  grid-area: button;
}

._arrow_3xq91_53 {
  fill: var(--cpd-color-bg-action-primary-rest);
}
/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._container_j0rlq_8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;

  label {
    font: var(--cpd-font-body-md-medium);
    -webkit-margin-after: var(--cpd-space-1x);
            margin-block-end: var(--cpd-space-1x);
  }

  button {
    inline-size: 100%;
    border: 1px solid var(--cpd-color-border-interactive-primary);
    background: var(--cpd-color-bg-canvas-default);
    border-radius: 0.5rem;
    padding: var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x)
      var(--cpd-space-4x);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    color: var(--cpd-color-text-primary);
    font: var(--cpd-font-body-md-regular);
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: var(--cpd-space-4x);

    svg {
      -webkit-transition: -webkit-transform 0.1s linear;
      transition: -webkit-transform 0.1s linear;
      transition: transform 0.1s linear;
      transition: transform 0.1s linear, -webkit-transform 0.1s linear;
    }
  }

  /**
   * When the dropdown is open, rotate the arrow icon
   */
  button[aria-expanded="true"] {
    svg {
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
    }
  }

  button._placeholder_j0rlq_47 {
    color: var(--cpd-color-text-secondary);
  }

  ._border_j0rlq_51 {
    display: none;
    -webkit-border-start: 1px solid var(--cpd-color-border-interactive-secondary);
            border-inline-start: 1px solid var(--cpd-color-border-interactive-secondary);
    -webkit-border-end: 1px solid var(--cpd-color-border-interactive-secondary);
            border-inline-end: 1px solid var(--cpd-color-border-interactive-secondary);
    block-size: var(--cpd-space-1x);
    -webkit-margin-before: calc(var(--cpd-space-1x) * -1);
            margin-block-start: calc(var(--cpd-space-1x) * -1);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

  ._content_j0rlq_60 {
    display: none;
    position: relative;

    ul {
      /**
       * To make the component going over the other elements
       */
      position: absolute;
      display: block;
      inline-size: 100%;
      background: var(--cpd-color-bg-canvas-default);
      border: 1px solid var(--cpd-color-border-interactive-secondary);
      -webkit-border-before: 0;
              border-block-start: 0;
      border-end-start-radius: var(--cpd-space-4x);
      border-end-end-radius: var(--cpd-space-4x);
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      -webkit-box-shadow: 0 4px 24px 0 rgb(27 29 34 / 10%);
              box-shadow: 0 4px 24px 0 rgb(27 29 34 / 10%);
      margin: 0;
      padding: 0;
      -webkit-padding-after: var(--cpd-space-4x);
              padding-block-end: var(--cpd-space-4x);
      cursor: pointer;

      li {
        list-style: none;
        font: var(--cpd-font-body-md-medium);
        padding: var(--cpd-space-3x) var(--cpd-space-4x);
        -webkit-border-after: 1px solid var(--cpd-color-gray-300);
                border-block-end: 1px solid var(--cpd-color-gray-300);
        color: var(--cpd-color-text-secondary);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: var(--cpd-space-4x);

        @media (hover) {
          &:hover {
            background: var(--cpd-color-gray-200);
          }
        }

        &[aria-selected="true"] {
          color: var(--cpd-color-text-primary);
          background: var(--cpd-color-gray-300);
        }
      }
    }
  }

  ._open_j0rlq_108 {
    display: block;
  }

  ._help_j0rlq_112 {
    font: var(--cpd-font-body-sm-regular);
    color: var(--cpd-color-text-secondary);
  }

  ._error_j0rlq_117 {
    font: var(--cpd-font-body-sm-medium);
    color: var(--cpd-color-text-critical-primary);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--cpd-space-2x);
  }

  ._error_j0rlq_117,
  ._help_j0rlq_112 {
    -webkit-margin-before: var(--cpd-space-2x);
            margin-block-start: var(--cpd-space-2x);
  }

  &[aria-invalid="true"] {
    label {
      color: var(--cpd-color-text-critical-primary);
    }

    button {
      border-color: var(--cpd-color-text-critical-primary);
    }
  }
}
/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._breadcrumb_1xygz_8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  block-size: 40px;
  gap: var(--cpd-space-3x);
  -webkit-padding-after: var(--cpd-space-3x);
          padding-block-end: var(--cpd-space-3x);
  -webkit-border-after: 1px solid var(--cpd-color-alpha-gray-400);
          border-block-end: 1px solid var(--cpd-color-alpha-gray-400);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;

  ._pages_1xygz_17 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--cpd-space-1x);

    /* override list styles */
    list-style: none;
    margin: 0;
    padding: 0;

    a {
      cursor: pointer;
    }

    ._last-page_1xygz_30 {
      font: var(--cpd-font-body-sm-regular);
      color: var(--cpd-color-text-secondary);
    }

    /*
     * Breadcrumb separator
     * We want this separator to be only visual and to not be in the accessibility tree.
     * The nav html element already provides an accessible way to separate the links.
     */
    li + li::before {
      display: inline-block;
      margin: 0 0.3em 0 0.25em;
      -webkit-transform: rotate(15deg);
              transform: rotate(15deg);
      -webkit-border-end: 1px solid var(--cpd-color-text-secondary);
              border-inline-end: 1px solid var(--cpd-color-text-secondary);
      block-size: var(--cpd-space-3x);
      content: "";
    }

    /* Last page */
    :last-child {
      span {
        -webkit-padding-start: var(--cpd-space-1x);
                padding-inline-start: var(--cpd-space-1x);
      }
    }
  }
}
/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

._visual-list_15wzx_8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--cpd-space-1x);
  margin: 0;
  padding: 0;
  list-style-type: none;
  border-radius: var(--cpd-space-3x);
  overflow: hidden;
}
/*
 * Copyright 2024 New Vector Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

._visual-list-item_1ma3e_8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--cpd-space-3x);
  padding: var(--cpd-space-3x) var(--cpd-space-4x);
  background-color: var(--cpd-color-bg-subtle-secondary);
  font: var(--cpd-font-body-md-medium);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._visual-list-item-icon_1ma3e_17 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  color: var(--cpd-color-icon-secondary);
}

._visual-list-item-icon-success_1ma3e_22 {
  color: var(--cpd-color-icon-success-primary);
}

._visual-list-item-icon-destructive_1ma3e_26 {
  color: var(--cpd-color-icon-critical-primary);
}
/*
 * Copyright 2025 New Vector Ltd
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

._chat-filter_5qdp0_8 {
  font: var(--cpd-font-body-sm-medium);
  color: var(--cpd-color-text-primary);
  background-color: transparent;
  border: var(--cpd-border-width-1) solid
    var(--cpd-color-border-interactive-secondary);
  border-radius: 99px;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: var(--cpd-space-1x) var(--cpd-space-2x);
}

@media (hover) {
  ._chat-filter_5qdp0_8:hover {
    border-color: var(--cpd-color-border-interactive-primary);
    background: var(--cpd-color-bg-subtle-primary);
  }
}

._chat-filter_5qdp0_8[aria-selected="true"] {
  border-color: var(--cpd-color-bg-action-primary-rest);
  background: var(--cpd-color-bg-action-primary-rest);
  color: var(--cpd-color-text-on-solid-primary);
}
/*
 * Copyright 2025 New Vector Ltd
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

._unread-counter_9mg0k_8 {
  border-radius: 38px;
  font: var(--cpd-font-body-xs-semibold);
  color: var(--cpd-color-text-on-solid-primary);
  background-color: var(--cpd-color-icon-success-primary);
  block-size: 20px;
  min-inline-size: 20px;
  padding: 0 var(--cpd-space-1-5x);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
/*
 * Copyright 2025 New Vector Ltd
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

._pill_1pem8_8 {
  border-radius: 38px;
  font: var(--cpd-font-body-xs-semibold);
  color: var(--cpd-color-text-on-solid-primary);
  background-color: var(--cpd-color-icon-success-primary);
  padding: 0 var(--cpd-space-2x);
  block-size: 20px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
/*
 * Copyright 2025 New Vector Ltd
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

._unread_1k06b_8 {
  inline-size: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;

  div {
    block-size: 8px;
    inline-size: 8px;
    background-color: var(--cpd-color-icon-secondary);
    border-radius: 100%;
  }
}
}
:root {
  --font-scale: 1;
  --font-size-micro: calc(10px * var(--font-scale));
  --font-size-caption: calc(12px * var(--font-scale));
  --font-size-body: calc(15px * var(--font-scale));
  --font-size-subtitle: calc(18px * var(--font-scale));
  --font-size-title: calc(24px * var(--font-scale));
  --font-size-headline: calc(32px * var(--font-scale));

  /* These colors are needed during the transitionary period between the old and
  new Compound design systems, but should be removed ASAP */
  --stopgap-color-on-solid-accent: var(--cpd-color-bg-canvas-default);
  --stopgap-background-85: rgba(255, 255, 255, 0.85);
  --stopgap-bgColor3: #444;

  --cpd-color-border-accent: var(--cpd-color-green-800);
  /* The distance to inset non-full-width content from the edge of the window
  along the inline axis. This ramps up from 16px for typical mobile windows, to
  96px for typical desktop windows. */
  --inline-content-inset: min(
    var(--cpd-space-24x),
    max(var(--cpd-space-4x), calc((100vw - 900px) / 3))
  );
  --small-drop-shadow: 0px 1.2px 2.4px 0px rgba(0, 0, 0, 0.15);
  --subtle-drop-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  --background-gradient: url("data:image/svg+xml,%3csvg%20width='1440'%20height='800'%20viewBox='0%200%201440%20800'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20filter='url(%23filter0_f_4162_80259)'%3e%3cpath%20d='M-37.0486%20666.028C267.76%20138.867%20944.304%20-46.1945%201477.05%20260.929'%20stroke='url(%23paint0_linear_4162_80259)'%20stroke-width='192'%20stroke-linecap='round'/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_f_4162_80259'%20x='-333.118'%20y='-183.694'%20width='2106.24'%20height='1145.68'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3e%3cfeGaussianBlur%20stdDeviation='100'%20result='effect1_foregroundBlur_4162_80259'/%3e%3c/filter%3e%3clinearGradient%20id='paint0_linear_4162_80259'%20x1='1255.31'%20y1='320.254'%20x2='184.899'%20y2='607.497'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%2300C59E'/%3e%3cstop%20offset='0.75'%20stop-color='%230044A5'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");

  --call-view-overlay-layer: 1;
  --call-view-header-footer-layer: 2;
}
:root,
[class*="cpd-theme-"] {
  --video-tile-background: var(--cpd-color-bg-subtle-secondary);
}
.cpd-theme-dark {
  --cpd-color-border-accent: var(--cpd-color-green-1100);
  --stopgap-color-on-solid-accent: var(--cpd-color-text-primary);
  --stopgap-background-85: rgba(16, 19, 23, 0.85);
}
body {
  background-color: var(--cpd-color-bg-canvas-default);
  background-size: calc(max(1440px, 100vw)) calc(max(800px, 100vh));
  background-repeat: no-repeat;
  background-position: center;
  color: var(--cpd-color-text-primary);
  color-scheme: dark;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
/* This prohibits the view to scroll for pages smaller than 122px in width
we use this for mobile pip webviews */
.no-scroll-body {
  position: fixed;
  width: 100%;
}
/* We use this to not render the page at all until we know the theme.*/
.no-theme {
  opacity: 0;
}
html,
body,
#root {
  /* We use !important here to override vaul drawers, which have a side effect
  of setting height: auto; on the body element and messing up our layouts */
  height: 100% !important;
}
#root {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  /* The root should be a separate stacking context so that portalled elements
  like modals and menus always appear over top of it */
  isolation: isolate;
}
/* On Android and iOS, prefer native system fonts. The global.css file of
Compound Web is where these variables ultimately get consumed to set the page's
font-family. */
body[data-platform="android"] {
  --cpd-font-family-sans: "Roboto", "Noto", "Inter", sans-serif;
}
body[data-platform="ios"] {
  --cpd-font-family-sans:
    -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
}
@layer compound-legacy {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  a {
    margin-top: 0;
  }

  /* Headline Semi Bold */
  h1 {
    font-weight: 600;
    font-size: calc(32px * 1);
    font-size: var(--font-size-headline);
  }

  /* Title */
  h2 {
    font-weight: 600;
    font-size: calc(24px * 1);
    font-size: var(--font-size-title);
  }

  /* Subtitle */
  h3 {
    font-weight: 600;
    font-size: calc(18px * 1);
    font-size: var(--font-size-subtitle);
  }

  /* Body Semi Bold */
  h4 {
    font-weight: 600;
    font-size: calc(15px * 1);
    font-size: var(--font-size-body);
  }

  h1,
  h2,
  h3 {
    line-height: 1.2;
  }

  /* Body */
  p {
    font-size: calc(15px * 1);
    font-size: var(--font-size-body);
    line-height: calc(24px * 1);
    line-height: var(--font-size-title);
  }

  hr {
    width: calc(100% - 24px);
    border: none;
    border-top: 1px solid var(--cpd-color-border-interactive-secondary);
    color: var(--cpd-color-border-interactive-secondary);
    overflow: visible;
    text-align: center;
    height: 5px;
    font-weight: 600;
    font-size: calc(15px * 1);
    font-size: var(--font-size-body);
    line-height: 24px;
    margin: 0 12px;
  }

  summary {
    font-size: calc(15px * 1);
    font-size: var(--font-size-body);
  }

  details > :not(summary) {
    margin-left: calc(15px * 1);
    margin-left: var(--font-size-body);
  }

  details[open] > summary {
    margin-bottom: calc(15px * 1);
    margin-bottom: var(--font-size-body);
  }
}
#root > [data-overlay-container] {
  position: relative;
  height: 100%;
}
/* normalize.css sets the focus rings on buttons in Firefox to an unusual custom
outline, which is inconsistent with our other components and is not sufficiently
visible to be accessible. This resets it back to 'auto'. */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: auto;
}
/*
Copyright 2022-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._header_p1omj_8 {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding-inline: var(--inline-content-inset);
}

._nav_p1omj_18 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  white-space: nowrap;
  height: 80px;
}

._headerLogo_p1omj_26 {
  color: var(--cpd-color-text-primary);
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
}

._leftNav_p1omj_33._hideMobile_p1omj_33 {
  display: none;
}

._leftNav_p1omj_33 > * {
  margin-right: 12px;
}

._leftNav_p1omj_33 h3 {
  margin: 0;
}

._rightNav_p1omj_45 {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

._rightNav_p1omj_45 > * {
  margin-right: 24px;
}

._rightNav_p1omj_45._hideMobile_p1omj_33 {
  display: none;
}

._nav_p1omj_18 > :last-child {
  margin-right: 0;
}

._roomHeaderInfo_p1omj_61 {
  display: grid;
  grid-column-gap: var(--cpd-space-4x);
  -webkit-column-gap: var(--cpd-space-4x);
     -moz-column-gap: var(--cpd-space-4x);
          column-gap: var(--cpd-space-4x);
  grid-template-columns: auto auto;
  grid-template-rows: 1fr auto;
}

._roomHeaderInfo_p1omj_61[data-size="sm"] {
  grid-template-areas: "avatar name" ". participants";
}

._roomHeaderInfo_p1omj_61[data-size="lg"] {
  grid-template-areas: "avatar name" "avatar participants";
}

._roomAvatar_p1omj_76 {
  align-self: flex-start;
  grid-area: avatar;
}

._nameLine_p1omj_81 {
  grid-area: name;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--cpd-space-1x);
}

._nameLine_p1omj_81 > h1 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

._nameLine_p1omj_81 > svg {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

._participantsLine_p1omj_100 {
  grid-area: participants;
  color: var(--cpd-color-text-secondary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--cpd-space-1-5x);
}

@media (min-width: 800px) {
  ._headerLogo_p1omj_26,
  ._leftNav_p1omj_33._hideMobile_p1omj_33,
  ._rightNav_p1omj_45._hideMobile_p1omj_33 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  ._leftNav_p1omj_33 h3 {
    font-size: var(--font-size-subtitle);
  }
}
/*
Copyright 2023, 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._lock_zf62g_8 {
  display: block;
  padding: var(--cpd-space-1x);
  border-radius: var(--cpd-radius-pill-effect);
}

._lock_zf62g_8[data-encrypted="true"] {
  color: var(--cpd-color-icon-success-primary);
}

._lock_zf62g_8[data-encrypted="false"] {
  color: var(--cpd-color-icon-secondary);
}

@media (hover: hover) {
  ._lock_zf62g_8:hover {
    background: var(--cpd-color-bg-subtle-primary);
  }
}
/*
Copyright 2023, 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._banner_sye6n_8 {
  position: absolute;
  padding: 29px;
  background-color: var(--cpd-color-bg-subtle-primary);
  vertical-align: middle;
  font-size: var(--font-size-body);
  text-align: center;
  z-index: 1;
  top: 76px;
  width: calc(100% - 58px);
}
/*
Copyright 2022-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._page_fvtgn_8 {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: hidden;
  min-height: 100%;
}

._header_fvtgn_16 {
  padding: 76px 65px;
}

._container_fvtgn_20 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

._content_fvtgn_28 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 660px;
  padding: 0 65px;
}

._content_fvtgn_28 > * {
  margin-top: 0;
  margin-bottom: 32px;
}

._content_fvtgn_28 > :last-child {
  margin-bottom: 0;
}

/* Make the buttons the same width */
._wideButton_fvtgn_47 {
  width: 291px;
}

/* Fixed height to avoid content jumping around*/
._sendLogsSection_fvtgn_52 {
  height: 50px;
}
/*
Copyright 2022-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._rageshakeControl_65ekp_8 {
  height: 50px;
  text-align: center;
  vertical-align: middle;
}
._error_17zfc_1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--cpd-space-2x);
  max-inline-size: 480px;
}

._icon_17zfc_9 {
  -webkit-margin-after: var(--cpd-space-4x);
          margin-block-end: var(--cpd-space-4x);
}

._error_17zfc_1 > h1 {
  margin: 0;
  text-align: center;
}

._error_17zfc_1 > p {
  font: var(--cpd-font-body-lg-regular);
  color: var(--cpd-color-text-secondary);
  text-align: center;
}
/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._endCall_bwclo_8 > svg {
  color: var(--stopgap-color-on-solid-accent);
}
/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._external_jhjdf_8 {
  /* By default links will be blue/purple (or whatever the user agent does), but
  in our designs we generally want external links to be the same color as the
  surrounding text */
  color: inherit;
}
._raisedButton_unw54_1 > svg {
  color: var(--cpd-color-icon-on-solid-primary);
}

._reactionPopupMenu_unw54_5 {
  --reaction-button-padding: 10px;
  --reaction-button-fontsize: 20px;
  --reaction-button-gap: var(--cpd-separator-spacing);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

@media (max-width: 420px) {
  ._reactionPopupMenu_unw54_5 {
    --reaction-button-padding: 8px;
    --reaction-button-fontsize: 16px;
    --reaction-button-gap: 6px;
  }
}

div._reactionPopupMenuRoot_unw54_21._reactionPopupMenuModal_unw54_21 {
  --overlay-top: 82vh;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

div._reactionPopupMenuRoot_unw54_21 {
  /* Center the drawer */
  --inset-inline: 30em;
}

._reactionPopupMenuRoot_unw54_21 > div {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100vw;
}

div._reactionPopupMenuRoot_unw54_21._reactionPopupMenuModal_unw54_21 > div > div {
  padding-inline: var(--cpd-space-6x);
  padding-block: var(--cpd-space-6x);
}

._reactionPopupMenu_unw54_5 section {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
}

._reactionPopupMenu_unw54_5 section._reactionsMenuSection_unw54_47 {
  margin: auto 0;
  -webkit-box-flex: 1;
      -ms-flex: auto;
          flex: auto;
}

._reactionsMenu_unw54_47 {
  margin: 0;
  padding: 0;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  gap: var(--reaction-button-gap);
  /* Height of 3 rows plus padding. */
  max-height: calc(
    ((var(--reaction-button-fontsize) + var(--cpd-separator-spacing)) * 2) * 3
  );
  max-width: calc(
    ((var(--reaction-button-fontsize) + var(--cpd-separator-spacing)) * 2) * 5
  );
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  -webkit-box-align: auto;
      -ms-flex-align: auto;
          align-items: auto;
  -ms-flex-line-pack: start;
      align-content: start;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

._reactionsMenu_unw54_47 > * {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

._reactionButton_unw54_81 {
  padding: var(--reaction-button-padding);
  border-radius: var(--cpd-radius-pill-effect);
  font-size: var(--reaction-button-fontsize);
  min-block-size: unset;
  border: none;
  aspect-ratio: 1 / 1;
  height: 100%;
}

._verticalSeperator_unw54_91 {
  background-color: var(--cpd-color-gray-800);
  width: 2px;
  height: auto;
  margin-left: var(--cpd-separator-spacing);
  margin-right: var(--cpd-separator-spacing);
}

._alert_unw54_99 {
  margin-bottom: var(--cpd-space-3x);
  -webkit-animation: _grow-in_unw54_1 200ms;
          animation: _grow-in_unw54_1 200ms;
  height: 2.5em;
}

@-webkit-keyframes _grow-in_unw54_1 {
  from {
    height: 0;
  }

  to {
    height: 2.5em;
  }
}

@keyframes _grow-in_unw54_1 {
  from {
    height: 0;
  }

  to {
    height: 2.5em;
  }
}
/*
Copyright 2022-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._modal_lmgdq_8 {
  --inset-inline: 520px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

._dialog_lmgdq_14 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  inline-size: 580px;
  max-inline-size: 90%;
  max-block-size: 600px;
}

._content_lmgdq_21 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: hidden;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

._dialog_lmgdq_14 ._content_lmgdq_21 {
  background: var(--cpd-color-bg-canvas-default);
}

._drawer_lmgdq_32 ._content_lmgdq_21 {
  overflow: auto;
}

._drawer_lmgdq_32 {
  background: var(--cpd-color-bg-canvas-default);
  inset-block-end: 0;
  inset-inline: max(0px, calc((100% - var(--inset-inline)) / 2));
  max-block-size: 90%;
  border-start-start-radius: 28px;
  border-start-start-radius: var(--border-radius);
  border-start-end-radius: 28px;
  border-start-end-radius: var(--border-radius);
  /* Drawer comes in the Android style by default */
  --border-radius: 28px;
  --handle-block-size: 4px;
  --handle-inline-size: 32px;
  --handle-inset-block-start: var(--cpd-space-4x);
  --handle-inset-block-end: var(--cpd-space-4x);
}

body[data-platform="ios"] ._drawer_lmgdq_32 {
  --border-radius: 10px;
  --handle-block-size: 5px;
  --handle-inline-size: 36px;
  --handle-inset-block-start: var(--cpd-space-1-5x);
  --handle-inset-block-end: calc(var(--cpd-space-1x) / 4);
}

._close_lmgdq_59 {
  cursor: pointer;
  color: var(--cpd-color-icon-secondary);
  border-radius: var(--cpd-radius-pill-effect);
  padding: var(--cpd-space-1x);
  background: var(--cpd-color-bg-subtle-secondary);
  border: none;
}

._close_lmgdq_59 svg {
  display: block;
}

@media (hover: hover) {
  ._close_lmgdq_59:hover {
    background: var(--cpd-color-bg-subtle-primary);
    color: var(--cpd-color-icon-primary);
  }
}

._close_lmgdq_59:active {
  background: var(--cpd-color-bg-subtle-primary);
  color: var(--cpd-color-icon-primary);
}

._header_lmgdq_84 {
  background: var(--cpd-color-bg-subtle-secondary);
  display: grid;
}

._dialog_lmgdq_14 ._header_lmgdq_84 {
  -webkit-padding-before: var(--cpd-space-4x);
          padding-block-start: var(--cpd-space-4x);
  grid-template-columns:
    var(--cpd-space-10x) 1fr minmax(var(--cpd-space-6x), auto)
    var(--cpd-space-4x);
  grid-template-rows: auto minmax(var(--cpd-space-4x), auto);
  /* TODO: Support tabs */
  grid-template-areas: ". title close ." "tabs tabs tabs tabs";
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._dialog_lmgdq_14 ._header_lmgdq_84 h2 {
  grid-area: title;
  margin: 0;
}

._drawer_lmgdq_32 ._header_lmgdq_84 {
  grid-template-areas: "tabs";
  position: relative;
}

._close_lmgdq_59 {
  grid-area: close;
}

._body_lmgdq_114 {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

._dialog_lmgdq_14 ._body_lmgdq_114 {
  padding-inline: var(--cpd-space-10x);
  padding-block: var(--cpd-space-10x) var(--cpd-space-12x);
  overflow: auto;
}

._drawer_lmgdq_32 ._body_lmgdq_114 {
  padding-inline: var(--cpd-space-4x);
  padding-block: var(--cpd-space-9x) var(--cpd-space-10x);
}

._modal_lmgdq_8._tabbed_lmgdq_129 ._body_lmgdq_114 {
  -webkit-padding-before: 0;
          padding-block-start: 0;
}

._handle_lmgdq_133 {
  content: "";
  position: absolute;
  block-size: var(--handle-block-size);
  inset-inline: calc((100% - var(--handle-inline-size)) / 2);
  inset-block-start: var(--handle-inset-block-start);
  background: var(--cpd-color-icon-secondary);
  border-radius: var(--cpd-radius-pill-effect);
}
/*
Copyright 2023, 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._bg_180k3_8 {
  position: fixed;
  inset: 0;
  background: rgba(3, 12, 27, 0.528);
}

@-webkit-keyframes _fade-in_180k3_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes _fade-in_180k3_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

._bg_180k3_8._animate_180k3_23[data-state="open"] {
  -webkit-animation: _fade-in_180k3_1 200ms;
          animation: _fade-in_180k3_1 200ms;
}

@-webkit-keyframes _fade-out_180k3_1 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes _fade-out_180k3_1 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

._bg_180k3_8._animate_180k3_23[data-state="closed"] {
  -webkit-animation: _fade-out_180k3_1 130ms;
          animation: _fade-out_180k3_1 130ms;
  opacity: 0;
  pointer-events: none;
}

._overlay_180k3_42 {
  position: fixed;
}

._overlay_180k3_42._animate_180k3_23 {
  --overlay-top: 50%;
  left: 50%;
  top: 50%;
  top: var(--overlay-top);
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

@-webkit-keyframes _zoom-in_180k3_1 {
  from {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(80%);
            transform: translate(-50%, -50%) scale(80%);
  }
  to {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(100%);
            transform: translate(-50%, -50%) scale(100%);
  }
}

@keyframes _zoom-in_180k3_1 {
  from {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(80%);
            transform: translate(-50%, -50%) scale(80%);
  }
  to {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(100%);
            transform: translate(-50%, -50%) scale(100%);
  }
}

@-webkit-keyframes _zoom-out_180k3_1 {
  from {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(100%);
            transform: translate(-50%, -50%) scale(100%);
  }
  to {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(80%);
            transform: translate(-50%, -50%) scale(80%);
  }
}

@keyframes _zoom-out_180k3_1 {
  from {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(100%);
            transform: translate(-50%, -50%) scale(100%);
  }
  to {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(80%);
            transform: translate(-50%, -50%) scale(80%);
  }
}

._overlay_180k3_42._animate_180k3_23[data-state="open"] {
  -webkit-animation: _zoom-in_180k3_1 200ms;
          animation: _zoom-in_180k3_1 200ms;
}

._overlay_180k3_42._animate_180k3_23[data-state="closed"] {
  -webkit-animation: _zoom-out_180k3_1 130ms;
          animation: _zoom-out_180k3_1 130ms;
}

@media (prefers-reduced-motion) {
  ._overlay_180k3_42._animate_180k3_23[data-state="open"] {
    -webkit-animation-name: _fade-in_180k3_1;
            animation-name: _fade-in_180k3_1;
  }

  ._overlay_180k3_42._animate_180k3_23[data-state="closed"] {
    -webkit-animation-name: _fade-out_180k3_1;
            animation-name: _fade-out_180k3_1;
  }
}
/*
Copyright 2022-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._settingsModal_1dkeq_8 {
  block-size: 550px;
}

._settingsModal_1dkeq_8 p {
  color: var(--cpd-color-text-secondary);
}

._fieldRowText_1dkeq_16 {
  margin-bottom: 0;
}

._volumeSlider_1dkeq_20 {
  margin-top: var(--cpd-space-2x);
}

._volumeSlider_1dkeq_20 > label {
  margin-bottom: var(--cpd-space-1x);
  display: block;
}

._volumeSlider_1dkeq_20 > span {
  max-width: 20em;
}

._volumeSlider_1dkeq_20 > p {
  color: var(--cpd-color-text-secondary);
}
/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._tabContainer_1nnp9_8 {
  min-height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

._tabList_1nnp9_14 {
  overflow-y: auto;
  max-width: 100%;

  /*no scrollbars*/
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

._tabList_1nnp9_14::-webkit-scrollbar {
  /*no scrollbars*/
  background: transparent; /* Chrome/Safari/Webkit */
  width: 0px;
}
/*
Copyright 2022-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._fieldRow_iwncy_8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 32px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._field_iwncy_8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  position: relative;
}

._fieldRow_iwncy_8._rightAlign_iwncy_21 {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

._fieldRow_iwncy_8 > * {
  margin-right: 24px;
}

._fieldRow_iwncy_8 > :last-child {
  margin-right: 0;
}

._inputField_iwncy_33 {
  border-radius: 4px;
  -webkit-transition: border-color 0.25s;
  transition: border-color 0.25s;
  border: 1px solid var(--cpd-color-border-interactive-primary);
}

._inputField_iwncy_33 input,
._inputField_iwncy_33 textarea {
  font-weight: 400;
  font-size: var(--font-size-body);
  border: none;
  border-radius: 4px;
  padding: 12px 9px 10px 9px;
  color: var(--cpd-color-text-primary);
  background-color: var(--cpd-color-bg-canvas-default);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

._inputField_iwncy_33._disabled_iwncy_52 input,
._inputField_iwncy_33._disabled_iwncy_52 textarea,
._inputField_iwncy_33._disabled_iwncy_52 span {
  color: var(--cpd-color-text-disabled);
}

._inputField_iwncy_33 span {
  padding: 11px 9px;
}

._inputField_iwncy_33 span:first-child {
  padding-right: 0;
}

._inputField_iwncy_33 input::-webkit-input-placeholder, ._inputField_iwncy_33 textarea::-webkit-input-placeholder {
  -webkit-transition: color 0.25s ease-in 0s;
  transition: color 0.25s ease-in 0s;
  color: transparent;
}

._inputField_iwncy_33 input::-moz-placeholder, ._inputField_iwncy_33 textarea::-moz-placeholder {
  -moz-transition: color 0.25s ease-in 0s;
  transition: color 0.25s ease-in 0s;
  color: transparent;
}

._inputField_iwncy_33 input:-ms-input-placeholder, ._inputField_iwncy_33 textarea:-ms-input-placeholder {
  -ms-transition: color 0.25s ease-in 0s;
  transition: color 0.25s ease-in 0s;
  color: transparent;
}

._inputField_iwncy_33 input::-ms-input-placeholder, ._inputField_iwncy_33 textarea::-ms-input-placeholder {
  -ms-transition: color 0.25s ease-in 0s;
  transition: color 0.25s ease-in 0s;
  color: transparent;
}

._inputField_iwncy_33 input::placeholder,
._inputField_iwncy_33 textarea::placeholder {
  -webkit-transition: color 0.25s ease-in 0s;
  transition: color 0.25s ease-in 0s;
  color: transparent;
}

._inputField_iwncy_33 input:placeholder-shown:focus::-webkit-input-placeholder, ._inputField_iwncy_33 textarea:placeholder-shown:focus::-webkit-input-placeholder {
  -webkit-transition: color 0.25s ease-in 0.1s;
  transition: color 0.25s ease-in 0.1s;
  color: var(--cpd-color-text-placeholder);
}

._inputField_iwncy_33 input:placeholder-shown:focus::-moz-placeholder, ._inputField_iwncy_33 textarea:placeholder-shown:focus::-moz-placeholder {
  -moz-transition: color 0.25s ease-in 0.1s;
  transition: color 0.25s ease-in 0.1s;
  color: var(--cpd-color-text-placeholder);
}

._inputField_iwncy_33 input:placeholder-shown:focus:-ms-input-placeholder, ._inputField_iwncy_33 textarea:placeholder-shown:focus:-ms-input-placeholder {
  -ms-transition: color 0.25s ease-in 0.1s;
  transition: color 0.25s ease-in 0.1s;
  color: var(--cpd-color-text-placeholder);
}

._inputField_iwncy_33 input:placeholder-shown:focus::-ms-input-placeholder, ._inputField_iwncy_33 textarea:placeholder-shown:focus::-ms-input-placeholder {
  -ms-transition: color 0.25s ease-in 0.1s;
  transition: color 0.25s ease-in 0.1s;
  color: var(--cpd-color-text-placeholder);
}

._inputField_iwncy_33 input:-moz-placeholder:focus::placeholder, ._inputField_iwncy_33 textarea:-moz-placeholder:focus::placeholder {
  -moz-transition: color 0.25s ease-in 0.1s;
  transition: color 0.25s ease-in 0.1s;
  color: var(--cpd-color-text-placeholder);
}

._inputField_iwncy_33 input:-ms-input-placeholder:focus::placeholder, ._inputField_iwncy_33 textarea:-ms-input-placeholder:focus::placeholder {
  -ms-transition: color 0.25s ease-in 0.1s;
  transition: color 0.25s ease-in 0.1s;
  color: var(--cpd-color-text-placeholder);
}

._inputField_iwncy_33 input:placeholder-shown:focus::placeholder,
._inputField_iwncy_33 textarea:placeholder-shown:focus::placeholder {
  -webkit-transition: color 0.25s ease-in 0.1s;
  transition: color 0.25s ease-in 0.1s;
  color: var(--cpd-color-text-placeholder);
}

._inputField_iwncy_33 label {
  -webkit-transition:
    font-size 0.25s ease-out 0.1s,
    color 0.25s ease-out 0.1s,
    top 0.25s ease-out 0.1s,
    background-color 0.25s ease-out 0.1s;
  transition:
    font-size 0.25s ease-out 0.1s,
    color 0.25s ease-out 0.1s,
    top 0.25s ease-out 0.1s,
    background-color 0.25s ease-out 0.1s;
  color: var(--cpd-color-text-secondary);
  background-color: transparent;
  font-size: var(--font-size-body);
  position: absolute;
  left: 0;
  top: 0;
  margin: 9px 8px;
  padding: 2px;
  pointer-events: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: calc(100% - 20px);
}

._inputField_iwncy_33:focus-within {
  border-color: var(--cpd-color-text-link-external);
}

._inputField_iwncy_33 input:focus,
._inputField_iwncy_33 textarea:focus {
  outline: 0;
}

._inputField_iwncy_33 input:not(:-moz-placeholder) + label, ._inputField_iwncy_33 textarea:not(:-moz-placeholder) + label {
  background-color: var(--cpd-color-bg-canvas-default);
  -moz-transition:
    font-size 0.25s ease-out 0s,
    color 0.25s ease-out 0s,
    top 0.25s ease-out 0s,
    background-color 0.25s ease-out 0s;
  transition:
    font-size 0.25s ease-out 0s,
    color 0.25s ease-out 0s,
    top 0.25s ease-out 0s,
    background-color 0.25s ease-out 0s;
  font-size: var(--font-size-micro);
  top: -13px;
  padding: 0 2px;
  pointer-events: auto;
}

._inputField_iwncy_33 input:not(:-ms-input-placeholder) + label, ._inputField_iwncy_33 textarea:not(:-ms-input-placeholder) + label {
  background-color: var(--cpd-color-bg-canvas-default);
  -ms-transition:
    font-size 0.25s ease-out 0s,
    color 0.25s ease-out 0s,
    top 0.25s ease-out 0s,
    background-color 0.25s ease-out 0s;
  transition:
    font-size 0.25s ease-out 0s,
    color 0.25s ease-out 0s,
    top 0.25s ease-out 0s,
    background-color 0.25s ease-out 0s;
  font-size: var(--font-size-micro);
  top: -13px;
  padding: 0 2px;
  pointer-events: auto;
}

._inputField_iwncy_33 input:focus + label,
._inputField_iwncy_33 input:not(:placeholder-shown) + label,
._inputField_iwncy_33._prefix_iwncy_110 input + label,
._inputField_iwncy_33 textarea:focus + label,
._inputField_iwncy_33 textarea:not(:placeholder-shown) + label,
._inputField_iwncy_33._prefix_iwncy_110 textarea + label {
  background-color: var(--cpd-color-bg-canvas-default);
  -webkit-transition:
    font-size 0.25s ease-out 0s,
    color 0.25s ease-out 0s,
    top 0.25s ease-out 0s,
    background-color 0.25s ease-out 0s;
  transition:
    font-size 0.25s ease-out 0s,
    color 0.25s ease-out 0s,
    top 0.25s ease-out 0s,
    background-color 0.25s ease-out 0s;
  font-size: var(--font-size-micro);
  top: -13px;
  padding: 0 2px;
  pointer-events: auto;
}

._inputField_iwncy_33 input:focus + label,
._inputField_iwncy_33 textarea:focus + label {
  color: var(--cpd-color-border-focused);
}

._checkboxField_iwncy_131 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

._checkboxField_iwncy_131 label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  font-size: var(--font-size-body);
  line-height: 24px;
}

._checkboxField_iwncy_131 input {
  outline: 0;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
}

._checkbox_iwncy_131 {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: 16px;
  width: 16px;
  border: 1.5px solid rgba(185, 190, 198, 0.5);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 4px;
  margin-right: 10px;
}

._checkboxField_iwncy_131._disabled_iwncy_52,
._checkboxField_iwncy_131._disabled_iwncy_52 ._description_iwncy_168 {
  color: var(--cpd-color-text-disabled);
}

._checkboxField_iwncy_131._disabled_iwncy_52 ._checkbox_iwncy_131 {
  border-color: var(--cpd-color-border-disabled);
}

._checkbox_iwncy_131 svg {
  display: none;
}

._checkbox_iwncy_131 svg * {
  stroke: var(--stopgap-color-on-solid-accent);
}

._checkboxField_iwncy_131 input[type="checkbox"]:checked + label > ._checkbox_iwncy_131 {
  background: var(--cpd-color-text-action-accent);
  border-color: var(--cpd-color-text-action-accent);
}

._checkboxField_iwncy_131 input[type="checkbox"]:checked + label > ._checkbox_iwncy_131 svg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

._checkboxField_iwncy_131:focus-within ._checkbox_iwncy_131 {
  border: 1.5px solid var(--cpd-color-text-link-external) !important;
}

._errorMessage_iwncy_197 {
  margin: 0;
  font-size: var(--font-size-caption);
  color: var(--cpd-color-text-critical-primary);
  font-weight: 600;
}

._description_iwncy_168 {
  color: var(--cpd-color-text-secondary);
  margin-left: 26px;
  width: 100%; /* Ensure that it breaks onto the next row */
}

._description_iwncy_168._noLabel_iwncy_210 {
  margin-top: -20px; /* Ensures that there is no weired spacing if the checkbox doesn't have a label */
}
/*
Copyright 2022-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._avatarInputField_1ep5q_8 {
  position: relative;
  margin-bottom: 8px;
}

._avatar_1ep5q_8 {
  display: block;
}

._fileInput_1ep5q_17 {
  display: none;
}

._edit_1ep5q_21 {
  border-radius: var(--cpd-radius-pill-effect);
  padding: 2px;
  background: var(--cpd-color-bg-canvas-default);
  position: absolute;
  inset-block-end: -2px;
  inset-inline-end: -2px;
}

._edit_1ep5q_21 button {
  min-block-size: 0;
  block-size: var(--cpd-space-7x);
  inline-size: var(--cpd-space-7x);
  padding: var(--cpd-space-1x);
}
/*
Copyright 2022-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._content_gj715_8 {
  width: 100%;
  max-width: 350px;
  margin-left: auto;
  margin-right: auto;
}

._avatarFieldRow_gj715_15 {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
/*
Copyright 2023, 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._feedback_19yh9_8 textarea {
  height: 75px;
  border-radius: 8px;
}
._feedback_19yh9_8 {
  border-radius: 8px;
}
/*
Copyright 2023, 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._slider_15go1_8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}

._track_15go1_14 {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  border-radius: var(--cpd-radius-pill-effect);
  background: var(--cpd-color-bg-subtle-primary);
  height: var(--cpd-space-2x);
  outline: var(--cpd-border-width-1) solid
    var(--cpd-color-border-interactive-primary);
  outline-offset: calc(-1 * var(--cpd-border-width-1));
  cursor: pointer;
  -webkit-transition: outline-color ease 0.15s;
  transition: outline-color ease 0.15s;
}

._track_15go1_14[data-disabled] {
  cursor: auto;
  cursor: initial;
  outline-color: var(--cpd-color-border-disabled);
}

._highlight_15go1_31 {
  background: var(--cpd-color-bg-action-primary-rest);
  position: absolute;
  block-size: 100%;
  border-radius: var(--cpd-radius-pill-effect);
  -webkit-transition: background-color ease 0.15s;
  transition: background-color ease 0.15s;
}

._highlight_15go1_31[data-disabled] {
  background: var(--cpd-color-bg-action-primary-disabled);
}

._handle_15go1_43 {
  display: block;
  block-size: var(--cpd-space-4x);
  inline-size: var(--cpd-space-4x);
  border-radius: var(--cpd-radius-pill-effect);
  background: var(--cpd-color-bg-action-primary-rest);
  -webkit-box-shadow: 0 0 0 2px var(--cpd-color-bg-canvas-default);
          box-shadow: 0 0 0 2px var(--cpd-color-bg-canvas-default);
  cursor: pointer;
  -webkit-transition: background-color ease 0.15s;
  transition: background-color ease 0.15s;
}

._handle_15go1_43[data-disabled] {
  cursor: auto;
  cursor: initial;
  background: var(--cpd-color-bg-action-primary-disabled);
}
._selection_1akwb_1 {
  gap: 0;
}

._title_1akwb_5 {
  color: var(--cpd-color-text-secondary);
  margin-block: var(--cpd-space-3x) 0;
}

._separator_1akwb_10 {
  margin-block: 6px var(--cpd-space-4x);
}

._options_1akwb_14 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--cpd-space-4x);
}

._secondary_1akwb_20 {
  color: var(--cpd-color-text-secondary);
}
/*
Copyright 2025 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

pre {
  font-size: var(--font-size-micro);
}
/*
Copyright 2022-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._menuIcon_t5z8t_8 {
  width: 24px;
  height: 24px;

  -ms-flex-negative: 0;

      flex-shrink: 0;
}

._userButton_t5z8t_15 {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: none;
  margin: 0;
  cursor: pointer;
}

._userButton_t5z8t_15 svg * {
  fill: var(--cpd-color-icon-primary);
}
/*
Copyright 2022-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._buttons_1arp2_8 {
  margin-bottom: 0;
}
/*
Copyright 2022-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._form_jcuzc_8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
/*
Copyright 2022-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._footer_106jg_8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 28px;
}

._footer_106jg_8 p {
  margin-bottom: 0;
}

._footer_106jg_8 ._mobileLoginLink_106jg_19 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 24px;
}

._form_106jg_24 {
  padding: 0 24px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 360px;
}

._form_106jg_24 > * + * {
  margin-bottom: 24px;
}

@media (min-width: 800px) {
  ._mobileLoginLink_106jg_19 {
    display: none;
  }
}

._notice_106jg_40 {
  color: var(--cpd-color-text-secondary);
}
/*
Copyright 2022-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._container_dwllg_8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

._main_dwllg_15 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

._logo_dwllg_23 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 54px;
}

._headline_dwllg_28 {
  margin-bottom: 40px;
}

@media (min-width: 800px) {
  ._logo_dwllg_23 {
    display: none;
  }
}
/*
Copyright 2022-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._form_1vjc2_8 {
  padding: 0 24px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 409px;
  width: calc(100% - 48px);
  margin-bottom: 72px;
}

._fieldRow_1vjc2_16 {
  margin-bottom: 24px;
}

._fieldRow_1vjc2_16:last-child {
  margin-bottom: 0;
}

._button_1vjc2_24 {
  padding: 0 24px;
}

._recentCallsTitle_1vjc2_28 {
  margin-bottom: 32px;
}

._notice_1vjc2_32 {
  color: var(--cpd-color-text-secondary);
}
/*
Copyright 2022-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._callTileSpacer_l4ywf_8,
._callTile_l4ywf_8 {
  width: 329px;
}

._callTileSpacer_l4ywf_8 {
  height: 0;
}

._callTile_l4ywf_8 {
  height: 95px;
  padding: 12px;
  background-color: var(--cpd-color-bg-subtle-secondary);
  border-radius: 8px;
  overflow: hidden;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

._callTileLink_l4ywf_28 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-decoration: none;
  width: 100%;
  height: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._avatar_l4ywf_36 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

._callInfo_l4ywf_40 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 0 16px;
  color: var(--cpd-color-text-primary);
  min-width: 0;
}

._callInfo_l4ywf_40 > * {
  margin-bottom: 0;
}

._callName_l4ywf_53 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._facePile_l4ywf_59 {
  margin-top: 8px;
}

._callList_l4ywf_63 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  max-width: calc((329px + 24px) * 3);
  width: calc(100% - 48px);
  gap: 24px;
  padding: 0 24px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 24px;
}

._disabled_l4ywf_74 {
  cursor: not-allowed;
  opacity: 0.8;
}
/*
Copyright 2022-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._logo_1gx2r_8 {
  max-width: 300px;
  margin: 80px 0;
  height: auto;
}

._container_1gx2r_14 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 20px;
  height: 100%;
}

._content_1gx2r_22 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  max-width: 400px;
  width: 100%;
  min-height: 100%;
}

._formContainer_1gx2r_30 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%;
}

._formContainer_1gx2r_30 h2,
._formContainer_1gx2r_30 h4 {
  margin-top: 0;
}

._formContainer_1gx2r_30 h4 {
  font-weight: normal;
  font-size: var(--font-size-subtitle);
  margin-bottom: 0;
}

._formContainer_1gx2r_30 form {
  width: 100%;
  margin-top: 32px;
}

._formContainer_1gx2r_30 button {
  height: 48px;
  width: 100%;
  font-size: var(--font-size-body);
  font-weight: 600;
}

._authLinks_1gx2r_62 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 100px;
  font-size: var(--font-size-body);
}
/*
Copyright 2022-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._form_1wfyo_8 {
  padding: 0 24px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 360px;
}

._form_1wfyo_8 > * + * {
  margin-bottom: 24px;
}

._headline_1wfyo_18 {
  text-align: center;
  margin-bottom: 60px;
}

._callEndedContent_1wfyo_23 {
  text-align: center;
  max-width: 360px;
}

._callEndedContent_1wfyo_23 h3 {
  margin-bottom: 32px;
}

._callEndedButton_1wfyo_32 {
  width: 100%;
  margin-top: 54px;
}

._container_1wfyo_37 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: calc(100% - 64px);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._main_1wfyo_45 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

._logo_1wfyo_53 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 54px;
}

._headline_1wfyo_18 {
  margin-bottom: 40px;
}

._footer_1wfyo_62 {
  margin-bottom: 44px;
}

@media (min-width: 800px) {
  ._logo_1wfyo_53 {
    display: none;
  }

  ._container_1wfyo_37 {
    min-height: calc(100% - 76px);
  }
}
/*
Copyright 2021-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._inRoom_110p2_8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

._header_110p2_17 {
  position: sticky;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  inset-block-start: 0;
  z-index: var(--call-view-header-footer-layer);
  background: -webkit-gradient(
    linear,
    left bottom, left top,
    from(rgba(0, 0, 0, 0)),
    to(var(--cpd-color-bg-canvas-default))
  );
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0%,
    var(--cpd-color-bg-canvas-default) 100%
  );
}

._header_110p2_17._filler_110p2_29 {
  block-size: var(--cpd-space-6x);
  background: none;
}

._footer_110p2_34 {
  position: sticky;
  inset-block-end: 0;
  z-index: var(--call-view-header-footer-layer);
  display: grid;
  grid-template-columns:
    minmax(0, var(--inline-content-inset))
    1fr auto 1fr minmax(0, var(--inline-content-inset));
  grid-template-areas: ". logo buttons layout .";
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  grid-gap: var(--cpd-space-3x);
  gap: var(--cpd-space-3x);
  padding-block: var(--cpd-space-10x);
  background: -webkit-gradient(
    linear,
    left top, left bottom,
    from(rgba(0, 0, 0, 0)),
    to(var(--cpd-color-bg-canvas-default))
  );
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    var(--cpd-color-bg-canvas-default) 100%
  );
}

._footer_110p2_34._hidden_110p2_53 {
  display: none;
}

._footer_110p2_34._overlay_110p2_57 {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  opacity: 1;
  -webkit-transition: opacity 0.15s;
  transition: opacity 0.15s;
}

._footer_110p2_34._overlay_110p2_57._hidden_110p2_53 {
  display: grid;
  opacity: 0;
}

._footer_110p2_34._overlay_110p2_57:has(:focus-visible) {
  opacity: 1;
  pointer-events: initial;
}

._logo_110p2_75 {
  grid-area: logo;
  justify-self: start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--cpd-space-2x);
  -webkit-padding-start: var(--cpd-space-1x);
          padding-inline-start: var(--cpd-space-1x);
}

._buttons_110p2_84 {
  grid-area: buttons;
  justify-self: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--cpd-space-3x);
}

._layout_110p2_91 {
  grid-area: layout;
  justify-self: end;
}

@media (max-width: 660px) {
  ._footer_110p2_34 {
    grid-template-areas: ". buttons buttons buttons .";
  }

  ._logo_110p2_75 {
    display: none;
  }

  ._layout_110p2_91 {
    display: none !important;
  }
}

@media (max-width: 370px) {
  ._shareScreen_110p2_111 {
    display: none;
  }

  @media (max-height: 400px) {
    ._footer_110p2_34 {
      display: none;
    }
  }
}

@media (max-width: 320px) {
  ._invite_110p2_123,
  ._raiseHand_110p2_124 {
    display: none;
  }
}

@media (max-height: 400px) {
  ._footer_110p2_34 {
    padding-block: var(--cpd-space-4x);
  }
}

@media (max-height: 800px) {
  ._footer_110p2_34 {
    padding-block: var(--cpd-space-8x);
  }
}

@media (min-width: 800px) {
  ._buttons_110p2_84 {
    gap: var(--cpd-space-4x);
  }
}

._fixedGrid_110p2_147 {
  position: absolute;
  inline-size: 100%;
  -ms-flex-item-align: center;
      align-self: center;
}

._scrollingGrid_110p2_153 {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  inline-size: 100%;
  -ms-flex-item-align: center;
      align-self: center;
}

._fixedGrid_110p2_147,
._scrollingGrid_110p2_153 {
  /* Disable pointer events so the overlay doesn't block interaction with
  elements behind it */
  pointer-events: none;
}

._fixedGrid_110p2_147 > :not(:first-child),
._scrollingGrid_110p2_153 > :not(:first-child) {
  pointer-events: initial;
}

._tile_110p2_172 {
  position: absolute;
  inset-block-start: 0;
}

._tile_110p2_172._maximised_110p2_177 {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
/*
Copyright 2021-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._content_1cy0f_8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: var(--cpd-space-6x);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: hidden;
  height: 100%;
}

._wait_1cy0f_19 {
  color: var(--cpd-color-text-primary) !important;
  background-color: var(--cpd-color-bg-canvas-default) !important;
  /* relative colors are only supported on chromium based browsers */
}

@supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) {
._wait_1cy0f_19 {
  background-color: rgb(
    from var(--cpd-color-bg-canvas-default) r g b / 0.5
  ) !important;
}
}
._wait_1cy0f_19 > svg {
  color: var(--cpd-color-theme-primary) !important;
}

@media (max-width: 500px) {
  ._join_1cy0f_32 {
    width: 100%;
  }
}

@media (min-height: 650px) {
  ._content_1cy0f_8 {
    gap: var(--cpd-space-10x);
  }
}
/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._loading_14w06_8 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  opacity: 0.5;
  /* TODO: make this --cpd-color-fg-primary when available. */
  color: var(--cpd-color-text-primary);
}
/*
Copyright 2022-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._preview_1jjvr_8 {
  margin-inline: var(--inline-content-inset);
  min-block-size: 0;
  block-size: 50vh;
  border-radius: var(--cpd-space-4x);
  position: relative;
  overflow: hidden;
}

._preview_1jjvr_8 > video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  background-color: var(--video-tile-background);
}

video._mirror_1jjvr_24 {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}

._preview_1jjvr_8 ._cameraStarting_1jjvr_28 {
  position: absolute;
  top: var(--cpd-space-10x);
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: var(--cpd-color-text-secondary);
}

._avatarContainer_1jjvr_39 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: var(--video-tile-background);
}

._buttonBar_1jjvr_51 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(30 * var(--cpd-space-1x));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--cpd-space-4x);
  background: -webkit-gradient(
    linear,
    left top, left bottom,
    from(rgba(0, 0, 0, 0)),
    to(var(--cpd-color-bg-canvas-default))
  );
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    var(--cpd-color-bg-canvas-default) 100%
  );
}

@media (min-aspect-ratio: 1 / 1) {
  ._preview_1jjvr_8 > video {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 550px) {
  ._preview_1jjvr_8 {
    margin-inline: 0;
    border-radius: 0;
    block-size: 100%;
    width: 100%;
  }

  ._buttonBar_1jjvr_51 {
    padding-inline: var(--inline-content-inset);
  }
}
/*
Copyright 2021-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._headline_1em2y_8 {
  text-align: center;
  margin-bottom: 60px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

._callEndedContent_1em2y_15 {
  text-align: center;
  max-width: 450px;
}
._callEndedContent_1em2y_15 p {
  font-size: var(--font-size-subtitle);
}
._callEndedContent_1em2y_15 h3 {
  margin-bottom: 32px;
}

._disconnectedButtons_1em2y_26 {
  display: grid;
  grid-gap: 50px;
  gap: 50px;
}

._rageshakeButton_1em2y_31 {
  grid-column: 2;
}

._callEndedButton_1em2y_35 {
  margin: auto;
  margin-top: 54px;
}

._submitButton_1em2y_40 {
  width: 100%;
  margin-top: 54px;
  margin-left: 30px;
  margin-right: 30px !important;
}

._container_1em2y_47 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: calc(100% - 64px);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._main_1em2y_55 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-inline: var(--inline-content-inset);
}

._logo_1em2y_63 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 54px;
}

._headline_1em2y_8 {
  margin-bottom: 40px;
}

._footer_1em2y_72 {
  margin-bottom: 44px;
}

@media (min-width: 800px) {
  ._logo_1em2y_63 {
    display: none;
  }

  ._container_1em2y_47 {
    min-height: calc(100% - 76px);
  }

  ._main_1em2y_55 {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
/*
Copyright 2023, 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._starIcon_1m09w_8 {
  cursor: pointer;
}

._starRating_1m09w_12 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

._inputContainer_1m09w_18 {
  display: inline-block;
}

._hideElement_1m09w_22 {
  border: 0;
  clip-path: content-box;
  height: 0px;
  width: 0px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
  display: inline-block;
}
/*
Copyright 2022-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._tile_31vx3_8 {
  --media-view-border-radius: var(--cpd-space-4x);
  --hover-space-margin: var(--cpd-space-1x);
  -webkit-transition: outline-color ease 0.15s;
  transition: outline-color ease 0.15s;
  outline: var(--cpd-border-width-2) solid rgb(0 0 0 / 0);
}

/* Use a pseudo-element to create the expressive speaking border, since CSS
borders don't support gradients */
._tile_31vx3_8::before {
  content: "";
  position: absolute;
  z-index: -1; /* Put it below the outline */
  opacity: 0; /* Hidden unless speaking */
  -webkit-transition: opacity ease 0.15s;
  transition: opacity ease 0.15s;
  inset: calc(-1 * var(--cpd-border-width-4));
  border-radius: var(--cpd-space-5x);
  background-blend-mode: overlay, normal;
}

._tile_31vx3_8._speaking_31vx3_28 {
  /* !important because speaking border should take priority over hover */
  outline: var(--cpd-border-width-1) solid var(--cpd-color-bg-canvas-default) !important;
}

._tile_31vx3_8._speaking_31vx3_28::before {
  background:
    linear-gradient(
      119deg,
      rgba(13, 92, 189, 0.7) 0%,
      rgba(13, 189, 168, 0.7) 100%
    ),
    linear-gradient(
      180deg,
      rgba(13, 92, 189, 0.9) 0%,
      rgba(13, 189, 168, 0.9) 100%
    );
  opacity: 1;
}

._tile_31vx3_8._handRaised_31vx3_48 {
  /* !important because hand raised border should take priority over hover */
  outline: var(--cpd-border-width-2) solid var(--cpd-color-bg-canvas-default) !important;
}

._tile_31vx3_8._handRaised_31vx3_48::before {
  background:
    linear-gradient(
      119deg,
      var(--cpd-color-yellow-1200) 0%,
      var(--cpd-color-yellow-900) 100%
    ),
    linear-gradient(
      180deg,
      var(--cpd-color-yellow-1200) 0%,
      var(--cpd-color-yellow-900) 100%
    );
  opacity: 1;
}

@media (hover: hover) {
  ._tile_31vx3_8:hover {
    outline: var(--cpd-border-width-2) solid
      var(--cpd-color-border-interactive-hovered);
  }
}

._muteIcon_31vx3_75[data-muted="true"] {
  color: var(--cpd-color-icon-secondary);
}

._muteIcon_31vx3_75[data-muted="false"] {
  color: var(--cpd-color-icon-primary);
}

._volumeSlider_31vx3_83 {
  width: 100%;
}

._tile_31vx3_8 ._switchCamera_31vx3_87 {
  opacity: 1;
  background: var(--cpd-color-bg-action-secondary-rest);
  border: 1px solid var(--cpd-color-border-interactive-secondary);
}

._tile_31vx3_8 ._switchCamera_31vx3_87 > svg {
  color: var(--cpd-color-icon-primary);
}

@media (hover) {
  ._tile_31vx3_8 ._switchCamera_31vx3_87:hover {
    background: var(--cpd-color-bg-subtle-secondary);
    border-color: var(--cpd-color-border-interactive-hovered);
  }
}

._tile_31vx3_8 ._switchCamera_31vx3_87:active {
  background: var(--cpd-color-bg-subtle-primary);
  border-color: var(--cpd-color-border-interactive-hovered);
}
/*
Copyright 2022-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._media_1yzvo_8 {
  container-name: mediaView;
  container-type: size;
  border-radius: var(--media-view-border-radius);
  /*Add spacing for the hover boarder. Otherwise it might get clipped.*/
  margin: var(--hover-space-margin);
}

._media_1yzvo_8 video {
  inline-size: 100%;
  block-size: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  background-color: var(--video-tile-background);
  /* This transform is a no-op, but it forces Firefox to use a different
  rendering path, one that actually clips the corners of <video> elements into
  the intended rounded shape. We can remove this if Firefox stops being broken. */
  -webkit-transform: translate(0);
          transform: translate(0);
}

._media_1yzvo_8._mirror_1yzvo_27 video {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}

._media_1yzvo_8[data-video-fit="cover"] video {
  -o-object-fit: cover;
     object-fit: cover;
}

._media_1yzvo_8[data-video-fit="contain"] video {
  -o-object-fit: contain;
     object-fit: contain;
}

._bg_1yzvo_39 {
  background-color: var(--video-tile-background);
  inline-size: 100%;
  block-size: 100%;
  border-radius: inherit;
  contain: strict;
}

._avatar_1yzvo_47 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  pointer-events: none;
}

/* CSS makes us put a condition here, even though all we want to do is
unconditionally select the container so we can use cqmin units */
@container mediaView (width > 0) {
  ._avatar_1yzvo_47 {
    /* Half of the smallest dimension of the tile */
    inline-size: 50cqmin;
    block-size: 50cqmin;
  }
}

._avatar_1yzvo_47 > img {
  /* To make avatars scale smoothly with their tiles during animations, we
  override the styles set on the element */
  inline-size: 100% !important;
  block-size: 100% !important;
}

._fg_1yzvo_72 {
  position: absolute;
  inset: var(
    --media-view-fg-inset,
    calc(var(--media-view-border-radius) - var(--cpd-space-3x))
  );
  display: grid;
  grid-template-columns: 30px 1fr 30px;
  grid-template-rows: 1fr auto;
  grid-template-areas: "reactions status ." "nameTag nameTag button";
  grid-gap: var(--cpd-space-1x);
  gap: var(--cpd-space-1x);
  place-items: start;
}

._nameTag_1yzvo_86 {
  grid-area: nameTag;
  place-self: end start;
  padding: var(--cpd-space-1x);
  padding-block: var(--cpd-space-1x);
  color: var(--cpd-color-text-primary);
  background-color: var(--cpd-color-bg-canvas-default);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: var(--cpd-radius-pill-effect);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  overflow: hidden;
  -webkit-box-shadow: var(--small-drop-shadow);
          box-shadow: var(--small-drop-shadow);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  max-inline-size: 100%;
}

._status_1yzvo_103 {
  grid-area: status;
  justify-self: center;
  align-self: start;
  padding: var(--cpd-space-2x);
  padding-block: var(--cpd-space-2x);
  color: var(--cpd-color-text-primary);
  background-color: var(--cpd-color-bg-canvas-default);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: var(--cpd-radius-pill-effect);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  overflow: hidden;
  -webkit-box-shadow: var(--small-drop-shadow);
          box-shadow: var(--small-drop-shadow);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  max-inline-size: 100%;
  text-align: center;
}

._reactions_1yzvo_122 {
  grid-area: reactions;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--cpd-space-1x);
}

._nameTag_1yzvo_86 > svg,
._nameTag_1yzvo_86 > span {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

._nameTag_1yzvo_86 > ._name_1yzvo_86 {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-inline: var(--cpd-space-2x);
  -ms-flex-negative: 1;
      flex-shrink: 1;
}

._errorIcon_1yzvo_141 {
  display: block;
  color: var(--cpd-color-icon-critical-primary);
}

._fg_1yzvo_72 > button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  border-radius: var(--cpd-radius-pill-effect);
  padding: var(--cpd-space-1x);
  background: var(--cpd-color-bg-action-primary-rest);
  -webkit-box-shadow: var(--small-drop-shadow);
          box-shadow: var(--small-drop-shadow);
  cursor: pointer;
  opacity: 0;
  -webkit-transition:
    opacity 0.15s,
    background-color 0.1s;
  transition:
    opacity 0.15s,
    background-color 0.1s;
}

._fg_1yzvo_72:has(:focus-visible) > button,
._fg_1yzvo_72 > button[data-enabled="true"],
._fg_1yzvo_72 > button[data-state="open"] {
  opacity: 1;
}

@media (hover) {
  ._fg_1yzvo_72:hover > button {
    opacity: 1;
  }

  ._fg_1yzvo_72 > button:hover {
    background: var(--cpd-color-bg-action-primary-hovered);
  }
}

._fg_1yzvo_72 > button:active {
  background: var(--cpd-color-bg-action-primary-pressed);
}

._fg_1yzvo_72 > button[data-state="open"] {
  background: var(--cpd-color-bg-action-primary-pressed);
}

._fg_1yzvo_72 > button > svg {
  display: block;
  color: var(--cpd-color-icon-on-solid-primary);
}

._fg_1yzvo_72 > button:first-of-type {
  grid-area: button;
}
._reactionIndicatorWidget_14f9a_1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #00000030;
  border-radius: var(--cpd-radius-pill-effect);
  -webkit-box-shadow: 0 0 var(--cpd-space-2x) #00000040;
          box-shadow: 0 0 var(--cpd-space-2x) #00000040;
  background: "ffffff40";
  backdrop-filter: blur(10px);
  outline: var(--cpd-border-width-1) solid var(--cpd-color-alpha-gray-400);
  outline-offset: calc(-1 * var(--cpd-border-width-1));
}

._reactionIndicatorWidget_14f9a_1 > p {
  padding: none;
  margin-top: auto;
  margin-bottom: auto;
  width: 3em;
  padding-right: var(--cpd-space-2x);
  margin-left: calc(var(--cpd-space-2x) * -1);
}

._reactionIndicatorWidgetLarge_14f9a_21 > p {
  padding: var(--cpd-space-2x);
  padding-right: var(--cpd-space-4x);
  padding-left: 0;
  margin-left: 0;
}

._reactionLarge_14f9a_28 {
  margin: var(--cpd-space-2x);
  padding: var(--cpd-space-4x);
  padding-block: var(--cpd-space-4x);
}

._reaction_14f9a_1 {
  margin: var(--cpd-space-1x);
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: var(--cpd-radius-pill-effect);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  overflow: hidden;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  max-inline-size: 100%;
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
  padding: var(--cpd-space-1x);
  padding-block: var(--cpd-space-1x);
}

._reaction_14f9a_1 > span {
  width: var(--cpd-space-6x);
  height: var(--cpd-space-6x);
  display: inline-block;
  text-align: center;
  font-size: 1.2em;
  /* Centralise */
  line-height: 1.2;
}

._reactionLarge_14f9a_28 > span {
  width: 30px;
  height: 30px;
  font-size: 25px;
}
/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._modal_13thw_8 pre {
  font-size: var(--font-size-micro);
}

._statsPill_13thw_12 {
  border-radius: var(--media-view-border-radius);
  grid-area: none;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
/*
Copyright 2023, 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._toggle_z1rxf_8 {
  padding: 2px;
  border: 1px solid var(--cpd-color-border-interactive-secondary);
  border-radius: var(--cpd-radius-pill-effect);
  background: var(--cpd-color-bg-canvas-default);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

._toggle_z1rxf_8 input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  /* Safari puts a margin on these, which is not removed via appearance: none */
  margin: 0;
  block-size: var(--cpd-space-11x);
  inline-size: var(--cpd-space-11x);
  cursor: pointer;
  border-radius: var(--cpd-radius-pill-effect);
  background: var(--cpd-color-bg-action-secondary-rest);
  -webkit-box-shadow: var(--small-drop-shadow);
          box-shadow: var(--small-drop-shadow);
  -webkit-transition: background-color 0.1s;
  transition: background-color 0.1s;
}

._toggle_z1rxf_8 svg {
  display: block;
  position: absolute;
  padding: calc(2.5 * var(--cpd-space-1x));
  pointer-events: none;
  color: var(--cpd-color-icon-primary);
  -webkit-transition: color 0.1s;
  transition: color 0.1s;
}

._toggle_z1rxf_8 svg:nth-child(2) {
  inset-inline-start: 2px;
}

._toggle_z1rxf_8 svg:nth-child(4) {
  inset-inline-end: 2px;
}

@media (hover: hover) {
  ._toggle_z1rxf_8 input:hover {
    background: var(--cpd-color-bg-action-secondary-hovered);
    -webkit-box-shadow: none;
            box-shadow: none;
  }
}

._toggle_z1rxf_8 input:active {
  background: var(--cpd-color-bg-action-secondary-pressed);
  -webkit-box-shadow: none;
          box-shadow: none;
}

._toggle_z1rxf_8 input:checked {
  background: var(--cpd-color-bg-action-primary-rest);
}

._toggle_z1rxf_8 input:checked + svg {
  color: var(--cpd-color-icon-on-solid-primary);
}

@media (hover: hover) {
  ._toggle_z1rxf_8 input:checked:hover {
    background: var(--cpd-color-bg-action-primary-hovered);
  }
}

._toggle_z1rxf_8 input:checked:active {
  background: var(--cpd-color-bg-action-primary-pressed);
}

._toggle_z1rxf_8 input:first-child {
  -webkit-margin-end: 5px;
          margin-inline-end: 5px;
}
/*
Copyright 2023, 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._grid_19qx5_8 {
  contain: layout style;
}

._slot_19qx5_12 {
  contain: strict;
}
/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._tile_lwkx2_8._draggable_lwkx2_8 {
  cursor: -webkit-grab;
  cursor: grab;
}

._tile_lwkx2_8._draggable_lwkx2_8:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._contents_18q5h_8 {
  block-size: 100%;
  inline-size: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: var(--cpd-space-6x);
  contain: strict;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-scroll-snap-type: inline mandatory;
      scroll-snap-type: inline mandatory;
  scroll-snap-stop: always;
  /* It would be nice to use smooth scrolling here, but Firefox has a bug where
  it will not re-snap if the snapping point changes while it's smoothly
  animating to another snapping point.
  scroll-behavior: smooth; */
}

._tile_18q5h_25._maximised_18q5h_25 ._contents_18q5h_8 {
  border-radius: 0;
}

._item_18q5h_29 {
  height: 100%;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  --media-view-fg-inset: 10px;
}

._item_18q5h_29._snap_18q5h_36 {
  scroll-snap-align: start;
}

._advance_18q5h_40 {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  opacity: 0;
  padding: calc(var(--cpd-space-3x) - var(--cpd-border-width-1));
  border: var(--cpd-border-width-1) solid
    var(--cpd-color-border-interactive-secondary);
  border-radius: var(--cpd-radius-pill-effect);
  background: var(--cpd-color-alpha-gray-1400);
  -webkit-box-shadow: var(--small-drop-shadow);
          box-shadow: var(--small-drop-shadow);
  -webkit-transition-duration: 0.1s;
          transition-duration: 0.1s;
  -webkit-transition-property: opacity, background-color, border-color;
  transition-property: opacity, background-color, border-color;
  position: absolute;
  z-index: 1;
  /* Center the button vertically on the tile */
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

._advance_18q5h_40 > svg {
  display: block;
  color: var(--cpd-color-icon-on-solid-primary);
}

@media (hover) {
  ._advance_18q5h_40:hover {
    border-color: var(--cpd-color-bg-action-primary-hovered);
    background: var(--cpd-color-bg-action-primary-hovered);
  }
}

._advance_18q5h_40:active {
  border-color: var(--cpd-color-bg-action-primary-pressed);
  background: var(--cpd-color-bg-action-primary-pressed);
}

._back_18q5h_76 {
  inset-inline-start: var(--cpd-space-1x);
}

._next_18q5h_80 {
  inset-inline-end: var(--cpd-space-1x);
}

._expand_18q5h_84 {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  opacity: 0;
  padding: var(--cpd-space-2x);
  border: none;
  border-radius: var(--cpd-radius-pill-effect);
  background: rgba(from var(--cpd-color-gray-100) r g b / 0.6);
  -webkit-box-shadow: var(--small-drop-shadow);
          box-shadow: var(--small-drop-shadow);
  -webkit-transition:
    opacity 0.15s,
    background-color 0.1s;
  transition:
    opacity 0.15s,
    background-color 0.1s;
  z-index: 1;
  --inset: 6px;
  inset-block-end: 6px;
  inset-block-end: var(--inset);
  inset-inline-end: 6px;
  inset-inline-end: var(--inset);
}

._bottomRightButtons_18q5h_102 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--cpd-space-2x);
  position: absolute;
  inset-block-end: var(--cpd-space-1x);
  inset-inline-end: var(--cpd-space-1x);
  z-index: 1;
}

._expand_18q5h_84 > svg {
  display: block;
  color: var(--cpd-color-icon-primary);
}

@media (hover) {
  ._expand_18q5h_84:hover {
    background: var(--cpd-color-gray-400);
  }
}

._expand_18q5h_84:active {
  background: var(--cpd-color-gray-100);
}

@media (hover) {
  ._tile_18q5h_25:hover > div > button {
    opacity: 1;
  }
}

._tile_18q5h_25:has(:focus-visible) > div > button {
  opacity: 1;
}

._indicators_18q5h_136 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--cpd-space-2x);
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: calc(-1 * var(--cpd-space-6x));
  width: 100%;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  -webkit-transition: opacity ease 0.15s;
  transition: opacity ease 0.15s;
  opacity: 0;
}

._indicators_18q5h_136._show_18q5h_148 {
  opacity: 1;
}

._maximised_18q5h_25 ._indicators_18q5h_136 {
  inset-block-end: calc(-1 * var(--cpd-space-4x) - 2px);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

._indicators_18q5h_136 > ._item_18q5h_29 {
  -ms-flex-preferred-size: 32px;
      flex-basis: 32px;
  block-size: 2px;
  -webkit-transition: background-color ease 0.15s;
  transition: background-color ease 0.15s;
}

._indicators_18q5h_136 > ._item_18q5h_29[data-visible="false"] {
  background: var(--cpd-color-alpha-gray-600);
}

._indicators_18q5h_136 > ._item_18q5h_29[data-visible="true"] {
  background: var(--cpd-color-gray-1400);
}
/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._fixed_r39jt_8,
._scrolling_r39jt_9 {
  block-size: 100%;
}

._scrolling_r39jt_9 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  gap: var(--gap);
}

._scrolling_r39jt_9 > ._slot_r39jt_21 {
  width: var(--width);
  height: var(--height);
}

._fixed_r39jt_8 {
  position: relative;
}

._fixed_r39jt_8 > ._slot_r39jt_21 {
  position: absolute;
  inline-size: 404px;
  block-size: 233px;
  inset-block: 0;
  inset-inline: var(--cpd-space-3x);
}

._fixed_r39jt_8 > ._slot_r39jt_21[data-block-alignment="start"] {
  inset-block-end: unset;
}

._fixed_r39jt_8 > ._slot_r39jt_21[data-block-alignment="end"] {
  inset-block-start: unset;
}

._fixed_r39jt_8 > ._slot_r39jt_21[data-inline-alignment="start"] {
  inset-inline-end: unset;
}

._fixed_r39jt_8 > ._slot_r39jt_21[data-inline-alignment="end"] {
  inset-inline-start: unset;
}
/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._layer_mc5gk_8 {
  block-size: 100%;
  display: grid;
  place-items: center;
}

._container_mc5gk_14 {
  position: relative;
}

._local_mc5gk_18 {
  position: absolute;
  inline-size: 180px;
  block-size: 135px;
  inset: var(--cpd-space-4x);
}

._spotlight_mc5gk_25 {
  position: absolute;
  inline-size: 404px;
  block-size: 233px;
}

._slot_mc5gk_31[data-block-alignment="start"] {
  inset-block-end: unset;
}

._slot_mc5gk_31[data-block-alignment="end"] {
  inset-block-start: unset;
}

._slot_mc5gk_31[data-inline-alignment="start"] {
  inset-inline-end: unset;
}

._slot_mc5gk_31[data-inline-alignment="end"] {
  inset-inline-start: unset;
}
/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._layer_1swii_8 {
  block-size: 100%;
}

._spotlight_1swii_12 {
  block-size: 100%;
  inline-size: 100%;
}

._pip_1swii_17 {
  position: absolute;
  inline-size: 135px;
  block-size: 160px;
  inset: var(--cpd-space-4x);
}

@media (min-width: 600px) {
  ._pip_1swii_17 {
    inline-size: 180px;
    block-size: 135px;
  }
}

._pip_1swii_17[data-block-alignment="start"] {
  inset-block-end: unset;
}

._pip_1swii_17[data-block-alignment="end"] {
  inset-block-start: unset;
}

._pip_1swii_17[data-inline-alignment="start"] {
  inset-inline-end: unset;
}

._pip_1swii_17[data-inline-alignment="end"] {
  inset-inline-start: unset;
}
/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._layer_jsvx2_8 {
  block-size: 100%;
  display: grid;
  --gap: 20px;
  grid-gap: 20px;
  grid-gap: var(--gap);
  gap: 20px;
  gap: var(--gap);
  --grid-slot-width: 180px;
  grid-template-columns: 1fr 180px;
  grid-template-columns: 1fr var(--grid-slot-width);
  grid-template-rows: minmax(1fr, auto);
  padding-inline: 20px;
  padding-inline: var(--gap);
}

._spotlight_jsvx2_19 {
  container: spotlight / size;
  display: grid;
  place-items: center;
}

/* CSS makes us put a condition here, even though all we want to do is
unconditionally select the container so we can use cq units */
@container spotlight (width > 0) {
  ._spotlight_jsvx2_19 > ._slot_jsvx2_28 {
    inline-size: min(100cqi, 100cqb * (17 / 9));
    block-size: min(100cqb, 100cqi / (4 / 3));
  }
}

._grid_jsvx2_34 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: var(--gap);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
}

._grid_jsvx2_34 > ._slot_jsvx2_28 {
  inline-size: 180px;
  block-size: 135px;
}
/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._layer_1q32d_8 {
  block-size: 100%;
  display: grid;
  --gap: 20px;
  grid-gap: 20px;
  grid-gap: var(--gap);
  gap: 20px;
  gap: var(--gap);
  margin-inline: 0;
  display: block;
}

._spotlight_1q32d_17 {
  container: spotlight / size;
  display: grid;
  place-items: center;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  -webkit-margin-after: var(--cpd-space-4x);
          margin-block-end: var(--cpd-space-4x);
}

._spotlight_1q32d_17._withIndicators_1q32d_26 {
  -webkit-margin-after: calc(2 * var(--cpd-space-4x) + 2px);
          margin-block-end: calc(2 * var(--cpd-space-4x) + 2px);
}

._spotlight_1q32d_17 > ._slot_1q32d_30 {
  inline-size: 100%;
  block-size: 100%;
}

._grid_1q32d_35 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: var(--grid-gap);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: start;
      align-content: start;
  padding-inline: var(--grid-gap);
}

._grid_1q32d_35 > ._slot_1q32d_30 {
  inline-size: var(--grid-tile-width);
  block-size: var(--grid-tile-height);
}
._container_1ux8r_1 {
  position: absolute;
  display: inline;
  z-index: 2;
  pointer-events: none;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
}

._reaction_1ux8r_12 {
  font-size: 32pt;
  /* Reactions are "active" for 3 seconds (as per REACTION_ACTIVE_TIME_MS), give a bit more time for it to fade out. */
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-name: _reaction-up_1ux8r_1;
          animation-name: _reaction-up_1ux8r_1;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
  top: 80vh;
}

@-webkit-keyframes _reaction-up_1ux8r_1 {
  from {
    opacity: 1;
    translate: 0 0;
    scale: 200%;
    top: 80vh;
  }

  to {
    top: 0;
    opacity: 0;
    scale: 100%;
  }
}

@keyframes _reaction-up_1ux8r_1 {
  from {
    opacity: 1;
    translate: 0 0;
    scale: 200%;
    top: 80vh;
  }

  to {
    top: 0;
    opacity: 0;
    scale: 100%;
  }
}

@media (prefers-reduced-motion) {
  @-webkit-keyframes _reaction-up-reduced_1ux8r_1 {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }
  @keyframes _reaction-up-reduced_1ux8r_1 {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  ._reaction_1ux8r_12 {
    font-size: 48pt;
    -webkit-animation-name: _reaction-up-reduced_1ux8r_1;
            animation-name: _reaction-up-reduced_1ux8r_1;
    top: calc(-50vh + (48pt / 2));
    left: calc(50vw - (48pt / 2)) !important;
  }
}
._overlay_5vxkn_1 {
  position: fixed;
  z-index: var(--call-view-overlay-layer);
  inset: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: var(--cpd-space-2x);
}

@-webkit-keyframes _fade-in_5vxkn_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes _fade-in_5vxkn_1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

._overlay_5vxkn_1[data-show="true"] {
  -webkit-animation: _fade-in_5vxkn_1 200ms;
          animation: _fade-in_5vxkn_1 200ms;
}

@-webkit-keyframes _fade-out_5vxkn_1 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    display: none;
  }
}

@keyframes _fade-out_5vxkn_1 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    display: none;
  }
}

._overlay_5vxkn_1[data-show="false"] {
  -webkit-animation: _fade-out_5vxkn_1 130ms forwards;
          animation: _fade-out_5vxkn_1 130ms forwards;
  pointer-events: none;
}

._overlay_5vxkn_1::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--cpd-color-bg-canvas-default);
  opacity: 0.94;
}

._icon_5vxkn_49 {
  -webkit-margin-after: var(--cpd-space-4x);
          margin-block-end: var(--cpd-space-4x);
  background: var(--cpd-color-alpha-gray-600);
  color: var(--cpd-color-icon-primary);
}

._overlay_5vxkn_1 > h2 {
  text-align: center;
  margin: 0;
}

._overlay_5vxkn_1 > p {
  text-align: center;
}

._spacer_5vxkn_64 {
  min-height: var(--cpd-space-32x);
}
._bar_32sbm_1 {
  block-size: 64px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

._bar_32sbm_1 > header {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 64px;
  z-index: var(--call-view-header-footer-layer);
}

._bar_32sbm_1 svg path {
  fill: var(--cpd-color-icon-primary);
}

._bar_32sbm_1 > header > h1 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*
Copyright 2023, 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._toast_z5w27_8 {
  color: var(--cpd-color-text-on-solid-primary);
  background: var(--cpd-color-alpha-gray-1200);
  padding-inline: var(--cpd-space-3x);
  padding-block: var(--cpd-space-1x);
  border: none;
  border-radius: var(--cpd-radius-pill-effect);
  -webkit-box-shadow: var(--small-drop-shadow);
          box-shadow: var(--small-drop-shadow);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--cpd-space-1x);
}

._toast_z5w27_8 > h3 {
  margin: 0;
}

._toast_z5w27_8 > svg {
  color: var(--cpd-color-icon-on-solid-primary);
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-margin-end: calc(-1 * var(--cpd-space-1x));
          margin-inline-end: calc(-1 * var(--cpd-space-1x));
}
._overlay_128zq_1 {
  position: absolute;
  inset: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  pointer-events: none;
}

._content_128zq_10 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
}

._pulse_128zq_17 {
  position: relative;
  height: 90px;
}

._pulse_128zq_17::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 9999px;
  border: 12px solid rgba(255, 255, 255, 0.6);
  -webkit-animation: _pulse_128zq_17 var(--call-ring-duration-s) ease-out infinite;
          animation: _pulse_128zq_17 var(--call-ring-duration-s) ease-out infinite;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  opacity: 0;
}

._text_128zq_33 {
  color: var(--cpd-color-text-on-solid-primary);
}

@-webkit-keyframes _pulse_128zq_17 {
  0% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    opacity: 0.7;
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  35% {
    -webkit-transform: scale(1.15);
            transform: scale(1.15);
    opacity: 0.15;
  }
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    opacity: 0;
  }
  50.01% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  85% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
}

@keyframes _pulse_128zq_17 {
  0% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    opacity: 0.7;
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  35% {
    -webkit-transform: scale(1.15);
            transform: scale(1.15);
    opacity: 0.15;
  }
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    opacity: 0;
  }
  50.01% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  85% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
}
/*
Copyright 2022-2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._url_1ibuh_8 {
  text-align: center;
  color: var(--cpd-color-text-secondary);
  -webkit-margin-after: var(--cpd-space-8x);
          margin-block-end: var(--cpd-space-8x);
  overflow-wrap: break-word;
}

._button_1ibuh_15 {
  width: 100%;
}

._qrCode_1ibuh_19 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

._qrCode_1ibuh_19 img {
  -webkit-margin-after: var(--cpd-space-8x);
          margin-block-end: var(--cpd-space-8x);
}
/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._qrCode_h54ia_8 img {
  max-width: 100%;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: pixelated;
  border-radius: var(--cpd-space-4x);
}
/*
Copyright 2023, 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/

._modal_1tnec_8 p {
  text-align: center;
  -webkit-margin-after: var(--cpd-space-8x);
          margin-block-end: var(--cpd-space-8x);
}

._modal_1tnec_8 button,
._modal_1tnec_8 a {
  width: 100%;
}

._modal_1tnec_8 button {
  -webkit-margin-after: var(--cpd-space-6x);
          margin-block-end: var(--cpd-space-6x);
}

._modal_1tnec_8 a {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}