/* ===== Fonts ===== */

@font-face {
  font-family: YouthBase;
  src: url("../fonts/YouthBase-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: YouthBase;
  src: url("../fonts/YouthBase-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: YouthBase;
  src: url("../fonts/YouthBase-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: YouthHero;
  src: url("../fonts/YouthHero-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ===== Design tokens ===== */

:root {
  --animation-speed-fast: 0.25s;
  --animation-speed-medium: 0.35s;
  --animation-speed-slow: 0.45s;
  --animation-speed: 0.3s;
  --animation-timing-function: ease-out;
}

:root, :root[data-theme="light"] {
  --Battery-health-1: var(--color-mOrange-200);
  --Battery-health-2: var(--color-yellow-300);
  --Battery-health-3: var(--color-green-300);
  --Battery-health-4: var(--color-green-500);
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --Battery-health-1: var(--color-mOrange-300);
    --Battery-health-2: var(--color-yellow-500);
    --Battery-health-3: var(--color-green-400);
    --Battery-health-4: var(--color-green-600);
  }
}

:root {
  --color-white-rgb: 255,255,255;
  --color-black-rgb: 0,0,0;
  --color-white: rgb(var(--color-white-rgb));
  --color-black: rgb(var(--color-black-rgb));
  --color-neutral-1100-rgb: 16,16,20;
  --color-neutral-1000-rgb: 20,20,26;
  --color-neutral-900-rgb: 27,27,33;
  --color-neutral-800-rgb: 42,43,51;
  --color-neutral-700-rgb: 66,69,79;
  --color-neutral-600-rgb: 93,97,107;
  --color-neutral-500-rgb: 126,131,143;
  --color-neutral-400-rgb: 158,164,173;
  --color-neutral-300-rgb: 185,191,199;
  --color-neutral-200-rgb: 213,218,224;
  --color-neutral-100-rgb: 230,234,240;
  --color-neutral-050-rgb: 245,247,250;
  --color-neutral-1100: rgb(var(--color-neutral-1100-rgb));
  --color-neutral-1000: rgb(var(--color-neutral-1000-rgb));
  --color-neutral-900: rgb(var(--color-neutral-900-rgb));
  --color-neutral-800: rgb(var(--color-neutral-800-rgb));
  --color-neutral-700: rgb(var(--color-neutral-700-rgb));
  --color-neutral-600: rgb(var(--color-neutral-600-rgb));
  --color-neutral-500: rgb(var(--color-neutral-500-rgb));
  --color-neutral-400: rgb(var(--color-neutral-400-rgb));
  --color-neutral-300: rgb(var(--color-neutral-300-rgb));
  --color-neutral-200: rgb(var(--color-neutral-200-rgb));
  --color-neutral-100: rgb(var(--color-neutral-100-rgb));
  --color-neutral-050: rgb(var(--color-neutral-050-rgb));
  --color-mOrange-1100-rgb: 31,1,0;
  --color-mOrange-1000-rgb: 56,4,0;
  --color-mOrange-900-rgb: 89,9,0;
  --color-mOrange-800-rgb: 128,21,0;
  --color-mOrange-700-rgb: 173,35,0;
  --color-mOrange-600-rgb: 219,48,0;
  --color-mOrange-500-rgb: 250,60,0;
  --color-mOrange-400-rgb: 255,108,59;
  --color-mOrange-300-rgb: 255,143,102;
  --color-mOrange-200-rgb: 255,178,145;
  --color-mOrange-100-rgb: 255,212,191;
  --color-mOrange-050-rgb: 255,238,229;
  --color-mOrange-1100: rgb(var(--color-mOrange-1100-rgb));
  --color-mOrange-1000: rgb(var(--color-mOrange-1000-rgb));
  --color-mOrange-900: rgb(var(--color-mOrange-900-rgb));
  --color-mOrange-800: rgb(var(--color-mOrange-800-rgb));
  --color-mOrange-700: rgb(var(--color-mOrange-700-rgb));
  --color-mOrange-600: rgb(var(--color-mOrange-600-rgb));
  --color-mOrange-500: rgb(var(--color-mOrange-500-rgb));
  --color-mOrange-400: rgb(var(--color-mOrange-400-rgb));
  --color-mOrange-300: rgb(var(--color-mOrange-300-rgb));
  --color-mOrange-200: rgb(var(--color-mOrange-200-rgb));
  --color-mOrange-100: rgb(var(--color-mOrange-100-rgb));
  --color-mOrange-050: rgb(var(--color-mOrange-050-rgb));
  --color-mOrange-neutral-1100-rgb: 20,11,11;
  --color-mOrange-neutral-1000-rgb: 28,19,18;
  --color-mOrange-neutral-900-rgb: 43,31,29;
  --color-mOrange-neutral-800-rgb: 71,52,49;
  --color-mOrange-neutral-700-rgb: 102,78,71;
  --color-mOrange-neutral-600-rgb: 138,101,91;
  --color-mOrange-neutral-500-rgb: 161,127,117;
  --color-mOrange-neutral-400-rgb: 176,150,141;
  --color-mOrange-neutral-300-rgb: 196,177,171;
  --color-mOrange-neutral-200-rgb: 213,201,196;
  --color-mOrange-neutral-100-rgb: 230,222,218;
  --color-mOrange-neutral-050-rgb: 245,241,240;
  --color-mOrange-neutral-1100: rgb(var(--color-mOrange-neutral-1100-rgb));
  --color-mOrange-neutral-1000: rgb(var(--color-mOrange-neutral-1000-rgb));
  --color-mOrange-neutral-900: rgb(var(--color-mOrange-neutral-900-rgb));
  --color-mOrange-neutral-800: rgb(var(--color-mOrange-neutral-800-rgb));
  --color-mOrange-neutral-700: rgb(var(--color-mOrange-neutral-700-rgb));
  --color-mOrange-neutral-600: rgb(var(--color-mOrange-neutral-600-rgb));
  --color-mOrange-neutral-500: rgb(var(--color-mOrange-neutral-500-rgb));
  --color-mOrange-neutral-400: rgb(var(--color-mOrange-neutral-400-rgb));
  --color-mOrange-neutral-300: rgb(var(--color-mOrange-neutral-300-rgb));
  --color-mOrange-neutral-200: rgb(var(--color-mOrange-neutral-200-rgb));
  --color-mOrange-neutral-100: rgb(var(--color-mOrange-neutral-100-rgb));
  --color-mOrange-neutral-050: rgb(var(--color-mOrange-neutral-050-rgb));
  --color-purple-1100-rgb: 20,0,31;
  --color-purple-1000-rgb: 36,0,56;
  --color-purple-900-rgb: 53,0,81;
  --color-purple-800-rgb: 79,22,110;
  --color-purple-700-rgb: 104,41,138;
  --color-purple-600-rgb: 129,65,163;
  --color-purple-500-rgb: 151,92,184;
  --color-purple-400-rgb: 172,116,204;
  --color-purple-300-rgb: 202,141,235;
  --color-purple-200-rgb: 226,171,255;
  --color-purple-100-rgb: 233,197,252;
  --color-purple-050-rgb: 243,222,255;
  --color-purple-1100: rgb(var(--color-purple-1100-rgb));
  --color-purple-1000: rgb(var(--color-purple-1000-rgb));
  --color-purple-900: rgb(var(--color-purple-900-rgb));
  --color-purple-800: rgb(var(--color-purple-800-rgb));
  --color-purple-700: rgb(var(--color-purple-700-rgb));
  --color-purple-600: rgb(var(--color-purple-600-rgb));
  --color-purple-500: rgb(var(--color-purple-500-rgb));
  --color-purple-400: rgb(var(--color-purple-400-rgb));
  --color-purple-300: rgb(var(--color-purple-300-rgb));
  --color-purple-200: rgb(var(--color-purple-200-rgb));
  --color-purple-100: rgb(var(--color-purple-100-rgb));
  --color-purple-050: rgb(var(--color-purple-050-rgb));
  --color-purple-neutral-1100-rgb: 17,11,20;
  --color-purple-neutral-1000-rgb: 25,19,28;
  --color-purple-neutral-900-rgb: 39,30,43;
  --color-purple-neutral-800-rgb: 63,49,71;
  --color-purple-neutral-700-rgb: 91,71,102;
  --color-purple-neutral-600-rgb: 124,99,138;
  --color-purple-neutral-500-rgb: 147,122,161;
  --color-purple-neutral-400-rgb: 168,148,178;
  --color-purple-neutral-300-rgb: 186,172,194;
  --color-purple-neutral-200-rgb: 208,197,214;
  --color-purple-neutral-100-rgb: 231,225,235;
  --color-purple-neutral-050-rgb: 245,242,246;
  --color-purple-neutral-1100: rgb(var(--color-purple-neutral-1100-rgb));
  --color-purple-neutral-1000: rgb(var(--color-purple-neutral-1000-rgb));
  --color-purple-neutral-900: rgb(var(--color-purple-neutral-900-rgb));
  --color-purple-neutral-800: rgb(var(--color-purple-neutral-800-rgb));
  --color-purple-neutral-700: rgb(var(--color-purple-neutral-700-rgb));
  --color-purple-neutral-600: rgb(var(--color-purple-neutral-600-rgb));
  --color-purple-neutral-500: rgb(var(--color-purple-neutral-500-rgb));
  --color-purple-neutral-400: rgb(var(--color-purple-neutral-400-rgb));
  --color-purple-neutral-300: rgb(var(--color-purple-neutral-300-rgb));
  --color-purple-neutral-200: rgb(var(--color-purple-neutral-200-rgb));
  --color-purple-neutral-100: rgb(var(--color-purple-neutral-100-rgb));
  --color-purple-neutral-050: rgb(var(--color-purple-neutral-050-rgb));
  --color-blue-1100-rgb: 12,13,31;
  --color-blue-1000-rgb: 16,18,41;
  --color-blue-900-rgb: 24,28,61;
  --color-blue-800-rgb: 36,44,89;
  --color-blue-700-rgb: 52,65,117;
  --color-blue-600-rgb: 70,89,145;
  --color-blue-500-rgb: 97,119,176;
  --color-blue-400-rgb: 123,149,199;
  --color-blue-300-rgb: 155,184,232;
  --color-blue-200-rgb: 186,213,255;
  --color-blue-100-rgb: 212,229,255;
  --color-blue-050-rgb: 228,238,253;
  --color-blue-1100: rgb(var(--color-blue-1100-rgb));
  --color-blue-1000: rgb(var(--color-blue-1000-rgb));
  --color-blue-900: rgb(var(--color-blue-900-rgb));
  --color-blue-800: rgb(var(--color-blue-800-rgb));
  --color-blue-700: rgb(var(--color-blue-700-rgb));
  --color-blue-600: rgb(var(--color-blue-600-rgb));
  --color-blue-500: rgb(var(--color-blue-500-rgb));
  --color-blue-400: rgb(var(--color-blue-400-rgb));
  --color-blue-300: rgb(var(--color-blue-300-rgb));
  --color-blue-200: rgb(var(--color-blue-200-rgb));
  --color-blue-100: rgb(var(--color-blue-100-rgb));
  --color-blue-050: rgb(var(--color-blue-050-rgb));
  --color-blue-neutral-1100-rgb: 11,12,20;
  --color-blue-neutral-1000-rgb: 21,22,31;
  --color-blue-neutral-900-rgb: 31,32,43;
  --color-blue-neutral-800-rgb: 49,52,71;
  --color-blue-neutral-700-rgb: 71,78,102;
  --color-blue-neutral-600-rgb: 90,100,130;
  --color-blue-neutral-500-rgb: 116,128,158;
  --color-blue-neutral-400-rgb: 142,154,177;
  --color-blue-neutral-300-rgb: 167,177,194;
  --color-blue-neutral-200-rgb: 193,202,217;
  --color-blue-neutral-100-rgb: 221,226,235;
  --color-blue-neutral-050-rgb: 242,244,246;
  --color-blue-neutral-1100: rgb(var(--color-blue-neutral-1100-rgb));
  --color-blue-neutral-1000: rgb(var(--color-blue-neutral-1000-rgb));
  --color-blue-neutral-900: rgb(var(--color-blue-neutral-900-rgb));
  --color-blue-neutral-800: rgb(var(--color-blue-neutral-800-rgb));
  --color-blue-neutral-700: rgb(var(--color-blue-neutral-700-rgb));
  --color-blue-neutral-600: rgb(var(--color-blue-neutral-600-rgb));
  --color-blue-neutral-500: rgb(var(--color-blue-neutral-500-rgb));
  --color-blue-neutral-400: rgb(var(--color-blue-neutral-400-rgb));
  --color-blue-neutral-300: rgb(var(--color-blue-neutral-300-rgb));
  --color-blue-neutral-200: rgb(var(--color-blue-neutral-200-rgb));
  --color-blue-neutral-100: rgb(var(--color-blue-neutral-100-rgb));
  --color-blue-neutral-050: rgb(var(--color-blue-neutral-050-rgb));
  --color-green-1100-rgb: 8,26,16;
  --color-green-1000-rgb: 14,41,27;
  --color-green-900-rgb: 25,66,44;
  --color-green-800-rgb: 37,97,65;
  --color-green-700-rgb: 53,133,90;
  --color-green-600-rgb: 67,167,113;
  --color-green-500-rgb: 88,188,134;
  --color-green-400-rgb: 118,201,156;
  --color-green-300-rgb: 149,213,178;
  --color-green-200-rgb: 179,225,200;
  --color-green-100-rgb: 214,242,227;
  --color-green-050-rgb: 232,252,241;
  --color-green-1100: rgb(var(--color-green-1100-rgb));
  --color-green-1000: rgb(var(--color-green-1000-rgb));
  --color-green-900: rgb(var(--color-green-900-rgb));
  --color-green-800: rgb(var(--color-green-800-rgb));
  --color-green-700: rgb(var(--color-green-700-rgb));
  --color-green-600: rgb(var(--color-green-600-rgb));
  --color-green-500: rgb(var(--color-green-500-rgb));
  --color-green-400: rgb(var(--color-green-400-rgb));
  --color-green-300: rgb(var(--color-green-300-rgb));
  --color-green-200: rgb(var(--color-green-200-rgb));
  --color-green-100: rgb(var(--color-green-100-rgb));
  --color-green-050: rgb(var(--color-green-050-rgb));
  --color-yellow-1100-rgb: 26,11,1;
  --color-yellow-1000-rgb: 43,21,2;
  --color-yellow-900-rgb: 69,38,6;
  --color-yellow-800-rgb: 99,60,9;
  --color-yellow-700-rgb: 133,85,13;
  --color-yellow-600-rgb: 166,112,18;
  --color-yellow-500-rgb: 191,132,21;
  --color-yellow-400-rgb: 224,168,54;
  --color-yellow-300-rgb: 237,197,104;
  --color-yellow-200-rgb: 245,222,159;
  --color-yellow-100-rgb: 250,238,200;
  --color-yellow-050-rgb: 252,247,222;
  --color-yellow-1100: rgb(var(--color-yellow-1100-rgb));
  --color-yellow-1000: rgb(var(--color-yellow-1000-rgb));
  --color-yellow-900: rgb(var(--color-yellow-900-rgb));
  --color-yellow-800: rgb(var(--color-yellow-800-rgb));
  --color-yellow-700: rgb(var(--color-yellow-700-rgb));
  --color-yellow-600: rgb(var(--color-yellow-600-rgb));
  --color-yellow-500: rgb(var(--color-yellow-500-rgb));
  --color-yellow-400: rgb(var(--color-yellow-400-rgb));
  --color-yellow-300: rgb(var(--color-yellow-300-rgb));
  --color-yellow-200: rgb(var(--color-yellow-200-rgb));
  --color-yellow-100: rgb(var(--color-yellow-100-rgb));
  --color-yellow-050: rgb(var(--color-yellow-050-rgb));
  --color-shade-900: rgba(4,6,10,0.94);
  --color-shade-800: rgba(4,6,10,0.9);
  --color-shade-700: rgba(8,10,15,0.86);
  --color-shade-600: rgba(8,10,15,0.76);
  --color-shade-500: rgba(10,13,20,0.64);
  --color-shade-400: rgba(10,13,20,0.48);
  --color-shade-300: rgba(10,14,26,0.28);
  --color-shade-200: rgba(10,14,26,0.14);
  --color-shade-100: rgba(6,12,31,0.07);
  --color-shade-050: rgba(6,12,31,0.03);
  --color-shine-900: rgba(255,255,255,0.97);
  --color-shine-800: rgba(255,255,255,0.92);
  --color-shine-700: rgba(255,255,255,0.86);
  --color-shine-600: rgba(255,255,255,0.72);
  --color-shine-500: rgba(255,255,255,0.52);
  --color-shine-400: rgba(255,255,255,0.35);
  --color-shine-300: rgba(255,255,255,0.22);
  --color-shine-200: rgba(255,255,255,0.12);
  --color-shine-100: rgba(255,255,255,0.06);
  --color-shine-050: rgba(255,255,255,0.03);
}

:root {
  --color-KA-green-800-rgb: 29,75,0;
  --color-KA-green-400-rgb: 181,233,65;
  --color-KA-neutral-800-rgb: 51,50,46;
  --color-KA-neutral-700-rgb: 80,78,71;
  --color-KA-neutral-200-rgb: 244,242,239;
  --color-KA-green-800: rgb(var(--color-KA-green-800-rgb));
  --color-KA-green-400: rgb(var(--color-KA-green-400-rgb));
  --color-KA-neutral-800: rgb(var(--color-KA-neutral-800-rgb));
  --color-KA-neutral-700: rgb(var(--color-KA-neutral-700-rgb));
  --color-KA-neutral-200: rgb(var(--color-KA-neutral-200-rgb));
}

:root {
  --color-status-success: rgb(var(--color-status-success-rgb));
  --color-background-primary: rgb(var(--color-background-primary-rgb));
  --color-background-primary-hover: rgb(var(--color-background-primary-hover-rgb));
  --color-background-primary-active: rgb(var(--color-background-primary-active-rgb));
  --color-background-highlight: rgb(var(--color-background-highlight-rgb));
  --color-background-highlight-hover: rgb(var(--color-background-highlight-hover-rgb));
  --color-background-highlight-active: rgb(var(--color-background-highlight-active-rgb));
  --color-background-secondary: rgb(var(--color-background-secondary-rgb));
  --color-background-secondary-hover: rgb(var(--color-background-secondary-hover-rgb));
  --color-background-secondary-active: rgb(var(--color-background-secondary-active-rgb));
  --color-background-contrast: rgb(var(--color-background-contrast-rgb));
  --color-background-contrast-hover: rgb(var(--color-background-contrast-hover-rgb));
  --color-background-contrast-active: rgb(var(--color-background-contrast-active-rgb));
  --color-content-lead: rgb(var(--color-content-lead-rgb));
  --color-content-lead-hover: rgb(var(--color-content-lead-hover-rgb));
  --color-content-lead-active: rgb(var(--color-content-lead-active-rgb));
  --color-content-secondary: rgb(var(--color-content-secondary-rgb));
  --color-content-secondary-hover: rgb(var(--color-content-secondary-hover-rgb));
  --color-content-secondary-active: rgb(var(--color-content-secondary-hover-rgb));
  --color-content-silent: rgb(var(--color-content-silent-rgb));
  --color-content-silent-hover: rgb(var(--color-content-silent-hover-rgb));
  --color-content-silent-active: rgb(var(--color-content-silent-hover-rgb));
  --color-action: rgb(var(--color-action-rgb));
  --color-background-action: rgb(var(--color-background-action-rgb));
  --color-content-action: rgb(var(--color-content-action-rgb));
  --color-content-action-hover: rgb(var(--color-content-action-hover-rgb));
  --color-content-action-active: rgb(var(--color-content-action-active-rgb));
  --color-accent: rgb(var(--color-accent-rgb));
  --color-background-accent: rgb(var(--color-background-accent-rgb));
  --color-content-accent: rgb(var(--color-content-accent-rgb));
  --color-content-accent-hover: rgb(var(--color-content-accent-hover-rgb));
  --color-content-accent-active: rgb(var(--color-content-accent-active-rgb));
  --color-feature: rgb(var(--color-feature-rgb));
  --color-background-feature: rgb(var(--color-background-feature-rgb));
  --color-content-feature: rgb(var(--color-content-feature-rgb));
  --color-content-feature-hover: rgb(var(--color-content-feature-hover-rgb));
  --color-content-feature-active: rgb(var(--color-content-feature-active-rgb));
  --color-success: rgb(var(--color-success-rgb));
  --color-background-success: rgb(var(--color-background-success-rgb));
  --color-content-success: rgb(var(--color-content-success-rgb));
  --color-content-success-hover: rgb(var(--color-content-success-hover-rgb));
  --color-content-success-active: rgb(var(--color-content-success-active-rgb));
  --color-warning: rgb(var(--color-warning-rgb));
  --color-background-warning: rgb(var(--color-background-warning-rgb));
  --color-content-warning: rgb(var(--color-content-warning-rgb));
  --color-content-warning-hover: rgb(var(--color-content-warning-hover-rgb));
  --color-content-warning-active: rgb(var(--color-content-warning-active-rgb));
  --color-error: rgb(var(--color-error-rgb));
  --color-background-error: rgb(var(--color-background-error-rgb));
  --color-content-error: rgb(var(--color-content-error-rgb));
  --color-content-error-hover: rgb(var(--color-content-error-hover-rgb));
  --color-content-error-active: rgb(var(--color-content-error-active-rgb));
  --color-focus-border: rgb(var(--color-focus-border-rgb));
  --color-focus-fill: rgb(var(--color-focus-fill-rgb));
  --color-environmental-bonus-background-rgb: 208,243,180;
  --color-environmental-bonus-stroke-rgb: 208,243,180;
  --color-environmental-bonus-background: rgba(var(--color-environmental-bonus-background-rgb),0.5);
  --color-environmental-bonus-stroke: rgba(var(--color-environmental-bonus-stroke-rgb),0.95);
  --color-environmental-bonus-content: rgb(64,105,33);
  --color-on-action-rgb: var(--color-white-rgb);
  --color-on-action: rgb(var(--color-on-action-rgb));
  --color-on-accent: rgb(var(--color-white-rgb));
  --color-on-feature: rgb(var(--color-white-rgb));
  --color-on-success: rgb(var(--color-white-rgb));
  --color-on-warning: rgb(var(--color-black-rgb));
  --color-on-error: rgb(var(--color-white-rgb));
  --color-on-content: rgb(var(--color-white-rgb));
  --color-emphasise: var(--color-shade-100);
  --color-static-lead: var(--color-neutral-900);
  --color-static-hover: var(--color-neutral-1000);
  --color-static-active: var(--color-neutral-1000);
}

:root, :root[data-theme="light"] {
  --color-status-success-rgb: var(--color-green-500-rgb);
  --color-background-primary-rgb: var(--color-white-rgb);
  --color-background-primary-hover-rgb: var(--color-neutral-050-rgb);
  --color-background-primary-active-rgb: var(--color-neutral-050-rgb);
  --color-background-highlight-rgb: var(--color-neutral-050-rgb);
  --color-background-highlight-hover-rgb: var(--color-neutral-100-rgb);
  --color-background-highlight-active-rgb: var(--color-neutral-100-rgb);
  --color-background-secondary-rgb: var(--color-neutral-100-rgb);
  --color-background-secondary-hover-rgb: var(--color-neutral-200-rgb);
  --color-background-secondary-active-rgb: var(--color-neutral-200-rgb);
  --color-background-contrast-rgb: var(--color-neutral-200-rgb);
  --color-background-contrast-hover-rgb: var(--color-neutral-300-rgb);
  --color-background-contrast-active-rgb: var(--color-neutral-300-rgb);
  --color-background-translucent: rgba(237,238,240,0.7);
  --color-overlay: var(--color-shade-300);
  --color-picture-overlay: var(--color-shade-800);
  --color-picture-interface: var(--color-shade-400);
  --color-picture-dimm: var(--color-shade-050);
  --color-emphasise: var(--color-shade-100);
  --color-static-lead: var(--color-neutral-900);
  --color-content-lead-rgb: var(--color-neutral-900-rgb);
  --color-content-lead-hover-rgb: var(--color-neutral-1000-rgb);
  --color-content-lead-active-rgb: var(--color-neutral-1000-rgb);
  --color-content-secondary-rgb: var(--color-neutral-600-rgb);
  --color-content-secondary-hover-rgb: var(--color-neutral-700-rgb);
  --color-content-secondary-active-rgb: var(--color-neutral-700-rgb);
  --color-content-silent-rgb: var(--color-neutral-500-rgb);
  --color-content-silent-hover-rgb: var(--color-neutral-600-rgb);
  --color-content-silent-active-rgb: var(--color-neutral-600-rgb);
  --color-action-rgb: var(--color-mOrange-600-rgb);
  --color-background-action-rgb: var(--color-mOrange-050-rgb);
  --color-content-action-rgb: var(--color-mOrange-600-rgb);
  --color-content-action-hover-rgb: var(--color-mOrange-700-rgb);
  --color-content-action-active-rgb: var(--color-mOrange-700-rgb);
  --color-accent-rgb: var(--color-blue-600-rgb);
  --color-background-accent-rgb: var(--color-blue-200-rgb);
  --color-content-accent-rgb: var(--color-blue-700-rgb);
  --color-content-accent-hover-rgb: var(--color-blue-800-rgb);
  --color-content-accent-active-rgb: var(--color-blue-800-rgb);
  --color-feature-rgb: var(--color-purple-900-rgb);
  --color-background-feature-rgb: var(--color-purple-050-rgb);
  --color-content-feature-rgb: var(--color-purple-900-rgb);
  --color-content-feature-hover-rgb: var(--color-purple-1000-rgb);
  --color-content-feature-active-rgb: var(--color-purple-1000-rgb);
  --color-icon-level-2-outline-rgb: var(--color-purple-900);
  --color-icon-level-2-outline: var(--color-icon-level-2-outline-rgb);
  --color-success-rgb: var(--color-green-700-rgb);
  --color-background-success-rgb: var(--color-green-050-rgb);
  --color-content-success-rgb: var(--color-green-800-rgb);
  --color-content-success-hover-rgb: var(--color-green-900-rgb);
  --color-content-success-active-rgb: var(--color-green-900-rgb);
  --color-warning-rgb: var(--color-yellow-300-rgb);
  --color-background-warning-rgb: var(--color-yellow-100-rgb);
  --color-content-warning-rgb: var(--color-yellow-700-rgb);
  --color-content-warning-hover-rgb: var(--color-yellow-800-rgb);
  --color-content-warning-active-rgb: var(--color-yellow-800-rgb);
  --color-error-rgb: var(--color-mOrange-700-rgb);
  --color-background-error-rgb: var(--color-mOrange-050-rgb);
  --color-content-error-rgb: var(--color-mOrange-700-rgb);
  --color-content-error-hover-rgb: var(--color-mOrange-800-rgb);
  --color-content-error-active-rgb: var(--color-mOrange-800-rgb);
  --color-focus-border-rgb: var(--color-purple-700-rgb);
  --color-focus-fill-rgb: var(--color-purple-300-rgb);
  --color-environmental-bonus-background: rgba(var(--color-environmental-bonus-background-rgb),0.5);
  --color-environmental-bonus-stroke: rgba(var(--color-environmental-bonus-stroke-rgb),0.95);
  --color-environmental-bonus-content: rgb(64,105,33);
  --color-on-action: rgb(var(--color-white-rgb));
  --color-on-action-rgb: var(--color-white-rgb);
  --color-on-accent: rgb(var(--color-white-rgb));
  --color-on-success: rgb(var(--color-white-rgb));
  --color-on-warning: rgb(var(--color-black-rgb));
  --color-on-error: rgb(var(--color-white-rgb));
  --color-on-content: rgb(var(--color-white-rgb));
  --color-icon-level-2-accent-rgb: var(--color-mOrange-500);
  --color-icon-level-2-accent: var(--color-icon-level-2-accent-rgb);
  --color-logo-text-rgb: var(--color-purple-900-rgb);
  --color-logo-text: rgb(var(--color-logo-text-rgb));
  --color-rating: var(--color-yellow-500);
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --color-status-success-rgb: var(--color-green-700-rgb);
    --color-background-primary-rgb: var(--color-neutral-900-rgb);
    --color-background-primary-hover-rgb: var(--color-neutral-800-rgb);
    --color-background-primary-active-rgb: var(--color-neutral-800-rgb);
    --color-background-highlight-rgb: var(--color-neutral-1000-rgb);
    --color-background-highlight-hover-rgb: var(--color-neutral-900-rgb);
    --color-background-highlight-active-rgb: var(--color-neutral-900-rgb);
    --color-background-secondary-rgb: var(--color-neutral-1100-rgb);
    --color-background-secondary-hover-rgb: var(--color-neutral-1000-rgb);
    --color-background-secondary-active-rgb: var(--color-neutral-1000-rgb);
    --color-background-contrast-rgb: var(--color-neutral-800-rgb);
    --color-background-contrast-hover-rgb: var(--color-neutral-600-rgb);
    --color-background-contrast-active-rgb: var(--color-neutral-600-rgb);
    --color-background-translucent: rgba(16,17,20,0.7);
    --color-overlay: var(--color-shade-500);
    --color-picture-overlay: var(--color-shade-800);
    --color-picture-interface: var(--color-shade-400);
    --color-picture-dimm: rgba(0,0,0,0);
    --color-emphasise: var(--color-shine-200);
    --color-static-lead: var(--color-neutral-900);
    --color-static-hover: var(--color-neutral-1000);
    --color-static-active: var(--color-neutral-1000);
    --color-content-lead-rgb: var(--color-neutral-100-rgb);
    --color-content-lead-hover-rgb: var(--color-white-rgb);
    --color-content-lead-active-rgb: var(--color-white-rgb);
    --color-content-secondary-rgb: var(--color-neutral-300-rgb);
    --color-content-secondary-hover-rgb: var(--color-neutral-200-rgb);
    --color-content-secondary-active-rgb: var(--color-neutral-200-rgb);
    --color-content-silent-rgb: var(--color-neutral-500-rgb);
    --color-content-silent-hover-rgb: var(--color-neutral-400-rgb);
    --color-content-silent-active-rgb: var(--color-neutral-400-rgb);
    --color-action-rgb: var(--color-mOrange-600-rgb);
    --color-background-action-rgb: var(--color-mOrange-900-rgb);
    --color-content-action-rgb: var(--color-mOrange-400-rgb);
    --color-content-action-hover-rgb: var(--color-mOrange-300-rgb);
    --color-content-action-active-rgb: var(--color-mOrange-300-rgb);
    --color-accent-rgb: var(--color-blue-600-rgb);
    --color-background-accent-rgb: var(--color-blue-800-rgb);
    --color-content-accent-rgb: var(--color-blue-200-rgb);
    --color-content-accent-hover-rgb: var(--color-blue-100-rgb);
    --color-content-accent-active-rgb: var(--color-blue-100-rgb);
    --color-success-rgb: var(--color-green-700-rgb);
    --color-background-success-rgb: var(--color-green-900-rgb);
    --color-content-success-rgb: var(--color-green-400-rgb);
    --color-content-success-hover-rgb: var(--color-green-300-rgb);
    --color-content-success-active-rgb: var(--color-green-300-rgb);
    --color-warning-rgb: var(--color-yellow-300-rgb);
    --color-background-warning-rgb: var(--color-yellow-900-rgb);
    --color-content-warning-rgb: var(--color-yellow-400-rgb);
    --color-content-warning-hover-rgb: var(--color-yellow-300-rgb);
    --color-content-warning-active-rgb: var(--color-yellow-300-rgb);
    --color-error-rgb: var(--color-mOrange-700-rgb);
    --color-background-error-rgb: var(--color-mOrange-900-rgb);
    --color-content-error-rgb: var(--color-mOrange-400-rgb);
    --color-content-error-hover-rgb: var(--color-mOrange-300-rgb);
    --color-content-error-active-rgb: var(--color-mOrange-300-rgb);
    --color-focus-border-rgb: var(--color-purple-200-rgb);
    --color-focus-fill-rgb: var(--color-purple-300-rgb);
    --color-environmental-bonus-background: rgba(var(--color-environmental-bonus-background-rgb),0.2);
    --color-environmental-bonus-stroke: rgba(var(--color-environmental-bonus-stroke-rgb),0.3);
    --color-environmental-bonus-content: rgba(var(--color-environmental-bonus-background-rgb),0.8);
    --color-icon-level-2-accent-rgb: var(--color-mOrange-700);
    --color-icon-level-2-accent: var(--color-icon-level-2-accent-rgb);
    --color-icon-level-2-outline-rgb: var(--color-purple-200);
    --color-icon-level-2-outline: var(--color-icon-level-2-outline-rgb);
    --color-logo-text-rgb: var(--color-white-rgb);
    --color-logo-text: rgb(var(--color-logo-text-rgb));
  }
}

:root {
  --color-KA-logo-button: rgb(var(--color-KA-logo-button-rgb));
  --color-KA-content-lead: rgb(var(--color-KA-content-lead-rgb));
  --color-KA-background-primary: rgb(var(--color-KA-background-primary-rgb));
  --color-KA-background-header: rgb(var(--color-KA-background-header-rgb));
}

:root, :root[data-theme="light"] {
  --color-KA-logo-button-rgb: var(--color-KA-green-800-rgb);
  --color-KA-content-lead-rgb: var(--color-KA-neutral-800-rgb);
  --color-KA-background-primary-rgb: var(--color-white-rgb);
  --color-KA-background-header-rgb: var(--color-KA-neutral-200-rgb);
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --color-KA-logo-button-rgb: var(--color-KA-green-400-rgb);
    --color-KA-content-lead-rgb: var(--color-KA-neutral-200-rgb);
    --color-KA-background-primary-rgb: var(--color-KA-neutral-800-rgb);
    --color-KA-background-header-rgb: var(--color-KA-neutral-700-rgb);
  }
}

:root {
  --radius-background: 16px;
  --radius-content: 12px;
  --radius-form-small: 6px;
  --radius-form: 8px;
  --radius-full: 50%;
  --radius-image: 8px;
}

:root {
  --ButtonSmall-height: 30px;
  --ButtonSmall-border-radius: var(--radius-form-small);
  --ButtonSmall-padding: 5px 9px;
  --ButtonMedium-height: 36px;
  --ButtonMedium-border-radius: var(--radius-form);
  --ButtonMedium-padding: 8px 12px;
  --ButtonLarge-height: 44px;
  --ButtonLarge-border-radius: var(--radius-form);
  --ButtonLarge-padding: 12px 16px;
  --ButtonX-Large-height: 56px;
  --ButtonX-Large-border-radius: var(--radius-form);
  --ButtonX-Large-padding: 18px 24px;
}

:root, :root[data-theme="light"] {
  --ButtonPrimary-background-color: var(--color-mOrange-600);
  --ButtonPrimary-color: var(--color-white);
  --ButtonPrimary-border-color: var(--color-mOrange-600);
  --ButtonPrimary-hover-background-color: var(--color-mOrange-700);
  --ButtonPrimary-hover-border-color: var(--color-mOrange-700);
  --ButtonPrimary-active-background-color: var(--color-mOrange-700);
  --ButtonPrimary-active-border-color: var(--color-mOrange-700);
  --ButtonHighlight-background-color: var(--color-purple-900);
  --ButtonHighlight-color: var(--color-white);
  --ButtonHighlight-border-color: var(--color-purple-900);
  --ButtonHighlight-hover-background-color: var(--color-purple-1000);
  --ButtonHighlight-hover-border-color: var(--color-purple-1000);
  --ButtonHighlight-active-background-color: var(--color-purple-1000);
  --ButtonHighlight-active-border-color: var(--color-purple-1000);
  --ButtonSecondary-background-color: transparent;
  --ButtonSecondary-color: var(--color-purple-800);
  --ButtonSecondary-border-color: var(--color-purple-700);
  --ButtonSecondary-hover-background-color: var(--color-neutral-050);
  --ButtonSecondary-active-background-color: var(--color-neutral-050);
  --ButtonSecondary-hover-border-color: var(--color-purple-900);
  --ButtonSecondary-active-border-color: var(--color-purple-900);
  --ButtonSuccess-background-color: var(--color-green-700);
  --ButtonSuccess-color: var(--color-white);
  --ButtonSuccess-border-color: var(--color-green-700);
  --ButtonSuccess-hover-background-color: var(--color-green-800);
  --ButtonSuccess-hover-border-color: var(--color-green-800);
  --ButtonSuccess-active-background-color: var(--color-green-800);
  --ButtonSuccess-active-border-color: var(--color-green-800);
  --ButtonAlert-background-color: var(--color-mOrange-800);
  --ButtonAlert-color: var(--color-white);
  --ButtonAlert-border-color: var(--color-mOrange-800);
  --ButtonAlert-hover-background-color: var(--color-mOrange-900);
  --ButtonAlert-hover-border-color: var(--color-mOrange-900);
  --ButtonAlert-active-background-color: var(--color-mOrange-900);
  --ButtonAlert-active-border-color: var(--color-mOrange-900);
  --ButtonDisabled-color: var(--color-neutral-900);
  --ButtonDisabled-border-color: var(--color-neutral-400);
  --ButtonDisabled-background-color: var(--color-neutral-100);
  --ButtonPlain-color: var(--color-purple-800);
  --ButtonPlain-hover-background-color: var(--color-purple-800);
  --ButtonPlain-active-background-color: var(--color-purple-800);
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --ButtonPrimary-background-color: var(--color-mOrange-600);
    --ButtonPrimary-color: var(--color-white);
    --ButtonPrimary-border-color: var(--color-mOrange-600);
    --ButtonPrimary-hover-background-color: var(--color-mOrange-700);
    --ButtonPrimary-hover-border-color: var(--color-mOrange-700);
    --ButtonPrimary-active-background-color: var(--color-mOrange-700);
    --ButtonPrimary-active-border-color: var(--color-mOrange-700);
    --ButtonHighlight-background-color: var(--color-purple-700);
    --ButtonHighlight-color: var(--color-white);
    --ButtonHighlight-border-color: var(--color-purple-700);
    --ButtonHighlight-hover-background-color: var(--color-purple-800);
    --ButtonHighlight-hover-border-color: var(--color-purple-800);
    --ButtonHighlight-active-background-color: var(--color-purple-800);
    --ButtonHighlight-active-border-color: var(--color-purple-800);
    --ButtonSecondary-background-color: transparent;
    --ButtonSecondary-color: var(--color-purple-200);
    --ButtonSecondary-border-color: var(--color-purple-500);
    --ButtonSecondary-hover-border-color: var(--color-purple-700);
    --ButtonSecondary-hover-background-color: var(--color-neutral-1000);
    --ButtonSecondary-active-border-color: var(--color-purple-700);
    --ButtonSecondary-active-background-color: var(--color-neutral-1000);
    --ButtonSuccess-background-color: var(--color-green-700);
    --ButtonSuccess-color: var(--color-white);
    --ButtonSuccess-border-color: var(--color-green-700);
    --ButtonSuccess-hover-background-color: var(--color-green-800);
    --ButtonSuccess-hover-border-color: var(--color-green-800);
    --ButtonSuccess-active-background-color: var(--color-green-800);
    --ButtonSuccess-active-border-color: var(--color-green-800);
    --ButtonAlert-background-color: var(--color-mOrange-800);
    --ButtonAlert-color: var(--color-white);
    --ButtonAlert-border-color: var(--color-mOrange-800);
    --ButtonAlert-hover-background-color: var(--color-mOrange-900);
    --ButtonAlert-hover-border-color: var(--color-mOrange-900);
    --ButtonAlert-active-background-color: var(--color-mOrange-900);
    --ButtonAlert-active-border-color: var(--color-mOrange-900);
    --ButtonDisabled-color: var(--color-neutral-500);
    --ButtonDisabled-background-color: var(--color-neutral-600);
    --ButtonDisabled-border-color: var(--color-neutral-500);
    --ButtonPlain-color: var(--color-purple-200);
    --ButtonPlain-hover-background-color: var(--color-purple-200);
    --ButtonPlain-active-background-color: var(--color-purple-200);
  }
}

:root {
  --BaseInputSmall-height: 30px;
  --BaseInputSmall-padding: 0 9px;
  --BaseInputSmall-border-radius: var(--radius-form-small);
  --BaseInputMedium-height: 36px;
  --BaseInputMedium-padding: 0 11px;
  --BaseInputMedium-border-radius: var(--radius-form);
  --BaseInputLarge-height: 44px;
  --BaseInputLarge-padding: 0 14px;
  --BaseInputLarge-border-radius: var(--radius-form);
  --BaseInputX-Large-height: 56px;
  --BaseInputX-Large-padding: 0 18px;
  --BaseInputX-Large-border-radius: var(--radius-form);
  --SelectIcon-small-width: 28px;
  --SelectIcon-medium-width: 34px;
  --SelectIcon-large-width: 42px;
  --SelectIcon-x-large-width: 54px;
  --TextAreaSmall-padding: 5px 8px;
  --TextAreaMedium-padding: 8px 11px;
  --TextAreaLarge-padding: 12px 14px;
  --TextAreaX-Large-padding: 16px 18px;
}

:root, :root[data-theme="light"] {
  --FormInput-border: var(--color-neutral-500);
  --FormInput-background: var(--color-white);
  --FormInput-hover-border: var(--color-neutral-700);
  --FormInputDisabled-border: var(--color-neutral-500);
  --FormInputDisabled-background: var(--color-neutral-100);
  --FormInputError-border: var(--color-mOrange-800);
  --FormInputError-background: var(--color-mOrange-050);
  --FormInputError-hover-border: var(--color-mOrange-900);
  --FormInputError-hover-background: var(--color-mOrange-100);
  --FormCheck-border: var(--color-neutral-500);
  --FormCheck-background: var(--color-white);
  --FormCheck-hover-border: var(--color-neutral-700);
  --FormCheckDisabled-border: var(--color-neutral-500);
  --FormCheckDisabled-background: var(--color-neutral-100);
  --FormCheckError-border: var(--color-mOrange-700);
  --FormCheckError-hover-border: var(--color-mOrange-800);
  --FormCheckError-background: var(--color-white);
  --FormCheckError-hover-background: var(--color-white);
  --FormCheckActive-border: var(--color-purple-900);
  --FormCheckActive-background: var(--color-purple-900);
  --FormCheckActive-hover-background: var(--color-purple-1000);
  --FormCheckActive-hover-border: var(--color-purple-1000);
  --FormCheckActiveDisabled-background: var(--color-neutral-400);
  --FormCheckActiveDisabled-border: var(--color-neutral-400);
  --FormCheckActiveError-border: var(--color-mOrange-700);
  --FormCheckActiveError-background: var(--color-mOrange-700);
  --FormCheckActiveError-hover-border: var(--color-mOrange-800);
  --FormCheckActiveError-hover-background: var(--color-mOrange-800);
  --FormCheckActiveSuccess-background: var(--color-green-700);
  --FormCheckActiveSuccess-border: var(--color-green-700);
  --FormCheckActiveSuccess-hover-background: var(--color-green-800);
  --FormCheckActiveSuccess-hover-border: var(--color-green-800);
  --FormField-border: var(--color-neutral-200);
  --FormField-hover-border: var(--color-neutral-400);
  --FormField-background: var(--color-white);
  --FormField-hover-background: var(--color-white);
  --FormFieldDisabled-border: var(--color-neutral-200);
  --FormFieldDisabled-background: var(--color-neutral-050);
  --FormFieldActive-border: var(--color-purple-700);
  --FormFieldActive-background: var(--color-white);
  --FormFieldActive-hover-background: var(--color-white);
  --FormFieldActive-hover-border: var(--color-purple-700);
  --FormFieldError-border: var(--color-mOrange-700);
  --FormFieldError-background: var(--color-mOrange-050);
  --FormFieldError-hover-border: var(--color-mOrange-800);
  --FormFieldError-hover-background: var(--color-mOrange-100);
  --FormSelect-border: var(--color-neutral-500);
  --FormSelect-background: var(--color-neutral-100);
  --FormSelect-hover-border: var(--color-neutral-700);
  --FormSelect-hover-background: var(--color-neutral-100);
  --FormSelectError-border: var(--color-mOrange-800);
  --FormSelectError-background: var(--color-mOrange-050);
  --FormSelectError-hover-border: var(--color-mOrange-800);
  --FormSelectError-hover-background: var(--color-mOrange-100);
  --FormSelectDark-background: var(--color-neutral-800);
  --FormSelectDark-border: var(--color-neutral-500);
  --FormSelectDark-color: var(--color-neutral-100);
  --FormSelectDark-hover-border: var(--color-neutral-600);
  --FormSelectDark-hover-color: var(--color-neutral-100);
  --ToggleBackground-color: var(--color-neutral-500);
  --ToggleKnob-color: var(--color-white);
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --FormInput-border: var(--color-neutral-500);
    --FormInput-background: var(--color-neutral-900);
    --FormInput-hover-border: var(--color-neutral-300);
    --FormInputDisabled-border: var(--color-neutral-500);
    --FormInputDisabled-background: var(--color-neutral-600);
    --FormInputError-border: var(--color-mOrange-600);
    --FormInputError-background: var(--color-mOrange-1000);
    --FormInputError-hover-border: var(--color-mOrange-500);
    --FormInputError-hover-background: var(--color-mOrange-1100);
    --FormCheck-border: var(--color-neutral-500);
    --FormCheck-background: var(--color-neutral-900);
    --FormCheck-hover-border: var(--color-neutral-200);
    --FormCheckDisabled-border: var(--color-neutral-500);
    --FormCheckDisabled-background: var(--color-neutral-600);
    --FormCheckError-border: var(--color-mOrange-600);
    --FormCheckError-hover-border: var(--color-mOrange-500);
    --FormCheckError-background: var(--color-neutral-700);
    --FormCheckError-hover-background: var(--color-neutral-700);
    --FormCheckActive-border: var(--color-purple-500);
    --FormCheckActive-background: var(--color-purple-500);
    --FormCheckActive-hover-background: var(--color-purple-400);
    --FormCheckActive-hover-border: var(--color-purple-400);
    --FormCheckActiveDisabled-border: var(--color-neutral-500);
    --FormCheckActiveDisabled-background: var(--color-neutral-600);
    --FormCheckActiveError-border: var(--color-mOrange-600);
    --FormCheckActiveError-background: var(--color-mOrange-600);
    --FormCheckActiveError-hover-border: var(--color-mOrange-500);
    --FormCheckActiveError-hover-background: var(--color-mOrange-500);
    --FormCheckActiveSuccess-background: var(--color-green-700);
    --FormCheckActiveSuccess-border: var(--color-green-700);
    --FormCheckActiveSuccess-hover-background: var(--color-green-600);
    --FormCheckActiveSuccess-hover-border: var(--color-green-600);
    --FormField-border: var(--color-neutral-700);
    --FormField-hover-border: var(--color-neutral-500);
    --FormField-background: none;
    --FormField-hover-background: none;
    --FormFieldDisabled-border: var(--color-neutral-700);
    --FormFieldDisabled-background: var(--color-neutral-700);
    --FormFieldActive-border: var(--color-purple-500);
    --FormFieldActive-background: none;
    --FormFieldActive-hover-background: none;
    --FormFieldActive-hover-border: var(--color-purple-500);
    --FormFieldError-border: var(--color-mOrange-600);
    --FormFieldError-background: var(--color-mOrange-1000);
    --FormFieldError-hover-border: var(--color-mOrange-500);
    --FormFieldError-hover-background: var(--color-mOrange-1100);
    --FormSelect-border: var(--color-neutral-500);
    --FormSelect-background: var(--color-neutral-800);
    --FormSelect-hover-border: var(--color-neutral-600);
    --FormSelect-hover-background: var(--color-neutral-800);
    --FormSelectError-border: var(--color-mOrange-600);
    --FormSelectError-background: var(--color-mOrange-1000);
    --FormSelectError-hover-border: var(--color-mOrange-500);
    --FormSelectError-hover-background: var(--color-mOrange-1100);
    --ToggleBackground-color: var(--color-neutral-500);
    --ToggleKnob-color: var(--color-white);
  }
}

:root {
  --base-space: 9px;
  --space-XXS: calc(var(--base-space)/3);
  --space-XS: calc(var(--base-space)/1.5);
  --space-S: var(--base-space);
  --space-M: calc(var(--base-space)*2);
  --space-L: calc(var(--base-space)*3);
  --space-XL: calc(var(--base-space)*4);
  --space-XXL: calc(var(--base-space)*6);
  --space-XXXL: calc(var(--base-space)*8);
}

:root {
  --Grid-gutter-width: var(--space-M);
  --Grid-outer-margin: var(--space-S);
  --Grid-half-gutter-width: calc(var(--Grid-gutter-width)*0.5);
  --Grid-gutter-compensation: calc(var(--Grid-half-gutter-width)*-1);
}

:root {
  --IconSmall-height: 16px;
  --IconMedium-height: 20px;
  --IconLarge-height: 24px;
  --IconX-Large-height: 32px;
  --IconXX-Large-height: 48px;
}

:root, :root[data-theme="light"] {
  --UIEffects-HoverShadow: 0 1px 4px rgba(0,0,0,0.33);
  --UIEffects-FocusGlow: 0 0 1px 4px var(--color-purple-300);
  --Focus-outline: 2px solid var(--color-purple-900);
  --Focus-outline-gap: 2px;
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --UIEffects-FocusGlow: 0 0 1px 4px var(--color-purple-700);
    --Focus-outline: 2px solid var(--color-purple-200);
  }
}

:root {
  --z-index-level-1: 1;
  --z-index-level-2: 5001000;
  --z-index-level-3: 6000000;
  --z-index-level-4: 6000500;
  --shadow-level-1: 0px 0px 0px 1px var(--color-background-contrast);
  --shadow-level-2: 0px 8px 12px 0px rgba(0,0,0,0.04),0px 6px 8px 0px rgba(0,0,0,0.06),0px 2px 4px 0px rgba(0,0,0,0.08),0px 0px 2px 0px rgba(0,0,0,0.1);
  --shadow-level-2-rotated: 0px -4px 12px 0px rgba(0,0,0,0.04),0px -2px 9px 0px rgba(0,0,0,0.06),0px -1px 4px 0px rgba(0,0,0,0.08),0px 0px 2px 0px rgba(0,0,0,0.1);
  --shadow-level-3: 0px 32px 48px -8px rgba(0,0,0,0.12),0px 16px 24px -4px rgba(0,0,0,0.1),0px 4px 12px 0px rgba(0,0,0,0.08),0px 2px 8px 0px rgba(0,0,0,0.06),0px 0px 4px 0px rgba(0,0,0,0.04);
}

:root {
  --placeholder-background-rgb: var(--color-background-primary-rgb);
  --placeholder-background: var(--color-background-primary);
  --placeholder-color-rgb: var(--color-background-contrast-rgb);
  --placeholder-color: var(--color-background-contrast);
}

:root {
  --Rating-color-VERY_GOOD_PRICE: rgb(var(--Rating-color-VERY_GOOD_PRICE-rgb));
  --Rating-color-GOOD_PRICE: rgb(var(--Rating-color-GOOD_PRICE-rgb));
  --Rating-color-REASONABLE_PRICE: rgb(var(--Rating-color-REASONABLE_PRICE-rgb));
  --Rating-color-INCREASED_PRICE: rgb(var(--Rating-color-INCREASED_PRICE-rgb));
  --Rating-color-HIGH_PRICE: rgb(var(--Rating-color-HIGH_PRICE-rgb));
  --Rating-color-VERY_GOOD_PRICE-rgb: var(--color-green-800-rgb);
  --Rating-color-GOOD_PRICE-rgb: var(--color-green-700-rgb);
  --Rating-color-REASONABLE_PRICE-rgb: var(--color-green-600-rgb);
  --Rating-color-INCREASED_PRICE-rgb: var(--color-yellow-300-rgb);
  --Rating-color-HIGH_PRICE-rgb: var(--color-yellow-500-rgb);
}

:root {
  --SingleItemOverlay-column-min-width: 100px;
  --SingleItemOverlay-column-width: 180px;
  --SingleItemOverlay-column-gap: var(--space-M);
}

:root, :root[data-theme="light"] {
  color-scheme: light;
  --color-KA-logo-button-rgb: var(--color-KA-green-800-rgb);
  --color-KA-content-lead-rgb: var(--color-KA-neutral-800-rgb);
  --color-KA-background-primary-rgb: var(--color-white-rgb);
  --color-KA-background-header-rgb: var(--color-KA-neutral-200-rgb);
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-KA-logo-button-rgb: var(--color-KA-green-400-rgb);
    --color-KA-content-lead-rgb: var(--color-KA-neutral-200-rgb);
    --color-KA-background-primary-rgb: var(--color-KA-neutral-800-rgb);
    --color-KA-background-header-rgb: var(--color-KA-neutral-700-rgb);
  }
}

:root {
  --font-family-base: "YouthBase",Arial,sans-serif;
  --font-family-hero: "YouthHero",Arial,sans-serif;
  --text-color: var(--color-content-lead);
  --text-size-100: 0.75rem;
  --text-size-200: 0.875rem;
  --text-size-300: 1rem;
  --text-size-400: 1.125rem;
  --text-size-500: 1.25rem;
  --text-size-600: 1.5rem;
  --text-size-700: 2rem;
  --text-size-800: 2.5rem;
  --text-size-900: 3rem;
  --text-height-050: 1rem;
  --text-height-100: 1.25rem;
  --text-height-200: 1.5rem;
  --text-height-300: 1.75rem;
  --text-height-400: 2rem;
  --text-height-500: 2.5rem;
  --text-height-600: 3rem;
  --text-height-700: 3.5rem;
  --text-height-800: 4rem;
  --text-height-900: 4.5rem;
  --text-height-auto: auto;
  --text-weight-100: 100;
  --text-weight-200: 200;
  --text-weight-300: 300;
  --text-weight-400: 400;
  --text-weight-500: 500;
  --text-weight-600: 600;
  --text-weight-700: 700;
  --text-weight-800: 800;
  --text-weight-900: 900;
}

:root {
  --z-index-main-content: var(--z-index-level-1);
  --z-index-backdrop-level-2: calc(var(--z-index-level-2) - 1);
  --z-index-backdrop-level-3: calc(var(--z-index-level-3) - 1);
  --z-index-backdrop-level-4: calc(var(--z-index-level-4) - 1);
  --z-index-combo-box-input: calc(var(--z-index-main-content) + 1);
  --z-index-select-dropdown-icon: calc(var(--z-index-main-content) + 2);
  --z-index-autosuggest-suggestion-list: calc(var(--z-index-main-content) + 3);
  --z-index-header-menu-dropdown: calc(var(--z-index-main-content) + 10);
  --z-index-header-menu-dropdown-gap: calc(var(--z-index-main-content) + 11);
}

:root :is(body, button, input, optgroup, select, textarea) {
  font-family: var(--font-family-base),sans-serif;
}

:root {
  --LoadingIndicator-duration: 1.2s;
  --LoadingIndicator-delay: 0.32s;
  --LoadingIndicatorMedium-ball-size: 10px;
  --LoadingIndicatorMedium-gap: 3px;
  --LoadingIndicatorMedium-width: calc(3*var(--LoadingIndicatorMedium-ball-size) + 2*var(--LoadingIndicatorMedium-gap));
}

/* ===== Reset / base ===== */

html {
  line-height: 1.15;
}

a {
  background-color: transparent;
}

img {
  border-style: none;
}

button, input {
  line-height: 1.15;
  margin: 0px;
}

button, input {
  overflow: visible;
}

button {
  text-transform: none;
}

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

[type="checkbox"] {
  box-sizing: border-box;
  padding: 0px;
}

*, ::after, ::before {
  box-sizing: border-box;
}

:is(a, button, input, select, textarea, summary):focus-visible {
  outline: var(--Focus-outline);
  outline-offset: var(--Focus-outline-gap);
}

:is(a, button, input, select, textarea, summary):focus:not(:focus-visible) {
  outline: none;
}

*, ::after, ::before {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  outline: 0px;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

html {
  height: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  text-size-adjust: 100%;
}

h1, h4 {
  margin: 0px;
  padding: 0px;
}

h1, h4 {
  font-weight: 600;
}

body, button, input {
  font-feature-settings: "liga", "dlig" 0, "hlig" 0, "calt", "rlig";
  -webkit-font-smoothing: antialiased;
}

svg:not(:root) {
  overflow: hidden;
}

body {
  margin: 0px;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-background-secondary);
  color: var(--color-content-lead);
  font-size: var(--text-size-200);
  line-height: var(--text-height-100);
  font-weight: var(--text-weight-400);
}

input {
  display: block;
  font-size: 1.4rem;
  margin: 0.6rem 0px;
}

@keyframes loading-indicator {
  0%, 80%, 100% {
    transform: scale(1);
  }
  40% {
    transform: scale(0);
  }
}

/* ===== Header ===== */

.header {
  align-items: center;
  background-color: var(--color-background-primary);
  box-shadow: 0 1px 1.5px #00000080,inset 0-2px 0 var(--color-background-highlight);
  display: flex;
  flex-direction: row;
  min-height: 72px;
  justify-content: center;
}

.header-content {
  align-items: center;
  display: flex;
  flex: 1 1 0%;
  flex-direction: row;
  max-width: 1014px;
  padding: 0 var(--space-M);
  margin-bottom: 1px;
}

.header-title {
  color: var(--color-feature);
  font-size: 11px;
  font-weight: var(--text-weight-400);
  line-height: 11px;
  user-select: none;
  width: 120px;
  margin-left: 11px;
  margin-top: var(--space-XXS);
}

.mobile-logo {
  width: 170px;
  fill: var(--color-logo-text);
}

/* ===== Card / layout ===== */

hr {
  overflow: visible;
}

.container {
  width: 100%;
  margin: 0px auto;
  max-width: 996px;
  min-width: 320px;
  padding: 0 var(--space-S) var(--space-L) var(--space-S);
}

.login-grid {
  background: var(--color-background-primary);
  border-radius: var(--radius-background);
  box-shadow: var(--shadow-level-1);
  padding: var(--space-M);
  display: grid;
  grid-template-columns: 480px minmax(var(--space-L),1fr) minmax(200px,280px) minmax(var(--space-L),1fr);
}

.login-container {
  color: var(--color-content-lead);
  font-size: var(--text-size-200);
  font-weight: var(--text-height-400);
  grid-area: 1 / 3 / 2 / 4;
  padding: var(--space-XL)0 0;
}

.login-container-title {
  margin-bottom: var(--space-S);
}

.login-container form {
  display: flex;
  flex-direction: column;
  gap: var(--space-S);
}

.login-promo a {
  display: flex;
}

.login-promo img {
  width: 100%;
  border-top-left-radius: var(--radius-content);
  border-bottom-left-radius: var(--radius-content);
}

hr {
  border-right: 0px;
  border-bottom: 0px;
  border-left: 0px;
  border-image: none;
  border-top: 1px solid var(--color-background-contrast);
  box-sizing: initial;
  height: 0px;
  margin-bottom: var(--space-XXS);
  margin-top: var(--space-XXS);
}

.register-now {
  text-align: center;
}

@media (max-width: 840px) {
  .login-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 840px) {
  .login-promo {
    display: none;
  }
}

@media (max-width: 840px) {
  .login-container {
    grid-area: 1 / 1 / 2 / 2;
    padding: var(--space-L);
  }
}

.page-heading {
  display: flex;
  font-size: var(--text-size-700);
  line-height: var(--text-height-500);
  padding: var(--space-XL)0 var(--space-S);
  font-family: var(--font-family-hero),sans-serif;
}

/* ===== Form ===== */

.forgot-password {
  margin-top: var(--space-XS);
  text-align: center;
}

form .form-input-label {
  font-size: var(--text-size-200);
  font-weight: var(--text-weight-500);
  line-height: var(--text-height-100);
  display: inline-block;
}

.info-button-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin-left: var(--space-XS);
}

.info-button-wrapper:hover .info-popup {
  display: flex;
}

.info-button {
  display: inline;
  vertical-align: middle;
}

.info-popup {
  position: absolute;
  z-index: 100;
  bottom: 2rem;
  width: 24rem;
  padding: var(--space-M);
  border-radius: var(--radius-content);
  box-shadow: var(--shadow-level-2);
  background: var(--color-background-primary);
  left: 50%;
  transform: translateX(-50%);
}

.remember-me-container .info-popup {
  bottom: var(--space-XL);
}

.text-input {
  font-weight: var(--text-weight-400);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  font-size: 1em;
  margin-top: var(--space-XXS);
  color: var(--color-content-lead);
  background: var(--FormInput-background);
  border: 1px solid var(--FormInput-border);
  width: 100%;
  height: var(--BaseInputLarge-height);
  padding: var(--BaseInputLarge-padding);
  border-radius: var(--BaseInputLarge-border-radius);
}

.text-input:hover {
  box-shadow: var(--UIEffects-HoverShadow);
  border-color: var(--FormInput-hover-border);
}

.text-input:focus-visible {
  border-color: var(--color-focus-border);
  box-shadow: var(--UIEffects-FocusGlow);
  outline: none;
}

.input-container {
  position: relative;
}

.checkbox-container {
  display: block;
  position: relative;
  padding-left: var(--space-L);
  margin-bottom: var(--space-XS);
  cursor: pointer;
  user-select: none;
  font-size: var(--text-size-200);
}

.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0px;
  width: 0px;
}

.checkmark {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 20px;
  width: 20px;
  border-radius: var(--radius-form-small);
  background-color: var(--FormCheck-background);
  border: 1px solid var(--FormCheck-border);
}

.checkbox-container:hover input ~ .checkmark {
  background-color: var(--FormCheck-background);
  box-shadow: rgba(0, 0, 0, 0.33) 0px 1px 4px;
  border-color: var(--FormCheck-hover-border);
}

.checkbox-container input:checked ~ .checkmark {
  background-color: var(--FormCheckActive-hover-background);
  border-color: var(--FormCheckActive-border);
}

.checkmark::after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox-container input:checked ~ .checkmark::after {
  display: block;
}

.checkbox-container .checkmark::after {
  border-style: solid;
  border-color: rgb(255, 255, 255);
  border-image: none;
  border-radius: 1px;
  border-width: 0px 3px 3px 0px;
  height: 14px;
  left: 50%;
  top: 2px;
  transform: translateX(-50%) rotate(45deg);
  width: 6px;
}

.remember-me-container {
  display: flex;
  gap: var(--space-XXS);
}

/* ===== Buttons ===== */

.submit-button {
  width: 100%;
}

#login-next {
  margin-top: var(--space-XS);
}

.btn {
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: background-color 250ms ease-out;
  white-space: nowrap;
}

.btn:hover, .btn:focus, .btn:active {
  text-decoration: none;
  outline: none;
}

.btn:hover {
  box-shadow: var(--UIEffects-HoverShadow);
}

.btn:active {
  border: 1px solid var(--color-focus-border);
  box-shadow: var(--UIEffects-FocusGlow);
}

.btn:focus-visible {
  border: 1px solid var(--color-focus-border);
  box-shadow: var(--UIEffects-FocusGlow);
}

.btn-large {
  padding: var(--ButtonLarge-padding);
  border-radius: var(--ButtonLarge-border-radius);
  height: var(--ButtonLarge-height);
  font-size: var(--text-size-200);
  line-height: var(--text-height-100);
}

.btn-primary {
  color: var(--ButtonPrimary-color);
  background-color: var(--ButtonPrimary-background-color);
  border: 1px solid var(--ButtonPrimary-border-color);
  font-weight: var(--text-weight-600);
}

.btn-primary:hover {
  color: var(--ButtonPrimary-color);
  background-color: var(--ButtonPrimary-hover-background-color);
  border-color: var(--ButtonPrimary-hover-border-color);
}

.btn-primary:active {
  background-color: var(--ButtonPrimary-active-background-color);
  border-color: var(--ButtonPrimary-active-border-color);
}

.btn:disabled {
  background-color: var(--ButtonDisabled-background-color);
  border: 1px solid var(--ButtonDisabled-border-color);
  color: var(--ButtonDisabled-color);
  cursor: default;
  opacity: 0.5;
  pointer-events: none;
}

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

.link {
  width: fit-content;
  font-size: var(--text-size-200);
  color: var(--color-content-action);
  text-decoration-color: rgba(var(--color-content-action-rgb),0.5);
}

.link:hover {
  color: var(--color-content-action-hover);
}

.sf-hidden {
  display: none !important;
}

/* ===== Demo flow (step 2 only) ===== */

.demo-msg {
  display: none;
  margin-top: 9px;
  padding: 9px 14px;
  font-size: 14px;
  line-height: 20px;
  background: #fff4ee;
  border-radius: 8px;
}

.demo-msg.show {
  display: block;
}

.forgot-password a {
  color: var(--color-content-action);
  text-decoration-color: rgba(var(--color-content-action-rgb), 0.5);
}

.forgot-password a:focus-visible {
  outline: 2px solid var(--color-focus-border);
  outline-offset: 2px;
}