/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src\\app\\layout.tsx","import":"Inter","arguments":[{"variable":"--font-primary","subsets":["latin"],"display":"swap"}],"variableName":"primary"} ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: '__Inter_e8ce0c';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/55c55f0601d81cf3-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Inter_e8ce0c';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/26a46d62cd723877-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: '__Inter_e8ce0c';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/97e0cb1ae144a2a9-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: '__Inter_e8ce0c';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/581909926a08bbc8-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: '__Inter_e8ce0c';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/df0a9ae256c0569c-s.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: '__Inter_e8ce0c';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/8e9860b6e62d6359-s.woff2) format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: '__Inter_e8ce0c';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format('woff2');
  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;
}@font-face {font-family: '__Inter_Fallback_e8ce0c';src: local("Arial");ascent-override: 90.49%;descent-override: 22.56%;line-gap-override: 0.00%;size-adjust: 107.06%
}.__className_e8ce0c {font-family: '__Inter_e8ce0c', '__Inter_Fallback_e8ce0c';font-style: normal
}.__variable_e8ce0c {--font-primary: '__Inter_e8ce0c', '__Inter_Fallback_e8ce0c'
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src\\app\\layout.tsx","import":"Roboto_Mono","arguments":[{"variable":"--font-code","subsets":["latin"],"display":"swap"}],"variableName":"code"} ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: '__Roboto_Mono_5899e0';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(/_next/static/media/1f160ec2cb9962ef-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Roboto_Mono_5899e0';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(/_next/static/media/ad8a7e2c3c2c120b-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: '__Roboto_Mono_5899e0';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(/_next/static/media/cde148027b808b99-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: '__Roboto_Mono_5899e0';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(/_next/static/media/e61ae719f7cc4155-s.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: '__Roboto_Mono_5899e0';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(/_next/static/media/0ea4f4df910e6120-s.woff2) format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: '__Roboto_Mono_5899e0';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(/_next/static/media/739c2d8941231bb4-s.p.woff2) format('woff2');
  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;
}@font-face {font-family: '__Roboto_Mono_Fallback_5899e0';src: local("Arial");ascent-override: 77.84%;descent-override: 20.13%;line-gap-override: 0.00%;size-adjust: 134.61%
}.__className_5899e0 {font-family: '__Roboto_Mono_5899e0', '__Roboto_Mono_Fallback_5899e0';font-style: normal
}.__variable_5899e0 {--font-code: '__Roboto_Mono_5899e0', '__Roboto_Mono_Fallback_5899e0'
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/Arrow.module.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.Arrow_arrowContainer__Npp8S {
  transition: var(--transition-micro-medium);
  height: var(--static-space-16);
  width: var(--static-space-0);
  visibility: hidden;
}

.Arrow_arrowHead__X_E8q {
  transition: var(--transition-micro-medium);
  width: var(--static-space-0);
  transition-delay: 0.2s;
  position: absolute;
  right: 0;
  transform-origin: right center;
  transform: rotate(0);
}

.Arrow_active__YH_mN {
  width: var(--static-space-16);
  visibility: visible;
}
.Arrow_active__YH_mN .Arrow_arrow__YBrbx {
  width: var(--static-space-12);
}
.Arrow_active__YH_mN .Arrow_arrowHead__X_E8q {
  width: var(--static-space-8);
}
.Arrow_active__YH_mN .Arrow_arrowHead__X_E8q:nth-child(2) {
  transform: rotate(45deg);
}
.Arrow_active__YH_mN .Arrow_arrowHead__X_E8q:nth-child(3) {
  transform: rotate(-45deg);
}

.Arrow_onSolid__mds__ {
  background: var(--brand-on-solid-strong);
}

.Arrow_onBackground__FV6a6 {
  background: var(--brand-on-background-strong);
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/Avatar.module.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.Avatar_avatar__HEaW3.Avatar_xs__sYprt {
  width: var(--static-space-20);
  height: var(--static-space-20);
  min-width: var(--static-space-20);
  min-height: var(--static-space-20);
}
.Avatar_avatar__HEaW3.Avatar_s__4f66g {
  width: var(--static-space-24);
  height: var(--static-space-24);
  min-width: var(--static-space-24);
  min-height: var(--static-space-24);
}
.Avatar_avatar__HEaW3.Avatar_m__epOAa {
  width: var(--static-space-32);
  height: var(--static-space-32);
  min-width: var(--static-space-32);
  min-height: var(--static-space-32);
}
.Avatar_avatar__HEaW3.Avatar_l__585TS {
  width: var(--static-space-48);
  height: var(--static-space-48);
  min-width: var(--static-space-48);
  min-height: var(--static-space-48);
}
.Avatar_avatar__HEaW3.Avatar_xl__iqZu9 {
  width: var(--static-space-160);
  height: var(--static-space-160);
  min-width: var(--static-space-160);
  min-height: var(--static-space-160);
}
.Avatar_avatar__HEaW3.Avatar_xl__iqZu9 .Avatar_position__A8iC_ {
  bottom: var(--static-space-16);
  right: var(--static-space-16);
}
.Avatar_avatar__HEaW3 .Avatar_value__tHWJw {
  white-space: nowrap;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.Avatar_indicator__87bSP {
  box-sizing: content-box;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translateX(var(--static-space-2)) translateY(var(--static-space-2));
}

.Avatar_image__KEbAK {
  border-radius: var(--radius-full);
  -o-object-position: center;
     object-position: center;
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/AvatarGroup.module.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.AvatarGroup_avatar__wBXXS {
  position: relative;
  margin-left: calc(-1 * var(--static-space-8));
}
.AvatarGroup_avatar__wBXXS:first-child {
  margin-left: 0;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/Badge.module.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.Badge_badge__M5oO0 {
  border: 1px solid var(--brand-alpha-medium);
}

.Badge_animation__7HZ2w {
  position: relative;
  overflow: hidden;
}
.Badge_animation__7HZ2w::before {
  content: "";
  opacity: 0;
  border-radius: var(--radius-full);
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent 20%, var(--brand-alpha-medium) 50%, transparent 80%);
  transform: skewX(-20deg);
  animation: Badge_shineDefault__tvEwR 9s ease-in-out infinite;
}
.Badge_animation__7HZ2w:hover::before {
  animation: Badge_shineHover__a_K0B 3s ease-in-out infinite;
}

@keyframes Badge_shineDefault__tvEwR {
  0% {
    left: -100%;
  }
  1% {
    left: -100%;
    opacity: 1;
  }
  15% {
    left: 100%;
    opacity: 1;
  }
  16% {
    opacity: 0;
  }
  100% {
    left: -100%;
  }
}
@keyframes Badge_shineHover__a_K0B {
  0% {
    left: -100%;
  }
  1% {
    left: -100%;
    opacity: 1;
  }
  45% {
    left: 100%;
    opacity: 1;
  }
  46% {
    opacity: 0;
  }
  100% {
    left: -100%;
  }
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/Button.module.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.Button_button__ROudt {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  padding: 0;
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: var(--transition-micro-medium);
}
.Button_button__ROudt:disabled {
  box-shadow: none;
  background: var(--neutral-solid-weak);
  color: var(--neutral-on-solid-weak);
  border: none;
  pointer-events: none;
  cursor: not-allowed;
}

.Button_primary__vsG5A {
  box-shadow: inset 0 var(--solid-inset-distance) var(--solid-inset-size) var(--solid-inset-color-brand);
  background: var(--brand-solid-medium);
  border-style: solid;
  border-width: var(--solid-border-width);
  border-color: var(--solid-border-color-brand);
  color: var(--brand-on-solid-strong);
}
.Button_primary__vsG5A:hover, .Button_primary__vsG5A:focus {
  background: var(--brand-solid-strong);
}

.Button_secondary__71RDM {
  box-shadow: inset 0 var(--solid-inset-distance) var(--solid-inset-size) var(--solid-inset-color-neutral);
  background: var(--neutral-background-medium);
  border-style: solid;
  border: 1px solid var(--neutral-border-medium);
  color: var(--neutral-on-background-strong);
}
.Button_secondary__71RDM:hover, .Button_secondary__71RDM:focus {
  background: var(--neutral-background-strong);
  border-color: var(--neutral-border-strong);
}

.Button_tertiary__0_zNT {
  box-shadow: inset 0 var(--solid-inset-distance) var(--solid-inset-size) var(--solid-inset-color-neutral);
  background: var(--static-transparent);
  border: 1px solid var(--neutral-border-medium);
  color: var(--neutral-on-background-strong);
}
.Button_tertiary__0_zNT:hover, .Button_tertiary__0_zNT:focus {
  background: var(--neutral-background-medium);
  border-color: var(--neutral-border-strong);
}

.Button_ghost__9CckO {
  border: none;
  background: var(--static-transparent);
  color: var(--neutral-on-background-medium);
}
.Button_ghost__9CckO:hover, .Button_ghost__9CckO:focus {
  color: var(--neutral-on-background-strong);
}

.Button_danger__M5_j0 {
  box-shadow: inset 0 var(--solid-inset-distance) var(--solid-inset-size) var(--solid-inset-color-danger);
  background: var(--danger-solid-medium);
  border-style: solid;
  border-width: var(--solid-border-width);
  border-color: var(--solid-border-color-danger);
  color: var(--danger-on-solid-strong);
}
.Button_danger__M5_j0:hover, .Button_danger__M5_j0:focus {
  background: var(--danger-solid-strong);
}

.Button_s__EYzdP {
  padding: var(--static-space-4) var(--static-space-8);
  border-radius: var(--radius-m);
  min-height: var(--static-space-32);
  gap: var(--static-space-4);
}

.Button_m__7Jb9j {
  padding: var(--static-space-8) var(--static-space-12);
  border-radius: var(--radius-m);
  min-height: var(--static-space-40);
  gap: var(--static-space-4);
}

.Button_l__o9TJ6 {
  padding: var(--static-space-12) var(--static-space-20);
  border-radius: var(--radius-l);
  min-height: var(--static-space-48);
  gap: var(--static-space-8);
}

.Button_label__5FYXK {
  padding: 0 var(--static-space-4);
}

.Button_fillWidth__Tzhwe {
  width: 100%;
}

.Button_fitContent__f8yCD {
  width: -moz-fit-content;
  width: fit-content;
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/SharedInteractiveStyles.module.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.SharedInteractiveStyles_container__8HXyS {
  cursor: pointer;
  isolation: isolate;
}
.SharedInteractiveStyles_container__8HXyS:hover .SharedInteractiveStyles_element__gRtRa.SharedInteractiveStyles_checked___gv93 .SharedInteractiveStyles_element__gRtRa::before, .SharedInteractiveStyles_container__8HXyS:focus .SharedInteractiveStyles_element__gRtRa.SharedInteractiveStyles_checked___gv93 .SharedInteractiveStyles_element__gRtRa::before {
  display: none;
}

.SharedInteractiveStyles_element__gRtRa {
  box-shadow: inset 0 0 0 var(--solid-inset-color-brand);
  border-color: var(--solid-border-color-neutral);
  border-style: solid;
  border-width: 1px;
  width: var(--static-space-20);
  height: var(--static-space-20);
  min-width: var(--static-space-20);
  min-height: var(--static-space-20);
  transition: var(--transition-micro-medium);
  background-color: var(--background-surface);
  outline: none;
}
.SharedInteractiveStyles_element__gRtRa.SharedInteractiveStyles_checked___gv93 {
  box-shadow: inset 0 var(--solid-inset-distance) var(--solid-inset-size) var(--solid-inset-color-brand);
  background-color: var(--brand-solid-medium);
  border-color: var(--solid-border-color-brand);
}

.SharedInteractiveStyles_disabled__mquYX .SharedInteractiveStyles_element__gRtRa {
  opacity: 0.6;
}
.SharedInteractiveStyles_disabled__mquYX .SharedInteractiveStyles_element__gRtRa::before {
  display: none;
}

.SharedInteractiveStyles_container__8HXyS:hover .SharedInteractiveStyles_element__gRtRa::before,
.SharedInteractiveStyles_element__gRtRa:focus-within::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--static-space-40);
  height: var(--static-space-40);
  background-color: var(--brand-alpha-medium);
  border-radius: var(--radius-full);
  z-index: -1;
  animation: SharedInteractiveStyles_scaleInCenter__usaGM 0.2s forwards;
}

@keyframes SharedInteractiveStyles_scaleInCenter__usaGM {
  from {
    transform: translate(-50%, -50%) scale(0);
  }
  to {
    transform: translate(-50%, -50%) scale(1);
  }
}
.SharedInteractiveStyles_icon__GFXyk {
  animation: SharedInteractiveStyles_scaleIn__llrvd 0.2s forwards;
  animation-delay: 0.1s;
  transform: scale(0);
}

@keyframes SharedInteractiveStyles_scaleIn__llrvd {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
.SharedInteractiveStyles_hidden__Wceke {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.SharedInteractiveStyles_indeterminate__Rs5ja {
  background: var(--brand-on-solid-strong);
  width: var(--static-space-12);
  height: var(--static-space-2);
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/Chip.module.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.Chip_chip__4gf6Z {
  cursor: pointer;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  height: -moz-fit-content;
  height: fit-content;
  width: -moz-fit-content;
  width: fit-content;
  transition: var(--transition-micro-medium);
}
.Chip_chip__4gf6Z.Chip_selected__cqJp_ {
  background: var(--brand-alpha-medium);
  color: var(--brand-on-background-medium);
}
.Chip_chip__4gf6Z.Chip_selected__cqJp_:hover, .Chip_chip__4gf6Z.Chip_selected__cqJp_:focus {
  background: var(--brand-alpha-medium);
}
.Chip_chip__4gf6Z.Chip_selected__cqJp_:active {
  background: var(--brand-alpha-weak);
  color: var(--brand-on-background-weak);
}
.Chip_chip__4gf6Z.Chip_unselected__ENjbt {
  background: var(--neutral-alpha-weak);
  color: var(--neutral-on-background-medium);
}
.Chip_chip__4gf6Z.Chip_unselected__ENjbt:hover, .Chip_chip__4gf6Z.Chip_unselected__ENjbt:focus {
  background: var(--neutral-alpha-medium);
}
.Chip_chip__4gf6Z.Chip_unselected__ENjbt:active {
  background: var(--neutral-alpha-weak);
  color: var(--neutral-on-background-weak);
}
.Chip_chip__4gf6Z:disabled {
  background: var(--neutral-solid-weak);
  cursor: not-allowed;
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/Dialog.module.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.Dialog_overlay__FDkzQ {
  position: fixed;
  opacity: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  background-color: var(--backdrop);
  visibility: hidden;
  transition: var(--transition-macro-medium);
}
.Dialog_overlay__FDkzQ.Dialog_open__MvAaq {
  opacity: 1;
  visibility: visible;
}

.Dialog_dialog__yVExh {
  transform: scale(0.2);
  opacity: 0;
  box-shadow: var(--shadow-xl);
  max-width: 40rem;
  transition: var(--transition-macro-medium);
}
.Dialog_dialog__yVExh.Dialog_open__MvAaq {
  transform: scale(1);
  opacity: 1;
  visibility: visible;
}
@media (max-width: 768px) {
  .Dialog_dialog__yVExh {
    position: fixed;
    bottom: var(--static-space-8);
    top: var(--static-space-8);
    left: var(--static-space-8);
    max-width: calc(100% - 2 * var(--static-space-8));
  }
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/Dropdown.module.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.Dropdown_dropdown__82Azg {
  outline: none;
}

.Dropdown_option__hCny6 {
  cursor: pointer;
  border-color: var(--static-transparent);
  border-width: 1px;
  border-style: solid;
  transition: var(--transition-micro-medium);
}
.Dropdown_option__hCny6:hover, .Dropdown_option__hCny6:focus {
  background: var(--neutral-alpha-weak);
  border-color: var(--neutral-alpha-medium);
}
.Dropdown_option__hCny6.Dropdown_selected__dZa2O {
  background-color: var(--neutral-alpha-medium);
  border-color: var(--neutral-alpha-medium);
}
.Dropdown_option__hCny6.Dropdown_danger__ko3dl {
  color: var(--danger-alpha-weak);
}
.Dropdown_option__hCny6.Dropdown_danger__ko3dl:hover, .Dropdown_option__hCny6.Dropdown_danger__ko3dl:focus {
  background-color: var(--danger-alpha-medium);
  color: var(--danger-on-background-medium);
}

.Dropdown_focused__ZLf_0 {
  background-color: var(--neutral-background-strong);
}

.Dropdown_divider__dhhqw {
  min-height: 1px;
  width: 100%;
  background-color: var(--neutral-border-medium);
  margin: var(--static-space-4) 0;
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/Select.module.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.Select_icon__DQmoF {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--neutral-on-background-weak);
}

@keyframes Select_fadeIn__iTqW6 {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.Select_fadeIn__iTqW6 {
  transform-origin: top right;
  animation: Select_fadeIn__iTqW6 var(--transition-duration-micro-medium) var(--transition-eased);
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/Grid.module.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.Grid_grid__smchD {
  display: grid;
}

.Grid_fillWidth__DkLeR {
  width: 100%;
}

@media (max-width: 1024px) {
  .Grid_tablet-1col__9MYXj {
    grid-template-columns: 1fr !important;
  }
  .Grid_tablet-2col__o3MnB {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .Grid_tablet-3col__26GpV {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 768px) {
  .Grid_mobile-1col__1Z01e {
    grid-template-columns: 1fr !important;
  }
  .Grid_mobile-2col__RU_W2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .Grid_mobile-3col__sD4BT {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/GlitchFx.module.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.GlitchFx_glitchFx__2SEPv {
  position: relative;
  display: inline-block;
}

.GlitchFx_original__T_viV {
  position: relative;
  z-index: 1;
  display: inline-block;
}

.GlitchFx_glitchLayer__916pP {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
  display: inline-block;
}

.GlitchFx_blueShift__8cQai {
  filter: hue-rotate(260deg);
  animation: GlitchFx_glitch-blue__Ry8YT 2.5s infinite;
  z-index: 1;
}

.GlitchFx_redShift__PdF0Q {
  filter: hue-rotate(120deg);
  animation: GlitchFx_glitch-red__FFolJ 2.5s infinite;
  z-index: 1;
}

@keyframes GlitchFx_glitch-blue__Ry8YT {
  6%, 14%, 70%, 78% {
    transform: none;
    opacity: 0.25;
    clip-path: inset(0 0 0 0);
  }
  10%, 12% {
    transform: translate(-5px, -3px) skew(1deg, -2deg);
    opacity: 0.5;
    clip-path: inset(50% 0 25% 0);
  }
  11%, 13% {
    transform: translate(4px, -7px) skew(-1deg);
    opacity: 0.7;
    clip-path: inset(0 35% 40% 0);
  }
  14%, 82% {
    transform: translate(-5px, -3px) skew(1deg, -1deg);
    opacity: 0.3;
    clip-path: inset(30% 5% 25% 40%);
  }
  75%, 83% {
    transform: translate(-9px, 2px) skew(-1deg, 0);
    opacity: 0.2;
    clip-path: inset(0 35% 45% 10%);
  }
}
@keyframes GlitchFx_glitch-red__FFolJ {
  6%, 14%, 70%, 78% {
    transform: none;
    opacity: 0;
    clip-path: inset(0 0 0 0);
  }
  10%, 12% {
    transform: translate(6px, 4px) skew(1deg);
    opacity: 0.5;
    clip-path: inset(5% 0 10% 0);
  }
  11%, 13% {
    transform: translate(-4px, 5px) skew(0, -1deg);
    opacity: 0.7;
    clip-path: inset(5% 0 10% 0);
  }
  14%, 82% {
    transform: translate(-7px, -4px) skew(1deg, -1deg);
    opacity: 0.2;
    clip-path: inset(50% 25% 25% 0);
  }
  75%, 80% {
    transform: translate(4px, -6px) skew(-1deg);
    opacity: 0.3;
    clip-path: inset(0 0 20% 50%);
  }
}
.GlitchFx_slow__GL07o {
  animation-duration: 3.5s;
}

.GlitchFx_medium__OQ7KX {
  animation-duration: 2.5s;
}

.GlitchFx_fast__Inwe_ {
  animation-duration: 1.5s;
}

.GlitchFx_active__rU9iq .GlitchFx_blueShift__8cQai, .GlitchFx_active__rU9iq .GlitchFx_redShift__PdF0Q {
  animation-play-state: running;
}

.GlitchFx_glitchFx__2SEPv:not(.GlitchFx_active__rU9iq) .GlitchFx_blueShift__8cQai,
.GlitchFx_glitchFx__2SEPv:not(.GlitchFx_active__rU9iq) .GlitchFx_redShift__PdF0Q {
  animation-play-state: paused;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/IconButton.module.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.IconButton_top__NWrJy {
  bottom: calc(100% + var(--static-space-2));
  left: 50%;
  transform: translateX(-50%);
}

.IconButton_bottom__5Wpiz {
  top: calc(100% + var(--static-space-2));
  left: 50%;
  transform: translateX(-50%);
}

.IconButton_left__CcDhL {
  right: calc(100% + var(--static-space-2));
  top: 50%;
  transform: translateY(-50%);
}

.IconButton_right__tndmM {
  left: calc(100% + var(--static-space-2));
  top: 50%;
  transform: translateY(-50%);
}

.IconButton_s__WJ49h {
  border-radius: var(--radius-s);
  min-height: var(--static-space-24);
  min-width: var(--static-space-24);
  height: var(--static-space-24);
  width: var(--static-space-24);
}

.IconButton_m__VXzCF {
  border-radius: var(--radius-m);
  min-height: var(--static-space-32);
  min-width: var(--static-space-32);
  height: var(--static-space-32);
  width: var(--static-space-32);
}

.IconButton_l__jAaVZ {
  border-radius: var(--radius-l);
  min-height: var(--static-space-40);
  min-width: var(--static-space-40);
  height: var(--static-space-40);
  width: var(--static-space-40);
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/InlineCode.module.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.InlineCode_inlineCode__ATlYG {
  display: inline;
  padding: var(--static-space-1) var(--static-space-4);
  border-radius: var(--radius-s);
  background: var(--neutral-alpha-weak);
  border: 1px solid var(--neutral-alpha-medium);
  font-family: var(--font-family-code);
  font-size: 80%;
  margin: 0 var(--static-space-2);
  vertical-align: middle;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/Input.module.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.Input_wrapper__FpF7Q {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--static-space-8);
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
}

.Input_base__M2_Hn {
  display: flex;
  overflow: hidden;
  align-items: stretch;
  position: relative;
  border: 1px solid var(--neutral-border-medium);
  background-color: var(--neutral-alpha-weak);
  -webkit-backdrop-filter: var(--backdrop-filter);
          backdrop-filter: var(--backdrop-filter);
  border-radius: var(--radius-l);
  min-height: var(--static-space-56);
  transition: var(--transition-micro-medium);
}
.Input_base__M2_Hn.Input_focused__kfXI_, .Input_base__M2_Hn.Input_filled__lduc6 {
  background-color: var(--neutral-background-strong);
  border-color: var(--neutral-border-medium);
}
.Input_base__M2_Hn:focus-within, .Input_base__M2_Hn:hover {
  background-color: var(--neutral-alpha-medium);
}
.Input_base__M2_Hn:has(.Input_labelAsPlaceholder__FNKq8) {
  min-height: var(--static-space-48);
}

.Input_textareaBase__PP79e::after {
  pointer-events: none;
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--static-space-32);
  height: var(--static-space-32);
  border: 1px solid var(--neutral-border-strong);
  transform: translateX(50%) translateY(50%) rotate(45deg);
  background-color: var(--neutral-alpha-weak);
}
.Input_textareaBase__PP79e ::-webkit-resizer {
  display: none;
}

.Input_label__eHUwm {
  position: absolute;
  left: var(--static-space-16);
  transition: transform 0.3s, top 0.3s, left 0.3s;
  color: var(--neutral-on-background-weak);
  pointer-events: none;
  transform-origin: left;
}

.Input_inputLabel__Zqfp_ {
  top: 50%;
  transform: translateY(-50%);
}
.Input_inputLabel__Zqfp_.Input_floating__I5gWg {
  transform: scale(0.75);
}

.Input_textareaLabel__v6egN {
  top: var(--static-space-16);
}
.Input_textareaLabel__v6egN.Input_floating__I5gWg {
  transform: scale(0.75) translateY(calc(-1 * var(--static-space-16)));
}

.Input_s__jQHBy {
  min-height: var(--static-space-48);
}
.Input_s__jQHBy:has(.Input_labelAsPlaceholder__FNKq8) {
  min-height: var(--static-space-40);
}
.Input_s__jQHBy .Input_label__eHUwm.Input_floating__I5gWg {
  top: var(--static-space-4);
}

.Input_m__7mjd0 .Input_label__eHUwm.Input_floating__I5gWg {
  top: calc(var(--static-space-8) - var(--static-space-2));
}

.Input_content__jILjH {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.Input_input__yQGMf {
  width: 100%;
  height: 100%;
  border: none;
  background: none;
  color: var(--neutral-on-background-strong);
  padding: 0 var(--static-space-16);
  outline: none;
}
.Input_input__yQGMf.Input_labelAsPlaceholder__FNKq8 {
  padding-top: 0;
}
.Input_input__yQGMf:not(.Input_labelAsPlaceholder__FNKq8) {
  padding-top: var(--static-space-16);
}
.Input_input__yQGMf.Input_labelAsPlaceholder__FNKq8.Input_hasChildren__RM240 {
  padding-top: var(--static-space-16);
}
.Input_input__yQGMf::-moz-placeholder {
  color: var(--neutral-on-background-weak);
}
.Input_input__yQGMf::placeholder {
  color: var(--neutral-on-background-weak);
}
.Input_input__yQGMf:disabled {
  background-color: var(--neutral-solid-strong);
  color: var(--neutral-on-solid-weak);
}
.Input_input__yQGMf:-webkit-autofill {
  background-color: var(--neutral-background-strong) !important;
  border-radius: var(--radius-m);
  -webkit-box-shadow: 0 0 0 var(--static-space-32) var(--neutral-background-strong) inset !important;
  -webkit-text-fill-color: var(--neutral-on-background-strong) !important;
}
.Input_input__yQGMf:autofill, .Input_input__yQGMf:-webkit-autofill {
  background-color: var(--neutral-background-strong) !important;
  border-radius: var(--radius-m);
  -webkit-box-shadow: 0 0 0 var(--static-space-32) var(--neutral-background-strong) inset !important;
  -webkit-text-fill-color: var(--neutral-on-background-strong) !important;
}

.Input_error__qxb8Z .Input_base__M2_Hn {
  background-color: var(--danger-background-medium);
  border-color: var(--danger-border-medium);
}
.Input_error__qxb8Z .Input_input__yQGMf, .Input_error__qxb8Z .Input_prefix___Kxxi, .Input_error__qxb8Z .Input_suffix___Al_n {
  color: var(--danger-on-background-medium);
}
.Input_error__qxb8Z .Input_label__eHUwm {
  color: var(--danger-on-background-weak);
}

.Input_prefix___Kxxi, .Input_suffix___Al_n {
  align-self: center;
}

.Input_input__yQGMf[type=color] {
  opacity: 0;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/Kbd.module.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.Kbd_kbd__W6UPP {
  display: flex;
  justify-content: center;
  min-width: var(--static-space-32);
  background: var(--neutral-background-strong);
  border-radius: var(--radius-s);
  padding: var(--static-space-2) var(--static-space-4);
  color: var(--neutral-on-background-medium);
  border: 1px solid var(--neutral-border-strong);
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/Logo.module.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.Logo_type__T7wNB {
  content: var(--type);
}

.Logo_icon__QFSUL {
  content: var(--icon);
}

.Logo_type__T7wNB, .Logo_icon__QFSUL {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: block;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/NavIcon.module.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.NavIcon_button__e7_Un {
  cursor: pointer;
  width: var(--static-space-40);
  height: var(--static-space-40);
  min-width: var(--static-space-40);
  min-height: var(--static-space-40);
}

.NavIcon_line__M_St8 {
  background-color: var(--neutral-on-background-strong);
  height: 1px;
  width: var(--static-space-24);
  transition: transform 0.3s ease;
  position: absolute;
  left: 50%;
  top: 50%;
}
.NavIcon_line__M_St8:first-child {
  transform: translateX(-50%) translateY(calc(-1 * var(--static-space-4)));
}
.NavIcon_line__M_St8:last-child {
  transform: translateX(-50%) translateY(var(--static-space-4));
}

.NavIcon_active__mkbin:first-child {
  transform: translateX(-50%) translateY(0) rotate(45deg);
}

.NavIcon_active__mkbin:last-child {
  transform: translateX(-50%) translateY(0) rotate(-45deg);
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/RevealFx.module.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.RevealFx_revealFx__YVbbq {
  display: inline-block;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, black 0%, black 25%, transparent 50%);
          mask-image: linear-gradient(to right, black 0%, black 25%, transparent 50%);
  -webkit-mask-size: 300% 100%;
          mask-size: 300% 100%;
  transition: all ease-in-out;
}
.RevealFx_revealFx__YVbbq.RevealFx_hidden__XubC2 {
  -webkit-mask-position: 100% 0;
          mask-position: 100% 0;
  filter: blur(0.5rem);
}
.RevealFx_revealFx__YVbbq.RevealFx_revealed__Lndau {
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
  filter: blur(0);
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/Scroller.module.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.Scroller_scroller__KVYp_ {
  scrollbar-width: none;
}
.Scroller_scroller__KVYp_::-webkit-scrollbar {
  display: none;
}

.Scroller_row__eEosH {
  overflow-x: auto;
  flex-direction: row;
}

.Scroller_column__1pNVa {
  overflow-y: auto;
  flex-direction: column;
}

.Scroller_scrollMask__Rl6jX {
  position: relative;
  width: 100%;
  height: 100%;
}

.Scroller_scrollMaskContainer__jUe3o {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--static-space-64);
  height: 100%;
  z-index: 1;
}

.Scroller_scrollMaskPrev__aTEik {
  left: 0;
  background: linear-gradient(to right, var(--surface-background), transparent);
}

.Scroller_scrollMaskNext__3mDae {
  right: 0;
  background: linear-gradient(to left, var(--surface-background), transparent);
}

.Scroller_scrollButton__nVuk3 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  z-index: 2;
}

.Scroller_scrollButtonPrev__JZQ8S {
  left: var(--static-space-4);
}

.Scroller_scrollButtonNext__0spck {
  right: var(--static-space-4);
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/Skeleton.module.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@keyframes Skeleton_skeleton-loading__ndD7P {
  0% {
    background-color: var(--neutral-background-strong);
  }
  50% {
    background-color: var(--neutral-background-medium);
  }
  100% {
    background-color: var(--neutral-background-strong);
  }
}
.Skeleton_delay-1____qIL {
  animation-delay: 0.1s;
}

.Skeleton_delay-2__s_6Qh {
  animation-delay: 0.2s;
}

.Skeleton_delay-3__4AI1V {
  animation-delay: 0.3s;
}

.Skeleton_delay-4__DZRIq {
  animation-delay: 0.4s;
}

.Skeleton_delay-5__qYf5m {
  animation-delay: 0.5s;
}

.Skeleton_delay-6__YOdsW {
  animation-delay: 0.6s;
}

.Skeleton_skeleton__pztLf {
  animation-name: Skeleton_skeleton-loading__ndD7P;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  border-radius: var(--radius-l);
}
.Skeleton_skeleton__pztLf.Skeleton_block__SWlnI {
  width: 100%;
  height: 100%;
}
.Skeleton_skeleton__pztLf.Skeleton_line__iDfpe.Skeleton_h-xs__o__CQ {
  height: var(--static-space-8);
}
.Skeleton_skeleton__pztLf.Skeleton_line__iDfpe.Skeleton_h-s__tQFMF {
  height: var(--static-space-12);
}
.Skeleton_skeleton__pztLf.Skeleton_line__iDfpe.Skeleton_h-m__BbXEN {
  height: var(--static-space-16);
}
.Skeleton_skeleton__pztLf.Skeleton_line__iDfpe.Skeleton_h-l__iro8j {
  height: var(--static-space-20);
}
.Skeleton_skeleton__pztLf.Skeleton_line__iDfpe.Skeleton_h-xl___h5U7 {
  height: var(--static-space-24);
}
.Skeleton_skeleton__pztLf.Skeleton_line__iDfpe.Skeleton_w-xs__qYqb5 {
  width: 25%;
}
.Skeleton_skeleton__pztLf.Skeleton_line__iDfpe.Skeleton_w-s__4j158 {
  width: 33%;
}
.Skeleton_skeleton__pztLf.Skeleton_line__iDfpe.Skeleton_w-m__aliwu {
  width: 50%;
}
.Skeleton_skeleton__pztLf.Skeleton_line__iDfpe.Skeleton_w-l__IkrZl {
  width: 75%;
}
.Skeleton_skeleton__pztLf.Skeleton_line__iDfpe.Skeleton_w-xl__uYTr7 {
  width: 100%;
}
.Skeleton_skeleton__pztLf.Skeleton_circle__wl0Ge {
  border-radius: var(--radius-full);
}
.Skeleton_skeleton__pztLf.Skeleton_circle__wl0Ge.Skeleton_w-xs__qYqb5 {
  width: var(--static-space-20);
  height: var(--static-space-20);
}
.Skeleton_skeleton__pztLf.Skeleton_circle__wl0Ge.Skeleton_w-s__4j158 {
  width: var(--static-space-24);
  height: var(--static-space-24);
}
.Skeleton_skeleton__pztLf.Skeleton_circle__wl0Ge.Skeleton_w-m__aliwu {
  width: var(--static-space-32);
  height: var(--static-space-32);
}
.Skeleton_skeleton__pztLf.Skeleton_circle__wl0Ge.Skeleton_w-l__IkrZl {
  width: var(--static-space-40);
  height: var(--static-space-40);
}
.Skeleton_skeleton__pztLf.Skeleton_circle__wl0Ge.Skeleton_w-xl__uYTr7 {
  width: var(--static-space-160);
  height: var(--static-space-160);
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/SparkleFx.module.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.SparkleFx_sparkleContainer__cKDHh {
  position: relative;
  display: inline-block;
  overflow: visible;
  animation: SparkleFx_textGlow__sD_h0 10s ease-in-out infinite;
}

.SparkleFx_sparkleParticle___TtLS {
  position: absolute;
  background-color: var(--neutral-on-background-strong);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 var(--static-space-12) var(--neutral-on-background-strong), 0 0 var(--static-space-20) var(--neutral-on-background-weak);
  animation: SparkleFx_sparkleMove__fhVTy linear forwards;
  opacity: 0;
}

@keyframes SparkleFx_sparkleMove__fhVTy {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(50px, -200px) scale(0.5);
    opacity: 0;
  }
}
@keyframes SparkleFx_textGlow__sD_h0 {
  0%, 100% {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0), 0 0 12px rgba(255, 255, 255, 0), 0 0 16px rgba(255, 255, 255, 0.1725490196);
  }
  50% {
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.1960784314), 0 0 18px rgba(255, 255, 255, 0.1137254902), 0 0 24px rgba(255, 255, 255, 0.1137254902);
  }
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/Spinner.module.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@keyframes Spinner_spin__MktyB {
  0% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.55, 0.2, 0.68, 0.53);
  }
  100% {
    transform: rotate(360deg);
    animation-timing-function: cubic-bezier(0.55, 0.2, 0.68, 0.53);
  }
}
.Spinner_bounding__7yb8T {
  display: flex;
  justify-content: center;
  align-items: center;
}

.Spinner_spinner__Pfmjc {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: Spinner_spin__MktyB 1.5s infinite;
  border-style: solid;
  border-color: transparent;
  border-top-color: currentColor;
}

.Spinner_xs__GN0Xv {
  width: var(--static-space-16);
  height: var(--static-space-16);
  padding: 2px;
}
.Spinner_xs__GN0Xv .Spinner_spinner__Pfmjc {
  border-width: 2px;
}

.Spinner_s__ZH6YR {
  width: var(--static-space-20);
  height: var(--static-space-20);
  padding: 2px;
}
.Spinner_s__ZH6YR .Spinner_spinner__Pfmjc {
  border-width: 2px;
}

.Spinner_m__d9eF3 {
  width: var(--static-space-24);
  height: var(--static-space-24);
  padding: 3px;
}
.Spinner_m__d9eF3 .Spinner_spinner__Pfmjc {
  border-width: 2px;
}

.Spinner_l__lWnpG {
  width: var(--static-space-32);
  height: var(--static-space-32);
  padding: 4px;
}
.Spinner_l__lWnpG .Spinner_spinner__Pfmjc {
  border-width: 3px;
}

.Spinner_xl__PV8Et {
  width: var(--static-space-40);
  height: var(--static-space-40);
  padding: 8px;
}
.Spinner_xl__PV8Et .Spinner_spinner__Pfmjc {
  border-width: 3px;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/StatusIndicator.module.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.StatusIndicator_statusIndicator__1Etbm {
  display: flex;
  border: 2px solid var(--page-background);
  border-radius: var(--radius-full);
}
.StatusIndicator_statusIndicator__1Etbm.StatusIndicator_s__zSS0T {
  width: var(--static-space-4);
  height: var(--static-space-4);
}
.StatusIndicator_statusIndicator__1Etbm.StatusIndicator_m__qduIJ {
  width: var(--static-space-8);
  height: var(--static-space-8);
}
.StatusIndicator_statusIndicator__1Etbm.StatusIndicator_l__VnD46 {
  width: var(--static-space-16);
  height: var(--static-space-16);
}
.StatusIndicator_statusIndicator__1Etbm.StatusIndicator_green__7JYcU {
  background-color: var(--scheme-green-700);
}
.StatusIndicator_statusIndicator__1Etbm.StatusIndicator_yellow__FIYpO {
  background-color: var(--scheme-yellow-700);
}
.StatusIndicator_statusIndicator__1Etbm.StatusIndicator_red__BsmAU {
  background-color: var(--scheme-red-700);
}
.StatusIndicator_statusIndicator__1Etbm.StatusIndicator_gray__NzEam {
  background-color: var(--scheme-gray-700);
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/Switch.module.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.Switch_container__rGQxw {
  cursor: pointer;
}
.Switch_container__rGQxw:active .Switch_element__LI_K8 {
  transform: translateY(-50%) scaleX(1.2);
}
.Switch_container__rGQxw:hover .Switch_switch__1EQsO {
  background-color: var(--neutral-solid-strong);
}
.Switch_container__rGQxw:hover .Switch_switch__1EQsO.Switch_checked__0AmCm {
  background-color: var(--brand-solid-strong);
}
.Switch_container__rGQxw:hover .Switch_switch__1EQsO.Switch_checked__0AmCm .Switch_element__LI_K8::before {
  display: none;
}

.Switch_reverse__rrz6p {
  flex-direction: row-reverse;
}

.Switch_switch__1EQsO {
  box-shadow: inset 0 0 0 var(--solid-inset-color-brand);
  border-color: var(--solid-border-color-neutral);
  border-style: solid;
  border-width: var(--solid-border-width);
  width: var(--static-space-40);
  min-width: var(--static-space-40);
  height: var(--static-space-24);
  border-radius: var(--radius-l-nest-4);
  background-color: var(--neutral-solid-medium);
  position: relative;
  transition: var(--transition-micro-medium);
}
.Switch_switch__1EQsO.Switch_checked__0AmCm {
  box-shadow: inset 0 var(--solid-inset-distance) var(--solid-inset-size) var(--solid-inset-color-brand);
  background-color: var(--brand-solid-medium);
  border-color: var(--solid-border-color-brand);
}
.Switch_switch__1EQsO.Switch_checked__0AmCm .Switch_element__LI_K8 {
  left: calc(100% - var(--static-space-20));
  transform-origin: right;
}

.Switch_element__LI_K8 {
  z-index: 1;
  transform-origin: left;
  width: var(--static-space-16);
  height: var(--static-space-16);
  border-radius: var(--radius-l);
  background-color: var(--brand-on-solid-strong);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: var(--static-space-4);
  transition: left 0.3s, transform 0.3s;
  outline: none;
}

.Switch_disabled__w9nFc .Switch_switch__1EQsO {
  opacity: 0.4;
}
.Switch_disabled__w9nFc .Switch_element__LI_K8::before {
  display: none !important;
}

.Switch_container__rGQxw:hover .Switch_element__LI_K8::before,
.Switch_element__LI_K8:focus-within::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--static-space-40);
  height: var(--static-space-40);
  background-color: var(--brand-alpha-medium);
  border-radius: var(--radius-full);
  z-index: -1;
  animation: Switch_scaleInCenter__BMnTp 0.2s forwards;
}

@keyframes Switch_scaleInCenter__BMnTp {
  from {
    transform: translate(-50%, -50%) scale(0);
  }
  to {
    transform: translate(-50%, -50%) scale(1);
  }
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/Tag.module.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.Tag_tag__JeNYb {
  border-width: 1px;
  border-style: solid;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  width: -moz-fit-content;
  width: fit-content;
}
.Tag_tag__JeNYb.Tag_brand__wrQt8 {
  border-color: var(--brand-border-strong);
  background-color: var(--brand-background-strong);
  color: var(--brand-on-background-medium);
}
.Tag_tag__JeNYb.Tag_accent__Z7Zwi {
  border-color: var(--accent-border-strong);
  background-color: var(--accent-background-strong);
  color: var(--accent-on-background-medium);
}
.Tag_tag__JeNYb.Tag_neutral__3BOpF {
  border-color: var(--neutral-border-medium);
  background-color: var(--surface-background);
  color: var(--neutral-on-background-medium);
}
.Tag_tag__JeNYb.Tag_warning__OGcFw {
  border-color: var(--warning-border-strong);
  background-color: var(--warning-background-strong);
  color: var(--warning-on-background-medium);
}
.Tag_tag__JeNYb.Tag_danger__9__2N {
  border-color: var(--danger-border-strong);
  background-color: var(--danger-background-strong);
  color: var(--danger-on-background-medium);
}
.Tag_tag__JeNYb.Tag_success___c_4n {
  border-color: var(--success-border-strong);
  background-color: var(--success-background-strong);
  color: var(--success-on-background-medium);
}
.Tag_tag__JeNYb.Tag_info__geujT {
  border-color: var(--info-border-strong);
  background-color: var(--info-background-strong);
  color: var(--info-on-background-medium);
}
.Tag_tag__JeNYb.Tag_gradient__2VShJ {
  border-color: var(--brand-alpha-medium);
  background-image: linear-gradient(45deg, var(--brand-background-strong), var(--accent-background-strong));
  color: var(--brand-on-background-medium);
}

.Tag_s__n3KQk {
  padding: 0 var(--static-space-4);
}

.Tag_m__5Iiqi {
  padding: var(--static-space-2) var(--static-space-8);
}

.Tag_l__Ch13W {
  padding: var(--static-space-4) var(--static-space-12);
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/Toast.module.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.Toast_toast__go0ob {
  transition: opacity 0.3s, transform 0.3s;
}

.Toast_visible__ZbeoK {
  opacity: 1;
}

.Toast_hidden__XsKnA {
  opacity: 0;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/Toaster.module.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.Toaster_toastContainer__pHPBM {
  position: fixed;
  bottom: var(--responsive-space-l);
  left: 50%;
  transform: translateX(-50%);
}

.Toaster_toastWrapper__QiHR4 {
  bottom: 0;
  transition: transform 0.3s, opacity 0.3s;
}

.Toaster_toastAnimation__v_NpK {
  animation: Toaster_fadeIn__hQppY 0.3s ease-out forwards;
}

@keyframes Toaster_fadeIn__hQppY {
  from {
    opacity: 0;
    transform: translateY(4rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/ToggleButton.module.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.ToggleButton_button__Wgd1S {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--static-space-8);
  border-radius: var(--radius-m);
  border-color: var(--static-transparent);
  border-width: 1px;
  border-style: solid;
  background: var(--static-transparent);
  color: var(--neutral-on-background-strong);
  transition: var(--transition-micro-medium);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
}
.ToggleButton_button__Wgd1S:hover {
  background: var(--neutral-alpha-weak);
  border-color: var(--neutral-alpha-medium);
}
.ToggleButton_button__Wgd1S.ToggleButton_selected__CqoUu {
  background-color: var(--neutral-alpha-medium);
  border-color: var(--neutral-alpha-medium);
}
.ToggleButton_button__Wgd1S:disabled {
  background: var(--neutral-solid-weak);
  color: var(--neutral-on-solid-weak);
  border: none;
  pointer-events: none;
  cursor: not-allowed;
}

.ToggleButton_labelWrapper___zgEs {
  display: flex;
  align-items: center;
  gap: var(--static-space-8);
  max-width: 100%;
}

.ToggleButton_label__Aj5j5 {
  padding: var(--static-space-4) var(--static-space-4);
}

.ToggleButton_s__PWnOL {
  padding: var(--static-space-2) var(--static-space-8);
}

.ToggleButton_m__3afCf {
  padding: var(--static-space-4) var(--static-space-12);
}

.ToggleButton_l__fkPpv {
  padding: var(--static-space-8) var(--static-space-16);
}

.ToggleButton_start__CTqjH {
  justify-content: flex-start;
}

.ToggleButton_center__BVwU2 {
  justify-content: center;
}

.ToggleButton_fit__VXwDH {
  width: auto;
}

.ToggleButton_fill__0GwAH {
  width: 100%;
}

.ToggleButton_truncate__qrPCO {
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/UserMenu.module.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.UserMenu_wrapper__K3cXo {
  border: 1px solid var(--static-transparent);
  transition: var(--transition-micro-medium);
}
.UserMenu_wrapper__K3cXo:hover {
  background-color: var(--neutral-alpha-weak);
  border: 1px solid var(--neutral-alpha-medium);
}
.UserMenu_wrapper__K3cXo.UserMenu_selected__4ulRk:hover {
  background-color: var(--neutral-background-strong);
  border: 1px solid var(--neutral-border-strong);
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[5]!./src/once-ui/components/Accordion.module.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.Accordion_accordion__HylER {
  cursor: pointer;
  transition: var(--transition-micro-medium);
  background: var(--static-transparent);
}
.Accordion_accordion__HylER:hover {
  background: var(--neutral-alpha-weak);
}

.Accordion_border__CTUHu {
  border-top: 1px solid var(--neutral-border-medium);
}
.Accordion_border__CTUHu:first-of-type {
  border: none;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[13].use[5]!./src/once-ui/styles/index.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/****************************/
/*           MARGIN         */
/****************************/
/* EVEN */
.m-0 {
  margin: var(--static-space-0);
}

.m-1 {
  margin: var(--static-space-1);
}

.m-2 {
  margin: var(--static-space-2);
}

.m-4 {
  margin: var(--static-space-4);
}

.m-8 {
  margin: var(--static-space-8);
}

.m-12 {
  margin: var(--static-space-12);
}

.m-16 {
  margin: var(--static-space-16);
}

.m-20 {
  margin: var(--static-space-20);
}

.m-24 {
  margin: var(--static-space-24);
}

.m-32 {
  margin: var(--static-space-32);
}

.m-40 {
  margin: var(--static-space-40);
}

.m-48 {
  margin: var(--static-space-48);
}

.m-56 {
  margin: var(--static-space-56);
}

.m-64 {
  margin: var(--static-space-64);
}

.m-80 {
  margin: var(--static-space-80);
}

.m-104 {
  margin: var(--static-space-104);
}

.m-128 {
  margin: var(--static-space-128);
}

.m-160 {
  margin: var(--static-space-160);
}

.m-xs {
  margin-bottom: var(--responsive-space-xs);
}

.m-s {
  margin-bottom: var(--responsive-space-s);
}

.m-m {
  margin-bottom: var(--responsive-space-m);
}

.m-l {
  margin-bottom: var(--responsive-space-l);
}

.m-xl {
  margin-bottom: var(--responsive-space-xl);
}

/* X */
.mx-0 {
  margin: auto var(--static-space-0);
}

.mx-1 {
  margin: auto var(--static-space-1);
}

.mx-2 {
  margin: auto var(--static-space-2);
}

.mx-4 {
  margin: auto var(--static-space-4);
}

.mx-8 {
  margin: auto var(--static-space-8);
}

.mx-12 {
  margin: auto var(--static-space-12);
}

.mx-16 {
  margin: auto var(--static-space-16);
}

.mx-20 {
  margin: auto var(--static-space-20);
}

.mx-24 {
  margin: auto var(--static-space-24);
}

.mx-32 {
  margin: auto var(--static-space-32);
}

.mx-40 {
  margin: auto var(--static-space-40);
}

.mx-64 {
  margin: auto var(--static-space-64);
}

.mx-80 {
  margin: auto var(--static-space-80);
}

.mx-104 {
  margin: auto var(--static-space-104);
}

.mx-128 {
  margin: auto var(--static-space-128);
}

.mx-160 {
  margin: auto var(--static-space-160);
}

.mx-xs {
  margin-bottom: var(--responsive-space-xs);
}

.mx-s {
  margin-bottom: var(--responsive-space-s);
}

.mx-m {
  margin-bottom: var(--responsive-space-m);
}

.mx-l {
  margin-bottom: var(--responsive-space-l);
}

.mx-xl {
  margin-bottom: var(--responsive-space-xl);
}

/* Y */
.my-0 {
  margin: var(--static-space-0) auto;
}

.my-1 {
  margin: var(--static-space-1) auto;
}

.my-2 {
  margin: var(--static-space-2) auto;
}

.my-4 {
  margin: var(--static-space-4) auto;
}

.my-8 {
  margin: var(--static-space-8) auto;
}

.my-12 {
  margin: var(--static-space-12) auto;
}

.my-16 {
  margin: var(--static-space-16) auto;
}

.my-20 {
  margin: var(--static-space-20) auto;
}

.my-24 {
  margin: var(--static-space-24) auto;
}

.my-32 {
  margin: var(--static-space-32) auto;
}

.my-40 {
  margin: var(--static-space-40) auto;
}

.my-48 {
  margin: var(--static-space-48) auto;
}

.my-56 {
  margin: var(--static-space-56) auto;
}

.my-64 {
  margin: var(--static-space-64) auto;
}

.my-80 {
  margin: var(--static-space-80) auto;
}

.my-104 {
  margin: var(--static-space-104) auto;
}

.my-128 {
  margin: var(--static-space-128) auto;
}

.my-160 {
  margin: var(--static-space-160) auto;
}

.my-xs {
  margin-bottom: var(--responsive-space-xs);
}

.my-s {
  margin-bottom: var(--responsive-space-s);
}

.my-m {
  margin-bottom: var(--responsive-space-m);
}

.my-l {
  margin-bottom: var(--responsive-space-l);
}

.my-xl {
  margin-bottom: var(--responsive-space-xl);
}

/* TOP */
.mt-0 {
  margin-top: var(--static-space-0);
}

.mt-1 {
  margin-top: var(--static-space-1);
}

.mt-2 {
  margin-top: var(--static-space-2);
}

.mt-4 {
  margin-top: var(--static-space-4);
}

.mt-8 {
  margin-top: var(--static-space-8);
}

.mt-12 {
  margin-top: var(--static-space-12);
}

.mt-16 {
  margin-top: var(--static-space-16);
}

.mt-20 {
  margin-top: var(--static-space-20);
}

.mt-24 {
  margin-top: var(--static-space-24);
}

.mt-32 {
  margin-top: var(--static-space-32);
}

.mt-40 {
  margin-top: var(--static-space-40);
}

.mt-48 {
  margin-top: var(--static-space-48);
}

.mt-56 {
  margin-top: var(--static-space-56);
}

.mt-64 {
  margin-top: var(--static-space-64);
}

.mt-80 {
  margin-top: var(--static-space-80);
}

.mt-104 {
  margin-top: var(--static-space-104);
}

.mt-128 {
  margin-top: var(--static-space-128);
}

.mt-160 {
  margin-top: var(--static-space-160);
}

.mt-xs {
  margin-top: var(--responsive-space-xs);
}

.mt-s {
  margin-top: var(--responsive-space-s);
}

.mt-m {
  margin-top: var(--responsive-space-m);
}

.mt-l {
  margin-top: var(--responsive-space-l);
}

.mt-xl {
  margin-top: var(--responsive-space-xl);
}

/* RIGHT */
.mr-0 {
  margin-right: var(--static-space-0);
}

.mr-1 {
  margin-right: var(--static-space-1);
}

.mr-2 {
  margin-right: var(--static-space-2);
}

.mr-4 {
  margin-right: var(--static-space-4);
}

.mr-8 {
  margin-right: var(--static-space-8);
}

.mr-12 {
  margin-right: var(--static-space-12);
}

.mr-16 {
  margin-right: var(--static-space-16);
}

.mr-20 {
  margin-right: var(--static-space-20);
}

.mr-24 {
  margin-right: var(--static-space-24);
}

.mr-32 {
  margin-right: var(--static-space-32);
}

.mr-40 {
  margin-right: var(--static-space-40);
}

.mr-48 {
  margin-right: var(--static-space-48);
}

.mr-56 {
  margin-right: var(--static-space-56);
}

.mr-64 {
  margin-right: var(--static-space-64);
}

.mr-80 {
  margin-right: var(--static-space-80);
}

.mr-104 {
  margin-right: var(--static-space-104);
}

.mr-128 {
  margin-right: var(--static-space-128);
}

.mr-160 {
  margin-right: var(--static-space-160);
}

.mr-xs {
  margin-bottom: var(--responsive-space-xs);
}

.mr-s {
  margin-bottom: var(--responsive-space-s);
}

.mr-m {
  margin-bottom: var(--responsive-space-m);
}

.mr-l {
  margin-bottom: var(--responsive-space-l);
}

.mr-xl {
  margin-bottom: var(--responsive-space-xl);
}

/* BOTTOM */
.mb-0 {
  margin-bottom: var(--static-space-0);
}

.mb-1 {
  margin-bottom: var(--static-space-1);
}

.mb-2 {
  margin-bottom: var(--static-space-2);
}

.mb-4 {
  margin-bottom: var(--static-space-4);
}

.mb-8 {
  margin-bottom: var(--static-space-8);
}

.mb-12 {
  margin-bottom: var(--static-space-12);
}

.mb-16 {
  margin-bottom: var(--static-space-16);
}

.mb-20 {
  margin-bottom: var(--static-space-20);
}

.mb-24 {
  margin-bottom: var(--static-space-24);
}

.mb-32 {
  margin-bottom: var(--static-space-32);
}

.mb-40 {
  margin-bottom: var(--static-space-40);
}

.mb-48 {
  margin-bottom: var(--static-space-48);
}

.mb-56 {
  margin-bottom: var(--static-space-56);
}

.mb-64 {
  margin-bottom: var(--static-space-64);
}

.mb-80 {
  margin-bottom: var(--static-space-80);
}

.mb-104 {
  margin-bottom: var(--static-space-104);
}

.mb-128 {
  margin-bottom: var(--static-space-128);
}

.mb-160 {
  margin-bottom: var(--static-space-160);
}

.mb-xs {
  margin-bottom: var(--responsive-space-xs);
}

.mb-s {
  margin-bottom: var(--responsive-space-s);
}

.mb-m {
  margin-bottom: var(--responsive-space-m);
}

.mb-l {
  margin-bottom: var(--responsive-space-l);
}

.mb-xl {
  margin-bottom: var(--responsive-space-xl);
}

/* LEFT */
.ml-0 {
  margin-left: var(--static-space-0);
}

.ml-1 {
  margin-left: var(--static-space-1);
}

.ml-2 {
  margin-left: var(--static-space-2);
}

.ml-4 {
  margin-left: var(--static-space-4);
}

.ml-8 {
  margin-left: var(--static-space-8);
}

.ml-12 {
  margin-left: var(--static-space-12);
}

.ml-16 {
  margin-left: var(--static-space-16);
}

.ml-20 {
  margin-left: var(--static-space-20);
}

.ml-24 {
  margin-left: var(--static-space-24);
}

.ml-32 {
  margin-left: var(--static-space-32);
}

.ml-40 {
  margin-left: var(--static-space-40);
}

.ml-48 {
  margin-left: var(--static-space-48);
}

.ml-56 {
  margin-left: var(--static-space-56);
}

.ml-64 {
  margin-left: var(--static-space-64);
}

.ml-80 {
  margin-left: var(--static-space-80);
}

.ml-104 {
  margin-left: var(--static-space-104);
}

.ml-128 {
  margin-left: var(--static-space-128);
}

.ml-160 {
  margin-left: var(--static-space-160);
}

.mb-xs {
  margin-bottom: var(--responsive-space-xs);
}

.ml-s {
  margin-bottom: var(--responsive-space-s);
}

.ml-m {
  margin-bottom: var(--responsive-space-m);
}

.ml-l {
  margin-bottom: var(--responsive-space-l);
}

.ml-xl {
  margin-bottom: var(--responsive-space-xl);
}

/****************************/
/*           PADDING        */
/****************************/
/* EVEN */
.p-0 {
  padding: var(--static-space-0);
}

.p-1 {
  padding: var(--static-space-1);
}

.p-2 {
  padding: var(--static-space-2);
}

.p-4 {
  padding: var(--static-space-4);
}

.p-8 {
  padding: var(--static-space-8);
}

.p-12 {
  padding: var(--static-space-12);
}

.p-16 {
  padding: var(--static-space-16);
}

.p-20 {
  padding: var(--static-space-20);
}

.p-24 {
  padding: var(--static-space-24);
}

.p-32 {
  padding: var(--static-space-32);
}

.p-40 {
  padding: var(--static-space-40);
}

.p-48 {
  padding: var(--static-space-48);
}

.p-56 {
  padding: var(--static-space-56);
}

.p-64 {
  padding: var(--static-space-64);
}

.p-80 {
  padding: var(--static-space-80);
}

.p-104 {
  padding: var(--static-space-104);
}

.p-128 {
  padding: var(--static-space-128);
}

.p-160 {
  padding: var(--static-space-160);
}

.p-xs {
  padding: var(--responsive-space-xs);
}

.p-s {
  padding: var(--responsive-space-s);
}

.p-m {
  padding: var(--responsive-space-m);
}

.p-l {
  padding: var(--responsive-space-l);
}

.p-xl {
  padding: var(--responsive-space-xl);
}

/* X */
.px-0 {
  padding-left: var(--static-space-0);
  padding-right: var(--static-space-0);
}

.px-1 {
  padding-left: var(--static-space-1);
  padding-right: var(--static-space-1);
}

.px-2 {
  padding-left: var(--static-space-2);
  padding-right: var(--static-space-2);
}

.px-4 {
  padding-left: var(--static-space-4);
  padding-right: var(--static-space-4);
}

.px-8 {
  padding-left: var(--static-space-8);
  padding-right: var(--static-space-8);
}

.px-12 {
  padding-left: var(--static-space-12);
  padding-right: var(--static-space-12);
}

.px-16 {
  padding-left: var(--static-space-16);
  padding-right: var(--static-space-16);
}

.px-20 {
  padding-left: var(--static-space-20);
  padding-right: var(--static-space-20);
}

.px-24 {
  padding-left: var(--static-space-24);
  padding-right: var(--static-space-24);
}

.px-32 {
  padding-left: var(--static-space-32);
  padding-right: var(--static-space-32);
}

.px-40 {
  padding-left: var(--static-space-40);
  padding-right: var(--static-space-40);
}

.px-48 {
  padding-left: var(--static-space-48);
  padding-right: var(--static-space-48);
}

.px-56 {
  padding-left: var(--static-space-56);
  padding-right: var(--static-space-56);
}

.px-64 {
  padding-left: var(--static-space-64);
  padding-right: var(--static-space-64);
}

.px-80 {
  padding-left: var(--static-space-80);
  padding-right: var(--static-space-80);
}

.px-104 {
  padding-left: var(--static-space-104);
  padding-right: var(--static-space-104);
}

.px-128 {
  padding-left: var(--static-space-128);
  padding-right: var(--static-space-128);
}

.px-160 {
  padding-left: var(--static-space-160);
  padding-right: var(--static-space-160);
}

.px-xs {
  padding-left: var(--responsive-space-xs);
  padding-right: var(--responsive-space-xs);
}

.px-s {
  padding-left: var(--responsive-space-s);
  padding-right: var(--responsive-space-s);
}

.px-m {
  padding-left: var(--responsive-space-m);
  padding-right: var(--responsive-space-m);
}

.px-l {
  padding-left: var(--responsive-space-l);
  padding-right: var(--responsive-space-l);
}

.px-xl {
  padding-left: var(--responsive-space-xl);
  padding-right: var(--responsive-space-xl);
}

/* Y */
.py-0 {
  padding-top: var(--static-space-0);
  padding-bottom: var(--static-space-0);
}

.py-1 {
  padding-top: var(--static-space-1);
  padding-bottom: var(--static-space-1);
}

.py-2 {
  padding-top: var(--static-space-2);
  padding-bottom: var(--static-space-2);
}

.py-4 {
  padding-top: var(--static-space-4);
  padding-bottom: var(--static-space-4);
}

.py-8 {
  padding-top: var(--static-space-8);
  padding-bottom: var(--static-space-8);
}

.py-12 {
  padding-top: var(--static-space-12);
  padding-bottom: var(--static-space-12);
}

.py-16 {
  padding-top: var(--static-space-16);
  padding-bottom: var(--static-space-16);
}

.py-20 {
  padding-top: var(--static-space-20);
  padding-bottom: var(--static-space-20);
}

.py-24 {
  padding-top: var(--static-space-24);
  padding-bottom: var(--static-space-24);
}

.py-32 {
  padding-top: var(--static-space-32);
  padding-bottom: var(--static-space-32);
}

.py-40 {
  padding-top: var(--static-space-40);
  padding-bottom: var(--static-space-40);
}

.py-48 {
  padding-top: var(--static-space-48);
  padding-bottom: var(--static-space-48);
}

.py-56 {
  padding-top: var(--static-space-56);
  padding-bottom: var(--static-space-56);
}

.py-64 {
  padding-top: var(--static-space-64);
  padding-bottom: var(--static-space-64);
}

.py-80 {
  padding-top: var(--static-space-80);
  padding-bottom: var(--static-space-80);
}

.pt-104 {
  padding-top: var(--static-space-104);
  padding-bottom: var(--static-space-104);
}

.py-128 {
  padding-top: var(--static-space-128);
  padding-bottom: var(--static-space-128);
}

.py-160 {
  padding-top: var(--static-space-160);
  padding-bottom: var(--static-space-160);
}

.py-xs {
  padding-top: var(--responsive-space-xs);
  padding-bottom: var(--responsive-space-xs);
}

.py-s {
  padding-top: var(--responsive-space-s);
  padding-bottom: var(--responsive-space-s);
}

.py-m {
  padding-top: var(--responsive-space-m);
  padding-bottom: var(--responsive-space-m);
}

.py-l {
  padding-top: var(--responsive-space-l);
  padding-bottom: var(--responsive-space-l);
}

.py-xl {
  padding-top: var(--responsive-space-xl);
  padding-bottom: var(--responsive-space-xl);
}

/* TOP */
.pt-0 {
  padding-top: var(--static-space-0);
}

.pt-1 {
  padding-top: var(--static-space-1);
}

.pt-2 {
  padding-top: var(--static-space-2);
}

.pt-4 {
  padding-top: var(--static-space-4);
}

.pt-8 {
  padding-top: var(--static-space-8);
}

.pt-12 {
  padding-top: var(--static-space-12);
}

.pt-16 {
  padding-top: var(--static-space-16);
}

.pt-20 {
  padding-top: var(--static-space-20);
}

.pt-24 {
  padding-top: var(--static-space-24);
}

.pt-32 {
  padding-top: var(--static-space-32);
}

.pt-40 {
  padding-top: var(--static-space-40);
}

.pt-48 {
  padding-top: var(--static-space-48);
}

.pt-56 {
  padding-top: var(--static-space-56);
}

.pt-64 {
  padding-top: var(--static-space-64);
}

.pt-80 {
  padding-top: var(--static-space-80);
}

.pt-104 {
  padding-top: var(--static-space-104);
}

.pt-128 {
  padding-top: var(--static-space-128);
}

.pt-160 {
  padding-top: var(--static-space-160);
}

.pt-xs {
  padding-top: var(--responsive-space-xs);
}

.pt-s {
  padding-top: var(--responsive-space-s);
}

.pt-m {
  padding-top: var(--responsive-space-m);
}

.pt-l {
  padding-top: var(--responsive-space-l);
}

.pt-xl {
  padding-top: var(--responsive-space-xl);
}

/* RIGHT */
.pr-0 {
  padding-right: var(--static-space-0);
}

.pr-1 {
  padding-right: var(--static-space-1);
}

.pr-2 {
  padding-right: var(--static-space-2);
}

.pr-4 {
  padding-right: var(--static-space-4);
}

.pr-8 {
  padding-right: var(--static-space-8);
}

.pr-12 {
  padding-right: var(--static-space-12);
}

.pr-16 {
  padding-right: var(--static-space-16);
}

.pr-20 {
  padding-right: var(--static-space-20);
}

.pr-24 {
  padding-right: var(--static-space-24);
}

.pr-32 {
  padding-right: var(--static-space-32);
}

.pr-40 {
  padding-right: var(--static-space-40);
}

.pr-48 {
  padding-right: var(--static-space-48);
}

.pr-56 {
  padding-right: var(--static-space-56);
}

.pr-64 {
  padding-right: var(--static-space-64);
}

.pr-80 {
  padding-right: var(--static-space-80);
}

.pr-104 {
  padding-right: var(--static-space-104);
}

.pr-128 {
  padding-right: var(--static-space-128);
}

.pr-160 {
  padding-right: var(--static-space-160);
}

.pr-xs {
  padding-right: var(--responsive-space-xs);
}

.pr-s {
  padding-right: var(--responsive-space-s);
}

.pr-m {
  padding-right: var(--responsive-space-m);
}

.pr-l {
  padding-right: var(--responsive-space-l);
}

.pr-xl {
  padding-right: var(--responsive-space-xl);
}

/* BOTTOM */
.pb-0 {
  padding-bottom: var(--static-space-0);
}

.pb-1 {
  padding-bottom: var(--static-space-1);
}

.pb-2 {
  padding-bottom: var(--static-space-2);
}

.pb-4 {
  padding-bottom: var(--static-space-4);
}

.pb-8 {
  padding-bottom: var(--static-space-8);
}

.pb-12 {
  padding-bottom: var(--static-space-12);
}

.pb-16 {
  padding-bottom: var(--static-space-16);
}

.pb-20 {
  padding-bottom: var(--static-space-20);
}

.pb-24 {
  padding-bottom: var(--static-space-24);
}

.pb-32 {
  padding-bottom: var(--static-space-32);
}

.pb-40 {
  padding-bottom: var(--static-space-40);
}

.pr-48 {
  padding-right: var(--static-space-48);
}

.pr-56 {
  padding-right: var(--static-space-56);
}

.pb-64 {
  padding-bottom: var(--static-space-64);
}

.pb-80 {
  padding-bottom: var(--static-space-80);
}

.pb-104 {
  padding-bottom: var(--static-space-104);
}

.pb-128 {
  padding-bottom: var(--static-space-128);
}

.pb-160 {
  padding-bottom: var(--static-space-160);
}

.pb-xs {
  padding-bottom: var(--responsive-space-xs);
}

.pb-s {
  padding-bottom: var(--responsive-space-s);
}

.pb-m {
  padding-bottom: var(--responsive-space-m);
}

.pb-l {
  padding-bottom: var(--responsive-space-l);
}

.pb-xl {
  padding-bottom: var(--responsive-space-xl);
}

/* LEFT */
.pl-0 {
  padding-left: var(--static-space-0);
}

.pl-1 {
  padding-left: var(--static-space-1);
}

.pl-2 {
  padding-left: var(--static-space-2);
}

.pl-4 {
  padding-left: var(--static-space-4);
}

.pl-8 {
  padding-left: var(--static-space-8);
}

.pl-12 {
  padding-left: var(--static-space-12);
}

.pl-16 {
  padding-left: var(--static-space-16);
}

.pl-20 {
  padding-left: var(--static-space-20);
}

.pl-24 {
  padding-left: var(--static-space-24);
}

.pl-32 {
  padding-left: var(--static-space-32);
}

.pl-40 {
  padding-left: var(--static-space-40);
}

.pl-48 {
  padding-left: var(--static-space-48);
}

.pl-56 {
  padding-left: var(--static-space-56);
}

.pl-64 {
  padding-left: var(--static-space-64);
}

.pl-80 {
  padding-left: var(--static-space-80);
}

.pl-104 {
  padding-left: var(--static-space-104);
}

.pl-128 {
  padding-left: var(--static-space-128);
}

.pl-160 {
  padding-left: var(--static-space-160);
}

.pl-xs {
  padding-left: var(--responsive-space-xs);
}

.pl-s {
  padding-left: var(--responsive-space-s);
}

.pl-m {
  padding-left: var(--responsive-space-m);
}

.pl-l {
  padding-left: var(--responsive-space-l);
}

.pl-xl {
  padding-left: var(--responsive-space-xl);
}

/****************************/
/*            GAP           */
/****************************/
.g-0 {
  gap: var(--static-space-0);
}

.g-1 {
  gap: var(--static-space-1);
}

.g-2 {
  gap: var(--static-space-2);
}

.g-4 {
  gap: var(--static-space-4);
}

.g-8 {
  gap: var(--static-space-8);
}

.g-12 {
  gap: var(--static-space-12);
}

.g-16 {
  gap: var(--static-space-16);
}

.g-20 {
  gap: var(--static-space-20);
}

.g-24 {
  gap: var(--static-space-24);
}

.g-32 {
  gap: var(--static-space-32);
}

.g-40 {
  gap: var(--static-space-40);
}

.g-48 {
  gap: var(--static-space-48);
}

.g-56 {
  gap: var(--static-space-56);
}

.g-64 {
  gap: var(--static-space-64);
}

.g-80 {
  gap: var(--static-space-80);
}

.g-104 {
  gap: var(--static-space-104);
}

.g-128 {
  gap: var(--static-space-128);
}

.g-160 {
  gap: var(--static-space-160);
}

.g-xs {
  gap: var(--responsive-space-xs);
}

.g-s {
  gap: var(--responsive-space-s);
}

.g-m {
  gap: var(--responsive-space-m);
}

.g-l {
  gap: var(--responsive-space-l);
}

.g-xl {
  gap: var(--responsive-space-xl);
}

/****************************/
/*           RADIUS         */
/****************************/
.radius-xl {
  border-radius: var(--radius-xl);
}

.radius-xl-4 {
  border-radius: var(--radius-xl-nest-4);
}

.radius-xl-8 {
  border-radius: var(--radius-xl-nest-8);
}

.radius-l {
  border-radius: var(--radius-l);
}

.radius-l-4 {
  border-radius: var(--radius-l-nest-4);
}

.radius-l-8 {
  border-radius: var(--radius-l-nest-8);
}

.radius-m {
  border-radius: var(--radius-m);
}

.radius-m-4 {
  border-radius: var(--radius-m-nest-4);
}

.radius-m-8 {
  border-radius: var(--radius-m-nest-8);
}

.radius-s {
  border-radius: var(--radius-s);
}

.radius-s-4 {
  border-radius: var(--radius-s-nest-4);
}

.radius-s-8 {
  border-radius: var(--radius-s-nest-8);
}

.radius-xs {
  border-radius: var(--radius-xs);
}

.radius-xs-4 {
  border-radius: var(--radius-xs-nest-4);
}

.radius-xs-8 {
  border-radius: var(--radius-xs-nest-8);
}

.radius-full {
  border-radius: var(--radius-full);
}

/****************************/
/*           STYLE          */
/****************************/
.border-solid-1 {
  border-style: solid;
  border-width: 1px;
}

.border-solid-2 {
  border-style: solid;
  border-width: 2px;
}

/****************************/
/*           COLOR          */
/****************************/
/* PAGE */
.surface-border {
  border-color: var(--surface-border);
}

/* NEUTRAL */
.neutral-border-weak {
  border-color: var(--neutral-border-weak);
}

.neutral-border-medium {
  border-color: var(--neutral-border-medium);
}

.neutral-border-strong {
  border-color: var(--neutral-border-strong);
}

/* BRAND */
.brand-border-weak {
  border-color: var(--brand-border-weak);
}

.brand-border-medium {
  border-color: var(--brand-border-medium);
}

.brand-border-strong {
  border-color: var(--brand-border-strong);
}

/* ACCENT */
.accent-border-weak {
  border-color: var(--accent-border-weak);
}

.accent-border-medium {
  border-color: var(--accent-border-medium);
}

.accent-border-strong {
  border-color: var(--accent-border-strong);
}

/* INFO */
.info-border-weak {
  border-color: var(--info-border-weak);
}

.info-border-medium {
  border-color: var(--info-border-medium);
}

.info-border-strong {
  border-color: var(--info-border-strong);
}

/* DANGER */
.danger-border-weak {
  border-color: var(--danger-border-weak);
}

.danger-border-medium {
  border-color: var(--danger-border-medium);
}

.danger-border-strong {
  border-color: var(--danger-border-strong);
}

/* WARNING */
.warning-border-weak {
  border-color: var(--warning-border-weak);
}

.warning-border-medium {
  border-color: var(--warning-border-medium);
}

.warning-border-strong {
  border-color: var(--warning-border-strong);
}

/* SUCCESS */
.success-border-weak {
  border-color: var(--success-border-weak);
}

.success-border-medium {
  border-color: var(--success-border-medium);
}

.success-border-strong {
  border-color: var(--success-border-strong);
}

/****************************/
/*          COLOR           */
/****************************/
/* NEUTRAL */
.color-inherit {
  color: inherit;
}

/* NEUTRAL */
.neutral-on-background-weak {
  color: var(--neutral-on-background-weak);
}

.neutral-on-background-medium {
  color: var(--neutral-on-background-medium);
}

.neutral-on-background-strong {
  color: var(--neutral-on-background-strong);
}

.neutral-on-solid-weak {
  color: var(--neutral-on-solid-weak);
}

.neutral-on-solid-medium {
  color: var(--neutral-on-solid-medium);
}

.neutral-on-solid-strong {
  color: var(--neutral-on-solid-strong);
}

/* BRAND */
.brand-on-background-weak {
  color: var(--brand-on-background-weak);
}

.brand-on-background-medium {
  color: var(--brand-on-background-medium);
}

.brand-on-background-strong {
  color: var(--brand-on-background-strong);
}

.brand-on-solid-weak {
  color: var(--brand-on-solid-weak);
}

.brand-on-solid-medium {
  color: var(--brand-on-solid-medium);
}

.brand-on-solid-strong {
  color: var(--brand-on-solid-strong);
}

/* ACCENT */
.accent-on-background-weak {
  color: var(--accent-on-background-weak);
}

.accent-on-background-medium {
  color: var(--accent-on-background-medium);
}

.accent-on-background-strong {
  color: var(--accent-on-background-strong);
}

.accent-on-solid-weak {
  color: var(--accent-on-solid-weak);
}

.accent-on-solid-medium {
  color: var(--accent-on-solid-medium);
}

.accent-on-solid-strong {
  color: var(--accent-on-solid-strong);
}

/* INFO */
.info-on-background-weak {
  color: var(--info-on-background-weak);
}

.info-on-background-medium {
  color: var(--info-on-background-medium);
}

.info-on-background-strong {
  color: var(--info-on-background-strong);
}

.info-on-solid-weak {
  color: var(--info-on-solid-weak);
}

.info-on-solid-medium {
  color: var(--info-on-solid-medium);
}

.info-on-solid-strong {
  color: var(--info-on-solid-strong);
}

/* DANGER */
.danger-on-background-weak {
  color: var(--danger-on-background-weak);
}

.danger-on-background-medium {
  color: var(--danger-on-background-medium);
}

.danger-on-background-strong {
  color: var(--danger-on-background-strong);
}

.danger-on-solid-weak {
  color: var(--danger-on-solid-weak);
}

.danger-on-solid-medium {
  color: var(--danger-on-solid-medium);
}

.danger-on-solid-strong {
  color: var(--danger-on-solid-strong);
}

/* WARNING */
.warning-on-background-weak {
  color: var(--warning-on-background-weak);
}

.warning-on-background-medium {
  color: var(--warning-on-background-medium);
}

.warning-on-background-strong {
  color: var(--warning-on-background-strong);
}

.warning-on-solid-weak {
  color: var(--warning-on-solid-weak);
}

.warning-on-solid-medium {
  color: var(--warning-on-solid-medium);
}

.warning-on-solid-strong {
  color: var(--warning-on-solid-strong);
}

/* SUCCESS */
.success-on-background-weak {
  color: var(--success-on-background-weak);
}

.success-on-background-medium {
  color: var(--success-on-background-medium);
}

.success-on-background-strong {
  color: var(--success-on-background-strong);
}

.success-on-solid-weak {
  color: var(--success-on-solid-weak);
}

.success-on-solid-medium {
  color: var(--success-on-solid-medium);
}

.success-on-solid-strong {
  color: var(--success-on-solid-strong);
}

/****************************/
/*     BACKGROUND-COLOR     */
/****************************/
/* PAGE */
.page-background {
  background-color: var(--page-background);
}

.surface-background {
  background-color: var(--surface-background);
  -webkit-backdrop-filter: var(--backdrop-filter);
          backdrop-filter: var(--backdrop-filter);
}

.backdrop {
  background-color: var(--backdrop);
}

/* NEUTRAL */
.neutral-background-weak ::-moz-selection, .neutral-background-medium ::-moz-selection, .neutral-background-strong ::-moz-selection, .neutral-alpha-weak ::-moz-selection, .neutral-alpha-medium ::-moz-selection, .neutral-alpha-strong ::-moz-selection {
  background-color: var(--neutral-on-background-weak);
  color: var(--neutral-background-weak);
}
.neutral-background-weak ::selection,
.neutral-background-medium ::selection,
.neutral-background-strong ::selection,
.neutral-alpha-weak ::selection,
.neutral-alpha-medium ::selection,
.neutral-alpha-strong ::selection {
  background-color: var(--neutral-on-background-weak);
  color: var(--neutral-background-weak);
}

.neutral-solid-weak ::-moz-selection, .neutral-solid-medium ::-moz-selection, .neutral-solid-strong ::-moz-selection {
  background-color: var(--neutral-background-weak);
  color: var(--neutral-on-background-medium);
}

.neutral-solid-weak ::selection,
.neutral-solid-medium ::selection,
.neutral-solid-strong ::selection {
  background-color: var(--neutral-background-weak);
  color: var(--neutral-on-background-medium);
}

.neutral-background-weak {
  background-color: var(--neutral-background-weak);
}

.neutral-background-medium {
  background-color: var(--neutral-background-medium);
}

.neutral-background-strong {
  background-color: var(--neutral-background-strong);
}

.neutral-solid-weak {
  background-color: var(--neutral-solid-weak);
}

.neutral-solid-medium {
  background-color: var(--neutral-solid-medium);
}

.neutral-solid-strong {
  background-color: var(--neutral-solid-strong);
}

.neutral-alpha-weak {
  background-color: var(--neutral-alpha-weak);
}

.neutral-alpha-medium {
  background-color: var(--neutral-alpha-medium);
}

.neutral-alpha-strong {
  background-color: var(--neutral-alpha-strong);
}

/* BRAND */
.brand-background-weak ::-moz-selection, .brand-background-medium ::-moz-selection, .brand-background-strong ::-moz-selection, .brand-alpha-weak ::-moz-selection, .brand-alpha-medium ::-moz-selection, .brand-alpha-strong ::-moz-selection {
  background-color: var(--brand-on-background-weak);
  color: var(--brand-background-weak);
}
.brand-background-weak ::selection,
.brand-background-medium ::selection,
.brand-background-strong ::selection,
.brand-alpha-weak ::selection,
.brand-alpha-medium ::selection,
.brand-alpha-strong ::selection {
  background-color: var(--brand-on-background-weak);
  color: var(--brand-background-weak);
}

.brand-solid-weak ::-moz-selection, .brand-solid-medium ::-moz-selection, .brand-solid-strong ::-moz-selection {
  background-color: var(--brand-background-weak);
  color: var(--brand-on-background-medium);
}

.brand-solid-weak ::selection,
.brand-solid-medium ::selection,
.brand-solid-strong ::selection {
  background-color: var(--brand-background-weak);
  color: var(--brand-on-background-medium);
}

.brand-background-weak {
  background-color: var(--brand-background-weak);
}

.brand-background-medium {
  background-color: var(--brand-background-medium);
}

.brand-background-strong {
  background-color: var(--brand-background-strong);
}

.brand-solid-weak {
  background-color: var(--brand-solid-weak);
}

.brand-solid-medium {
  background-color: var(--brand-solid-medium);
}

.brand-solid-strong {
  background-color: var(--brand-solid-strong);
}

.brand-alpha-weak {
  background-color: var(--brand-alpha-weak);
}

.brand-alpha-medium {
  background-color: var(--brand-alpha-medium);
}

.brand-alpha-strong {
  background-color: var(--brand-alpha-strong);
}

/* ACCENT */
.accent-background-weak ::-moz-selection, .accent-background-medium ::-moz-selection, .accent-background-strong ::-moz-selection, .accent-alpha-weak ::-moz-selection, .accent-alpha-medium ::-moz-selection, .accent-alpha-strong ::-moz-selection {
  background-color: var(--accent-on-background-weak);
  color: var(--accent-background-weak);
}
.accent-background-weak ::selection,
.accent-background-medium ::selection,
.accent-background-strong ::selection,
.accent-alpha-weak ::selection,
.accent-alpha-medium ::selection,
.accent-alpha-strong ::selection {
  background-color: var(--accent-on-background-weak);
  color: var(--accent-background-weak);
}

.accent-solid-weak ::-moz-selection, .accent-solid-medium ::-moz-selection, .accent-solid-strong ::-moz-selection {
  background-color: var(--accent-background-weak);
  color: var(--accent-on-background-medium);
}

.accent-solid-weak ::selection,
.accent-solid-medium ::selection,
.accent-solid-strong ::selection {
  background-color: var(--accent-background-weak);
  color: var(--accent-on-background-medium);
}

.accent-background-weak {
  background-color: var(--accent-background-weak);
}

.accent-background-medium {
  background-color: var(--accent-background-medium);
}

.accent-background-strong {
  background-color: var(--accent-background-strong);
}

.accent-solid-weak {
  background-color: var(--accent-solid-weak);
}

.accent-solid-medium {
  background-color: var(--accent-solid-medium);
}

.accent-solid-strong {
  background-color: var(--accent-solid-strong);
}

.accent-alpha-weak {
  background-color: var(--accent-alpha-weak);
}

.accent-alpha-medium {
  background-color: var(--accent-alpha-medium);
}

.accent-alpha-strong {
  background-color: var(--accent-alpha-strong);
}

/* INFO */
.info-background-weak ::-moz-selection, .info-background-medium ::-moz-selection, .info-background-strong ::-moz-selection, .info-alpha-weak ::-moz-selection, .info-alpha-medium ::-moz-selection, .info-alpha-strong ::-moz-selection {
  background-color: var(--info-on-background-weak);
  color: var(--info-background-weak);
}
.info-background-weak ::selection,
.info-background-medium ::selection,
.info-background-strong ::selection,
.info-alpha-weak ::selection,
.info-alpha-medium ::selection,
.info-alpha-strong ::selection {
  background-color: var(--info-on-background-weak);
  color: var(--info-background-weak);
}

.info-solid-weak ::-moz-selection, .info-solid-medium ::-moz-selection, .info-solid-strong ::-moz-selection {
  background-color: var(--info-background-weak);
  color: var(--info-on-background-medium);
}

.info-solid-weak ::selection,
.info-solid-medium ::selection,
.info-solid-strong ::selection {
  background-color: var(--info-background-weak);
  color: var(--info-on-background-medium);
}

.info-background-weak {
  background-color: var(--info-background-weak);
}

.info-background-medium {
  background-color: var(--info-background-medium);
}

.info-background-strong {
  background-color: var(--info-background-strong);
}

.info-solid-weak {
  background-color: var(--info-solid-weak);
}

.info-solid-medium {
  background-color: var(--info-solid-medium);
}

.info-solid-strong {
  background-color: var(--info-solid-strong);
}

.info-alpha-weak {
  background-color: var(--info-alpha-weak);
}

.info-alpha-medium {
  background-color: var(--info-alpha-medium);
}

.info-alpha-strong {
  background-color: var(--info-alpha-strong);
}

/* DANGER */
.danger-background-weak ::-moz-selection, .danger-background-medium ::-moz-selection, .danger-background-strong ::-moz-selection, .danger-alpha-weak ::-moz-selection, .danger-alpha-medium ::-moz-selection, .danger-alpha-strong ::-moz-selection {
  background-color: var(--danger-on-background-weak);
  color: var(--danger-background-weak);
}
.danger-background-weak ::selection,
.danger-background-medium ::selection,
.danger-background-strong ::selection,
.danger-alpha-weak ::selection,
.danger-alpha-medium ::selection,
.danger-alpha-strong ::selection {
  background-color: var(--danger-on-background-weak);
  color: var(--danger-background-weak);
}

.danger-solid-weak ::-moz-selection, .danger-solid-medium ::-moz-selection, .danger-solid-strong ::-moz-selection {
  background-color: var(--danger-background-weak);
  color: var(--danger-on-background-medium);
}

.danger-solid-weak ::selection,
.danger-solid-medium ::selection,
.danger-solid-strong ::selection {
  background-color: var(--danger-background-weak);
  color: var(--danger-on-background-medium);
}

.danger-background-weak {
  background-color: var(--danger-background-weak);
}

.danger-background-medium {
  background-color: var(--danger-background-medium);
}

.danger-background-strong {
  background-color: var(--danger-background-strong);
}

.danger-solid-weak {
  background-color: var(--danger-solid-weak);
}

.danger-solid-medium {
  background-color: var(--danger-solid-medium);
}

.danger-solid-strong {
  background-color: var(--danger-solid-strong);
}

.danger-alpha-weak {
  background-color: var(--danger-alpha-weak);
}

.danger-alpha-medium {
  background-color: var(--danger-alpha-medium);
}

.danger-alpha-strong {
  background-color: var(--danger-alpha-strong);
}

/* WARNING */
.warning-background-weak ::-moz-selection, .warning-background-medium ::-moz-selection, .warning-background-strong ::-moz-selection, .warning-alpha-weak ::-moz-selection, .warning-alpha-medium ::-moz-selection, .warning-alpha-strong ::-moz-selection {
  background-color: var(--warning-on-background-weak);
  color: var(--warning-background-weak);
}
.warning-background-weak ::selection,
.warning-background-medium ::selection,
.warning-background-strong ::selection,
.warning-alpha-weak ::selection,
.warning-alpha-medium ::selection,
.warning-alpha-strong ::selection {
  background-color: var(--warning-on-background-weak);
  color: var(--warning-background-weak);
}

.warning-solid-weak ::-moz-selection, .warning-solid-medium ::-moz-selection, .warning-solid-strong ::-moz-selection {
  background-color: var(--warning-background-weak);
  color: var(--warning-on-background-medium);
}

.warning-solid-weak ::selection,
.warning-solid-medium ::selection,
.warning-solid-strong ::selection {
  background-color: var(--warning-background-weak);
  color: var(--warning-on-background-medium);
}

.warning-background-weak {
  background-color: var(--warning-background-weak);
}

.warning-background-medium {
  background-color: var(--warning-background-medium);
}

.warning-background-strong {
  background-color: var(--warning-background-strong);
}

.warning-solid-weak {
  background-color: var(--warning-solid-weak);
}

.warning-solid-medium {
  background-color: var(--warning-solid-medium);
}

.warning-solid-strong {
  background-color: var(--warning-solid-strong);
}

.warning-alpha-weak {
  background-color: var(--warning-alpha-weak);
}

.warning-alpha-medium {
  background-color: var(--warning-alpha-medium);
}

.warning-alpha-strong {
  background-color: var(--warning-alpha-strong);
}

/* SUCCESS */
.success-background-weak ::-moz-selection, .success-background-medium ::-moz-selection, .success-background-strong ::-moz-selection, .success-alpha-weak ::-moz-selection, .success-alpha-medium ::-moz-selection, .success-alpha-strong ::-moz-selection {
  background-color: var(--success-on-background-weak);
  color: var(--success-background-weak);
}
.success-background-weak ::selection,
.success-background-medium ::selection,
.success-background-strong ::selection,
.success-alpha-weak ::selection,
.success-alpha-medium ::selection,
.success-alpha-strong ::selection {
  background-color: var(--success-on-background-weak);
  color: var(--success-background-weak);
}

.success-solid-weak ::-moz-selection, .success-solid-medium ::-moz-selection, .success-solid-strong ::-moz-selection {
  background-color: var(--success-background-weak);
  color: var(--success-on-background-medium);
}

.success-solid-weak ::selection,
.success-solid-medium ::selection,
.success-solid-strong ::selection {
  background-color: var(--success-background-weak);
  color: var(--success-on-background-medium);
}

.success-background-weak {
  background-color: var(--success-background-weak);
}

.success-background-medium {
  background-color: var(--success-background-medium);
}

.success-background-strong {
  background-color: var(--success-background-strong);
}

.success-solid-weak {
  background-color: var(--success-solid-weak);
}

.success-solid-medium {
  background-color: var(--success-solid-medium);
}

.success-solid-strong {
  background-color: var(--success-solid-strong);
}

.success-alpha-weak {
  background-color: var(--success-alpha-weak);
}

.success-alpha-medium {
  background-color: var(--success-alpha-medium);
}

.success-alpha-strong {
  background-color: var(--success-alpha-strong);
}

html {
  font-size: var(--font-scaling-desktop);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-default);
  color: var(--neutral-on-background-strong);
}

@media (max-width: 1024px) {
  html {
    font-size: var(--font-scaling-tablet);
  }
}
@media (max-width: 768px) {
  html {
    font-size: var(--font-scaling-mobile);
  }
}
h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

.font-size-inherit {
  font-size: inherit;
}

.font-weight-inherit {
  font-weight: inherit;
}

.font-display {
  font-family: var(--font-family-heading);
}
.font-display.font-strong, .font-display > .font-strong {
  font-weight: var(--font-weight-40);
}
.font-display.font-default, .font-display > .font-default {
  font-weight: var(--font-weight-10);
}
.font-display.font-xl, .font-display > .font-xl {
  font-size: calc(var(--font-size-display-xl) * var(--font-size-heading-multiplier));
  line-height: calc(var(--line-height-display-xl) * var(--line-height-heading-multiplier));
}
.font-display.font-l, .font-display > .font-l {
  font-size: calc(var(--font-size-display-l) * var(--font-size-heading-multiplier));
  line-height: calc(var(--line-height-display-l) * var(--line-height-heading-multiplier));
}
.font-display.font-m, .font-display > .font-m {
  font-size: calc(var(--font-size-display-m) * var(--font-size-heading-multiplier));
  line-height: calc(var(--line-height-display-m) * var(--line-height-heading-multiplier));
}
.font-display.font-s, .font-display > .font-s {
  font-size: calc(var(--font-size-display-s) * var(--font-size-heading-multiplier));
  line-height: calc(var(--line-height-display-s) * var(--line-height-heading-multiplier));
}
.font-display.font-xs, .font-display > .font-xs {
  font-size: calc(var(--font-size-display-xs) * var(--font-size-heading-multiplier));
  line-height: calc(var(--line-height-display-xs) * var(--line-height-heading-multiplier));
}

.font-heading {
  font-family: var(--font-family-heading);
}
.font-heading.font-strong, .font-heading > .font-strong {
  font-weight: var(--font-weight-30);
}
.font-heading.font-default, .font-heading > .font-default {
  font-weight: var(--font-weight-20);
}
.font-heading.font-xl, .font-heading > .font-xl {
  font-size: calc(var(--font-size-heading-xl) * var(--font-size-heading-multiplier));
  line-height: calc(var(--line-height-heading-xl) * var(--line-height-heading-multiplier));
}
.font-heading.font-l, .font-heading > .font-l {
  font-size: calc(var(--font-size-heading-l) * var(--font-size-heading-multiplier));
  line-height: calc(var(--line-height-heading-l) * var(--line-height-heading-multiplier));
}
.font-heading.font-m, .font-heading > .font-m {
  font-size: calc(var(--font-size-heading-m) * var(--font-size-heading-multiplier));
  line-height: calc(var(--line-height-heading-m) * var(--line-height-heading-multiplier));
}
.font-heading.font-s, .font-heading > .font-s {
  font-size: calc(var(--font-size-heading-s) * var(--font-size-heading-multiplier));
  line-height: calc(var(--line-height-heading-s) * var(--line-height-heading-multiplier));
}
.font-heading.font-xs, .font-heading > .font-xs {
  font-size: calc(var(--font-size-heading-xs) * var(--font-size-heading-multiplier));
  line-height: calc(var(--line-height-heading-xs) * var(--line-height-heading-multiplier));
}

.font-body {
  font-family: var(--font-family-body);
}
.font-body.font-strong, .font-body > .font-strong {
  font-weight: var(--font-weight-30);
}
.font-body.font-default, .font-body > .font-default {
  font-weight: var(--font-weight-20);
}
.font-body.font-xl, .font-body > .font-xl {
  font-size: calc(var(--font-size-body-xl) * var(--font-size-body-multiplier));
  line-height: calc(var(--line-height-body-xl) * var(--line-height-body-multiplier));
}
.font-body.font-l, .font-body > .font-l {
  font-size: calc(var(--font-size-body-l) * var(--font-size-body-multiplier));
  line-height: calc(var(--line-height-body-l) * var(--line-height-body-multiplier));
}
.font-body.font-m, .font-body > .font-m {
  font-size: calc(var(--font-size-body-m) * var(--font-size-body-multiplier));
  line-height: calc(var(--line-height-body-m) * var(--line-height-body-multiplier));
}
.font-body.font-s, .font-body > .font-s {
  font-size: calc(var(--font-size-body-s) * var(--font-size-body-multiplier));
  line-height: calc(var(--line-height-body-s) * var(--line-height-body-multiplier));
}
.font-body.font-xs, .font-body > .font-xs {
  font-size: calc(var(--font-size-body-xs) * var(--font-size-body-multiplier));
  line-height: calc(var(--line-height-body-xs) * var(--line-height-body-multiplier));
}

.font-label {
  font-family: var(--font-family-label);
}
.font-label.font-strong, .font-label > .font-strong {
  font-weight: var(--font-weight-30);
}
.font-label.font-default, .font-label > .font-default {
  font-weight: var(--font-weight-20);
}
.font-label.font-l, .font-label > .font-l {
  font-size: calc(var(--font-size-label-l) * var(--font-size-label-multiplier));
  line-height: calc(var(--line-height-label-l) * var(--line-height-label-multiplier));
}
.font-label.font-m, .font-label > .font-m {
  font-size: calc(var(--font-size-label-m) * var(--font-size-label-multiplier));
  line-height: calc(var(--line-height-label-m) * var(--line-height-label-multiplier));
}
.font-label.font-s, .font-label > .font-s {
  font-size: calc(var(--font-size-label-s) * var(--font-size-label-multiplier));
  line-height: calc(var(--line-height-label-s) * var(--line-height-label-multiplier));
}

.font-code {
  font-family: var(--font-family-code);
}
.font-code.font-strong, .font-code > .font-strong {
  font-weight: var(--font-weight-30);
}
.font-code.font-default, .font-code > .font-default {
  font-weight: var(--font-weight-20);
}
.font-code.font-l, .font-code > .font-l {
  font-size: calc(var(--font-size-label-l) * var(--font-size-label-multiplier));
  line-height: calc(var(--line-height-label-l) * var(--line-height-label-multiplier));
}
.font-code.font-m, .font-code > .font-m {
  font-size: calc(var(--font-size-label-m) * var(--font-size-label-multiplier));
  line-height: calc(var(--line-height-label-m) * var(--line-height-label-multiplier));
}
.font-code.font-s, .font-code > .font-s {
  font-size: calc(var(--font-size-label-s) * var(--font-size-label-multiplier));
  line-height: calc(var(--line-height-label-s) * var(--line-height-label-multiplier));
}

/* BOX-SIZING */
* {
  box-sizing: border-box;
}

ul {
  margin: 0;
  padding: 0 0 0 var(--static-space-12);
}

li {
  padding: 0;
  list-style-position: inside;
  font-size: inherit;
  color: inherit;
}
li::marker {
  margin-right: var(--static-space-4);
  color: var(--brand-on-background-weak);
}

img {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* SELECTION */
::-moz-selection {
  background: var(--neutral-on-background-medium);
  color: var(--neutral-background-strong);
}
::selection {
  background: var(--neutral-on-background-medium);
  color: var(--neutral-background-strong);
}

/* LINK */
a {
  color: var(--brand-on-background-medium);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--neutral-border-strong) !important;
}
a:hover {
  text-decoration-line: underline;
}

/* SCROLLBAR */
::-webkit-scrollbar {
  background: var(--static-transparent);
  width: var(--static-space-8);
  height: var(--static-space-8);
}

::-webkit-scrollbar-track {
  background: var(--static-transparent);
}

::-webkit-scrollbar-thumb {
  background: var(--neutral-alpha-medium);
  border-radius: var(--radius-full);
  -webkit-transition: var(--transition-micro-medium);
  transition: var(--transition-micro-medium);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-alpha-strong);
}

::-webkit-scrollbar-corner {
  background-color: var(--static-transparent);
}

.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.m-flex-show {
  display: none;
}

.s-flex-show {
  display: none;
}

@media (max-width: 1024px) {
  .m-flex-hide {
    display: none !important;
  }
  .m-flex-show {
    display: flex !important;
  }
  .m-flex-column {
    flex-direction: column !important;
  }
  .m-flex-row {
    flex-direction: row !important;
  }
}
@media (max-width: 768px) {
  .s-flex-hide {
    display: none !important;
  }
  .s-flex-show {
    display: flex !important;
  }
  .s-flex-column {
    flex-direction: column !important;
  }
  .s-flex-row {
    flex-direction: row !important;
  }
}
.shadow-xs {
  box-shadow: var(--shadow-xs);
}

.shadow-s {
  box-shadow: var(--shadow-s);
}

.shadow-m {
  box-shadow: var(--shadow-m);
}

.shadow-l {
  box-shadow: var(--shadow-l);
}

.shadow-xl {
  box-shadow: var(--shadow-xl);
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[13].use[5]!./src/once-ui/tokens/index.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
:root {
  /* STATIC */
  --static-transparent: #00000000;
  --static-white: #ffffff;
  --static-white-medium: #ffffff4D;
  --static-black: #000000;
  --static-black-medium: #0000004D;
  /* CUSTOM */
  /* 
      Insert code for your custom color palette
      generated at https://once-ui.com/customize
  */
  /* BASE */
  /* sand */
  --scheme-sand-100: #0D0A00;
  --scheme-sand-200: #1B1608;
  --scheme-sand-300: #443F30;
  --scheme-sand-400: #5E594C;
  --scheme-sand-500: #797465;
  --scheme-sand-600: #999486;
  --scheme-sand-700: #B7B2A4;
  --scheme-sand-800: #D7D2C4;
  --scheme-sand-900: #E5E0D2;
  --scheme-sand-1000: #F2EDDF;
  --scheme-sand-1100: #F8F3E5;
  --scheme-sand-1200: #FDF9EE;
  --scheme-sand-600-10: #9994861A;
  --scheme-sand-600-30: #9994864D;
  --scheme-sand-600-50: #99948680;
  /* gray */
  --scheme-gray-100: #0A0A0A;
  --scheme-gray-200: #151515;
  --scheme-gray-300: #3F3F3F;
  --scheme-gray-400: #595959;
  --scheme-gray-500: #757575;
  --scheme-gray-600: #959595;
  --scheme-gray-700: #B2B2B2;
  --scheme-gray-800: #D2D2D2;
  --scheme-gray-900: #E0E0E0;
  --scheme-gray-1000: #EDEDED;
  --scheme-gray-1100: #F3F3F3;
  --scheme-gray-1200: #F9F9F9;
  --scheme-gray-600-10: #9595951A;
  --scheme-gray-600-30: #9595954D;
  --scheme-gray-600-50: #95959580;
  /* slate */
  --scheme-slate-100: #040816;
  --scheme-slate-200: #0F152B;
  --scheme-slate-300: #393F55;
  --scheme-slate-400: #52586F;
  --scheme-slate-500: #6D748A;
  --scheme-slate-600: #8E94AA;
  --scheme-slate-700: #ACB2C8;
  --scheme-slate-800: #CCD2E8;
  --scheme-slate-900: #DAE0F6;
  --scheme-slate-1000: #E9EDFE;
  --scheme-slate-1100: #F1F3FD;
  --scheme-slate-1200: #F8F9FD;
  --scheme-slate-600-10: #8E94AA1A;
  --scheme-slate-600-30: #8E94AA4D;
  --scheme-slate-600-50: #8E94AA80;
  /* red */
  --scheme-red-100: #130507;
  --scheme-red-200: #2A0A10;
  --scheme-red-300: #830711;
  --scheme-red-400: #B6020C;
  --scheme-red-500: #E90507;
  --scheme-red-600: #FF5F53;
  --scheme-red-700: #FF9689;
  --scheme-red-800: #FDC6BD;
  --scheme-red-900: #FDD8D2;
  --scheme-red-1000: #FDEAE6;
  --scheme-red-1100: #FCF1EF;
  --scheme-red-1200: #FDF9F8;
  --scheme-red-600-10: #FF5F531A;
  --scheme-red-600-30: #FF5F534D;
  --scheme-red-600-50: #FF5F5380;
  /* orange */
  --scheme-orange-100: #120605;
  --scheme-orange-200: #270D0A;
  --scheme-orange-300: #7C1A06;
  --scheme-orange-400: #AC2401;
  --scheme-orange-500: #DB3400;
  --scheme-orange-600: #FD6325;
  --scheme-orange-700: #FF9964;
  --scheme-orange-800: #FEC8A4;
  --scheme-orange-900: #FDDAC2;
  --scheme-orange-1000: #FDEADD;
  --scheme-orange-1100: #FCF2E9;
  --scheme-orange-1200: #FCF9F5;
  --scheme-orange-600-10: #FD63251A;
  --scheme-orange-600-30: #FD63254D;
  --scheme-orange-600-50: #FD632580;
  /* yellow */
  --scheme-yellow-100: #100704;
  --scheme-yellow-200: #231009;
  --scheme-yellow-300: #6B2D09;
  --scheme-yellow-400: #924205;
  --scheme-yellow-500: #B85B02;
  --scheme-yellow-600: #E07B00;
  --scheme-yellow-700: #FE9C0B;
  --scheme-yellow-800: #FECC55;
  --scheme-yellow-900: #FEDE79;
  --scheme-yellow-1000: #FCEEA7;
  --scheme-yellow-1100: #FBF5CB;
  --scheme-yellow-1200: #FBFAEB;
  --scheme-yellow-600-10: #E07B001A;
  --scheme-yellow-600-30: #E07B004D;
  --scheme-yellow-600-50: #E07B0080;
  /* moss */
  --scheme-moss-100: #080B04;
  --scheme-moss-200: #111707;
  --scheme-moss-300: #2F460C;
  --scheme-moss-400: #3C630A;
  --scheme-moss-500: #478309;
  --scheme-moss-600: #4FA900;
  --scheme-moss-700: #54CC01;
  --scheme-moss-800: #76ED53;
  --scheme-moss-900: #98F789;
  --scheme-moss-1000: #C0FDBB;
  --scheme-moss-1100: #DAFDD7;
  --scheme-moss-1200: #F0FDEF;
  --scheme-moss-600-10: #4FA9001A;
  --scheme-moss-600-30: #4FA9004D;
  --scheme-moss-600-50: #4FA90080;
  /* green */
  --scheme-green-100: #040B07;
  --scheme-green-200: #081810;
  --scheme-green-300: #0D4929;
  --scheme-green-400: #0C6731;
  --scheme-green-500: #0A8637;
  --scheme-green-600: #08AC3A;
  --scheme-green-700: #01CF38;
  --scheme-green-800: #5FEF61;
  --scheme-green-900: #91F88C;
  --scheme-green-1000: #C0FDBB;
  --scheme-green-1100: #DAFDD7;
  --scheme-green-1200: #F0FDEF;
  --scheme-green-600-10: #08AC3A1A;
  --scheme-green-600-30: #08AC3A4D;
  --scheme-green-600-50: #08AC3A80;
  /* emerald */
  --scheme-emerald-100: #040B0A;
  --scheme-emerald-200: #081816;
  --scheme-emerald-300: #0D483C;
  --scheme-emerald-400: #0C6551;
  --scheme-emerald-500: #0A8466;
  --scheme-emerald-600: #08A97C;
  --scheme-emerald-700: #01CB90;
  --scheme-emerald-800: #56ECAD;
  --scheme-emerald-900: #84F6C3;
  --scheme-emerald-1000: #B4FDDA;
  --scheme-emerald-1100: #D7FCEA;
  --scheme-emerald-1200: #EEFDF5;
  --scheme-emerald-600-10: #08A97C1A;
  --scheme-emerald-600-30: #08A97C4D;
  --scheme-emerald-600-50: #08A97C80;
  /* aqua */
  --scheme-aqua-100: #050B0D;
  --scheme-aqua-200: #081719;
  --scheme-aqua-300: #0C464B;
  --scheme-aqua-400: #0C6367;
  --scheme-aqua-500: #0B8184;
  --scheme-aqua-600: #08A6A5;
  --scheme-aqua-700: #01C7C3;
  --scheme-aqua-800: #4DE9DC;
  --scheme-aqua-900: #78F6E4;
  --scheme-aqua-1000: #B0FCEE;
  --scheme-aqua-1100: #D3FCF3;
  --scheme-aqua-1200: #ECFDF9;
  --scheme-aqua-600-10: #08A6A51A;
  --scheme-aqua-600-30: #08A6A54D;
  --scheme-aqua-600-50: #08A6A580;
  /* cyan */
  --scheme-cyan-100: #050911;
  --scheme-cyan-200: #0A1525;
  --scheme-cyan-300: #094074;
  --scheme-cyan-400: #045B9C;
  --scheme-cyan-500: #0279BE;
  --scheme-cyan-600: #049EE2;
  --scheme-cyan-700: #17C0FD;
  --scheme-cyan-800: #60E4FC;
  --scheme-cyan-900: #82F1FC;
  --scheme-cyan-1000: #B3FAFC;
  --scheme-cyan-1100: #D4FBFC;
  --scheme-cyan-1200: #EFFCFD;
  --scheme-cyan-600-10: #049EE21A;
  --scheme-cyan-600-30: #049EE24D;
  --scheme-cyan-600-50: #049EE280;
  /* blue */
  --scheme-blue-100: #0A071B;
  --scheme-blue-200: #0D0B44;
  --scheme-blue-300: #0019CB;
  --scheme-blue-400: #033CF8;
  --scheme-blue-500: #2D69FA;
  --scheme-blue-600: #5A93FC;
  --scheme-blue-700: #84B5FD;
  --scheme-blue-800: #B4D6FB;
  --scheme-blue-900: #CBE3FB;
  --scheme-blue-1000: #E0EFFC;
  --scheme-blue-1100: #EBF5FC;
  --scheme-blue-1200: #F6FAFD;
  --scheme-blue-600-10: #5A93FC1A;
  --scheme-blue-600-30: #5A93FC4D;
  --scheme-blue-600-50: #5A93FC80;
  /* indigo */
  --scheme-indigo-100: #0E0718;
  --scheme-indigo-200: #1C0B35;
  --scheme-indigo-300: #3D01C5;
  --scheme-indigo-400: #5625F7;
  --scheme-indigo-500: #7358FA;
  --scheme-indigo-600: #9585FA;
  --scheme-indigo-700: #B3A9FD;
  --scheme-indigo-800: #D2CEFB;
  --scheme-indigo-900: #E0DEFA;
  --scheme-indigo-1000: #EDEDFB;
  --scheme-indigo-1100: #F3F2FC;
  --scheme-indigo-1200: #F9F9FD;
  --scheme-indigo-600-10: #9585FA1A;
  --scheme-indigo-600-30: #9585FA4D;
  --scheme-indigo-600-50: #9585FA80;
  /* violet */
  --scheme-violet-100: #0E0512;
  --scheme-violet-200: #210B2B;
  --scheme-violet-300: #60099B;
  --scheme-violet-400: #7D04E4;
  --scheme-violet-500: #9745F7;
  --scheme-violet-600: #B07AFA;
  --scheme-violet-700: #C7A2FD;
  --scheme-violet-800: #DDCBFB;
  --scheme-violet-900: #E6DCFB;
  --scheme-violet-1000: #F0EBFC;
  --scheme-violet-1100: #F5F3FC;
  --scheme-violet-1200: #FAF8FD;
  --scheme-violet-600-10: #B07AFA1A;
  --scheme-violet-600-30: #B07AFA4D;
  --scheme-violet-600-50: #B07AFA80;
  /* magenta */
  --scheme-magenta-100: #100511;
  --scheme-magenta-200: #250A26;
  --scheme-magenta-300: #70077B;
  --scheme-magenta-400: #9902B3;
  --scheme-magenta-500: #BD1DE8;
  --scheme-magenta-600: #D166FA;
  --scheme-magenta-700: #DC98FD;
  --scheme-magenta-800: #E8C7FB;
  --scheme-magenta-900: #EFD9FB;
  --scheme-magenta-1000: #F5E9FC;
  --scheme-magenta-1100: #F8F1FC;
  --scheme-magenta-1200: #FBF8FD;
  --scheme-magenta-600-10: #D166FA1A;
  --scheme-magenta-600-30: #D166FA4D;
  --scheme-magenta-600-50: #D166FA80;
  /* pink */
  --scheme-pink-100: #12050B;
  --scheme-pink-200: #280A1A;
  --scheme-pink-300: #7D074A;
  --scheme-pink-400: #AE0169;
  --scheme-pink-500: #DE028E;
  --scheme-pink-600: #F854BE;
  --scheme-pink-700: #FD8BE4;
  --scheme-pink-800: #FCC0F1;
  --scheme-pink-900: #FCD5F5;
  --scheme-pink-1000: #FCE7F9;
  --scheme-pink-1100: #FCF0FA;
  --scheme-pink-1200: #FDF8FC;
  --scheme-pink-600-10: #F854BE1A;
  --scheme-pink-600-30: #F854BE4D;
  --scheme-pink-600-50: #F854BE80;
}

:root {
  /* FUNCTION */
  /* info */
  --function-info-100: var(--scheme-gray-100);
  --function-info-200: var(--scheme-gray-200);
  --function-info-300: var(--scheme-gray-300);
  --function-info-400: var(--scheme-gray-400);
  --function-info-500: var(--scheme-gray-500);
  --function-info-600: var(--scheme-gray-600);
  --function-info-700: var(--scheme-gray-700);
  --function-info-800: var(--scheme-gray-800);
  --function-info-900: var(--scheme-gray-900);
  --function-info-1000: var(--scheme-gray-1000);
  --function-info-1100: var(--scheme-gray-1100);
  --function-info-1200: var(--scheme-gray-1200);
  --function-info-600-10: var(--scheme-gray-600-10);
  --function-info-600-30: var(--scheme-gray-600-30);
  --function-info-600-50: var(--scheme-gray-600-50);
  /* warning */
  --function-warning-100: var(--scheme-yellow-100);
  --function-warning-200: var(--scheme-yellow-200);
  --function-warning-300: var(--scheme-yellow-300);
  --function-warning-400: var(--scheme-yellow-400);
  --function-warning-500: var(--scheme-yellow-500);
  --function-warning-600: var(--scheme-yellow-600);
  --function-warning-700: var(--scheme-yellow-700);
  --function-warning-800: var(--scheme-yellow-800);
  --function-warning-900: var(--scheme-yellow-900);
  --function-warning-1000: var(--scheme-yellow-1000);
  --function-warning-1100: var(--scheme-yellow-1100);
  --function-warning-1200: var(--scheme-yellow-1200);
  --function-warning-600-10: var(--scheme-yellow-600-10);
  --function-warning-600-30: var(--scheme-yellow-600-30);
  --function-warning-600-50: var(--scheme-yellow-600-50);
  /* danger */
  --function-danger-100: var(--scheme-red-100);
  --function-danger-200: var(--scheme-red-200);
  --function-danger-300: var(--scheme-red-300);
  --function-danger-400: var(--scheme-red-400);
  --function-danger-500: var(--scheme-red-500);
  --function-danger-600: var(--scheme-red-600);
  --function-danger-700: var(--scheme-red-700);
  --function-danger-800: var(--scheme-red-800);
  --function-danger-900: var(--scheme-red-900);
  --function-danger-1000: var(--scheme-red-1000);
  --function-danger-1100: var(--scheme-red-1100);
  --function-danger-1200: var(--scheme-red-1200);
  --function-danger-600-10: var(--scheme-red-600-10);
  --function-danger-600-30: var(--scheme-red-600-30);
  --function-danger-600-50: var(--scheme-red-600-50);
  /* success */
  --function-success-100: var(--scheme-green-100);
  --function-success-200: var(--scheme-green-200);
  --function-success-300: var(--scheme-green-300);
  --function-success-400: var(--scheme-green-400);
  --function-success-500: var(--scheme-green-500);
  --function-success-600: var(--scheme-green-600);
  --function-success-700: var(--scheme-green-700);
  --function-success-800: var(--scheme-green-800);
  --function-success-900: var(--scheme-green-900);
  --function-success-1000: var(--scheme-green-1000);
  --function-success-1100: var(--scheme-green-1100);
  --function-success-1200: var(--scheme-green-1200);
  --function-success-600-10: var(--scheme-green-600-10);
  --function-success-600-30: var(--scheme-green-600-30);
  --function-success-600-50: var(--scheme-green-600-50);
}

/* brand */
[data-brand=custom] {
  --function-brand-100: var(--scheme-brand-100);
  --function-brand-200: var(--scheme-brand-200);
  --function-brand-300: var(--scheme-brand-300);
  --function-brand-400: var(--scheme-brand-400);
  --function-brand-500: var(--scheme-brand-500);
  --function-brand-600: var(--scheme-brand-600);
  --function-brand-700: var(--scheme-brand-700);
  --function-brand-800: var(--scheme-brand-800);
  --function-brand-900: var(--scheme-brand-900);
  --function-brand-1000: var(--scheme-brand-1000);
  --function-brand-1100: var(--scheme-brand-1100);
  --function-brand-1200: var(--scheme-brand-1200);
  --function-brand-600-10: var(--scheme-brand-600-10);
  --function-brand-600-30: var(--scheme-brand-600-30);
  --function-brand-600-50: var(--scheme-brand-600-50);
}

[data-brand=red] {
  --function-brand-100: var(--scheme-red-100);
  --function-brand-200: var(--scheme-red-200);
  --function-brand-300: var(--scheme-red-300);
  --function-brand-400: var(--scheme-red-400);
  --function-brand-500: var(--scheme-red-500);
  --function-brand-600: var(--scheme-red-600);
  --function-brand-700: var(--scheme-red-700);
  --function-brand-800: var(--scheme-red-800);
  --function-brand-900: var(--scheme-red-900);
  --function-brand-1000: var(--scheme-red-1000);
  --function-brand-1100: var(--scheme-red-1100);
  --function-brand-1200: var(--scheme-red-1200);
  --function-brand-600-10: var(--scheme-red-600-10);
  --function-brand-600-30: var(--scheme-red-600-30);
  --function-brand-600-50: var(--scheme-red-600-50);
}

[data-brand=orange] {
  --function-brand-100: var(--scheme-orange-100);
  --function-brand-200: var(--scheme-orange-200);
  --function-brand-300: var(--scheme-orange-300);
  --function-brand-400: var(--scheme-orange-400);
  --function-brand-500: var(--scheme-orange-500);
  --function-brand-600: var(--scheme-orange-600);
  --function-brand-700: var(--scheme-orange-700);
  --function-brand-800: var(--scheme-orange-800);
  --function-brand-900: var(--scheme-orange-900);
  --function-brand-1000: var(--scheme-orange-1000);
  --function-brand-1100: var(--scheme-orange-1100);
  --function-brand-1200: var(--scheme-orange-1200);
  --function-brand-600-10: var(--scheme-orange-600-10);
  --function-brand-600-30: var(--scheme-orange-600-30);
  --function-brand-600-50: var(--scheme-orange-600-50);
}

[data-brand=yellow] {
  --function-brand-100: var(--scheme-yellow-100);
  --function-brand-200: var(--scheme-yellow-200);
  --function-brand-300: var(--scheme-yellow-300);
  --function-brand-400: var(--scheme-yellow-400);
  --function-brand-500: var(--scheme-yellow-500);
  --function-brand-600: var(--scheme-yellow-600);
  --function-brand-700: var(--scheme-yellow-700);
  --function-brand-800: var(--scheme-yellow-800);
  --function-brand-900: var(--scheme-yellow-900);
  --function-brand-1000: var(--scheme-yellow-1000);
  --function-brand-1100: var(--scheme-yellow-1100);
  --function-brand-1200: var(--scheme-yellow-1200);
  --function-brand-600-10: var(--scheme-yellow-600-10);
  --function-brand-600-30: var(--scheme-yellow-600-30);
  --function-brand-600-50: var(--scheme-yellow-600-50);
}

[data-brand=moss] {
  --function-brand-100: var(--scheme-moss-100);
  --function-brand-200: var(--scheme-moss-200);
  --function-brand-300: var(--scheme-moss-300);
  --function-brand-400: var(--scheme-moss-400);
  --function-brand-500: var(--scheme-moss-500);
  --function-brand-600: var(--scheme-moss-600);
  --function-brand-700: var(--scheme-moss-700);
  --function-brand-800: var(--scheme-moss-800);
  --function-brand-900: var(--scheme-moss-900);
  --function-brand-1000: var(--scheme-moss-1000);
  --function-brand-1100: var(--scheme-moss-1100);
  --function-brand-1200: var(--scheme-moss-1200);
  --function-brand-600-10: var(--scheme-moss-600-10);
  --function-brand-600-30: var(--scheme-moss-600-30);
  --function-brand-600-50: var(--scheme-moss-600-50);
}

[data-brand=green] {
  --function-brand-100: var(--scheme-green-100);
  --function-brand-200: var(--scheme-green-200);
  --function-brand-300: var(--scheme-green-300);
  --function-brand-400: var(--scheme-green-400);
  --function-brand-500: var(--scheme-green-500);
  --function-brand-600: var(--scheme-green-600);
  --function-brand-700: var(--scheme-green-700);
  --function-brand-800: var(--scheme-green-800);
  --function-brand-900: var(--scheme-green-900);
  --function-brand-1000: var(--scheme-green-1000);
  --function-brand-1100: var(--scheme-green-1100);
  --function-brand-1200: var(--scheme-green-1200);
  --function-brand-600-10: var(--scheme-green-600-10);
  --function-brand-600-30: var(--scheme-green-600-30);
  --function-brand-600-50: var(--scheme-green-600-50);
}

[data-brand=emerald] {
  --function-brand-100: var(--scheme-emerald-100);
  --function-brand-200: var(--scheme-emerald-200);
  --function-brand-300: var(--scheme-emerald-300);
  --function-brand-400: var(--scheme-emerald-400);
  --function-brand-500: var(--scheme-emerald-500);
  --function-brand-600: var(--scheme-emerald-600);
  --function-brand-700: var(--scheme-emerald-700);
  --function-brand-800: var(--scheme-emerald-800);
  --function-brand-900: var(--scheme-emerald-900);
  --function-brand-1000: var(--scheme-emerald-1000);
  --function-brand-1100: var(--scheme-emerald-1100);
  --function-brand-1200: var(--scheme-emerald-1200);
  --function-brand-600-10: var(--scheme-emerald-600-10);
  --function-brand-600-30: var(--scheme-emerald-600-30);
  --function-brand-600-50: var(--scheme-emerald-600-50);
}

[data-brand=aqua] {
  --function-brand-100: var(--scheme-aqua-100);
  --function-brand-200: var(--scheme-aqua-200);
  --function-brand-300: var(--scheme-aqua-300);
  --function-brand-400: var(--scheme-aqua-400);
  --function-brand-500: var(--scheme-aqua-500);
  --function-brand-600: var(--scheme-aqua-600);
  --function-brand-700: var(--scheme-aqua-700);
  --function-brand-800: var(--scheme-aqua-800);
  --function-brand-900: var(--scheme-aqua-900);
  --function-brand-1000: var(--scheme-aqua-1000);
  --function-brand-1100: var(--scheme-aqua-1100);
  --function-brand-1200: var(--scheme-aqua-1200);
  --function-brand-600-10: var(--scheme-aqua-600-10);
  --function-brand-600-30: var(--scheme-aqua-600-30);
  --function-brand-600-50: var(--scheme-aqua-600-50);
}

[data-brand=cyan] {
  --function-brand-100: var(--scheme-cyan-100);
  --function-brand-200: var(--scheme-cyan-200);
  --function-brand-300: var(--scheme-cyan-300);
  --function-brand-400: var(--scheme-cyan-400);
  --function-brand-500: var(--scheme-cyan-500);
  --function-brand-600: var(--scheme-cyan-600);
  --function-brand-700: var(--scheme-cyan-700);
  --function-brand-800: var(--scheme-cyan-800);
  --function-brand-900: var(--scheme-cyan-900);
  --function-brand-1000: var(--scheme-cyan-1000);
  --function-brand-1100: var(--scheme-cyan-1100);
  --function-brand-1200: var(--scheme-cyan-1200);
  --function-brand-600-10: var(--scheme-cyan-600-10);
  --function-brand-600-30: var(--scheme-cyan-600-30);
  --function-brand-600-50: var(--scheme-cyan-600-50);
}

[data-brand=blue] {
  --function-brand-100: var(--scheme-blue-100);
  --function-brand-200: var(--scheme-blue-200);
  --function-brand-300: var(--scheme-blue-300);
  --function-brand-400: var(--scheme-blue-400);
  --function-brand-500: var(--scheme-blue-500);
  --function-brand-600: var(--scheme-blue-600);
  --function-brand-700: var(--scheme-blue-700);
  --function-brand-800: var(--scheme-blue-800);
  --function-brand-900: var(--scheme-blue-900);
  --function-brand-1000: var(--scheme-blue-1000);
  --function-brand-1100: var(--scheme-blue-1100);
  --function-brand-1200: var(--scheme-blue-1200);
  --function-brand-600-10: var(--scheme-blue-600-10);
  --function-brand-600-30: var(--scheme-blue-600-30);
  --function-brand-600-50: var(--scheme-blue-600-50);
}

[data-brand=indigo] {
  --function-brand-100: var(--scheme-indigo-100);
  --function-brand-200: var(--scheme-indigo-200);
  --function-brand-300: var(--scheme-indigo-300);
  --function-brand-400: var(--scheme-indigo-400);
  --function-brand-500: var(--scheme-indigo-500);
  --function-brand-600: var(--scheme-indigo-600);
  --function-brand-700: var(--scheme-indigo-700);
  --function-brand-800: var(--scheme-indigo-800);
  --function-brand-900: var(--scheme-indigo-900);
  --function-brand-1000: var(--scheme-indigo-1000);
  --function-brand-1100: var(--scheme-indigo-1100);
  --function-brand-1200: var(--scheme-indigo-1200);
  --function-brand-600-10: var(--scheme-indigo-600-10);
  --function-brand-600-30: var(--scheme-indigo-600-30);
  --function-brand-600-50: var(--scheme-indigo-600-50);
}

[data-brand=violet] {
  --function-brand-100: var(--scheme-violet-100);
  --function-brand-200: var(--scheme-violet-200);
  --function-brand-300: var(--scheme-violet-300);
  --function-brand-400: var(--scheme-violet-400);
  --function-brand-500: var(--scheme-violet-500);
  --function-brand-600: var(--scheme-violet-600);
  --function-brand-700: var(--scheme-violet-700);
  --function-brand-800: var(--scheme-violet-800);
  --function-brand-900: var(--scheme-violet-900);
  --function-brand-1000: var(--scheme-violet-1000);
  --function-brand-1100: var(--scheme-violet-1100);
  --function-brand-1200: var(--scheme-violet-1200);
  --function-brand-600-10: var(--scheme-violet-600-10);
  --function-brand-600-30: var(--scheme-violet-600-30);
  --function-brand-600-50: var(--scheme-violet-600-50);
}

[data-brand=magenta] {
  --function-brand-100: var(--scheme-magenta-100);
  --function-brand-200: var(--scheme-magenta-200);
  --function-brand-300: var(--scheme-magenta-300);
  --function-brand-400: var(--scheme-magenta-400);
  --function-brand-500: var(--scheme-magenta-500);
  --function-brand-600: var(--scheme-magenta-600);
  --function-brand-700: var(--scheme-magenta-700);
  --function-brand-800: var(--scheme-magenta-800);
  --function-brand-900: var(--scheme-magenta-900);
  --function-brand-1000: var(--scheme-magenta-1000);
  --function-brand-1100: var(--scheme-magenta-1100);
  --function-brand-1200: var(--scheme-magenta-1200);
  --function-brand-600-10: var(--scheme-magenta-600-10);
  --function-brand-600-30: var(--scheme-magenta-600-30);
  --function-brand-600-50: var(--scheme-magenta-600-50);
}

[data-brand=pink] {
  --function-brand-100: var(--scheme-pink-100);
  --function-brand-200: var(--scheme-pink-200);
  --function-brand-300: var(--scheme-pink-300);
  --function-brand-400: var(--scheme-pink-400);
  --function-brand-500: var(--scheme-pink-500);
  --function-brand-600: var(--scheme-pink-600);
  --function-brand-700: var(--scheme-pink-700);
  --function-brand-800: var(--scheme-pink-800);
  --function-brand-900: var(--scheme-pink-900);
  --function-brand-1000: var(--scheme-pink-1000);
  --function-brand-1100: var(--scheme-pink-1100);
  --function-brand-1200: var(--scheme-pink-1200);
  --function-brand-600-10: var(--scheme-pink-600-10);
  --function-brand-600-30: var(--scheme-pink-600-30);
  --function-brand-600-50: var(--scheme-pink-600-50);
}

/* accent */
[data-accent=custom] {
  --function-accent-100: var(--scheme-accent-100);
  --function-accent-200: var(--scheme-accent-200);
  --function-accent-300: var(--scheme-accent-300);
  --function-accent-400: var(--scheme-accent-400);
  --function-accent-500: var(--scheme-accent-500);
  --function-accent-600: var(--scheme-accent-600);
  --function-accent-700: var(--scheme-accent-700);
  --function-accent-800: var(--scheme-accent-800);
  --function-accent-900: var(--scheme-accent-900);
  --function-accent-1000: var(--scheme-accent-1000);
  --function-accent-1100: var(--scheme-accent-1100);
  --function-accent-1200: var(--scheme-accent-1200);
  --function-accent-600-10: var(--scheme-accent-600-10);
  --function-accent-600-30: var(--scheme-accent-600-30);
  --function-accent-600-50: var(--scheme-accent-600-50);
}

[data-accent=red] {
  --function-accent-100: var(--scheme-red-100);
  --function-accent-200: var(--scheme-red-200);
  --function-accent-300: var(--scheme-red-300);
  --function-accent-400: var(--scheme-red-400);
  --function-accent-500: var(--scheme-red-500);
  --function-accent-600: var(--scheme-red-600);
  --function-accent-700: var(--scheme-red-700);
  --function-accent-800: var(--scheme-red-800);
  --function-accent-900: var(--scheme-red-900);
  --function-accent-1000: var(--scheme-red-1000);
  --function-accent-1100: var(--scheme-red-1100);
  --function-accent-1200: var(--scheme-red-1200);
  --function-accent-600-10: var(--scheme-red-600-10);
  --function-accent-600-30: var(--scheme-red-600-30);
  --function-accent-600-50: var(--scheme-red-600-50);
}

[data-accent=orange] {
  --function-accent-100: var(--scheme-orange-100);
  --function-accent-200: var(--scheme-orange-200);
  --function-accent-300: var(--scheme-orange-300);
  --function-accent-400: var(--scheme-orange-400);
  --function-accent-500: var(--scheme-orange-500);
  --function-accent-600: var(--scheme-orange-600);
  --function-accent-700: var(--scheme-orange-700);
  --function-accent-800: var(--scheme-orange-800);
  --function-accent-900: var(--scheme-orange-900);
  --function-accent-1000: var(--scheme-orange-1000);
  --function-accent-1100: var(--scheme-orange-1100);
  --function-accent-1200: var(--scheme-orange-1200);
  --function-accent-600-10: var(--scheme-orange-600-10);
  --function-accent-600-30: var(--scheme-orange-600-30);
  --function-accent-600-50: var(--scheme-orange-600-50);
}

[data-accent=yellow] {
  --function-accent-100: var(--scheme-yellow-100);
  --function-accent-200: var(--scheme-yellow-200);
  --function-accent-300: var(--scheme-yellow-300);
  --function-accent-400: var(--scheme-yellow-400);
  --function-accent-500: var(--scheme-yellow-500);
  --function-accent-600: var(--scheme-yellow-600);
  --function-accent-700: var(--scheme-yellow-700);
  --function-accent-800: var(--scheme-yellow-800);
  --function-accent-900: var(--scheme-yellow-900);
  --function-accent-1000: var(--scheme-yellow-1000);
  --function-accent-1100: var(--scheme-yellow-1100);
  --function-accent-1200: var(--scheme-yellow-1200);
  --function-accent-600-10: var(--scheme-yellow-600-10);
  --function-accent-600-30: var(--scheme-yellow-600-30);
  --function-accent-600-50: var(--scheme-yellow-600-50);
}

[data-accent=moss] {
  --function-accent-100: var(--scheme-moss-100);
  --function-accent-200: var(--scheme-moss-200);
  --function-accent-300: var(--scheme-moss-300);
  --function-accent-400: var(--scheme-moss-400);
  --function-accent-500: var(--scheme-moss-500);
  --function-accent-600: var(--scheme-moss-600);
  --function-accent-700: var(--scheme-moss-700);
  --function-accent-800: var(--scheme-moss-800);
  --function-accent-900: var(--scheme-moss-900);
  --function-accent-1000: var(--scheme-moss-1000);
  --function-accent-1100: var(--scheme-moss-1100);
  --function-accent-1200: var(--scheme-moss-1200);
  --function-accent-600-10: var(--scheme-moss-600-10);
  --function-accent-600-30: var(--scheme-moss-600-30);
  --function-accent-600-50: var(--scheme-moss-600-50);
}

[data-accent=green] {
  --function-accent-100: var(--scheme-green-100);
  --function-accent-200: var(--scheme-green-200);
  --function-accent-300: var(--scheme-green-300);
  --function-accent-400: var(--scheme-green-400);
  --function-accent-500: var(--scheme-green-500);
  --function-accent-600: var(--scheme-green-600);
  --function-accent-700: var(--scheme-green-700);
  --function-accent-800: var(--scheme-green-800);
  --function-accent-900: var(--scheme-green-900);
  --function-accent-1000: var(--scheme-green-1000);
  --function-accent-1100: var(--scheme-green-1100);
  --function-accent-1200: var(--scheme-green-1200);
  --function-accent-600-10: var(--scheme-green-600-10);
  --function-accent-600-30: var(--scheme-green-600-30);
  --function-accent-600-50: var(--scheme-green-600-50);
}

[data-accent=emerald] {
  --function-accent-100: var(--scheme-emerald-100);
  --function-accent-200: var(--scheme-emerald-200);
  --function-accent-300: var(--scheme-emerald-300);
  --function-accent-400: var(--scheme-emerald-400);
  --function-accent-500: var(--scheme-emerald-500);
  --function-accent-600: var(--scheme-emerald-600);
  --function-accent-700: var(--scheme-emerald-700);
  --function-accent-800: var(--scheme-emerald-800);
  --function-accent-900: var(--scheme-emerald-900);
  --function-accent-1000: var(--scheme-emerald-1000);
  --function-accent-1100: var(--scheme-emerald-1100);
  --function-accent-1200: var(--scheme-emerald-1200);
  --function-accent-600-10: var(--scheme-emerald-600-10);
  --function-accent-600-30: var(--scheme-emerald-600-30);
  --function-accent-600-50: var(--scheme-emerald-600-50);
}

[data-accent=aqua] {
  --function-accent-100: var(--scheme-aqua-100);
  --function-accent-200: var(--scheme-aqua-200);
  --function-accent-300: var(--scheme-aqua-300);
  --function-accent-400: var(--scheme-aqua-400);
  --function-accent-500: var(--scheme-aqua-500);
  --function-accent-600: var(--scheme-aqua-600);
  --function-accent-700: var(--scheme-aqua-700);
  --function-accent-800: var(--scheme-aqua-800);
  --function-accent-900: var(--scheme-aqua-900);
  --function-accent-1000: var(--scheme-aqua-1000);
  --function-accent-1100: var(--scheme-aqua-1100);
  --function-accent-1200: var(--scheme-aqua-1200);
  --function-accent-600-10: var(--scheme-aqua-600-10);
  --function-accent-600-30: var(--scheme-aqua-600-30);
  --function-accent-600-50: var(--scheme-aqua-600-50);
}

[data-accent=cyan] {
  --function-accent-100: var(--scheme-cyan-100);
  --function-accent-200: var(--scheme-cyan-200);
  --function-accent-300: var(--scheme-cyan-300);
  --function-accent-400: var(--scheme-cyan-400);
  --function-accent-500: var(--scheme-cyan-500);
  --function-accent-600: var(--scheme-cyan-600);
  --function-accent-700: var(--scheme-cyan-700);
  --function-accent-800: var(--scheme-cyan-800);
  --function-accent-900: var(--scheme-cyan-900);
  --function-accent-1000: var(--scheme-cyan-1000);
  --function-accent-1100: var(--scheme-cyan-1100);
  --function-accent-1200: var(--scheme-cyan-1200);
  --function-accent-600-10: var(--scheme-cyan-600-10);
  --function-accent-600-30: var(--scheme-cyan-600-30);
  --function-accent-600-50: var(--scheme-cyan-600-50);
}

[data-accent=blue] {
  --function-accent-100: var(--scheme-blue-100);
  --function-accent-200: var(--scheme-blue-200);
  --function-accent-300: var(--scheme-blue-300);
  --function-accent-400: var(--scheme-blue-400);
  --function-accent-500: var(--scheme-blue-500);
  --function-accent-600: var(--scheme-blue-600);
  --function-accent-700: var(--scheme-blue-700);
  --function-accent-800: var(--scheme-blue-800);
  --function-accent-900: var(--scheme-blue-900);
  --function-accent-1000: var(--scheme-blue-1000);
  --function-accent-1100: var(--scheme-blue-1100);
  --function-accent-1200: var(--scheme-blue-1200);
  --function-accent-600-10: var(--scheme-blue-600-10);
  --function-accent-600-30: var(--scheme-blue-600-30);
  --function-accent-600-50: var(--scheme-blue-600-50);
}

[data-accent=indigo] {
  --function-accent-100: var(--scheme-indigo-100);
  --function-accent-200: var(--scheme-indigo-200);
  --function-accent-300: var(--scheme-indigo-300);
  --function-accent-400: var(--scheme-indigo-400);
  --function-accent-500: var(--scheme-indigo-500);
  --function-accent-600: var(--scheme-indigo-600);
  --function-accent-700: var(--scheme-indigo-700);
  --function-accent-800: var(--scheme-indigo-800);
  --function-accent-900: var(--scheme-indigo-900);
  --function-accent-1000: var(--scheme-indigo-1000);
  --function-accent-1100: var(--scheme-indigo-1100);
  --function-accent-1200: var(--scheme-indigo-1200);
  --function-accent-600-10: var(--scheme-indigo-600-10);
  --function-accent-600-30: var(--scheme-indigo-600-30);
  --function-accent-600-50: var(--scheme-indigo-600-50);
}

[data-accent=violet] {
  --function-accent-100: var(--scheme-violet-100);
  --function-accent-200: var(--scheme-violet-200);
  --function-accent-300: var(--scheme-violet-300);
  --function-accent-400: var(--scheme-violet-400);
  --function-accent-500: var(--scheme-violet-500);
  --function-accent-600: var(--scheme-violet-600);
  --function-accent-700: var(--scheme-violet-700);
  --function-accent-800: var(--scheme-violet-800);
  --function-accent-900: var(--scheme-violet-900);
  --function-accent-1000: var(--scheme-violet-1000);
  --function-accent-1100: var(--scheme-violet-1100);
  --function-accent-1200: var(--scheme-violet-1200);
  --function-accent-600-10: var(--scheme-violet-600-10);
  --function-accent-600-30: var(--scheme-violet-600-30);
  --function-accent-600-50: var(--scheme-violet-600-50);
}

[data-accent=magenta] {
  --function-accent-100: var(--scheme-magenta-100);
  --function-accent-200: var(--scheme-magenta-200);
  --function-accent-300: var(--scheme-magenta-300);
  --function-accent-400: var(--scheme-magenta-400);
  --function-accent-500: var(--scheme-magenta-500);
  --function-accent-600: var(--scheme-magenta-600);
  --function-accent-700: var(--scheme-magenta-700);
  --function-accent-800: var(--scheme-magenta-800);
  --function-accent-900: var(--scheme-magenta-900);
  --function-accent-1000: var(--scheme-magenta-1000);
  --function-accent-1100: var(--scheme-magenta-1100);
  --function-accent-1200: var(--scheme-magenta-1200);
  --function-accent-600-10: var(--scheme-magenta-600-10);
  --function-accent-600-30: var(--scheme-magenta-600-30);
  --function-accent-600-50: var(--scheme-magenta-600-50);
}

[data-accent=pink] {
  --function-accent-100: var(--scheme-pink-100);
  --function-accent-200: var(--scheme-pink-200);
  --function-accent-300: var(--scheme-pink-300);
  --function-accent-400: var(--scheme-pink-400);
  --function-accent-500: var(--scheme-pink-500);
  --function-accent-600: var(--scheme-pink-600);
  --function-accent-700: var(--scheme-pink-700);
  --function-accent-800: var(--scheme-pink-800);
  --function-accent-900: var(--scheme-pink-900);
  --function-accent-1000: var(--scheme-pink-1000);
  --function-accent-1100: var(--scheme-pink-1100);
  --function-accent-1200: var(--scheme-pink-1200);
  --function-accent-600-10: var(--scheme-pink-600-10);
  --function-accent-600-30: var(--scheme-pink-600-30);
  --function-accent-600-50: var(--scheme-pink-600-50);
}

/* neutral */
[data-neutral=custom] {
  --function-neutral-100: var(--scheme-neutral-100);
  --function-neutral-200: var(--scheme-neutral-200);
  --function-neutral-300: var(--scheme-neutral-300);
  --function-neutral-400: var(--scheme-neutral-400);
  --function-neutral-500: var(--scheme-neutral-500);
  --function-neutral-600: var(--scheme-neutral-600);
  --function-neutral-700: var(--scheme-neutral-700);
  --function-neutral-800: var(--scheme-neutral-800);
  --function-neutral-900: var(--scheme-neutral-900);
  --function-neutral-1000: var(--scheme-neutral-1000);
  --function-neutral-1100: var(--scheme-neutral-1100);
  --function-neutral-1200: var(--scheme-neutral-1200);
  --function-neutral-600-10: var(--scheme-neutral-600-10);
  --function-neutral-600-30: var(--scheme-neutral-600-30);
  --function-neutral-600-50: var(--scheme-neutral-600-50);
}

[data-neutral=slate] {
  --function-neutral-100: var(--scheme-slate-100);
  --function-neutral-200: var(--scheme-slate-200);
  --function-neutral-300: var(--scheme-slate-300);
  --function-neutral-400: var(--scheme-slate-400);
  --function-neutral-500: var(--scheme-slate-500);
  --function-neutral-600: var(--scheme-slate-600);
  --function-neutral-700: var(--scheme-slate-700);
  --function-neutral-800: var(--scheme-slate-800);
  --function-neutral-900: var(--scheme-slate-900);
  --function-neutral-1000: var(--scheme-slate-1000);
  --function-neutral-1100: var(--scheme-slate-1100);
  --function-neutral-1200: var(--scheme-slate-1200);
  --function-neutral-600-10: var(--scheme-slate-600-10);
  --function-neutral-600-30: var(--scheme-slate-600-30);
  --function-neutral-600-50: var(--scheme-slate-600-50);
}

[data-neutral=gray] {
  --function-neutral-100: var(--scheme-gray-100);
  --function-neutral-200: var(--scheme-gray-200);
  --function-neutral-300: var(--scheme-gray-300);
  --function-neutral-400: var(--scheme-gray-400);
  --function-neutral-500: var(--scheme-gray-500);
  --function-neutral-600: var(--scheme-gray-600);
  --function-neutral-700: var(--scheme-gray-700);
  --function-neutral-800: var(--scheme-gray-800);
  --function-neutral-900: var(--scheme-gray-900);
  --function-neutral-1000: var(--scheme-gray-1000);
  --function-neutral-1100: var(--scheme-gray-1100);
  --function-neutral-1200: var(--scheme-gray-1200);
  --function-neutral-600-10: var(--scheme-gray-600-10);
  --function-neutral-600-30: var(--scheme-gray-600-30);
  --function-neutral-600-50: var(--scheme-gray-600-50);
}

[data-neutral=sand] {
  --function-neutral-100: var(--scheme-sand-100);
  --function-neutral-200: var(--scheme-sand-200);
  --function-neutral-300: var(--scheme-sand-300);
  --function-neutral-400: var(--scheme-sand-400);
  --function-neutral-500: var(--scheme-sand-500);
  --function-neutral-600: var(--scheme-sand-600);
  --function-neutral-700: var(--scheme-sand-700);
  --function-neutral-800: var(--scheme-sand-800);
  --function-neutral-900: var(--scheme-sand-900);
  --function-neutral-1000: var(--scheme-sand-1000);
  --function-neutral-1100: var(--scheme-sand-1100);
  --function-neutral-1200: var(--scheme-sand-1200);
  --function-neutral-600-10: var(--scheme-sand-600-10);
  --function-neutral-600-30: var(--scheme-sand-600-30);
  --function-neutral-600-50: var(--scheme-sand-600-50);
}

:root {
  --static-space-0: 0;
  --static-space-1: 0.0625rem;
  --static-space-2: 0.125rem;
  --static-space-4: 0.25rem;
  --static-space-8: 0.5rem;
  --static-space-12: 0.75rem;
  --static-space-16: 1rem;
  --static-space-20: 1.25rem;
  --static-space-24: 1.5rem;
  --static-space-32: 2rem;
  --static-space-40: 2.5rem;
  --static-space-48: 3rem;
  --static-space-56: 3.5rem;
  --static-space-64: 4rem;
  --static-space-80: 5rem;
  --static-space-104: 6.5rem;
  --static-space-128: 8rem;
  --static-space-160: 10rem;
  --static-width-2400: 150rem;
  --static-width-1600: 100rem;
  --static-width-1440: 90rem;
  --static-width-1200: 75rem;
  --static-width-1024: 64rem;
  --static-width-880: 55rem;
  --static-width-768: 48rem;
  --static-width-560: 35rem;
  --static-width-400: 25rem;
  --static-width-320: 20rem;
  --static-height-560: 35rem;
  --static-height-480: 30rem;
  --static-height-400: 25rem;
  --static-height-360: 22.5rem;
  --static-height-320: 20rem;
  --static-height-280: 17.5rem;
  --static-height-240: 15rem;
  --static-height-220: 13.75rem;
  --static-height-160: 10rem;
  --responsive-width-xl: var(--static-width-1440);
  --responsive-width-l: var(--static-width-1200);
  --responsive-width-m: var(--static-width-1024);
  --responsive-width-s: var(--static-width-768);
  --responsive-width-xs: var(--static-width-400);
  --responsive-height-xl: var(--static-height-560);
  --responsive-height-l: var(--static-height-480);
  --responsive-height-m: var(--static-height-400);
  --responsive-height-s: var(--static-height-360);
  --responsive-height-xs: var(--static-height-280);
  --responsive-space-xl: var(--static-space-80);
  --responsive-space-l: var(--static-space-40);
  --responsive-space-m: var(--static-space-24);
  --responsive-space-s: var(--static-space-16);
  --responsive-space-xs: var(--static-space-12);
}

@media (max-width: 1024px) {
  :root {
    --responsive-width-xl: var(--static-width-1024);
    --responsive-width-l: var(--static-width-1024);
    --responsive-width-m: var(--static-width-880);
    --responsive-width-s: var(--static-width-768);
    --responsive-width-xs: var(--static-width-320);
    --responsive-height-xl: var(--static-height-480);
    --responsive-height-l: var(--static-height-400);
    --responsive-height-m: var(--static-height-360);
    --responsive-height-s: var(--static-height-280);
    --responsive-height-xs: var(--static-height-240);
    --responsive-space-xl: var(--static-space-64);
    --responsive-space-l: var(--static-space-24);
    --responsive-space-m: var(--static-space-16);
    --responsive-space-s: var(--static-space-12);
    --responsive-space-xs: var(--static-space-8);
  }
}
@media (max-width: 768px) {
  :root {
    --responsive-width-xl: var(--static-width-1024);
    --responsive-width-l: var(--static-width-1024);
    --responsive-width-m: var(--static-width-880);
    --responsive-width-s: var(--static-width-768);
    --responsive-width-xs: var(--static-width-320);
    --responsive-height-xl: var(--static-height-320);
    --responsive-height-l: var(--static-height-280);
    --responsive-height-m: var(--static-height-240);
    --responsive-height-s: var(--static-height-220);
    --responsive-height-xs: var(--static-height-160);
    --responsive-space-xl: var(--static-space-40);
    --responsive-space-l: var(--static-space-16);
    --responsive-space-m: var(--static-space-12);
    --responsive-space-s: var(--static-space-8);
    --responsive-space-xs: var(--static-space-4);
  }
}
[data-scaling="110"] {
  --static-space-1: calc(0.0625rem * 1.1);
  --static-space-2: calc(0.125rem * 1.1);
  --static-space-4: calc(0.25rem * 1.1);
  --static-space-8: calc(0.5rem * 1.1);
  --static-space-12: calc(0.75rem * 1.1);
  --static-space-16: calc(1rem * 1.1);
  --static-space-20: calc(1.25rem * 1.1);
  --static-space-24: calc(1.5rem * 1.1);
  --static-space-32: calc(2rem * 1.1);
  --static-space-40: calc(2.5rem * 1.1);
  --static-space-48: calc(3rem * 1.1);
  --static-space-56: calc(3.5rem * 1.1);
  --static-space-64: calc(4rem * 1.1);
  --static-space-80: calc(5rem * 1.1);
  --static-space-104: calc(6.5rem * 1.1);
  --static-space-128: calc(8rem * 1.1);
  --static-space-160: calc(10rem * 1.1);
  --static-width-2400: calc(150rem * 1.1);
  --static-width-1600: calc(100rem * 1.1);
  --static-width-1440: calc(90rem * 1.1);
  --static-width-1200: calc(75rem * 1.1);
  --static-width-1024: calc(64rem * 1.1);
  --static-width-880: calc(55rem * 1.1);
  --static-width-768: calc(48rem * 1.1);
  --static-width-560: calc(35rem * 1.1);
  --static-width-400: calc(25rem * 1.1);
  --static-width-320: calc(20rem * 1.1);
  --static-height-560: calc(35rem * 1.1);
  --static-height-480: calc(30rem * 1.1);
  --static-height-400: calc(25rem * 1.1);
  --static-height-360: calc(22.5rem * 1.1);
  --static-height-320: calc(20rem * 1.1);
  --static-height-280: calc(17.5rem * 1.1);
  --static-height-240: calc(15rem * 1.1);
  --static-height-220: calc(13.75rem * 1.1);
  --static-height-160: calc(10rem * 1.1);
}

[data-scaling="105"] {
  --static-space-1: calc(0.0625rem * 1.05);
  --static-space-2: calc(0.125rem * 1.05);
  --static-space-4: calc(0.25rem * 1.05);
  --static-space-8: calc(0.5rem * 1.05);
  --static-space-12: calc(0.75rem * 1.05);
  --static-space-16: calc(1rem * 1.05);
  --static-space-20: calc(1.25rem * 1.05);
  --static-space-24: calc(1.5rem * 1.05);
  --static-space-32: calc(2rem * 1.05);
  --static-space-40: calc(2.5rem * 1.05);
  --static-space-48: calc(3rem * 1.05);
  --static-space-56: calc(3.5rem * 1.05);
  --static-space-64: calc(4rem * 1.05);
  --static-space-80: calc(5rem * 1.05);
  --static-space-104: calc(6.5rem * 1.05);
  --static-space-128: calc(8rem * 1.05);
  --static-space-160: calc(10rem * 1.05);
  --static-width-2400: calc(150rem * 1.05);
  --static-width-1600: calc(100rem * 1.05);
  --static-width-1440: calc(90rem * 1.05);
  --static-width-1200: calc(75rem * 1.05);
  --static-width-1024: calc(64rem * 1.05);
  --static-width-880: calc(55rem * 1.05);
  --static-width-768: calc(48rem * 1.05);
  --static-width-560: calc(35rem * 1.05);
  --static-width-400: calc(25rem * 1.05);
  --static-width-320: calc(20rem * 1.05);
  --static-height-560: calc(35rem * 1.05);
  --static-height-480: calc(30rem * 1.05);
  --static-height-400: calc(25rem * 1.05);
  --static-height-360: calc(22.5rem * 1.05);
  --static-height-320: calc(20rem * 1.05);
  --static-height-280: calc(17.5rem * 1.05);
  --static-height-240: calc(15rem * 1.05);
  --static-height-220: calc(13.75rem * 1.05);
  --static-height-160: calc(10rem * 1.05);
}

[data-scaling="95"] {
  --static-space-1: calc(0.0625rem * 0.95);
  --static-space-2: calc(0.125rem * 0.95);
  --static-space-4: calc(0.25rem * 0.95);
  --static-space-8: calc(0.5rem * 0.95);
  --static-space-12: calc(0.75rem * 0.95);
  --static-space-16: calc(1rem * 0.95);
  --static-space-20: calc(1.25rem * 0.95);
  --static-space-24: calc(1.5rem * 0.95);
  --static-space-32: calc(2rem * 0.95);
  --static-space-40: calc(2.5rem * 0.95);
  --static-space-48: calc(3rem * 0.95);
  --static-space-56: calc(3.5rem * 0.95);
  --static-space-64: calc(4rem * 0.95);
  --static-space-80: calc(5rem * 0.95);
  --static-space-104: calc(6.5rem * 0.95);
  --static-space-128: calc(8rem * 0.95);
  --static-space-160: calc(10rem * 0.95);
  --static-width-2400: calc(150rem * 0.95);
  --static-width-1600: calc(100rem * 0.95);
  --static-width-1440: calc(90rem * 0.95);
  --static-width-1200: calc(75rem * 0.95);
  --static-width-1024: calc(64rem * 0.95);
  --static-width-880: calc(55rem * 0.95);
  --static-width-768: calc(48rem * 0.95);
  --static-width-560: calc(35rem * 0.95);
  --static-width-400: calc(25rem * 0.95);
  --static-width-320: calc(20rem * 0.95);
  --static-height-560: calc(35rem * 0.95);
  --static-height-480: calc(30rem * 0.95);
  --static-height-400: calc(25rem * 0.95);
  --static-height-360: calc(22.5rem * 0.95);
  --static-height-320: calc(20rem * 0.95);
  --static-height-280: calc(17.5rem * 0.95);
  --static-height-240: calc(15rem * 0.95);
  --static-height-220: calc(13.75rem * 0.95);
  --static-height-160: calc(10rem * 0.95);
}

[data-scaling="90"] {
  --static-space-1: calc(0.0625rem * 0.9);
  --static-space-2: calc(0.125rem * 0.9);
  --static-space-4: calc(0.25rem * 0.9);
  --static-space-8: calc(0.5rem * 0.9);
  --static-space-12: calc(0.75rem * 0.9);
  --static-space-16: calc(1rem * 0.9);
  --static-space-20: calc(1.25rem * 0.9);
  --static-space-24: calc(1.5rem * 0.9);
  --static-space-32: calc(2rem * 0.9);
  --static-space-40: calc(2.5rem * 0.9);
  --static-space-48: calc(3rem * 0.9);
  --static-space-56: calc(3.5rem * 0.9);
  --static-space-64: calc(4rem * 0.9);
  --static-space-80: calc(5rem * 0.9);
  --static-space-104: calc(6.5rem * 0.9);
  --static-space-128: calc(8rem * 0.9);
  --static-space-160: calc(10rem * 0.9);
  --static-width-2400: calc(150rem * 0.9);
  --static-width-1600: calc(100rem * 0.9);
  --static-width-1440: calc(90rem * 0.9);
  --static-width-1200: calc(75rem * 0.9);
  --static-width-1024: calc(64rem * 0.9);
  --static-width-880: calc(55rem * 0.9);
  --static-width-768: calc(48rem * 0.9);
  --static-width-560: calc(35rem * 0.9);
  --static-width-400: calc(25rem * 0.9);
  --static-width-320: calc(20rem * 0.9);
  --static-height-560: calc(35rem * 0.9);
  --static-height-480: calc(30rem * 0.9);
  --static-height-400: calc(25rem * 0.9);
  --static-height-360: calc(22.5rem * 0.9);
  --static-height-320: calc(20rem * 0.9);
  --static-height-280: calc(17.5rem * 0.9);
  --static-height-240: calc(15rem * 0.9);
  --static-height-220: calc(13.75rem * 0.9);
  --static-height-160: calc(10rem * 0.9);
}

[data-border=playful] {
  --radius-xs: 0.25rem;
  --radius-xs-nest-4: 0.375rem;
  --radius-xs-nest-8: 0.5rem;
  --radius-s: 0.5rem;
  --radius-s-nest-4: 0.75rem;
  --radius-s-nest-8: 1rem;
  --radius-m: 0.75rem;
  --radius-m-nest-4: 1rem;
  --radius-m-nest-8: 1.25rem;
  --radius-l: 1rem;
  --radius-l-nest-4: 1.25rem;
  --radius-l-nest-8: 1.75rem;
  --radius-xl: 1.25rem;
  --radius-xl-nest-4: 1.5rem;
  --radius-xl-nest-8: 1.875rem;
  --radius-full: 999rem;
}

[data-border=conservative] {
  --radius-xs: 0.125rem;
  --radius-xs-nest-4: 0.25rem;
  --radius-xs-nest-8: 0.375rem;
  --radius-s: 0.25rem;
  --radius-s-nest-4: 0.375rem;
  --radius-s-nest-8: 0.5rem;
  --radius-m: 0.375rem;
  --radius-m-nest-4: 0.5rem;
  --radius-m-nest-8: 0.625rem;
  --radius-l: 0.625rem;
  --radius-l-nest-4: 0.875rem;
  --radius-l-nest-8: 1.125rem;
  --radius-xl: 0.75rem;
  --radius-xl-nest-4: 1rem;
  --radius-xl-nest-8: 1.25rem;
  --radius-full: 999rem;
}

[data-border=rounded] {
  --radius-xs: 1rem;
  --radius-xs-nest-4: 1.25rem;
  --radius-xs-nest-8: 1.5rem;
  --radius-s: 1.25rem;
  --radius-s-nest-4: 1.5rem;
  --radius-s-nest-8: 2rem;
  --radius-m: 1.25rem;
  --radius-m-nest-4: 1.5rem;
  --radius-m-nest-8: 1.875rem;
  --radius-l: 1.75rem;
  --radius-l-nest-4: 2rem;
  --radius-l-nest-8: 2.5rem;
  --radius-xl: 2rem;
  --radius-xl-nest-4: 2.25rem;
  --radius-xl-nest-8: 2.75rem;
  --radius-full: 999rem;
}

:root {
  --shadow-xs: 0px 0px 1px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-s: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 1px 4px rgba(0, 0, 0, 0.08), 0px 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-m: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.08), 0px 8px 8px rgba(0, 0, 0, 0.08);
  --shadow-l: 0px 2px 4px rgba(0, 0, 0, 0.12), 0px 8px 12px rgba(0, 0, 0, 0.08), 0px 8px 16px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0px 4px 4px rgba(0, 0, 0, 0.12), 0px 8px 12px rgba(0, 0, 0, 0.08), 0px 24px 24px rgba(0, 0, 0, 0.08);
}

:root {
  /* FONT FAMILY */
  --font-family-body: var(--font-primary);
  --font-family-heading: var(--font-secondary);
  --font-family-label: var(--font-tertiary);
  --font-family-code: var(--font-code);
  --font-size-heading-multiplier: 1;
  --font-size-body-multiplier: 1;
  --font-size-label-multiplier: 1;
  --line-height-heading-multiplier: 1;
  --line-height-body-multiplier: 1;
  --line-height-label-multiplier: 1;
  /* FONT SCALING */
  --font-scaling-desktop: 16px;
  --font-scaling-tablet: 15px;
  --font-scaling-mobile: 14px;
  /* FONT WEIGHT */
  --font-weight-thin: 100;
  --font-weight-extraLight: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semiBold: 600;
  --font-weight-bold: 700;
  --font-weight-extraBold: 800;
  --font-weight-10: var(--font-weight-light);
  --font-weight-20: var(--font-weight-normal);
  --font-weight-30: var(--font-weight-bold);
  --font-weight-40: var(--font-weight-extraBold);
  /* FONT SIZE */
  --font-size-display-xl: 5rem;
  --font-size-display-l: 4rem;
  --font-size-display-m: 3rem;
  --font-size-display-s: 2.5rem;
  --font-size-display-xs: 2rem;
  --font-size-heading-xl: 1.5rem;
  --font-size-heading-l: 1.33rem;
  --font-size-heading-m: 1.25rem;
  --font-size-heading-s: 1.125rem;
  --font-size-heading-xs: 1rem;
  --font-size-body-xl: 1.25rem;
  --font-size-body-l: 1.125rem;
  --font-size-body-m: 1rem;
  --font-size-body-s: 0.875rem;
  --font-size-body-xs: 0.75rem;
  --font-size-label-l: 1rem;
  --font-size-label-m: 0.925rem;
  --font-size-label-s: 0.825rem;
  /* LINE HEIGHT */
  --line-height-display-xl: 5rem;
  --line-height-display-l: 4.25rem;
  --line-height-display-m: 3.25rem;
  --line-height-display-s: 3rem;
  --line-height-display-xs: 2.5rem;
  --line-height-heading-xl: 2rem;
  --line-height-heading-l: 1.75rem;
  --line-height-heading-m: 1.5rem;
  --line-height-heading-s: 1.5rem;
  --line-height-heading-xs: 1.25rem;
  --line-height-body-xl: 1.75rem;
  --line-height-body-l: 1.5rem;
  --line-height-body-m: 1.5rem;
  --line-height-body-s: 1.125rem;
  --line-height-body-xs: 1rem;
  --line-height-label-l: 1.25rem;
  --line-height-label-m: 1.25rem;
  --line-height-label-s: 1rem;
}

@media (max-width: 1024px) {
  :root {
    /* FONT SIZE */
    --font-size-display-xl: 3.5rem;
    --font-size-display-l: 3.25rem;
    --font-size-display-m: 2.75rem;
    --font-size-display-s: 2.25rem;
    --font-size-display-xs: 1.75rem;
    --font-size-heading-xl: 1.33rem;
    --font-size-heading-l: 1.25rem;
    --font-size-heading-m: 1.125rem;
    /* LINE HEIGHT */
    --line-height-display-xl: 3.75rem;
    --line-height-display-l: 3.5rem;
    --line-height-display-m: 3rem;
    --line-height-display-s: 2.5rem;
    --line-height-display-xs: 2rem;
    --line-height-heading-xl: 1.75rem;
    --line-height-heading-l: 1.5rem;
    --line-height-heading-m: 1.25rem;
  }
}
@media (max-width: 768px) {
  :root {
    /* FONT SIZE */
    --font-size-display-xl: 2.75rem;
    --font-size-display-l: 2.5rem;
    --font-size-display-m: 2.25rem;
    --font-size-display-s: 2rem;
    /* LINE HEIGHT */
    --line-height-display-xl: 3rem;
    --line-height-display-l: 3rem;
    --line-height-display-m: 2.5rem;
    --line-height-display-s: 2.5rem;
  }
}
:root {
  --solid-inset-distance: 0;
  --solid-inset-size: 0;
  --solid-border-width: 0;
  --backdrop-filter: none;
  --surface-border: var(--static-transparent);
  --surface-background: var(--neutral-background-medium);
}

[data-solid-style=plastic] {
  --solid-inset-distance: -1rem;
  --solid-inset-size: 1rem;
  --solid-border-width: 1px;
}

[data-transition=all], [data-transition=micro] {
  --transition-eased: ease-in-out;
  --transition-property-all: all;
  --transition-duration-micro-short: 0.1s;
  --transition-duration-micro-medium: 0.2s;
  --transition-duration-micro-long: 0.4s;
  --transition-micro-short: var(--transition-property-all) var(--transition-duration-micro-short) var(--transition-eased);
  --transition-micro-medium: var(--transition-property-all) var(--transition-duration-micro-medium) var(--transition-eased);
  --transition-micro-long: var(--transition-property-all) var(--transition-duration-micro-long) var(--transition-eased);
}

[data-transition=all], [data-transition=macro] {
  --transition-eased: ease-in-out;
  --transition-property-all: all;
  --transition-duration-macro-short: 0.15s;
  --transition-duration-macro-medium: 0.3s;
  --transition-duration-macro-long: 0.6s;
  --transition-macro-short: var(--transition-property-all) var(--transition-duration-macro-short) var(--transition-eased);
  --transition-macro-medium: var(--transition-property-all) var(--transition-duration-macro-medium) var(--transition-eased);
  --transition-macro-long: var(--transition-property-all) var(--transition-duration-macro-long) var(--transition-eased);
}

[data-surface=translucent] {
  --backdrop-filter: blur(1rem);
}

[data-surface=translucent][data-theme=light],
[data-surface=translucent] [data-theme=light] {
  --surface-background: var(--static-white-medium);
  --surface-border: var(--neutral-alpha-medium);
}

[data-surface=translucent][data-theme=dark],
[data-surface=translucent] [data-theme=dark] {
  --surface-background: var(--static-black-medium);
  --surface-border: var(--neutral-alpha-medium);
}

[data-surface=filled][data-theme=light],
[data-surface=filled] [data-theme=light] {
  --surface-background: var(--neutral-background-weak);
  --surface-border: var(--neutral-border-medium);
}

[data-surface=filled][data-theme=dark],
[data-surface=filled] [data-theme=dark] {
  --surface-background: var(--neutral-background-medium);
  --surface-border: var(--static-transparent);
}

[data-theme=light][data-solid=color],
[data-theme=light] [data-solid=color] {
  --brand-solid-strong: var(--function-brand-600);
  --brand-solid-medium: var(--function-brand-500);
  --brand-solid-weak: var(--function-brand-400);
  --brand-on-solid-strong: var(--static-white);
  --brand-on-solid-weak: var(--function-brand-1000);
  --solid-inset-color-brand: var(--brand-alpha-strong);
  --solid-inset-color-neutral: var(--static-transparent);
  --solid-inset-color-danger: var(--danger-alpha-strong);
}

[data-theme=dark][data-solid=color],
[data-theme=dark] [data-solid=color] {
  --brand-solid-strong: var(--function-brand-500);
  --brand-solid-medium: var(--function-brand-400);
  --brand-solid-weak: var(--function-brand-300);
  --brand-on-solid-strong: var(--static-white);
  --brand-on-solid-weak: var(--function-brand-900);
  --solid-inset-color-brand: var(--brand-alpha-strong);
  --solid-inset-color-neutral: var(--static-transparent);
  --solid-inset-color-danger: var(--danger-alpha-strong);
}

[data-theme=light][data-solid=contrast],
[data-theme=light] [data-solid=contrast] {
  --brand-solid-strong: var(--function-neutral-300);
  --brand-solid-medium: var(--static-black);
  --brand-solid-weak: var(--function-neutral-400);
  --brand-on-solid-strong: var(--static-white);
  --brand-on-solid-weak: var(--function-neutral-1000);
  --solid-border-color-brand: var(--neutral-alpha-strong);
  --solid-inset-color-brand: var(--static-transparent);
  --solid-inset-color-neutral: var(--static-transparent);
  --solid-inset-color-danger: var(--danger-alpha-strong);
}

[data-theme=dark][data-solid=contrast],
[data-theme=dark] [data-solid=contrast] {
  --brand-solid-strong: var(--function-neutral-1000);
  --brand-solid-medium: var(--static-white);
  --brand-solid-weak: var(--function-neutral-900);
  --brand-on-solid-strong: var(--static-black);
  --brand-on-solid-weak: var(--function-neutral-200);
  --solid-border-color-brand: var(--neutral-alpha-strong);
  --solid-inset-color-brand: var(--static-transparent);
  --solid-inset-color-neutral: var(--static-transparent);
  --solid-inset-color-danger: var(--danger-alpha-strong);
}

[data-theme=dark] {
  --icon: url("/trademark/icon-dark.svg");
  --type: url("/trademark/type-dark.svg");
  --page-background: var(--neutral-background-weak);
  --backdrop: var(--static-black-medium);
  --solid-border-color-brand: var(--brand-alpha-strong);
  --solid-border-color-neutral: var(--neutral-alpha-strong);
  --solid-border-color-danger: var(--danger-alpha-strong);
  /* code */
  --code-moss: var(--scheme-moss-800);
  --code-gray: var(--scheme-gray-800);
  --code-aqua: var(--scheme-aqua-800);
  --code-green: var(--scheme-green-800);
  --code-blue: var(--scheme-blue-800);
  --code-violet: var(--scheme-violet-800);
  --code-orange: var(--scheme-orange-800);
  /* brand */
  --brand-background-strong: var(--function-brand-300);
  --brand-background-medium: var(--function-brand-200);
  --brand-background-weak: var(--function-brand-100);
  --brand-on-background-strong: var(--static-white);
  --brand-on-background-medium: var(--function-brand-1000);
  --brand-on-background-weak: var(--function-brand-800);
  --brand-border-strong: var(--function-brand-400);
  --brand-border-medium: var(--function-brand-300);
  --brand-border-weak: var(--function-brand-200);
  --brand-alpha-strong: var(--function-brand-600-50);
  --brand-alpha-medium: var(--function-brand-600-30);
  --brand-alpha-weak: var(--function-brand-600-10);
  /* accent */
  --accent-background-strong: var(--function-accent-300);
  --accent-background-medium: var(--function-accent-200);
  --accent-background-weak: var(--function-accent-100);
  --accent-on-background-strong: var(--static-white);
  --accent-on-background-medium: var(--function-accent-1000);
  --accent-on-background-weak: var(--function-accent-800);
  --accent-solid-strong: var(--function-accent-500);
  --accent-solid-medium: var(--function-accent-400);
  --accent-solid-weak: var(--function-accent-300);
  --accent-on-solid-strong: var(--static-white);
  --accent-on-solid-weak: var(--function-accent-900);
  --accent-border-strong: var(--function-accent-400);
  --accent-border-medium: var(--function-accent-300);
  --accent-border-weak: var(--function-accent-200);
  --accent-alpha-strong: var(--function-accent-600-50);
  --accent-alpha-medium: var(--function-accent-600-30);
  --accent-alpha-weak: var(--function-accent-600-10);
  /* neutral */
  --neutral-background-strong: var(--function-neutral-300);
  --neutral-background-medium: var(--function-neutral-200);
  --neutral-background-weak: var(--function-neutral-100);
  --neutral-on-background-strong: var(--static-white);
  --neutral-on-background-medium: var(--function-neutral-1000);
  --neutral-on-background-weak: var(--function-neutral-800);
  --neutral-solid-strong: var(--function-neutral-500);
  --neutral-solid-medium: var(--function-neutral-400);
  --neutral-solid-weak: var(--function-neutral-300);
  --neutral-on-solid-strong: var(--static-white);
  --neutral-on-solid-weak: var(--function-neutral-900);
  --neutral-border-strong: var(--function-neutral-400);
  --neutral-border-medium: var(--function-neutral-300);
  --neutral-border-weak: var(--function-neutral-200);
  --neutral-alpha-strong: var(--function-neutral-600-50);
  --neutral-alpha-medium: var(--function-neutral-600-30);
  --neutral-alpha-weak: var(--function-neutral-600-10);
  /* info */
  --info-background-strong: var(--function-info-300);
  --info-background-medium: var(--function-info-200);
  --info-background-weak: var(--function-info-100);
  --info-on-background-strong: var(--static-white);
  --info-on-background-medium: var(--function-info-1000);
  --info-on-background-weak: var(--function-info-800);
  --info-solid-strong: var(--function-info-500);
  --info-solid-medium: var(--function-info-400);
  --info-solid-weak: var(--function-info-300);
  --info-on-solid-strong: var(--static-white);
  --info-on-solid-weak: var(--function-info-900);
  --info-border-strong: var(--function-info-400);
  --info-border-medium: var(--function-info-300);
  --info-border-weak: var(--function-info-200);
  --info-alpha-strong: var(--function-info-600-50);
  --info-alpha-medium: var(--function-info-600-30);
  --info-alpha-weak: var(--function-info-600-10);
  /* warning */
  --warning-background-strong: var(--function-warning-300);
  --warning-background-medium: var(--function-warning-200);
  --warning-background-weak: var(--function-warning-100);
  --warning-on-background-strong: var(--static-white);
  --warning-on-background-medium: var(--function-warning-1000);
  --warning-on-background-weak: var(--function-warning-800);
  --warning-solid-strong: var(--function-warning-500);
  --warning-solid-medium: var(--function-warning-400);
  --warning-solid-weak: var(--function-warning-300);
  --warning-on-solid-strong: var(--static-white);
  --warning-on-solid-weak: var(--function-warning-900);
  --warning-border-strong: var(--function-warning-400);
  --warning-border-medium: var(--function-warning-300);
  --warning-border-weak: var(--function-warning-200);
  --warning-alpha-strong: var(--function-warning-600-50);
  --warning-alpha-medium: var(--function-warning-600-30);
  --warning-alpha-weak: var(--function-warning-600-10);
  /* danger */
  --danger-background-strong: var(--function-danger-300);
  --danger-background-medium: var(--function-danger-200);
  --danger-background-weak: var(--function-danger-100);
  --danger-on-background-strong: var(--static-white);
  --danger-on-background-medium: var(--function-danger-1000);
  --danger-on-background-weak: var(--function-danger-800);
  --danger-solid-strong: var(--function-danger-500);
  --danger-solid-medium: var(--function-danger-400);
  --danger-solid-weak: var(--function-danger-300);
  --danger-on-solid-strong: var(--static-white);
  --danger-on-solid-weak: var(--function-danger-900);
  --danger-border-strong: var(--function-danger-400);
  --danger-border-medium: var(--function-danger-300);
  --danger-border-weak: var(--function-danger-200);
  --danger-alpha-strong: var(--function-danger-600-50);
  --danger-alpha-medium: var(--function-danger-600-30);
  --danger-alpha-weak: var(--function-danger-600-10);
  /* success */
  --success-background-strong: var(--function-success-300);
  --success-background-medium: var(--function-success-200);
  --success-background-weak: var(--function-success-100);
  --success-on-background-strong: var(--static-white);
  --success-on-background-medium: var(--function-success-1000);
  --success-on-background-weak: var(--function-success-800);
  --success-solid-strong: var(--function-success-500);
  --success-solid-medium: var(--function-success-400);
  --success-solid-weak: var(--function-success-300);
  --success-on-solid-strong: var(--static-white);
  --success-on-solid-weak: var(--function-success-900);
  --success-border-strong: var(--function-success-400);
  --success-border-medium: var(--function-success-300);
  --success-border-weak: var(--function-success-200);
  --success-alpha-strong: var(--function-success-600-50);
  --success-alpha-medium: var(--function-success-600-30);
  --success-alpha-weak: var(--function-success-600-10);
}

[data-theme=light] {
  --icon: url("/trademark/icon-light.svg");
  --type: url("/trademark/type-light.svg");
  --page-background: var(--neutral-background-weak);
  --backdrop: var(--static-white-medium);
  --solid-border-color-brand: var(--brand-alpha-strong);
  --solid-border-color-neutral: var(--neutral-alpha-strong);
  --solid-border-color-danger: var(--danger-alpha-strong);
  /* code */
  --code-moss: var(--scheme-moss-600);
  --code-gray: var(--scheme-gray-600);
  --code-aqua: var(--scheme-aqua-600);
  --code-green: var(--scheme-green-600);
  --code-blue: var(--scheme-blue-600);
  --code-violet: var(--scheme-violet-600);
  --code-orange: var(--scheme-orange-600);
  /* brand */
  --brand-background-strong: var(--function-brand-800);
  --brand-background-medium: var(--function-brand-1000);
  --brand-background-weak: var(--static-white);
  --brand-on-background-strong: var(--function-brand-100);
  --brand-on-background-medium: var(--function-brand-300);
  --brand-on-background-weak: var(--function-brand-500);
  --brand-border-strong: var(--function-brand-800);
  --brand-border-medium: var(--function-brand-900);
  --brand-border-weak: var(--function-brand-1000);
  --brand-alpha-strong: var(--function-brand-600-50);
  --brand-alpha-medium: var(--function-brand-600-30);
  --brand-alpha-weak: var(--function-brand-600-10);
  /* accent */
  --accent-background-strong: var(--function-accent-800);
  --accent-background-medium: var(--function-accent-1000);
  --accent-background-weak: var(--static-white);
  --accent-on-background-strong: var(--function-accent-100);
  --accent-on-background-medium: var(--function-accent-300);
  --accent-on-background-weak: var(--function-accent-500);
  --accent-solid-strong: var(--function-accent-600);
  --accent-solid-medium: var(--function-accent-500);
  --accent-solid-weak: var(--function-accent-400);
  --accent-on-solid-strong: var(--static-white);
  --accent-on-solid-weak: var(--function-accent-1000);
  --accent-border-strong: var(--function-accent-800);
  --accent-border-medium: var(--function-accent-900);
  --accent-border-weak: var(--function-accent-1000);
  --accent-alpha-strong: var(--function-accent-600-50);
  --accent-alpha-medium: var(--function-accent-600-30);
  --accent-alpha-weak: var(--function-accent-600-10);
  /* neutral */
  --neutral-background-strong: var(--function-neutral-800);
  --neutral-background-medium: var(--function-neutral-1000);
  --neutral-background-weak: var(--static-white);
  --neutral-on-background-strong: var(--function-neutral-100);
  --neutral-on-background-medium: var(--function-neutral-300);
  --neutral-on-background-weak: var(--function-neutral-500);
  --neutral-solid-strong: var(--function-neutral-600);
  --neutral-solid-medium: var(--function-neutral-500);
  --neutral-solid-weak: var(--function-neutral-400);
  --neutral-on-solid-strong: var(--static-white);
  --neutral-on-solid-weak: var(--function-neutral-1000);
  --neutral-border-strong: var(--function-neutral-800);
  --neutral-border-medium: var(--function-neutral-900);
  --neutral-border-weak: var(--function-neutral-1000);
  --neutral-alpha-strong: var(--function-neutral-600-50);
  --neutral-alpha-medium: var(--function-neutral-600-30);
  --neutral-alpha-weak: var(--function-neutral-600-10);
  /* info */
  --info-background-strong: var(--function-info-800);
  --info-background-medium: var(--function-info-1000);
  --info-background-weak: var(--static-white);
  --info-on-background-strong: var(--function-info-100);
  --info-on-background-medium: var(--function-info-300);
  --info-on-background-weak: var(--function-info-500);
  --info-solid-strong: var(--function-info-600);
  --info-solid-medium: var(--function-info-500);
  --info-solid-weak: var(--function-info-400);
  --info-on-solid-strong: var(--static-white);
  --info-on-solid-weak: var(--function-info-1000);
  --info-border-strong: var(--function-info-800);
  --info-border-medium: var(--function-info-900);
  --info-border-weak: var(--function-info-1000);
  --info-alpha-strong: var(--function-info-600-50);
  --info-alpha-medium: var(--function-info-600-30);
  --info-alpha-weak: var(--function-info-600-10);
  /* warning */
  --warning-background-strong: var(--function-warning-800);
  --warning-background-medium: var(--function-warning-1000);
  --warning-background-weak: var(--static-white);
  --warning-on-background-strong: var(--function-warning-100);
  --warning-on-background-medium: var(--function-warning-300);
  --warning-on-background-weak: var(--function-warning-500);
  --warning-solid-strong: var(--function-warning-600);
  --warning-solid-medium: var(--function-warning-500);
  --warning-solid-weak: var(--function-warning-400);
  --warning-on-solid-strong: var(--static-white);
  --warning-on-solid-weak: var(--function-warning-1000);
  --warning-border-strong: var(--function-warning-800);
  --warning-border-medium: var(--function-warning-900);
  --warning-border-weak: var(--function-warning-1000);
  --warning-alpha-strong: var(--function-warning-600-50);
  --warning-alpha-medium: var(--function-warning-600-30);
  --warning-alpha-weak: var(--function-warning-600-10);
  /* danger */
  --danger-background-strong: var(--function-danger-800);
  --danger-background-medium: var(--function-danger-1000);
  --danger-background-weak: var(--static-white);
  --danger-on-background-strong: var(--function-danger-100);
  --danger-on-background-medium: var(--function-danger-300);
  --danger-on-background-weak: var(--function-danger-500);
  --danger-solid-strong: var(--function-danger-600);
  --danger-solid-medium: var(--function-danger-500);
  --danger-solid-weak: var(--function-danger-400);
  --danger-on-solid-strong: var(--static-white);
  --danger-on-solid-weak: var(--function-danger-1000);
  --danger-border-strong: var(--function-danger-800);
  --danger-border-medium: var(--function-danger-900);
  --danger-border-weak: var(--function-danger-1000);
  --danger-alpha-strong: var(--function-danger-600-50);
  --danger-alpha-medium: var(--function-danger-600-30);
  --danger-alpha-weak: var(--function-danger-600-10);
  /* success */
  --success-background-strong: var(--function-success-800);
  --success-background-medium: var(--function-success-1000);
  --success-background-weak: var(--static-white);
  --success-on-background-strong: var(--function-success-100);
  --success-on-background-medium: var(--function-success-300);
  --success-on-background-weak: var(--function-success-500);
  --success-solid-strong: var(--function-success-600);
  --success-solid-medium: var(--function-success-500);
  --success-solid-weak: var(--function-success-400);
  --success-on-solid-strong: var(--static-white);
  --success-on-solid-weak: var(--function-success-1000);
  --success-border-strong: var(--function-success-800);
  --success-border-medium: var(--function-success-900);
  --success-border-weak: var(--function-success-1000);
  --success-alpha-strong: var(--function-success-600-50);
  --success-alpha-medium: var(--function-success-600-30);
  --success-alpha-weak: var(--function-success-600-10);
}