/* Box sizing rules */
@import 'slds-sanoma-learning/light.css' screen;
@import 'slds-sanoma-learning/dark.css' screen and (prefers-color-scheme: dark);
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
:where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd) {
  margin: 0;
}

:root {
  --font-color: var(--sl-color-foreground-plain);
}

:not(:defined) {
  visibility: visible;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

@media screen and (min-width: 1200px) {
  html {
    scroll-behavior: auto;
  }
}
@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  background-color: var(--background-color);
  color: var(--font-color);
  display: flex;
  font-family: Poppins, sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
  margin: 0;
  min-block-size: 100vh;
}

button {
  cursor: pointer;
}

/* deprecated; use new tokens */
/**
 * left for the future use
*/
/*
:root:not(.light) {
  --background-color: #202124;
  --second-background-color: #4c4d4f;
  --third-background-color: #363739;
  --menu-second-color: #363739;
  --primary-color: #363739;
  --font-color: #fff;
  --secondary-font-color: rgba(226, 232, 240, 1);
  --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --n-color-surface: #363739;
  --n-color-background: #363739;
  --n-color-text-weak: #fff;
  --sl-panel-background-color: transparent;
  --sl-color-neutral-0: #363739;
  --sl-color-neutral-700: #fff;
  --n-color-text: #fff;
  --n-button-background-color: transparent;
  --n-tab-color: #668cff;
}

:root.light {
  --background-color: #f8f9fa;
  --second-background-color: var(--ds-color-black);
  --third-background-color: #fff;
  --menu-second-color: rgba(138, 174, 255, 0.2);
  --primary-color: rgba(138, 174, 255, 0.2);
  --font-color: #212529;
  --secondary-font-color: #495057;
  --n-color-surface: rgb(255, 255, 255);
  --n-color-background: rgb(255, 255, 255);
}

.ds-theme-icon {
  align-items: center;
  background-color: var(--primary-color);
  border-color: rgba(226, 232, 240, 0);
  border-radius: 0.5rem;
  border-style: solid;
  border-width: 1px;
  bottom: 16px;
  box-shadow: var(--box-shadow);
  cursor: pointer;
  display: flex;
  font-size: 1em;
  height: 2.5rem;
  justify-content: center;
  left: 16px;
  position: absolute;
  transition: all 500ms;
  width: 2.5rem;
}

:root:not(.light) {
  .ds-icon-light {
    display: none;
  }

  .ds-icon-dark {
    color: #fff;
    display: inline-block;
  }
}

:root.light {
  .ds-icon-light {
    display: inline-block;
  }

  .ds-icon-dark {
    display: none;
  }
}
*/
/* stylelint-disable color-no-hex */
:root {
  --angle: url("../assets/icons/angle-right-black.svg");
  --angle-active: invert(33%) sepia(70%) saturate(3459%) hue-rotate(219deg) brightness(101%) contrast(105%);
  --background-color: var(--ds-color-white);
  --badge-background: var(--ds-color-white);
  --badge-border: var(--ds-color-light-grey);
  --badge-color: var(--ds-color-nickel);
  --card-background: var(--ds-color-alice-blue-darker);
  --card-color--active: var(--ds-color-mariner);
  --chevron-icon: url("../assets/icons/chevron-right.svg");
  --chevron-icon--active: url("../assets/icons/chevron-right-darker.svg");
  --contact-block-background: var(--ds-color-selago-blue);
  --contact-block-link: var(--ds-color-blue);
  --contact-block-link--hover: var(--ds-color-mariner);
  --close-icon: url("../assets/icons/close.svg");
  --component-card-background: var(--ds-color-light-concrete);
  --code-border: var(--ds-color-bright-grey);
  --copy-icon: url("../assets/icons/copy.svg");
  --copy-icon--hover: url("../assets/icons/copy-hover.svg");
  --copy-button-background: var(--ds-color-concrete);
  --copy-button-background--active: var(--ds-color-alice-blue);
  --copy-button-background--hover: var(--ds-color-light-blue);
  --copy-button-border: var(--ds-color-bright-grey);
  --cta-background: linear-gradient(79.62deg, var(--ds-color-blue) 0.95%, var(--ds-color-blueberry-light) 100%);
  --cta-link-color: var(--ds-color-white);
  --cta-link-color--active: rgb(var(--ds-color-white-rgb) / 90%);
  --danger-color: var(--ds-color-danger);
  --error-icon: url("../assets/icons/error-dark.svg");
  --filter-color: rgb(34 34 34 / 12%);
  --focus-box-shadow: 0 0 0 3px rgb(var(--ds-color-blue-rgb) / 32%);
  --navigation-focus-box-shadow: 0 0 0 3px rgb(var(--ds-color-blue-rgb) / 32%);
  --hamburger-filter: brightness(3.5);
  --hamburger-icon: url("../assets/icons/hamburger.svg");
  --heading-background: var(--ds-color-blue);
  --heading-color: var(--ds-color-faux-white);
  --help-color: var(--ds-color-black-rgb);
  --help-icon: url("../assets/icons/messages-question-light-grey.svg");
  --help-icon-hover: url("../assets/icons/messages-question-black.svg");
  --helper-text: var(--ds-color-black);
  --highlight-color: var(--ds-color-blue);
  --input-menu-background: rgb(var(--ds-color-black-rgb) / 4%);
  --input-menu-background--hover: rgb(var(--ds-color-black-rgb) / 8%);
  --input-menu--border: var(--ds-color-light-grey);
  --link-color: var(--ds-color-blueberry-light);
  --link-hover-color: var(--ds-color-mariner);
  --link-active-color: var(--ds-color-mariner);
  --link-visited-color: var(--ds-color-blueberry-light);
  --logo: url("../assets/logo-black.svg");
  --menu-button-hover: rgb(var(--ds-color-blue-rgb) / 4%);
  --menu-font-color: var(--ds-color-raisin-black);
  --menu-second-color: rgb(138 174 255 / 20%);
  --picture-background: var(--ds-color-concrete);
  --search-color: var(--ds-color-black);
  --search-icon: url("../assets/icons/search.svg");
  --second-background-color: var(--ds-color-ghost-white);
  --sidebar-border: none;
  --success-icon: url("../assets/icons/check-dark.svg");
  --success-color: var(--ds-color-success);
  --table-code-background: var(--ds-color-concrete);
  --table-separator: var(--ds-color-bright-grey);
  --table-text-color: var(--ds-color-raisin-black);
  --tab-color: rgb(var(--ds-color-black-rgb) / 60%);
  --tab-color--active: var(--ds-color-black);
  --tab-color--hover: var(--ds-color-black);
  --tab-indicator-background: var(--ds-color-blue);
  --text-color: var(--ds-color-black);
  --top-navbar-color: var(--ds-color-white);
  --vertical-slider-background: var(--ds-color-light-silver);
}

@media (prefers-color-scheme: light) {
  .light-only {
    display: initial;
  }
  .dark-only {
    display: none;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --angle: url("../assets/icons/angle-right.svg");
    --angle-active: brightness(0) saturate(100%) invert(45%) sepia(57%) saturate(3117%) hue-rotate(210deg)
      brightness(107%) contrast(101%);
    --background-color: var(--ds-color-black);
    --badge-background: var(--ds-color-base-surface);
    --badge-border: var(--ds-color-blck-olive);
    --badge-color: var(--ds-color-grey);
    --card-background: rgb(var(--ds-color-blue-rgb) / 32%);
    --card-color--active: var(--ds-color-baby-blue);
    --chevron-icon: url("../assets/icons/chevron-right-dark.svg");
    --chevron-icon--active: url("../assets/icons/chevron-right-dark-lighter.svg");
    --contact-block-background: rgb(var(--ds-color-blue-rgb) / 20%);
    --contact-block-link: var(--ds-color-baby-blue);
    --contact-block-link--hover: var(--ds-color-lavender-blue);
    --close-icon: url("../assets/icons/close-light.svg");
    --component-card-background: var(--ds-color-raisin-black-light);
    --code-border: var(--ds-color-blck-olive);
    --copy-icon: url("../assets/icons/copy-light.svg");
    --copy-icon--hover: url("../assets/icons/copy-hover-dark.svg");
    --copy-button-background: var(--ds-color-blck-olive);
    --copy-button-background--active: var(--ds-color-deep-koamaru);
    --copy-button-background--hover: var(--ds-color-gunmetal);
    --copy-button-border: var(--ds-color-tundora);
    --cta-background: linear-gradient(259.74deg, rgb(89 133 255 / 80%) 0%, var(--ds-color-blueberry) 100%);
    --cta-link-color: var(--ds-color-raisin-black);
    --cta-link-color--active: rgb(var(--ds-color-black-rgb) / 90%);
    --danger-color: var(--ds-color-red);
    --error-icon: url("../assets/icons/error.svg");
    --filter-color: rgb(34 34 34 / 64%);
    --focus-box-shadow: 0 0 0 3px rgb(var(--ds-color-blue-rgb) / 32%);
    --navigation-focus-box-shadow: 0 0 0 3px rgb(var(--ds-color-blue-rgb) / 64%);
    --hamburger-filter: brightness(0.6);
    --hamburger-icon: url("../assets/icons/hamburger-light.svg");
    --heading-background: var(--ds-color-blueberry);
    --heading-color: var(--ds-color-raisin-black);
    --help-color: var(--ds-color-faux-white-rgb);
    --help-icon: url("../assets/icons/messages-question-grey.svg");
    --help-icon-hover: url("../assets/icons/messages-question.svg");
    --helper-text: var(--ds-color-faux-white);
    --highlight-color: var(--ds-color-blueberry);
    --input-menu-background: rgb(var(--ds-color-faux-white-rgb) / 16%);
    --input-menu-background--hover: rgb(var(--ds-color-faux-white-rgb) / 20%);
    --logo: url("../assets/logo.svg");
    --link-color: var(--ds-color-baby-blue);
    --link-hover-color: var(--ds-color-lavender-blue);
    --link-active-color: var(--ds-color-lavender-blue);
    --link-visited-color: var(--ds-color-baby-blue);
    --menu-button-hover: rgb(var(--ds-color-blue-rgb) / 32%);
    --menu-font-color: var(--ds-color-lotion);
    --menu-second-color: #363739;
    --picture-background: var(--ds-color-blck-olive);
    --search-color: var(--ds-color-faux-white);
    --search-icon: url("../assets/icons/search-light.svg");
    --second-background-color: var(--ds-color-black);
    --sidebar-border: inset -1px 0 0 var(--ds-color-blck-olive);
    --success-icon: url("../assets/icons/check.svg");
    --success-color: var(--ds-color-green);
    --table-code-background: var(--ds-color-blck-olive);
    --table-separator: var(--ds-color-tundora);
    --table-text-color: var(--ds-color-white);
    --tab-color: rgb(var(--ds-color-faux-white-rgb) / 64%);
    --tab-color--active: var(--ds-color-faux-white);
    --tab-color--hover: var(--ds-color-faux-white);
    --tab-indicator-background: var(--ds-color-blueberry);
    --text-color: var(--ds-color-white);
    --top-navbar-color: var(--ds-color-black);
    --vertical-slider-background: var(--ds-color-tundora);
  }
  .light-only {
    display: none;
  }
  .dark-only {
    display: initial;
  }
}
/** colors */
/* stylelint-disable color-no-hex */
:root {
  --ds-color-white: #fff;
  --ds-color-white-rgb: 255 255 255;
  --ds-color-black: #222;
  --ds-color-black-rgb: 34 34 34;
  --ds-color-green: #56cc8a;
  --ds-color-emerald: #45cc80;
  --ds-color-emerald-rgb: 69 204 128;
  --ds-color-success: #28854e;
  --ds-color-red: #ff575c;
  --ds-color-red-rgb: 255 87 92;
  --ds-color-danger: #c73434;
  --ds-color-light-blue: #f7f9ff;
  --ds-color-alice-blue: #f0f3fe;
  --ds-color-alice-blue-darker: #e0eaff;
  --ds-color-lavender-blue: #ccdbff;
  --ds-color-selago-blue: #edf2fc;
  --ds-color-blue: #36f;
  --ds-color-blue-rgb: 51 102 255;
  --ds-color-base-surface: #262626;
  --ds-color-baby-blue: #9ebaff;
  --ds-color-blueberry: #5985ff;
  --ds-color-blueberry-light: #5f87ff;
  --ds-color-mariner: #2351db;
  --ds-color-deep-koamaru: #2b3866;
  --ds-color-ghost-white: #f9f9f9;
  --ds-color-lotion: #fbfcfb;
  --ds-color-faux-white: #fefefe;
  --ds-color-faux-white-rgb: 254 254 254;
  --ds-color-concrete: #f3f3f3;
  --ds-color-light-concrete: #f4f4f4;
  --ds-color-light-grey: #d5d5d5;
  --ds-color-light-silver: #d9d9d9;
  --ds-color-bright-grey: #eaeaea;
  --ds-color-outer-space: #444;
  --ds-color-blck-olive: #3e3d3d;
  --ds-color-tundora: #4e4e4e;
  --ds-color-nickel: #737373;
  --ds-color-grey: #bcbcbc;
  --ds-color-gunmetal: #373225;
  --ds-color-raisin-black-light: #262626;
  --ds-color-raisin-black: #222;
}

:root {
  /* colors */
  --900-accent: #000d33;
  --colors-200-warnng: #fde376;
  --colors-600-danger: #992224;
  --colors-600-success: #1b6137;
  --colors-600-warnng: #79590d;
  --colors-base-danger: #ff575c;
  --colors-base-success: #70e09d;
  --colors-base-warnng: #feda42;
  --colors-accent-100-accent: #e0eaff;
  --colors-accent-150-accent: #ccdbff;
  --colors-accent-200-accent: #9ebaff;
  --colors-accent-300-accent: #5985ff;
  --colors-accent-400-accent: #36f;
  --colors-accent-50-accent: #edf2fc;
  --colors-accent-500-accent: #2351db;
  --colors-accent-600-accent: #1138ad;
  --colors-accent-700-accent: #09298e;
  --colors-accent-800-accent: #00175f;
  --colors-accent-base-accent: #36f;
  --colors-danger-100-danger: #ffd6d1;
  --colors-danger-150-danger: #ffbcb8;
  --colors-danger-200-danger: #ff8e8a;
  --colors-danger-300-danger: #ff575c;
  --colors-danger-400-danger: #e5454a;
  --colors-danger-50-danger: #ffedeb;
  --colors-danger-500-danger: #c73434;
  --colors-danger-600-danger: #992224;
  --colors-danger-700-danger: #6b1313;
  --colors-danger-800-danger: #470d0d;
  --colors-danger-900-danger: #260808;
  --colors-danger-base-danger: #ff575c;
  --colors-neutral-100-neutral: #eaeaea;
  --colors-neutral-150-neutral: #d5d5d5;
  --colors-neutral-200-neutral: #bcbcbc;
  --colors-neutral-300-neutral: #a2a1a1;
  --colors-neutral-400-neutral: #898989;
  --colors-neutral-50-neutral: #f4f4f4;
  --colors-neutral-500-neutral: #737373;
  --colors-neutral-600-neutral: #605f5f;
  --colors-neutral-700-neutral: #4e4e4e;
  --colors-neutral-800-neutral: #3e3d3d;
  --colors-neutral-900-neutral: #262626;
  --colors-neutral-base-black: #222;
  --colors-neutral-base-white: #fff;
  --colors-success-100-success: #d7f5e1;
  --colors-success-150-success: #aeebc4;
  --colors-success-200-success: #70e09d;
  --colors-success-300-success: #45cc80;
  --colors-success-400-success: #39b26c;
  --colors-success-50-success: #ebf5ee;
  --colors-success-500-success: #28854e;
  --colors-success-600-success: #1b6137;
  --colors-success-700-success: #114224;
  --colors-success-800-success: #0b331a;
  --colors-success-900-success: #082613;
  --colors-success-base-success: #45cc80;
  --colors-warning-100-warning: #fcecaa;
  --colors-warning-150-warning: #fde376;
  --colors-warning-200-warning: #feda42;
  --colors-warning-300-warning: #ffcf0d;
  --colors-warning-400-warning: #e1b00f;
  --colors-warning-50-warning: #faf4dc;
  --colors-warning-500-warning: #ae830e;
  --colors-warning-600-warning: #79590d;
  --colors-warning-700-warning: #563d0c;
  --colors-warning-800-warning: #34270c;
  --colors-warning-900-warning: #261d0b;
  --colors-warning-base-warning: #ffcf0d;
  /* numbers */
  --scale-none-scale: 0rem;
  --scale-50-scale: 0.4rem;
  --scale-100-scale: 0.8rem;
  --scale-150-scale: 1.2rem;
  --scale-200-scale: 1.6rem;
  --scale-300-scale: 2rem;
  --scale-400-scale: 2.4rem;
  --scale-500-scale: 2.8rem;
  --scale-600-scale: 3.2rem;
  --scale-700-scale: 4rem;
  --scale-800-scale: 4.8rem;
  --scale-900-scale: 4.8rem;
  --scale-1000-scale: 5.6rem;
  --scale-1200-scale: 6.4rem;
  --scale-1300-scale: 8rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --component-color-input-field-background: #3366ff14;
    --control-color-border-100-border: var(--colors-neutral-800-neutral);
    --control-color-border-200-border: var(--colors-neutral-700-neutral);
    --control-color-border-300-border: var(--colors-neutral-600-neutral);
    --control-color-border-400-border: var(--colors-neutral-500-neutral);
    --control-color-border-500-border: var(--colors-neutral-200-neutral);
    --control-color-border-danger-border: var(--colors-danger-300-danger);
    --control-color-border-negative-border: var(--colors-neutral-base-black);
    --control-color-focus-accent-focus: var(--colors-accent-600-accent);
    --control-color-focus-base-focus: var(--colors-accent-300-accent);
    --control-color-state-accent-border-active-state: var(--control-color-border-negative-border);
    --control-color-state-accent-border-default-state: var(--control-color-border-negative-border);
    --control-color-state-accent-border-disabled-state: var(--control-color-border-200-border);
    --control-color-state-accent-border-hover-state: var(--control-color-border-negative-border);
    --control-color-state-accent-container-active-state: var(--colors-accent-150-accent);
    --control-color-state-accent-container-default-state: var(--control-color-surface-accent-surface);
    --control-color-state-accent-container-disabled-state: var(--control-color-surface-accent-surface);
    --control-color-state-accent-container-hover-state: var(--colors-accent-200-accent);
    --control-color-state-accent-font-default-state: var(--control-color-text-negative-text);
    --control-color-state-accent-font-disabled-state: var(--colors-neutral-800-neutral);
    --control-color-state-accent-font-hover-state: var(--colors-neutral-300-neutral);
    --control-color-state-danger-container-active-state: var(--colors-success-400-success);
    --control-color-state-danger-container-default-state: var(--colors-danger-300-danger);
    --control-color-state-danger-container-focus-state: var(--colors-success-300-success);
    --control-color-state-danger-container-hover-state: var(--colors-success-200-success);
    --control-color-state-danger-container-pressed-state: var(--colors-success-400-success);
    --control-color-state-danger-font-default-state: var(--colors-neutral-base-black);
    --control-color-state-danger-font-hover-state: var(--colors-neutral-base-black);
    --control-color-state-default-container-active-state: var(--colors-accent-400-accent);
    --control-color-state-default-container-default-state: var(--colors-neutral-500-neutral);
    --control-color-state-default-container-disabled-state: var(--colors-accent-300-accent);
    --control-color-state-default-container-focus-state: var(--colors-accent-300-accent);
    --control-color-state-default-container-hover-state: var(--colors-accent-300-accent);
    --control-color-state-default-container-pressed-state: var(--colors-accent-300-accent);
    --control-color-state-default-font-active-state: var(--colors-neutral-50-neutral);
    --control-color-state-default-font-default-state: var(--colors-neutral-200-neutral);
    --control-color-state-default-font-disabled-state: var(--colors-neutral-500-neutral);
    --control-color-state-default-font-hover-state: var(--colors-neutral-100-neutral);
    --control-color-state-primary-container-active-state: var(--colors-accent-400-accent);
    --control-color-state-primary-container-default-state: var(--colors-accent-200-accent);
    --control-color-state-primary-container-focus-state: var(--colors-accent-300-accent);
    --control-color-state-primary-container-hover-state: var(--colors-accent-300-accent);
    --control-color-state-primary-container-pressed-state: var(--colors-accent-400-accent);
    --control-color-state-primary-font-default-state: var(--colors-neutral-base-black);
    --control-color-state-primary-font-hover-state: var(--colors-neutral-base-black);
    --control-color-state-success-container-active-state: var(--colors-success-400-success);
    --control-color-state-success-container-default-state: var(--colors-success-300-success);
    --control-color-state-success-container-focus-state: var(--colors-success-300-success);
    --control-color-state-success-container-hover-state: var(--colors-success-200-success);
    --control-color-state-success-container-pressed-state: var(--colors-success-400-success);
    --control-color-state-success-font-default-state: var(--colors-neutral-base-black);
    --control-color-state-success-font-hover-state: var(--colors-neutral-base-black);
    --control-color-state-warning-container-active-state: var(--colors-success-400-success);
    --control-color-state-warning-container-default-state: var(--colors-warning-200-warning);
    --control-color-state-warning-container-focus-state: var(--colors-success-300-success);
    --control-color-state-warning-container-hover-state: var(--colors-success-200-success);
    --control-color-state-warning-container-pressed-state: var(--colors-success-400-success);
    --control-color-state-warning-font-default-state: var(--colors-neutral-base-black);
    --control-color-state-warning-font-hover-state: var(--colors-neutral-base-black);
    --control-color-surface-100-accent-surface: #3366ff52;
    --control-color-surface-100-surface: var(--colors-neutral-800-neutral);
    --control-color-surface-200-surface: var(--colors-neutral-900-neutral);
    --control-color-surface-300-surface: var(--colors-neutral-600-neutral);
    --control-color-surface-400-surface: var(--colors-neutral-500-neutral);
    --control-color-surface-accent-surface: var(--colors-accent-300-accent);
    --control-color-surface-base-surface: var(--colors-neutral-base-black);
    --control-color-surface-danger-surface: var(--colors-danger-300-danger);
    --control-color-surface-nav-surface: var(--colors-neutral-base-black);
    --control-color-surface-success-surface: var(--colors-success-400-success);
    --control-color-text-100-text: var(--colors-neutral-400-neutral);
    --control-color-text-200-text: var(--colors-neutral-200-neutral);
    --control-color-text-accent-text: var(--colors-accent-200-accent);
    --control-color-text-base-text: var(--colors-neutral-50-neutral);
    --control-color-text-danger-text: var(--colors-danger-200-danger);
    --control-color-text-negative-text: var(--colors-neutral-base-black);
    --control-color-visuals-background: var(--colors-accent-300-accent);
    --control-color-visuals-clickable-area: var(--colors-warning-700-warning);
    --control-color-visuals-component-part-100: var(--colors-accent-200-accent);
    --control-color-visuals-component-text: var(--colors-neutral-100-neutral);
    --control-color-visuals-guide-clickable-area: var(--colors-warning-400-warning);
    --control-color-visuals-guide-fill: var(--colors-accent-500-accent);
    --control-color-visuals-guide-text: var(--colors-neutral-base-white);
    --control-color-code-text-neutral: var(--sl-color-palette-neutral-100);
    --control-color-code-text-accent: var(--sl-color-palette-accent-200);
    --control-color-code-text-danger: var(--sl-color-palette-danger-200);
    --control-color-code-text-warning: var(--sl-color-palette-warning-200);
    --control-color-code-text-success: var(--sl-color-palette-success-200);
  }
}
@media (prefers-color-scheme: light) {
  :root {
    /* colors */
    --component-color-input-field-background: #3366ff0a;
    --control-color-border-100-border: var(--colors-neutral-100-neutral);
    --control-color-border-200-border: var(--colors-neutral-150-neutral);
    --control-color-border-300-border: var(--colors-neutral-300-neutral);
    --control-color-border-400-border: var(--colors-neutral-400-neutral);
    --control-color-border-500-border: var(--colors-neutral-700-neutral);
    --control-color-border-danger-border: var(--colors-base-danger);
    --control-color-border-negative-border: var(--colors-neutral-base-white);
    --control-color-focus-accent-focus: var(--colors-accent-200-accent);
    --control-color-focus-base-focus: var(--colors-accent-base-accent);
    --control-color-state-accent-border-active-state: var(--control-color-border-negative-border);
    --control-color-state-accent-border-default-state: var(--control-color-border-negative-border);
    --control-color-state-accent-border-disabled-state: var(--colors-accent-200-accent);
    --control-color-state-accent-border-hover-state: var(--control-color-border-negative-border);
    --control-color-state-accent-container-active-state: var(--colors-accent-600-accent);
    --control-color-state-accent-container-default-state: var(--control-color-surface-accent-surface);
    --control-color-state-accent-container-disabled-state: var(--colors-accent-base-accent);
    --control-color-state-accent-container-hover-state: var(--colors-accent-500-accent);
    --control-color-state-accent-font-default-state: var(--control-color-text-negative-text);
    --control-color-state-accent-font-disabled-state: var(--colors-accent-200-accent);
    --control-color-state-accent-font-hover-state: var(--colors-neutral-600-neutral);
    --control-color-state-danger-container-active-state: var(--colors-success-400-success);
    --control-color-state-danger-container-default-state: var(--colors-danger-300-danger);
    --control-color-state-danger-container-focus-state: var(--colors-success-300-success);
    --control-color-state-danger-container-hover-state: var(--colors-success-200-success);
    --control-color-state-danger-container-pressed-state: var(--colors-success-400-success);
    --control-color-state-danger-font-default-state: var(--colors-neutral-base-black);
    --control-color-state-danger-font-hover-state: var(--colors-neutral-base-black);
    --control-color-state-default-container-active-state: var(--colors-neutral-400-neutral);
    --control-color-state-default-container-default-state: var(--colors-neutral-200-neutral);
    --control-color-state-default-container-disabled-state: var(--colors-neutral-150-neutral);
    --control-color-state-default-container-focus-state: var(--colors-neutral-200-neutral);
    --control-color-state-default-container-hover-state: var(--colors-neutral-300-neutral);
    --control-color-state-default-container-pressed-state: var(--colors-neutral-400-neutral);
    --control-color-state-default-font-active-state: var(--colors-neutral-700-neutral);
    --control-color-state-default-font-default-state: var(--colors-neutral-500-neutral);
    --control-color-state-default-font-disabled-state: var(--colors-neutral-500-neutral);
    --control-color-state-default-font-hover-state: var(--colors-neutral-600-neutral);
    --control-color-state-primary-container-active-state: var(--colors-accent-600-accent);
    --control-color-state-primary-container-default-state: var(--colors-accent-base-accent);
    --control-color-state-primary-container-focus-state: var(--colors-accent-base-accent);
    --control-color-state-primary-container-hover-state: var(--colors-accent-500-accent);
    --control-color-state-primary-container-pressed-state: var(--colors-accent-600-accent);
    --control-color-state-primary-font-default-state: var(--colors-neutral-base-white);
    --control-color-state-primary-font-hover-state: var(--colors-neutral-base-white);
    --control-color-state-success-container-active-state: var(--colors-success-400-success);
    --control-color-state-success-container-default-state: var(--colors-success-300-success);
    --control-color-state-success-container-focus-state: var(--colors-success-300-success);
    --control-color-state-success-container-hover-state: var(--colors-success-200-success);
    --control-color-state-success-container-pressed-state: var(--colors-success-400-success);
    --control-color-state-success-font-default-state: var(--colors-neutral-base-black);
    --control-color-state-success-font-hover-state: var(--colors-neutral-base-black);
    --control-color-state-warning-container-active-state: var(--colors-success-400-success);
    --control-color-state-warning-container-default-state: var(--colors-warning-300-warning);
    --control-color-state-warning-container-focus-state: var(--colors-success-300-success);
    --control-color-state-warning-container-hover-state: var(--colors-success-200-success);
    --control-color-state-warning-container-pressed-state: var(--colors-success-400-success);
    --control-color-state-warning-font-default-state: var(--colors-neutral-base-black);
    --control-color-state-warning-font-hover-state: var(--colors-neutral-base-black);
    --control-color-surface-100-accent-surface: var(--colors-accent-50-accent);
    --control-color-surface-100-surface: var(--colors-neutral-50-neutral);
    --control-color-surface-200-surface: var(--colors-neutral-50-neutral);
    --control-color-surface-300-surface: var(--colors-neutral-150-neutral);
    --control-color-surface-400-surface: var(--colors-neutral-200-neutral);
    --control-color-surface-accent-surface: var(--colors-accent-base-accent);
    --control-color-surface-base-surface: var(--colors-neutral-base-white);
    --control-color-surface-danger-surface: var(--colors-danger-base-danger);
    --control-color-surface-nav-surface: var(--colors-neutral-50-neutral);
    --control-color-surface-success-surface: var(--colors-success-400-success);
    --control-color-text-100-text: var(--colors-neutral-400-neutral);
    --control-color-text-200-text: var(--colors-neutral-500-neutral);
    --control-color-text-accent-text: var(--colors-accent-base-accent);
    --control-color-text-base-text: var(--colors-neutral-base-black);
    --control-color-text-danger-text: var(--colors-danger-600-danger);
    --control-color-text-negative-text: var(--colors-neutral-50-neutral);
    --control-color-visuals-background: var(--colors-accent-200-accent);
    --control-color-visuals-clickable-area: var(--colors-warning-100-warning);
    --control-color-visuals-component-part-100: var(--colors-accent-200-accent);
    --control-color-visuals-component-text: var(--colors-neutral-800-neutral);
    --control-color-visuals-guide-clickable-area: var(--colors-200-warnng);
    --control-color-visuals-guide-fill: var(--colors-accent-base-accent);
    --control-color-visuals-guide-text: var(--colors-neutral-base-white);
    --control-color-code-text-neutral: var(--sl-color-palette-neutral-500);
    --control-color-code-text-accent: var(--sl-color-palette-accent-500);
    --control-color-code-text-danger: var(--sl-color-palette-danger-500);
    --control-color-code-text-warning: var(--sl-color-palette-warning-500);
    --control-color-code-text-success: var(--sl-color-palette-success-500);
  }
}
section.ds-cards {
  display: grid;
  gap: 2.4rem;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 600px) {
  section.ds-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
section.ds-cards figure {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  position: relative;
}
section.ds-cards svg {
  border-radius: 0.2rem;
  box-sizing: content-box;
  margin: 0;
}
section.ds-cards h3 {
  margin-top: 0;
}
section.ds-cards .ds-cards .ds-example {
  border-radius: 0;
}

@media screen and (min-width: 600px) {
  section.ds-cards-horizontal {
    grid-template-columns: 1fr;
  }
  section.ds-cards-horizontal figure {
    flex-direction: row;
  }
  section.ds-cards-horizontal svg {
    flex: 0 0 30%;
  }
}
.ds-cards__do svg {
  box-shadow: 0 0.4rem 0 0 var(--control-color-surface-success-surface);
}

.ds-cards__dont svg {
  box-shadow: 0 0.4rem 0 0 var(--control-color-surface-danger-surface);
}

.ds-code {
  margin: 1.6rem 0 2.4rem;
  position: relative;
}
.ds-code pre {
  border: 1px solid var(--code-border);
  border-block-start: 0;
  border-radius: 0.6rem;
  margin: 0;
}

.ds-code__copy-button {
  inset-block-start: 1.6rem;
  inset-inline-end: 1.6rem;
  position: absolute;
}

.ds-example {
  align-items: center;
  background: var(--control-color-surface-200-surface);
  border: 1px solid var(--code-border);
  border-radius: 0.6rem 0.6rem 0 0;
  display: flex;
  gap: 1rem;
  justify-content: center;
  min-block-size: 16rem;
  padding: 1.6rem;
  position: relative;
}

.ds-example__examples-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  margin: 2.4rem 0;
}
@media screen and (min-width: 900px) {
  .ds-example__examples-wrapper {
    flex-direction: row;
  }
}

.ds-cards .ds-example {
  background: var(--control-color-surface-100-surface);
  border-radius: 0;
}

.ds-example + .ds-code {
  margin-block-start: 0;
}
.ds-example + .ds-code pre {
  border-radius: 0 0 0.6rem 0.6rem;
}

.ds-example sl-icon[name=fas-hand-back-point-up] {
  --_icon-container-size: 2rem;
  background-color: var(--control-color-surface-400-surface);
  border-radius: 0.2rem;
  color: var(--control-color-surface-100-surface);
  inset-block-start: 0.8rem;
  inset-inline-end: 0.8rem;
  position: absolute;
}

.ds-example__code-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin: 2.4rem 0;
}
@media screen and (min-width: 600px) {
  .ds-example__code-wrapper {
    flex-direction: row;
  }
}

code {
  background-color: var(--table-code-background);
  border-radius: 0.6rem;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  font-family: source-code-pro, monospace;
  font-size: 1.2rem;
  line-height: 1rem;
  padding: 0.2rem 0.8rem;
}

code[class*=language-] {
  background: none;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: var(--text-color);
  display: block;
  font-family: source-code-pro, monospace;
  font-size: 1.2rem;
  hyphens: none;
  line-height: 1.5;
  padding: 2.4rem 2rem;
  tab-size: 4;
  text-align: start;
  text-shadow: none;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
}

pre[class*=language-] {
  overflow: auto;
  padding: 0;
}

:not(pre) > code[class*=language-],
pre[class*=language-] {
  background: var(--copy-button-background);
}

.ds-example + .ds-code > code[class*=language-],
.ds-example + .ds-code pre[class*=language-] {
  background: var(--background-color);
}

:not(pre) > code[class*=language-] {
  border-radius: 0.3rem;
  padding: 0.1rem;
  white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--control-color-code-text-neutral);
}

.token.punctuation {
  color: var(--text-color);
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
  color: var(--control-color-code-text-danger);
}

.token.keyword,
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable,
.token.boolean,
.token.number {
  color: var(--control-color-code-text-success);
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: var(--control-color-code-text-accent);
}

.token.atrule,
.token.attr-value,
.token.function {
  color: var(--text-color);
}

.token.regex,
.token.important {
  color: var(--control-color-code-text-warning);
}

.token.important,
.token.bold {
  font-weight: 700;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

@media screen and (-ms-high-contrast: active) {
  code[class*=language-],
  pre[class*=language-] {
    background: Canvas;
    color: CanvasText;
  }
  :not(pre) > code[class*=language-],
  pre[class*=language-] {
    background: Canvas;
  }
  .token.important {
    background: highlight;
    color: canvas;
    font-weight: normal;
  }
  .token.atrule,
  .token.attr-value,
  .token.function,
  .token.keyword,
  .token.operator,
  .token.selector {
    font-weight: bold;
  }
  .token.attr-value,
  .token.comment,
  .token.doctype,
  .token.function,
  .token.keyword,
  .token.operator,
  .token.property,
  .token.string {
    color: highlight;
  }
  .token.attr-value,
  .token.url {
    font-weight: normal;
  }
}
.ds-table {
  border-collapse: collapse;
  color: var(--table-text-color);
  font-size: 1.6rem;
  inline-size: 100%;
  line-height: 2.4rem;
  margin-block-start: var(--scale-400-scale);
}
.ds-table thead {
  line-height: 1.4rem;
  padding: 0.8rem 1.6rem;
  text-align: start;
}
.ds-table th {
  font-weight: 600;
}
.ds-table th,
.ds-table td {
  padding: 0.8rem 0 0.8rem 2.4rem;
}
.ds-table tbody {
  /* stylelint-disable-next-line max-nesting-depth */
}
.ds-table tbody tr {
  border-block-start: 1px solid var(--table-separator);
  position: relative;
}
.ds-table tbody {
  /* stylelint-disable-next-line max-nesting-depth */
}
.ds-table tbody td {
  line-height: 2.4rem;
  padding: 1.6rem 0 1.6rem 2.4rem;
}
.ds-table tbody {
  /* stylelint-disable-next-line max-nesting-depth */
}
.ds-table tbody code {
  background-color: var(--table-code-background);
  border-radius: 0.6rem;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  font-family: source-code-pro, monospace;
  font-size: 1.2rem;
  line-height: 1.6rem;
  overflow-wrap: break-word;
  padding: 0.4rem 1.2rem;
  text-wrap: balance;
}
.ds-table tbody {
  /* stylelint-disable-next-line max-nesting-depth, selector-max-compound-selectors */
}
.ds-table tbody code > code {
  padding: 0;
  word-break: break-word;
}
.ds-table sl-icon {
  fill: var(--table-text-color);
  margin-inline-start: 0.2rem;
}

.ds-table-component-description {
  margin-block-start: 2.4rem;
}

.ds-table-wrapper {
  margin: 2.4rem 0;
  overflow-x: auto;
}

.ds-table__type {
  max-inline-size: 15rem;
}

.ds-table__description {
  min-inline-size: 18rem;
}

.ds-table-align-top td {
  vertical-align: top;
}

.ds-tabs__tab-content {
  display: block;
}
.ds-tabs__tab-content .ds-tabs__tab-container {
  display: flex;
  flex-direction: column;
  gap: var(--scale-1200-scale, 6.4rem);
}
.ds-tabs__tab-content h3 {
  margin-block-start: var(--scale-400-scale);
}
.ds-tabs__tab-content li {
  font-size: 1.6rem;
  margin-block: 0.8rem;
}
.ds-tabs__tab-content svg,
.ds-tabs__tab-content .ds-cards {
  margin: var(--scale-400-scale) 0 0;
}
.ds-tabs__tab-content section[id]:not(:last-of-type),
.ds-tabs__tab-content ds-install-info {
  border-block-end: 1px solid var(--control-color-border-200-border);
  padding-block-end: var(--scale-1200-scale, 6.4rem);
}

.ds-tabs__tab-content--hidden {
  display: none;
}

sl-tab-group.ds-tab-group {
  padding-block-start: 2.4rem;
}

sl-tab-group.ds-tab-group::part(container) {
  display: block;
  inset-block-start: 7.8rem;
  position: sticky;
  z-index: 2;
}

.sticky-tabs.ds-tab-group::part(container) {
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
  inline-size: auto;
  margin: 0 -2.4rem;
}

.sticky-tabs.ds-tab-group::part(tablist) {
  margin-inline-start: 2.4rem;
}

@media screen and (min-width: 900px) {
  sl-tab-group.ds-tab-group {
    padding-block-start: 2.4rem;
  }
  sl-tab-group.ds-tab-group::part(container) {
    inset-block-start: 4rem;
  }
  .sticky-tabs.ds-tab-group::part(container) {
    inline-size: auto;
    margin-inline: -2.4rem;
  }
  .sticky-tabs.ds-tab-group::part(tablist) {
    margin-inline-start: 2.4rem;
  }
}
@media screen and (min-width: 1200px) {
  .ds-tabs__tab-content {
    display: grid;
    grid-column-gap: 7.2rem;
    grid-template-columns: minmax(20px, 6fr) 1fr;
    inline-size: 100%;
  }
  sl-tab-group.ds-tab-group::part(container) {
    border-block-end: transparent;
    display: grid;
    gap: 7.2rem;
    grid-template-columns: 6fr 1fr;
    inline-size: 100%;
  }
  sl-tab-group.ds-tab-group::part(wrapper) {
    border-block-end: var(--sl-size-borderWidth-default) solid var(--sl-color-border-plain);
  }
  .sticky-tabs.ds-tab-group::part(container) {
    border-block-end: var(--sl-size-borderWidth-default) solid var(--sl-color-border-plain);
    inline-size: auto;
    margin-inline: -7.2rem -2.4rem;
  }
  .sticky-tabs.ds-tab-group::part(wrapper) {
    border-block-end: none;
  }
  .sticky-tabs.ds-tab-group::part(tablist) {
    margin-inline-start: 7.2rem;
  }
}
@media screen and (min-width: 1600px) {
  .ds-tabs__tab-content {
    display: grid;
    grid-column-gap: 7.2rem;
    grid-template-columns: 88rem 1fr;
  }
  sl-tab-group.ds-tab-group::part(container) {
    border-block-end: var(--sl-size-borderWidth-default) solid var(--sl-color-border-plain);
    display: flex;
    inline-size: 88rem;
  }
  sl-tab-group.ds-tab-group::part(wrapper) {
    border-block-end: none;
  }
}
.ds-tab-group .fade-container {
  margin-inline-start: 7.2rem;
}

sl-tab-group.ds-tab-group::part(panels) {
  padding-block: 4rem;
  padding-inline: 0;
}

.ds-tokens__heading-wrapper {
  background-color: var(--heading-background);
  border-radius: 0.6rem;
  color: var(--heading-color);
  padding: 4rem;
}

.ds-tokens__heading-description {
  font-size: 1.8rem;
  line-height: 2.4rem;
  margin-top: 1.6rem;
}

@media screen and (min-width: 1200px) {
  .ds-tokens__main-heading {
    display: grid;
    grid-column-gap: 7.2rem;
    grid-template-columns: 6fr 1fr;
  }
}
@media screen and (min-width: 1600px) {
  .ds-tokens__main-heading {
    grid-template-columns: 88rem 1fr;
  }
}
@media screen and (min-width: 1200px) {
  .ds-tokens__wrapper {
    width: calc(87.5% - 7.2rem);
  }
}
.ds-tokens {
  margin: 2.4rem 0;
}
.ds-tokens code {
  text-transform: lowercase;
}

.ds-tokens__heading {
  margin-bottom: 2.4rem;
}

.ds-tokens__color {
  border: 1px solid var(--vertical-slider-background);
  border-radius: 50%;
  height: 8rem;
  margin-bottom: 0.8rem;
  width: 8rem;
}

.ds-tokens__text {
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: 0.8rem;
}

.ds-tokens__border {
  background-color: var(--picture-background);
  border: 1px solid var(--heading-background);
  height: 8rem;
  margin-bottom: 0.8rem;
  width: 8rem;
}

.ds-tokens__border-example {
  align-items: center;
  display: flex;
  flex-direction: column;
  width: fit-content;
}

.ds-tokens__space {
  background-color: var(--ds-color-light-grey);
  height: 8rem;
  margin-bottom: 0.8rem;
  width: 8rem;
}

.ds-tokens__space-example,
.ds-tokens__opacity-example {
  align-items: center;
  display: flex;
  flex-direction: column;
  min-width: 6rem;
  width: fit-content;
}

.ds-tokens__opacity {
  background-color: var(--heading-background);
  height: 6rem;
  margin-bottom: 0.8rem;
  width: 6rem;
}

.ds-tokens__size {
  background-color: var(--ds-color-light-grey);
  margin-bottom: 0.8rem;
}

.ds-tokens__size-example {
  align-items: center;
  display: flex;
  flex-direction: column;
  min-width: 7.2rem;
  width: fit-content;
}

.ds-tokens__description {
  text-transform: capitalize;
}

.ds-tokens__opacity-triangles {
  background-color: var(--picture-background);
  border-radius: 0.3rem;
  display: inline-flex;
  margin-bottom: 0.8rem;
  overflow: hidden;
}

.ds-tokens__triangle {
  border-color: var(--heading-background) transparent transparent transparent;
  border-style: solid;
  border-width: 6rem 6rem 0 0;
  height: 0;
  width: 0;
}

.ds-container {
  animation: 100ms fade-in;
  background-color: var(--background-color);
  inline-size: 100%;
  margin-inline-start: 0;
  padding: 8.8rem 2.4rem 0;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-scroll-behavior: smooth;
  scroll-behavior: smooth;
  transform: translateX(0);
  transition: transform 300ms, background 300ms ease-in-out, opacity 300ms;
}
@media screen and (min-width: 900px) {
  .ds-container {
    inline-size: calc(100% - 28rem);
    padding: 3.2rem 2.4rem 0;
    transform: translateX(28rem);
    transition: none;
  }
}
@media screen and (min-width: 1200px) {
  .ds-container {
    padding: 3.2rem 2.4rem 0 7.2rem;
  }
}

.ds-container .ds-homepage-wrapper {
  align-items: start;
  display: grid;
  grid-auto-columns: 100%;
  grid-template-rows: max-content max-content 1fr max-content;
  min-block-size: 100%;
  min-inline-size: 100%;
}

.ds-subpage-section__wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--scale-1200-scale, 6.4rem);
  overflow: hidden;
}
.ds-subpage-section__wrapper section:not(:last-of-type) {
  border-block-end: 1px solid var(--control-color-border-200-border);
  padding-block-end: var(--scale-1200-scale, 6.4rem);
}
.ds-subpage-section__wrapper h3 {
  margin-block-start: var(--scale-400-scale);
}
.ds-subpage-section__wrapper li {
  font-size: 1.6rem;
  margin-block: 0.8rem;
}

*:where(.ds-subpage-section, .ds-tabs__tab-container) a {
  color: var(--link-color);
  cursor: pointer;
  transition: transform 300ms;
}
*:where(.ds-subpage-section, .ds-tabs__tab-container) a:hover {
  color: var(--link-hover-color);
}
*:where(.ds-subpage-section, .ds-tabs__tab-container) a:active {
  color: var(--link-active-color);
}
*:where(.ds-subpage-section, .ds-tabs__tab-container) a:visited {
  color: var(--link-visited-color);
}
*:where(.ds-subpage-section, .ds-tabs__tab-container) a.header-anchor {
  color: var(--font-color);
}

a.header-anchor {
  color: inherit;
  font-size: inherit;
  text-decoration: none;
}

.ds-subpage-section {
  display: grid;
  grid-column-gap: 7.2rem;
  grid-template-columns: 1fr;
  margin: 4rem 0;
}
@media screen and (min-width: 1200px) {
  .ds-subpage-section {
    grid-template-columns: 6fr 1fr;
  }
}
@media screen and (min-width: 1600px) {
  .ds-subpage-section {
    grid-template-columns: 88rem 1fr;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
img {
  max-inline-size: 100%;
}

:root {
  --transition-timing: 300ms;
  --short-transition-timing: 200ms;
}

.ds-top-navigation {
  background: var(--top-navbar-color);
  display: flex;
  inline-size: 100vw;
  padding: 3.2rem 2.4rem 1.4rem;
  position: fixed;
  z-index: 1;
}

.ds-top-navigation--sticky:not(.sticky) {
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
}

.sticky {
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
}
.sticky .ds-top-navigation__logo {
  display: none;
}

.has-tabs {
  box-shadow: none;
}

.ds-top-navigation--not-sticky {
  box-shadow: none;
}

.ds-sidebar {
  background: var(--second-background-color);
  block-size: 100%;
  display: flex;
  flex-direction: column;
  inline-size: 28rem;
  justify-content: space-between;
  overflow-y: auto;
  position: fixed;
  transform: translateX(-28rem);
  transition: transform 400ms;
  z-index: 1;
}

.ds-sidebar__top-section {
  align-items: center;
  display: flex;
  padding: 3.2rem 2.4rem 2.4rem;
}

.ds-sidebar-nav__close-button {
  aspect-ratio: 1;
  background: transparent var(--close-icon) no-repeat center;
  background-size: cover;
  block-size: 3.2rem;
  border: 0;
  inline-size: 3.2rem;
  opacity: 0.8;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-transition: background-color var(--transition-timing) ease-in, background-image 1ms;
  transition: background-color var(--transition-timing) ease-in;
  z-index: 3;
}
.ds-sidebar-nav__close-button:hover {
  background: var(--menu-button-hover) var(--close-icon) no-repeat center;
  border-radius: 4px;
}
.ds-sidebar-nav__close-button:focus-visible {
  border-radius: 4px;
}

.ds-sidebar__bottom-section {
  position: relative;
}

.ds-sidebar__help {
  background-image: var(--help-icon);
  background-position: left;
  background-repeat: no-repeat;
  background-size: 2rem;
  color: rgb(var(--help-color) 0.64);
  font-size: 1.6rem;
  inset-block-end: 1.8rem;
  line-height: 3.4rem;
  margin-inline-start: 4rem;
  padding-inline-start: 2.4rem;
  position: absolute;
  text-decoration: none;
  transition: background var(--transition-timing), color var(--transition-timing);
}
.ds-sidebar__help:hover {
  background-image: var(--help-icon-hover);
  color: rgb(var(--help-color) 1);
}

.ds-sidebar--opened {
  inset-inline-start: 0;
  transform: translateX(0);
}

.ds-sidebar--closed {
  transform: translateX(-28rem);
}
.ds-sidebar--closed .ds-sidebar-nav,
.ds-sidebar--closed .ds-sidebar__help {
  visibility: hidden;
}

.ds-menu--opened::before {
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background-color: var(--filter-color);
  content: "";
  inset: 0;
  position: absolute;
}

.ds-sidebar--opened + .ds-container::before {
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background-color: var(--filter-color);
  content: "";
  inset: 7.8rem 0;
  position: absolute;
  z-index: 1;
}

.ds-top-navigation__hamburger {
  aspect-ratio: 1;
  background-color: transparent;
  background-image: var(--hamburger-icon);
  background-position: left;
  background-repeat: no-repeat;
  background-size: contain;
  block-size: 3.2rem;
  border: 0;
  cursor: pointer;
  inline-size: 3.2rem;
  margin-inline-end: 0.8rem;
  transition: var(--transition-timing) linear;
}
.ds-top-navigation__hamburger:hover {
  background-color: var(--menu-button-hover);
  border-radius: 4px;
}
.ds-top-navigation__hamburger:focus-visible {
  border-radius: 4px;
}

.ds-top-navigation__component-name {
  animation: append-animate var(--short-transition-timing) linear;
  color: var(--table-text-color);
  font-size: 2rem;
  line-height: 3.2rem;
}

@keyframes append-animate {
  from {
    opacity: 0;
    transform: translateY(-1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes append-animate-up {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ds-top-navigation__logo {
  animation: append-animate-up var(--short-transition-timing) linear;
  background-image: var(--logo);
  background-position: left;
  background-repeat: no-repeat;
  background-size: contain;
  block-size: 3.2rem;
  inline-size: 100%;
  margin: auto;
}
.ds-top-navigation__logo:focus-visible {
  border-radius: 0.6rem;
  box-shadow: var(--navigation-focus-box-shadow);
  outline: none;
}

.ds-sidebar-nav {
  background: var(--second-background-color);
  box-shadow: var(--sidebar-border);
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  margin-block-end: 6.4rem;
}
.ds-sidebar-nav .ds-sublist {
  display: none;
  list-style: none;
  padding: 0;
}
.ds-sidebar-nav .ds-sublist--active {
  display: block;
}
.ds-sidebar-nav .ds-menu--expanded {
  animation: slide-down 200ms ease-in-out forwards;
  transform-origin: top center;
}

.ds-sidebar-nav__search {
  background-color: var(--input-menu-background);
  background-image: var(--search-icon);
  background-position: left;
  background-position-x: 1.6rem;
  background-repeat: no-repeat;
  background-size: 1.6rem;
  block-size: 4rem;
  border: 1px solid rgb(var(--ds-color-light-grey) 0.6);
  border-radius: 0.6rem;
  color: var(--search-color);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2rem;
  margin: 0 2.4rem 2.4rem;
  padding: 0.8rem 1.6rem 0.8rem 4rem;
  transition: box-shadow 200ms linear, background-color var(--transition-timing) linear;
}
.ds-sidebar-nav__search::placeholder {
  color: var(--search-color);
}
.ds-sidebar-nav__search:focus-visible {
  border-radius: 0.6rem;
  box-shadow: 0 0 0 2px var(--ds-color-blue);
  outline: none;
}
.ds-sidebar-nav__search:hover {
  background-color: var(--input-menu-background--hover);
}

.ds-sidebar-nav__no-results,
.ds-sidebar-nav__results {
  display: none;
}
.ds-sidebar-nav__no-results mark,
.ds-sidebar-nav__results mark {
  background-color: var(--highlight-color);
  border-radius: 0.3rem;
}

.ds-sidebar-nav__result-list {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-block-end: 12px;
  position: relative;
}

.ds-sidebar-nav__link {
  align-items: center;
  color: var(--menu-font-color);
  display: flex;
  font-weight: 600;
  inline-size: 100%;
  justify-content: space-between;
  line-height: 3.4rem;
  padding: 0.3rem 3.2rem;
  transition: color 200ms linear;
}

.ds-sublist__link {
  align-items: center;
  color: var(--menu-font-color);
  display: flex;
  inline-size: 100%;
  justify-content: space-between;
  line-height: 3.2rem;
  padding: 0.8rem 3.2rem 0.8rem 4rem;
  transition: color 200ms linear;
}

.ds-sublist__link:active {
  transition: none;
}

.ds-sidebar-nav__link:active,
.ds-sublist__link:active:not(.ds-sublist__link--disabled) {
  color: var(--highlight-color);
}

.ds-sidebar-nav__link:hover,
.ds-sublist__link:hover:not(.ds-sublist__link--disabled) {
  color: var(--highlight-color);
  opacity: 1;
}
.ds-sidebar-nav__link:hover .ds-sidebar-nav__arrow,
.ds-sublist__link:hover:not(.ds-sublist__link--disabled) .ds-sidebar-nav__arrow {
  filter: var(--angle-active);
}

.ds-sidebar-nav__link--active::before {
  background: var(--highlight-color);
  block-size: 4rem;
  content: "";
  inline-size: 4px;
  inset-block-start: 0;
  inset-inline-start: 0;
  position: absolute;
}

.ds-sidebar-nav__link,
.ds-sublist__link {
  border-radius: 0.6rem;
  color: var(--menu-font-color);
  font-size: 1.6rem;
  text-decoration: none;
}
.ds-sidebar-nav__link:focus-visible,
.ds-sublist__link:focus-visible {
  box-shadow: inset var(--navigation-focus-box-shadow);
  outline: none;
}

.ds-sublist__link--disabled {
  color: var(--badge-color);
}

.ds-sidebar-nav__link--active,
.ds-sublist__link--active {
  color: var(--highlight-color);
}

.ds-sublist__link sl-badge {
  font-size: 1.2rem;
  line-height: 1.6rem;
}

.ds-sidebar-nav__list {
  color: var(--menu-font-color);
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.ds-sidebar-nav__list-item {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-block-end: 0.8rem;
  position: relative;
}

.ds-sidebar-nav__logo {
  background-image: var(--logo);
  background-position: left;
  background-repeat: no-repeat;
  background-size: contain;
  block-size: 3.2rem;
  inline-size: 100%;
  margin: auto 0.8rem;
}
.ds-sidebar-nav__logo:focus-visible {
  border-radius: 0.6rem;
  box-shadow: var(--navigation-focus-box-shadow);
  outline: none;
}

.ds-sidebar-nav__arrow {
  background-image: var(--angle);
  background-position: left;
  background-repeat: no-repeat;
  block-size: 3.4rem;
  display: inline-flex;
  inline-size: 0.8rem;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-transition: transform var(--transition-timing) ease-in-out;
  transition: transform var(--transition-timing) ease-in-out;
}

.ds-sidebar-nav__arrow--active {
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-filter: var(--angle-active);
  filter: var(--angle-active);
  transform: rotate(90deg);
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-transition: transform var(--transition-timing) ease-in-out;
  transition: transform var(--transition-timing) ease-in-out;
}

.ds-sidebar-nav--searching .ds-sidebar-nav__results {
  display: block;
  list-style-type: none;
  margin: 1.6rem;
  overflow-y: auto;
  padding: 0.4rem;
  transition: background var(--transition-timing) ease-in-out;
  /* stylelint-disable-next-line max-nesting-depth */
}
.ds-sidebar-nav--searching .ds-sidebar-nav__results * {
  color: var(--menu-font-color);
  font-size: 1.4rem;
}
.ds-sidebar-nav--searching .ds-sidebar-nav__list {
  display: none;
}
.ds-sidebar-nav--searching .ds-sidebar-nav__no-results {
  color: var(--menu-font-color);
  margin: 1.6rem 0 6rem 1.6rem;
  padding: 0.4rem;
}

.ds-sidebar-nav__results::-webkit-scrollbar {
  inline-size: 1.2rem;
}

.ds-sidebar-nav__results::-webkit-scrollbar-track {
  background: var(--second-background-color);
  transition: background var(--transition-timing) ease-in-out;
}

.ds-sidebar-nav__results::-webkit-scrollbar-thumb {
  background-color: var(--menu-second-color);
  border: 2px solid var(--second-background-color);
  border-radius: 2rem;
}

.ds-sidebar-nav__search[type=search]::-webkit-search-cancel-button {
  display: none;
}

@media screen and (min-width: 900px) {
  .ds-menu--opened::before {
    content: none;
  }
  .ds-top-navigation {
    display: none;
  }
  .sticky {
    display: block;
    padding: 3.2rem 0 1.4rem;
  }
  .has-tabs {
    padding: 0.8rem 0 0;
  }
  .ds-top-navigation__hamburger {
    display: none;
  }
  .ds-top-navigation__component-name {
    padding-inline-start: 2.4rem;
  }
  .ds-sidebar {
    box-shadow: var(--sidebar-border);
    inset-inline-start: 0;
    transform: translateX(0);
    transition: transform 400ms;
  }
  .ds-sidebar--closed .ds-sidebar-nav,
  .ds-sidebar--closed .ds-sidebar__help {
    visibility: visible;
  }
  .ds-sidebar-nav__close-button {
    display: none;
  }
  .ds-sidebar--opened + .ds-container::before {
    content: none;
  }
}
@media screen and (min-width: 900px) {
  .ds-top-navigation__component-name {
    padding-inline-start: 30.4rem;
  }
}
@media screen and (min-width: 1200px) {
  .ds-top-navigation__component-name {
    padding-inline-start: 35.2rem;
  }
}
@keyframes slide-down {
  0% {
    opacity: 0;
    transform: translateY(-2rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@font-face {
  font-family: the-message;
  font-style: normal;
  font-weight: 400;
  src: url("./../../assets/fonts/the-message-regular.woff2") format("woff2");
}
@font-face {
  font-family: the-message;
  font-style: normal;
  font-weight: 600;
  src: url("./../../assets/fonts/the-message-demibold.woff2") format("woff2");
}
@font-face {
  font-family: the-message;
  font-style: normal;
  font-weight: 700;
  src: url("./../../assets/fonts/the-message-bold.woff2") format("woff2");
}
body,
button {
  font-family: source-sans-pro, sans-serif;
  --typography-body: 1.6rem/2.4rem "source-sans-pro", sans-serif;
  --typography-h2: 600 2.4rem/1 "the-message", sans-serif;
  --typography-h2-margin-block: var(--scale-none-scale) var(--scale-150-scale);
}

h1,
h2,
h3,
h4,
h5,
.ds-heading-1,
.ds-heading-2,
.ds-heading-3 {
  font-family: the-message, sans-serif;
  font-weight: 600;
}

h1,
.ds-heading-1 {
  font-size: 2.4rem;
  line-height: 1;
}

h2,
.ds-heading-2 {
  font: var(--typography-h2);
  margin-block: var(--typography-h2-margin-block);
}

h3,
.ds-heading-3 {
  font-size: 1.6rem;
  margin-block-end: var(--scale-100-scale);
}

p + h3:first-of-type {
  margin-block-start: var(--scale-600-scale);
}

h4,
.ds-heading-4 {
  font-size: 1.4rem;
  line-height: 2.4rem;
  margin-block-end: var(--scale-50-scale);
}

p,
li {
  font: var(--typography-body);
}

p {
  margin-block: var(--scale-100-scale);
}

small p {
  font-size: 1rem;
  line-height: 1rem;
}

.ds-button-cta-negative {
  --_background: var(--control-color-state-accent-container-default-state);
  --_border-color: var(--control-color-state-accent-border-default-state);
  --_color: var(--control-color-state-accent-font-default-state);
  align-items: center;
  background: var(--_background);
  border: 1px solid var(--_border-color);
  border-radius: 2px;
  color: var(--_color);
  display: inline-flex;
  font-size: 1.6rem;
  font-weight: 600;
  gap: 8px;
  inline-size: fit-content;
  line-height: 2.4rem;
  padding: 8px 12px;
  position: relative;
  text-decoration: none;
  transition: background-color 200ms linear;
}
.ds-button-cta-negative:hover {
  --_background: var(--control-color-state-accent-container-hover-state);
  --_border-color: var(--control-color-state-accent-border-hover-state);
  --_color: var(--control-color-state-accent-font-hover-state);
}
.ds-button-cta-negative:active {
  --_background: var(--control-color-state-accent-container-active-state);
  --_border-color: var(--control-color-state-accent-border-active-state);
  --_color: var(--control-color-state-accent-font-active-state);
}
.ds-button-cta-negative:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--control-color-focus-accent-focus);
  outline-offset: 2px;
}

.ds-hero-block {
  background-color: var(--heading-background);
  border-radius: 1.2rem;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
  padding: 4rem 3.2rem;
}
.ds-hero-block * {
  color: var(--heading-color);
}
.ds-hero-block h1 {
  animation: heroAnimation 300ms ease-in;
  font-size: 4.2rem;
  line-height: 5.2rem;
  margin-bottom: 0.8rem;
}
.ds-hero-block p {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}
.ds-hero-block span {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2.4rem;
  /* stylelint-disable-next-line max-nesting-depth */
}
@media screen and (min-width: 600px) {
  .ds-hero-block span {
    flex-direction: row;
  }
}
@media screen and (max-width: 600px) {
  .ds-hero-block {
    /* stylelint-disable-next-line max-nesting-depth */
  }
  .ds-hero-block .ds-button-cta-negative {
    justify-content: center;
    width: auto;
  }
}
@media screen and (min-width: 600px) {
  .ds-hero-block {
    padding: 4.8rem 3.2rem;
  }
}
@media screen and (min-width: 900px) {
  .ds-hero-block {
    padding: 7rem 4rem;
  }
}
@media screen and (min-width: 1200px) {
  .ds-hero-block {
    margin-right: 4.8rem;
    max-width: 88rem;
  }
}
@media screen and (prefers-reduced-motion: reduce) {
  .ds-hero-block {
    /* stylelint-disable-next-line max-nesting-depth */
  }
  .ds-hero-block h1 {
    animation: none;
  }
}

@keyframes heroAnimation {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.ds-explore {
  margin-block-start: 3.2rem;
}
@media screen and (min-width: 600px) {
  .ds-explore {
    margin-block-start: 4rem;
  }
}
@media screen and (min-width: 1200px) {
  .ds-explore {
    margin-block-start: 4.8rem;
    margin-inline-end: 4.8rem;
    max-inline-size: 88rem;
  }
}
.ds-explore .ds-heading-1 {
  margin-block-end: 2.4rem;
}
.ds-explore .ds-heading-2 {
  font-size: 1.8rem;
  margin-block-end: 0.8rem;
  transition: color 300ms linear;
  /* stylelint-disable-next-line max-nesting-depth */
}
.ds-explore .ds-heading-2 a {
  color: inherit;
  font-size: inherit;
  text-decoration: none;
  /* stylelint-disable-next-line max-nesting-depth */
}
.ds-explore .ds-heading-2 a::before {
  block-size: 100%;
  content: "";
  inline-size: 100%;
  inset-block-start: 0;
  inset-inline-start: 0;
  position: absolute;
}
.ds-explore .ds-heading-2 a {
  /* stylelint-disable-next-line max-nesting-depth */
}
.ds-explore .ds-heading-2 a:focus-visible {
  box-shadow: none;
}
.ds-explore h3 {
  margin-block-end: 0.8rem;
}

.ds-explore-wrapper {
  display: grid;
  gap: 2.4rem;
  grid-template-rows: repeat(3, 1fr);
  /* stylelint-disable-next-line max-nesting-depth */
}
@media screen and (min-width: 750px) {
  .ds-explore-wrapper {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: none;
  }
}
.ds-explore-wrapper {
  /* stylelint-disable-next-line max-nesting-depth */
}
@media screen and (min-width: 900px) {
  .ds-explore-wrapper {
    grid-template-columns: none;
    grid-template-rows: repeat(3, 1fr);
  }
}
.ds-explore-wrapper {
  /* stylelint-disable-next-line max-nesting-depth */
}
@media screen and (min-width: 1200px) {
  .ds-explore-wrapper {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: none;
  }
}

.ds-explore__card {
  cursor: pointer;
  position: relative;
}
.ds-explore__card:focus-within:not(:active) {
  border-radius: 0.8rem;
  box-shadow: var(--focus-box-shadow);
}
.ds-explore__card:hover {
  /* stylelint-disable-next-line max-nesting-depth */
}
.ds-explore__card:hover .ds-heading-2 {
  color: var(--highlight-color);
}
.ds-explore__card:active {
  /* stylelint-disable-next-line max-nesting-depth */
}
.ds-explore__card:active .ds-heading-2 {
  color: var(--card-color--active);
}
.ds-explore__card:hover svg, .ds-explore__card:focus-within svg {
  transform: scale(1.2);
}
.ds-explore__card:hover, .ds-explore__card:focus-within {
  /* stylelint-disable-next-line max-nesting-depth */
}
@media (prefers-reduced-motion: no-preference) {
  .ds-explore__card:hover, .ds-explore__card:focus-within {
    /* stylelint-disable-next-line max-nesting-depth */
  }
  .ds-explore__card:hover .ds-explore__design-tokens-dot, .ds-explore__card:focus-within .ds-explore__design-tokens-dot {
    animation: scale-animation-dot 700ms ease-in-out;
    transform-origin: bottom;
    /* stylelint-disable-next-line max-nesting-depth */
  }
  .ds-explore__card:hover .ds-explore__design-tokens-dot:nth-child(4), .ds-explore__card:focus-within .ds-explore__design-tokens-dot:nth-child(4) {
    animation-delay: 0.1s;
  }
  .ds-explore__card:hover .ds-explore__design-tokens-dot, .ds-explore__card:focus-within .ds-explore__design-tokens-dot {
    /* stylelint-disable-next-line max-nesting-depth */
  }
  .ds-explore__card:hover .ds-explore__design-tokens-dot:nth-child(5), .ds-explore__card:focus-within .ds-explore__design-tokens-dot:nth-child(5) {
    animation-delay: 0.2s;
  }
  .ds-explore__card:hover .ds-explore__design-tokens-dot, .ds-explore__card:focus-within .ds-explore__design-tokens-dot {
    /* stylelint-disable-next-line max-nesting-depth */
  }
  .ds-explore__card:hover .ds-explore__design-tokens-dot:nth-child(6), .ds-explore__card:focus-within .ds-explore__design-tokens-dot:nth-child(6) {
    animation-delay: 0.3s;
  }
  .ds-explore__card:hover, .ds-explore__card:focus-within {
    /* stylelint-disable-next-line max-nesting-depth */
  }
  .ds-explore__card:hover .ds-explore__components-part, .ds-explore__card:focus-within .ds-explore__components-part {
    animation: scale-puzzle-animation 700ms ease-in-out;
  }
  .ds-explore__card:hover, .ds-explore__card:focus-within {
    /* stylelint-disable-next-line max-nesting-depth */
  }
  .ds-explore__card:hover .ds-explore__guidelines-part, .ds-explore__card:focus-within .ds-explore__guidelines-part {
    animation: rotate-animation 700ms ease-in-out;
    transform-box: fill-box;
    transform-origin: center;
  }
  .ds-explore__card:hover, .ds-explore__card:focus-within {
    /* stylelint-disable-next-line max-nesting-depth */
  }
  .ds-explore__card:hover .ds-explore__whats-new-eye-left, .ds-explore__card:focus-within .ds-explore__whats-new-eye-left {
    animation: blink-eye-animation 700ms ease-in-out;
    animation-delay: 0.2s;
    transform-origin: 90.6px 30.2px;
  }
}

.ds-explore__card-image {
  align-items: center;
  background-color: var(--card-background);
  block-size: 22rem;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  margin-block-end: 1.6rem;
  overflow: hidden;
  position: relative;
}
.ds-explore__card-image svg {
  overflow: visible;
  transition: 300ms ease-in-out;
  /* stylelint-disable-next-line max-nesting-depth */
}
@media screen and (prefers-reduced-motion: reduce) {
  .ds-explore__card-image svg {
    transition: none;
  }
}

@keyframes scale-puzzle-animation {
  30% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.14);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes scale-animation-dot {
  30% {
    transform: scale3d(1, 1, 1);
  }
  60% {
    transform: scale3d(1.18, 1.18, 1.18);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
@keyframes scale-animation-rotate {
  30% {
    transform: scale3d(1, 1, 1) rotate(0);
  }
  60% {
    transform: scale3d(1, 1, 1) rotate(-5deg);
  }
  100% {
    transform: scale3d(1, 1, 1) rotate(0);
  }
}
@keyframes rotate-animation {
  30% {
    transform: rotate(0);
  }
  60% {
    transform: rotate(-0.04turn);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes blink-eye-animation {
  30% {
    transform: rotateZ(0deg) scale3d(1, 1, 1);
  }
  60% {
    transform: rotateZ(-12deg) scale3d(1.2, 0.1, 1);
  }
  100% {
    transform: rotateZ(0deg) scale3d(1, 1, 1);
  }
}
.ds-call-to-action {
  background: var(--cta-background);
  border-radius: 1.2rem;
  display: grid;
  gap: 4rem;
  grid-template-columns: none;
  grid-template-rows: 1fr auto;
  justify-items: center;
  margin: 3.2rem 0;
  overflow: hidden;
  padding: 4rem 3.2rem;
}
@media screen and (min-width: 750px) {
  .ds-call-to-action {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    padding: 4rem;
  }
}
@media screen and (min-width: 900px) {
  .ds-call-to-action {
    grid-template-columns: none;
    grid-template-rows: 1fr auto;
    justify-items: center;
    margin: 3.2rem 0;
    padding: 4rem 3.2rem;
  }
}
@media screen and (min-width: 1200px) {
  .ds-call-to-action {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    margin-right: 4.8rem;
    max-width: 88rem;
    padding: 4rem;
  }
}
.ds-call-to-action p:not(.ds-call-to-action__main-text):not(.ds-call-to-action__heading) {
  color: var(--cta-link-color);
  font-size: 2rem;
  line-height: 2.4rem;
  margin-bottom: 1.6rem;
}
.ds-call-to-action svg {
  height: 30rem;
  overflow: visible;
  /* stylelint-disable-next-line max-nesting-depth */
}
@media screen and (min-width: 750px) {
  .ds-call-to-action svg {
    order: 2;
  }
}
.ds-call-to-action svg {
  /* stylelint-disable-next-line max-nesting-depth */
}
@media screen and (min-width: 900px) {
  .ds-call-to-action svg {
    order: revert;
  }
}
.ds-call-to-action svg {
  /* stylelint-disable-next-line max-nesting-depth */
}
@media screen and (min-width: 1200px) {
  .ds-call-to-action svg {
    order: 2;
  }
}

.ds-call-to-action__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-self: left;
}

@media (prefers-reduced-motion: no-preference) {
  .ds-call-to-action__eye-brow {
    animation: scaleAnimationRotate 4s infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
  .ds-call-to-action__eye {
    animation: scaleAnimationEye 5s infinite, wink 5s infinite;
    backface-visibility: hidden;
    transform-box: fill-box;
    transform-origin: 50% 50%;
  }
  .ds-call-to-action__smile {
    --element-rotate: 44deg;
    animation: smileAnimation 3s infinite;
    animation-delay: 200ms;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    transform-box: fill-box;
    transform-origin: center;
  }
  .ds-call-to-action__smile-left {
    --element-rotate: -44deg;
    animation: smileAnimation 3s infinite;
    animation-delay: 200ms;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    transform-box: fill-box;
    transform-origin: center;
  }
  .ds-call-to-action__smile-bottom {
    --element-transform: -5px;
    animation: translateAnimation 3s infinite;
    animation-delay: 200ms;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    transform-box: fill-box;
    transform-origin: center;
  }
  /**
  * Safari workaround
  */
  @supports (font: -apple-system-body) and (-webkit-appearance: none) {
    .ds-call-to-action__eye {
      animation: wink 5s infinite;
    }
    .ds-call-to-action__smile,
    .ds-call-to-action__smile-left {
      --element-transform: -5px;
      animation: translateAnimation 3s infinite;
    }
    .ds-call-to-action__smile-bottom {
      --element-transform: -7px;
      animation-delay: 100ms;
    }
    .ds-call-to-action__eye-brow {
      --element-transform: -4px;
      animation: translateAnimation 4s infinite;
    }
  }
}
.ds-call-to-action__main-text {
  color: var(--cta-link-color);
  font-family: "the-message", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.05rem;
  line-height: 1;
  margin-bottom: 1.6rem;
}

.ds-call-to-action__heading {
  color: var(--cta-link-color);
  font-weight: 700;
  line-height: 3.2rem;
  margin-bottom: 1.6rem;
}

.ds-call-to-action__link {
  color: var(--cta-link-color);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 2.4rem;
  padding-right: 1.8rem;
  position: relative;
  text-decoration: none;
  transition: color 200ms ease-in-out;
  width: fit-content;
}
.ds-call-to-action__link::before {
  background-color: var(--cta-link-color);
  bottom: 0.2rem;
  content: "";
  display: block;
  height: 0.2rem;
  left: -5%;
  padding-right: 1.8rem;
  position: absolute;
  transform: scaleX(0);
  transition: transform 0.3s ease;
  width: 100%;
}
.ds-call-to-action__link:hover::before {
  transform: scaleX(0.9);
}
.ds-call-to-action__link:active::before {
  background-color: var(--cta-link-color--active);
  transform: scaleX(0.9);
}
.ds-call-to-action__link::after {
  background-image: var(--chevron-icon);
  background-position: top;
  background-repeat: no-repeat;
  content: "";
  height: 2.4rem;
  position: absolute;
  right: 0;
  top: 0.3rem;
  transition: all 200ms ease-in-out;
  width: 1rem;
}
.ds-call-to-action__link:active {
  color: var(--cta-link-color--active);
}
.ds-call-to-action__link:active::after {
  background-image: var(--chevron-icon--active);
}

@keyframes wink {
  0% {
    opacity: 1;
  }
  18% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  38% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
}
@keyframes scaleAnimationEye {
  30% {
    transform: scale(1) translateY(0);
  }
  60% {
    transform: scale(1.05) translateY(-1px);
  }
  80% {
    transform: scale(0.6) translateY(0);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}
@keyframes scaleAnimationRotate {
  30% {
    transform: scale3d(1, 1, 1) translateY(0);
  }
  60% {
    transform: scale3d(2, 1.11, 1.11) translateY(-2px);
  }
  100% {
    transform: scale3d(1, 1, 1) translateY(0);
  }
}
@keyframes smileAnimation {
  30% {
    transform: rotate3d(1, 1, 1, 0) translateY(0);
  }
  60% {
    transform: rotate3d(1, 4, -2, var(--element-rotate)) translateY(-4px);
  }
  100% {
    transform: rotate3d(1, 1, 1, 0) translateY(0);
  }
}
@keyframes translateAnimation {
  30% {
    transform: translateY(0);
  }
  60% {
    transform: translateY(var(--element-transform));
  }
  100% {
    transform: translateY(0);
  }
}
.ds-contact-block {
  --_gap: 5rem;
  background-color: var(--contact-block-background);
  display: grid;
  gap: var(--_gap);
  grid-template-columns: 1fr;
  margin: 6.4rem -2.4rem 0;
  padding: 4.8rem 2.4rem;
}
@media screen and (min-width: 600px) {
  .ds-contact-block {
    grid-template-columns: repeat(2, minmax(200px, calc((88rem - var(--_gap)) / 2)));
    padding: 7.4rem 6.4rem;
  }
}
@media screen and (min-width: 900px) {
  .ds-contact-block {
    margin: 7.2rem -2.4rem 0 -7.2rem;
    padding: 7.4rem 9.2rem;
  }
}
@media screen and (min-width: 1200px) {
  .ds-contact-block {
    --_gap: 20rem;
    padding: 7.4rem 11.4rem;
  }
}

.ds-contact-block__contribute,
.ds-contact-block__get-in-touch {
  flex-basis: 50%;
}

.ds-contact-block__description {
  font-size: 1.6rem;
  line-height: 2.4rem;
  padding: 0.8rem 0;
}

.ds-contact-block__button {
  align-items: center;
  background-color: var(--highlight-color);
  border-radius: 0.4rem;
  color: var(--heading-color);
  display: inline-flex;
  font-size: 1.6rem;
  gap: 0.8rem;
  line-height: 2.2rem;
  padding: 0.8rem 1.2rem;
  text-decoration: none;
  transition: background-color 200ms linear;
}
.ds-contact-block__button:hover {
  background-color: var(--card-color--active);
}
.ds-contact-block__button path {
  fill: var(--heading-color);
}

.ds-contact-block__get-in-touch {
  display: flex;
  flex-direction: column;
}

.ds-contact-block__link,
.ds-contact-block__description-link {
  align-items: center;
  color: var(--contact-block-link);
  font-size: 1.6rem;
  gap: 0.8rem;
  line-height: 2.4rem;
  margin-top: 0.8rem;
  text-decoration: none;
  transition: color 200ms ease-in-out;
  width: fit-content;
}
.ds-contact-block__link path,
.ds-contact-block__description-link path {
  fill: var(--contact-block-link);
  transition: fill 200ms ease-in-out;
}
.ds-contact-block__link:hover,
.ds-contact-block__description-link:hover {
  color: var(--contact-block-link--hover);
}
.ds-contact-block__link:hover path,
.ds-contact-block__description-link:hover path {
  fill: var(--contact-block-link--hover);
}

.ds-contact-block__link {
  display: inline-grid;
  grid-template-columns: 2rem 1fr;
  justify-items: center;
}

.ds-contact-block__description-link {
  display: inline-flex;
}

.ds-contact-block__description-link {
  margin-top: 0;
}

.wrapper {
  display: grid;
  gap: 0 3.2rem;
  grid-template-columns: 1fr 1fr 1fr;
}

.ds-components__content-wrapper .ds-heading-1:first-of-type {
  margin-block-start: 4rem;
}
.ds-components__content-wrapper h2 {
  margin-block-end: 0.8rem;
}
.ds-components__content-wrapper p {
  max-inline-size: 64rem;
}

.component-card {
  block-size: 100%;
  border-radius: 0.2rem;
  gap: 0.8rem;
}
.component-card svg {
  overflow: visible;
  transition: 300ms ease-in-out;
}
.component-card:not(.component-card--disabled):hover svg, .component-card:not(.component-card--disabled):focus-within svg {
  transform: none;
}
.component-card:not(.component-card--disabled):hover .ds-heading-2,
.component-card:not(.component-card--disabled):hover .component-card__title, .component-card:not(.component-card--disabled):focus-within .ds-heading-2,
.component-card:not(.component-card--disabled):focus-within .component-card__title {
  color: var(--highlight-color);
}
.component-card .ds-heading-2,
.component-card .component-card__title {
  line-height: 2rem;
  margin-block-end: 0.8rem;
  transition: color 300ms linear;
}

@media (prefers-reduced-motion: no-preference) {
  .component-card:not(.component-card--disabled):hover svg, .component-card:not(.component-card--disabled):focus-within svg {
    transform: scale(1.2);
  }
}
.component-card--disabled {
  cursor: default;
}

.component-card__picture {
  align-items: center;
  background-color: var(--component-card-background);
  display: inline-flex;
  justify-content: center;
  margin-block-end: 1.6rem;
  overflow: hidden;
  position: relative;
}
@media (prefers-color-scheme: dark) {
  .component-card__picture {
    display: none;
  }
}
.component-card__picture .ds-badge {
  inset: 0.8rem 0.8rem auto auto;
  position: absolute;
}

.component-card__picture--dark {
  display: none;
}
@media (prefers-color-scheme: dark) {
  .component-card__picture--dark {
    background-color: var(--component-card-background);
    display: inline-flex;
    justify-content: center;
    margin-block-end: 1.6rem;
    overflow: hidden;
    position: relative;
    /* stylelint-disable-next-line max-nesting-depth */
  }
  .component-card__picture--dark .ds-badge {
    inset-block-start: 0.8rem;
    inset-inline-end: 0.8rem;
    position: absolute;
  }
  .component-card__picture--dark {
    /* stylelint-disable-next-line max-nesting-depth */
  }
  .component-card__picture--dark .component-card__picture {
    display: none;
  }
}

.ds-components__content {
  display: grid;
  gap: 0 7.2rem;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 1200px) {
  .ds-components__content {
    grid-template-columns: 6fr 1fr;
  }
}
@media screen and (min-width: 1600px) {
  .ds-components__content {
    grid-template-columns: 88rem 1fr;
  }
}
.ds-components__content section {
  margin-block: 2.4rem 6.4rem;
}

.ds-components__cards {
  display: grid;
  gap: 3.2rem 2.4rem;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 600px) {
  .ds-components__cards {
    grid-template-columns: repeat(2, [col-start] minmax(100px, 1fr) [col-end]);
  }
}
@media screen and (min-width: 1600px) {
  .ds-components__cards {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  }
}
.ds-components__cards a {
  color: inherit;
  text-decoration: none;
}

@media screen and (min-width: 1200px) {
  .ds-component__heading {
    display: grid;
    grid-column-gap: 7.2rem;
    grid-template-columns: 6fr 1fr;
  }
}
@media screen and (min-width: 1600px) {
  .ds-component__heading {
    grid-template-columns: 88rem 1fr;
  }
}

.ds-component__heading-wrapper {
  background-color: var(--heading-background);
  border-radius: 0.6rem;
  color: var(--heading-color);
  padding: 2.4rem 4rem;
}

.ds-component__heading-wrapper .ds-badge {
  float: inline-end;
}

.ds-component__heading-description {
  font-size: 1.8rem;
  line-height: 2.4rem;
  margin-block-start: 0.8rem;
}

.ds-success {
  color: var(--helper-text);
  font-size: 1.4rem;
  margin: 2.4rem 0 0;
  position: relative;
}
.ds-success img {
  inline-size: 100%;
}

.ds-success__content {
  position: relative;
}
.ds-success__content::before {
  background: var(--success-color);
  block-size: 0.4rem;
  border-radius: 0.4rem;
  content: "";
  display: block;
  inline-size: 100%;
  inset-block-start: 0;
  inset-inline-start: 0;
  margin-block-end: 0.8rem;
  position: absolute;
}
.ds-success__content :first-child {
  color: var(--success-color);
  font-size: 2rem;
  font-weight: 700;
  line-height: 2.5rem;
  margin: 0;
  padding: 0.8rem 0;
}

.ds-danger {
  color: var(--helper-text);
  font-size: 1.4rem;
  margin: 2.4rem 0 0;
}
.ds-danger img {
  inline-size: 100%;
}

.ds-danger__content {
  position: relative;
}
.ds-danger__content::before {
  background: var(--danger-color);
  block-size: 0.4rem;
  border-radius: 0.4rem;
  content: "";
  display: block;
  inline-size: 100%;
  inset-block-start: 0;
  inset-inline-start: 0;
  margin-block-end: 0.8rem;
  position: absolute;
}
.ds-danger__content :first-child {
  color: var(--danger-color);
  font-size: 2rem;
  font-weight: 700;
  line-height: 2.5rem;
  margin: 0;
  padding: 0.8rem 0;
}

.ds-do-dont__picture {
  background-color: var(--picture-background);
  block-size: 20rem;
  border-radius: 0.4rem;
  display: inline-block;
  margin-block-end: 0.8rem;
  object-fit: contain;
}

@media screen and (min-width: 1200px) {
  .ds-do-dont {
    column-gap: 2.4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

.ds-badge {
  background-color: var(--badge-background);
  border: 1px solid var(--badge-border);
  border-radius: 2px;
  color: var(--badge-color);
  display: inline-flex;
  font-size: 1.2rem;
  line-height: 1.6rem;
  padding: 0.1rem 0.4rem;
}

*:focus-visible:not(input,
sl-button,
sl-card,
sl-select,
sl-select-button,
sl-text-area,
sl-tab,
sl-tag,
sl-toggle-button) {
  border-radius: 0.6rem;
  box-shadow: var(--focus-box-shadow);
  outline: none;
}

html {
  font-size: 62.5%;
}
@media (min-height: 1px) {
  html {
    scroll-padding-top: 134px;
    /* stylelint-disable-next-line max-nesting-depth */
  }
}
@media screen and (min-height: 1px) and (min-width: 900px) {
  html {
    scroll-padding-top: 95px;
  }
}

/*# sourceMappingURL=main.css.map */