/**
 * Oxyblock Core - Modern CSS Framework based on Oxyblock UI
 * Version: v0.2.4
 * Website: https://core.oxyblock.xyz
 * License: MIT
 */


:root {
  --ob-breakpoints-xl: 1120px;
  --ob-breakpoints-lg: 991px;
  --ob-breakpoints-md: 767px;
  --ob-breakpoints-sm: 479px;
}


:root {
  --ob-font-heading: "Barlow", system-ui, sans-serif;
  --ob-font-body: "Lato", system-ui, sans-serif;
  --ob-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --ob-font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --ob-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --ob-text-base-size: 62.5%;
  --ob-text-unit: 1rem;
  --ob-text-xs: calc(var(--ob-text-unit) * 1.2);
  --ob-text-sm: calc(var(--ob-text-unit) * 1.4);
  --ob-text-base: calc(var(--ob-text-unit) * 1.6);
  --ob-text-lg: calc(var(--ob-text-unit) * 1.8);
  --ob-text-xl: calc(var(--ob-text-unit) * 2);
  --ob-text-2xl: calc(var(--ob-text-unit) * 2.4);
  --ob-text-3xl: calc(var(--ob-text-unit) * 3);
  --ob-text-4xl: calc(var(--ob-text-unit) * 3.6);
  --ob-text-5xl: calc(var(--ob-text-unit) * 4.8);
  --ob-text-6xl: calc(var(--ob-text-unit) * 6);
  --ob-text-7xl: calc(var(--ob-text-unit) * 7.2);
  --ob-text-8xl: calc(var(--ob-text-unit) * 9.6);
  --ob-text-9xl: calc(var(--ob-text-unit) * 12.8);
  --ob-line-height-xs: calc(var(--ob-text-unit) * 1.6);
  --ob-line-height-sm: calc(var(--ob-text-unit) * 2);
  --ob-line-height-base: calc(var(--ob-text-unit) * 2.4);
  --ob-line-height-lg: calc(var(--ob-text-unit) * 2.8);
  --ob-line-height-xl: calc(var(--ob-text-unit) * 2.8);
  --ob-line-height-2xl: calc(var(--ob-text-unit) * 3.2);
  --ob-line-height-3xl: calc(var(--ob-text-unit) * 3.6);
  --ob-line-height-4xl: calc(var(--ob-text-unit) * 4);
  --ob-line-height-5xl: calc(var(--ob-text-unit) * 4.8);
  --ob-line-height-6xl: calc(var(--ob-text-unit) * 6);
  --ob-line-height-7xl: calc(var(--ob-text-unit) * 7.2);
  --ob-line-height-8xl: calc(var(--ob-text-unit) * 9.6);
  --ob-line-height-9xl: calc(var(--ob-text-unit) * 12.8);
  --ob-tracking-xs: calc(var(--ob-text-unit) * -0.08);
  --ob-tracking-sm: calc(var(--ob-text-unit) * -0.04);
  --ob-tracking-base: calc(var(--ob-text-unit) * 0);
  --ob-tracking-lg: calc(var(--ob-text-unit) * 0.04);
  --ob-tracking-xl: calc(var(--ob-text-unit) * 0.08);
  --ob-tracking-2xl: calc(var(--ob-text-unit) * 0.16);
  --ob-tracking-3xl: calc(var(--ob-text-unit) * 0.24);
  --ob-tracking-4xl: calc(var(--ob-text-unit) * 0.4);
  --ob-tracking-5xl: calc(var(--ob-text-unit) * 0.8);
  --ob-tracking-6xl: calc(var(--ob-text-unit) * 1.6);
}


:root {
  --ob-size-unit: 1rem;
  --ob-size-0: 0px;
  --ob-size-px: 1px;
  --ob-size-0-5: calc( var(--ob-size-unit) * 0.2 );
  --ob-size-1: calc( var(--ob-size-unit) * 0.4 );
  --ob-size-1-5: calc( var(--ob-size-unit) * 0.6 );
  --ob-size-2: calc( var(--ob-size-unit) * 0.8 );
  --ob-size-2-5: calc( var(--ob-size-unit) * 1 );
  --ob-size-3: calc( var(--ob-size-unit) * 1.2 );
  --ob-size-3-5: calc( var(--ob-size-unit) * 1.4 );
  --ob-size-4: calc( var(--ob-size-unit) * 1.6 );
  --ob-size-5: calc( var(--ob-size-unit) * 2 );
  --ob-size-6: calc( var(--ob-size-unit) * 2.4 );
  --ob-size-7: calc( var(--ob-size-unit) * 2.8 );
  --ob-size-8: calc( var(--ob-size-unit) * 3.2 );
  --ob-size-9: calc( var(--ob-size-unit) * 3.6 );
  --ob-size-10: calc( var(--ob-size-unit) * 4 );
  --ob-size-11: calc( var(--ob-size-unit) * 4.4 );
  --ob-size-12: calc( var(--ob-size-unit) * 4.8 );
  --ob-size-14: calc( var(--ob-size-unit) * 5.6 );
  --ob-size-16: calc( var(--ob-size-unit) * 6.4 );
  --ob-size-20: calc( var(--ob-size-unit) * 8 );
  --ob-size-24: calc( var(--ob-size-unit) * 9.6 );
  --ob-size-28: calc( var(--ob-size-unit) * 11.2 );
  --ob-size-32: calc( var(--ob-size-unit) * 12.8 );
  --ob-size-36: calc( var(--ob-size-unit) * 14.4 );
  --ob-size-40: calc( var(--ob-size-unit) * 16 );
  --ob-size-44: calc( var(--ob-size-unit) * 17.6 );
  --ob-size-48: calc( var(--ob-size-unit) * 19.2 );
  --ob-size-52: calc( var(--ob-size-unit) * 20.8 );
  --ob-size-56: calc( var(--ob-size-unit) * 22.4 );
  --ob-size-60: calc( var(--ob-size-unit) * 24 );
  --ob-size-64: calc( var(--ob-size-unit) * 25.6 );
  --ob-size-72: calc( var(--ob-size-unit) * 28.8 );
  --ob-size-80: calc( var(--ob-size-unit) * 32 );
  --ob-size-96: calc( var(--ob-size-unit) * 38.4 );
  --ob-size-screen-lg: calc(var(--ob-breakpoints-lg) + 1px);
  --ob-size-screen-md: calc(var(--ob-breakpoints-md) + 1px);
  --ob-size-screen-sm: calc(var(--ob-breakpoints-sm) + 1px);
  --ob-size-screen-xs: 320px;
}


:root {
  --ob-white-h: 0;
  --ob-white-s: 0%;
  --ob-white-l: 100%;
  --ob-black-h: 0;
  --ob-black-s: 0%;
  --ob-black-l: 9%;
  --ob-body-light-h: 0;
  --ob-body-light-s: 0%;
  --ob-body-light-l: 100%;
  --ob-body-dark-h: 216;
  --ob-body-dark-s: 20%;
  --ob-body-dark-l: 20%;
  --ob-white-emph-h: 0;
  --ob-white-emph-s: 0%;
  --ob-white-emph-l: 98%;
  --ob-black-emph-h: 0;
  --ob-black-emph-s: 0%;
  --ob-black-emph-l: 12%;
  --ob-primary-h: 173;
  --ob-primary-s: 47%;
  --ob-primary-l: 62%;
  --ob-secondary-h: 214;
  --ob-secondary-s: 28%;
  --ob-secondary-l: 26%;
  --ob-tertiary-h: 184;
  --ob-tertiary-s: 63%;
  --ob-tertiary-l: 40%;
  --ob-neutral-h: 220;
  --ob-neutral-s: 9%;
  --ob-neutral-l: 46%;
  --ob-accent-h: 356;
  --ob-accent-s: 79%;
  --ob-accent-l: 64%;
  --ob-informative-h: 211;
  --ob-informative-s: 84%;
  --ob-informative-l: 50%;
  --ob-success-h: 96;
  --ob-success-s: 42%;
  --ob-success-l: 50%;
  --ob-warning-h: 44;
  --ob-warning-s: 86%;
  --ob-warning-l: 50%;
  --ob-error-h: 7;
  --ob-error-s: 88%;
  --ob-error-l: 50%;
  --ob-primary-l-50: 96%;
  --ob-primary-l-100: 92%;
  --ob-primary-l-200: 85%;
  --ob-primary-l-300: 77%;
  --ob-primary-l-400: 70%;
  --ob-primary-l-500: var(--ob-primary-l);
  --ob-primary-l-600: 50%;
  --ob-primary-l-700: 37%;
  --ob-primary-l-800: 25%;
  --ob-primary-l-900: 12%;
  --ob-secondary-l-50: 96%;
  --ob-secondary-l-100: 92%;
  --ob-secondary-l-200: 82%;
  --ob-secondary-l-300: 71%;
  --ob-secondary-l-400: 55%;
  --ob-secondary-l-500: var(--ob-secondary-l);
  --ob-secondary-l-600: 23%;
  --ob-secondary-l-700: 20%;
  --ob-secondary-l-800: 16%;
  --ob-secondary-l-900: 11%;
  --ob-tertiary-l-50: 94%;
  --ob-tertiary-l-100: 88%;
  --ob-tertiary-l-200: 76%;
  --ob-tertiary-l-300: 64%;
  --ob-tertiary-l-400: 52%;
  --ob-tertiary-l-500: var(--ob-tertiary-l);
  --ob-tertiary-l-600: 32%;
  --ob-tertiary-l-700: 24%;
  --ob-tertiary-l-800: 16%;
  --ob-tertiary-l-900: 8%;
  --ob-neutral-l-50: 98%;
  --ob-neutral-l-100: 96%;
  --ob-neutral-l-200: 91%;
  --ob-neutral-l-300: 84%;
  --ob-neutral-l-400: 65%;
  --ob-neutral-l-500: var(--ob-neutral-l);
  --ob-neutral-l-600: 34%;
  --ob-neutral-l-700: 27%;
  --ob-neutral-l-800: 17%;
  --ob-neutral-l-900: 11%;
  --ob-accent-l-50: 96%;
  --ob-accent-l-100: 93%;
  --ob-accent-l-200: 85%;
  --ob-accent-l-300: 78%;
  --ob-accent-l-400: 71%;
  --ob-accent-l-500: var(--ob-accent-l);
  --ob-accent-l-600: 51%;
  --ob-accent-l-700: 38%;
  --ob-accent-l-800: 25%;
  --ob-accent-l-900: 13%;
  --ob-informative-l-50: 95%;
  --ob-informative-l-100: 90%;
  --ob-informative-l-200: 80%;
  --ob-informative-l-300: 70%;
  --ob-informative-l-400: 60%;
  --ob-informative-l-500: var(--ob-informative-l);
  --ob-informative-l-600: 40%;
  --ob-informative-l-700: 30%;
  --ob-informative-l-800: 20%;
  --ob-informative-l-900: 10%;
  --ob-success-l-50: 95%;
  --ob-success-l-100: 90%;
  --ob-success-l-200: 80%;
  --ob-success-l-300: 70%;
  --ob-success-l-400: 60%;
  --ob-success-l-500: var(--ob-success-l);
  --ob-success-l-600: 40%;
  --ob-success-l-700: 30%;
  --ob-success-l-800: 20%;
  --ob-success-l-900: 10%;
  --ob-warning-l-50: 95%;
  --ob-warning-l-100: 90%;
  --ob-warning-l-200: 80%;
  --ob-warning-l-300: 70%;
  --ob-warning-l-400: 60%;
  --ob-warning-l-500: var(--ob-warning-l);
  --ob-warning-l-600: 40%;
  --ob-warning-l-700: 30%;
  --ob-warning-l-800: 20%;
  --ob-warning-l-900: 10%;
  --ob-error-l-50: 95%;
  --ob-error-l-100: 90%;
  --ob-error-l-200: 80%;
  --ob-error-l-300: 70%;
  --ob-error-l-400: 60%;
  --ob-error-l-500: var(--ob-error-l);
  --ob-error-l-600: 40%;
  --ob-error-l-700: 30%;
  --ob-error-l-800: 20%;
  --ob-error-l-900: 10%;
  --ob-elevations-comp-h: var(--ob-secondary-h);
  --ob-elevations-comp-s: var(--ob-secondary-s);
  --ob-elevations-comp-l: var(--ob-secondary-l-400);
}


:root {
  --ob-shadow-light-sm: 0px 1px 3px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.1), 0px 0px 1px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.05);
  --ob-shadow-light-base: 0px 2px 4px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.1), 0px 0px 1px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.05);
  --ob-shadow-light-md: 0px 4px 8px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.1), 0px 0px 1px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.05);
  --ob-shadow-light-lg: 0px 8px 16px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.1), 0px 0px 1px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.05);
  --ob-shadow-light-xl: 0px 16px 24px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.1), 0px 0px 1px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.05);
  --ob-shadow-light-2xl: 0px 32px 64px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.1), 0px 0px 1px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.05);
  --ob-shadow-dark-sm: 0px 1px 3px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 1), 0px 0px 1px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.9);
  --ob-shadow-dark-base: 0px 2px 4px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 1), 0px 0px 1px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.9);
  --ob-shadow-dark-md: 0px 4px 8px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 1), 0px 0px 1px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.9);
  --ob-shadow-dark-lg: 0px 8px 16px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 1), 0px 0px 1px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.9);
  --ob-shadow-dark-xl: 0px 16px 24px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 1), 0px 0px 1px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.9);
  --ob-shadow-dark-2xl: 0px 32px 64px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 1), 0px 0px 1px hsla(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l), 0.9);
  --ob-shadow-primary-sm: 0px 1px 3px hsla(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l), 0.5), 0px 0px 1px hsla(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l), 0.25);
  --ob-shadow-primary-base: 0px 2px 4px hsla(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l), 0.5), 0px 0px 1px hsla(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l), 0.25);
  --ob-shadow-primary-md: 0px 4px 8px hsla(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l), 0.5), 0px 0px 1px hsla(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l), 0.25);
  --ob-shadow-primary-lg: 0px 8px 16px hsla(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l), 0.5), 0px 0px 1px hsla(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l), 0.25);
  --ob-shadow-primary-xl: 0px 16px 24px hsla(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l), 0.5), 0px 0px 1px hsla(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l), 0.25);
  --ob-shadow-primary-2xl: 0px 32px 64px hsla(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l), 0.5), 0px 0px 1px hsla(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l), 0.25);
  --ob-shadow-secondary-sm: 0px 1px 3px hsla(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l), 0.2), 0px 0px 1px hsla(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-primary-l), 0.1);
  --ob-shadow-secondary-base: 0px 2px 4px hsla(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l), 0.2), 0px 0px 1px hsla(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-primary-l), 0.1);
  --ob-shadow-secondary-md: 0px 4px 8px hsla(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l), 0.2), 0px 0px 1px hsla(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-primary-l), 0.1);
  --ob-shadow-secondary-lg: 0px 8px 16px hsla(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l), 0.2), 0px 0px 1px hsla(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-primary-l), 0.1);
  --ob-shadow-secondary-xl: 0px 16px 24px hsla(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l), 0.2), 0px 0px 1px hsla(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-primary-l), 0.1);
  --ob-shadow-secondary-2xl: 0px 32px 64px hsla(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l), 0.2), 0px 0px 1px hsla(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-primary-l), 0.1);
}


:root {
  --ob-blur-none: 0;
  --ob-blur-sm: 4px;
  --ob-blur-base: 8px;
  --ob-blur-md: 12px;
  --ob-blur-lg: 16px;
  --ob-blur-xl: 24px;
  --ob-blur-2xl: 40px;
  --ob-blur-3xl: 64px;
}


:root {
  --ob-rounded-unit: 1rem;
  --ob-rounded-none: none;
  --ob-rounded-sm: calc(var(--ob-rounded-unit) * 0.2);
  --ob-rounded-base: calc(var(--ob-rounded-unit) * 0.4);
  --ob-rounded-md: calc(var(--ob-rounded-unit) * 0.6);
  --ob-rounded-lg: calc(var(--ob-rounded-unit) * 0.8);
  --ob-rounded-xl: calc(var(--ob-rounded-unit) * 1.2);
  --ob-rounded-2xl: calc(var(--ob-rounded-unit) * 1.6);
  --ob-rounded-3xl: calc(var(--ob-rounded-unit) * 2.4);
  --ob-rounded-full: 9999px;
}


:root {
  --ob-border-w-0: 0px;
  --ob-border-w-1: 1px;
  --ob-border-w-2: 2px;
  --ob-border-w-4: 4px;
  --ob-border-w-8: 8px;
}

html{font-size:var(--ob-text-base-size)}
body{background-color:var(--ob-body-light);font-size:var(--ob-text-base);color:var(--ob-black-emph-high)}
[data-theme=dark] body{background-color:var(--ob-body-dark)}

:root, [data-theme=default] {
  --ob-white: hsl(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l));
  --ob-black: hsl(var(--ob-black-h), var(--ob-black-s), var(--ob-black-l));
  --ob-body-light: hsl(var(--ob-body-light-h), var(--ob-body-light-s), var(--ob-body-light-l));
  --ob-body-dark: hsl(var(--ob-body-dark-h), var(--ob-body-dark-s), var(--ob-body-dark-l));
  --ob-white-emph-high: hsla(var(--ob-white-emph-h), var(--ob-white-emph-s), var(--ob-white-emph-l), 1);
  --ob-white-emph-medium: hsla(var(--ob-white-emph-h), var(--ob-white-emph-s), var(--ob-white-emph-l), 0.75);
  --ob-white-emph-low: hsla(var(--ob-white-emph-h), var(--ob-white-emph-s), var(--ob-white-emph-l), 0.55);
  --ob-black-emph-high: hsla(var(--ob-black-emph-h), var(--ob-black-emph-s), var(--ob-black-emph-l), 1);
  --ob-black-emph-medium: hsla(var(--ob-black-emph-h), var(--ob-black-emph-s), var(--ob-black-emph-l), 0.6);
  --ob-black-emph-low: hsla(var(--ob-black-emph-h), var(--ob-black-emph-s), var(--ob-black-emph-l), 0.4);
  --ob-primary-50: hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-50));
  --ob-primary-100: hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-100));
  --ob-primary-200: hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-200));
  --ob-primary-300: hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-300));
  --ob-primary-400: hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-400));
  --ob-primary-500: hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-500));
  --ob-primary-600: hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-600));
  --ob-primary-700: hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-700));
  --ob-primary-800: hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-800));
  --ob-primary-900: hsl(var(--ob-primary-h), var(--ob-primary-s), var(--ob-primary-l-900));
  --ob-secondary-50: hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-50));
  --ob-secondary-100: hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-100));
  --ob-secondary-200: hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-200));
  --ob-secondary-300: hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-300));
  --ob-secondary-400: hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-400));
  --ob-secondary-500: hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-500));
  --ob-secondary-600: hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-600));
  --ob-secondary-700: hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-700));
  --ob-secondary-800: hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-800));
  --ob-secondary-900: hsl(var(--ob-secondary-h), var(--ob-secondary-s), var(--ob-secondary-l-900));
  --ob-tertiary-50: hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-50));
  --ob-tertiary-100: hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-100));
  --ob-tertiary-200: hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-200));
  --ob-tertiary-300: hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-300));
  --ob-tertiary-400: hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-400));
  --ob-tertiary-500: hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-500));
  --ob-tertiary-600: hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-600));
  --ob-tertiary-700: hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-700));
  --ob-tertiary-800: hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-800));
  --ob-tertiary-900: hsl(var(--ob-tertiary-h), var(--ob-tertiary-s), var(--ob-tertiary-l-900));
  --ob-neutral-50: hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-50));
  --ob-neutral-100: hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-100));
  --ob-neutral-200: hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-200));
  --ob-neutral-300: hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-300));
  --ob-neutral-400: hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-400));
  --ob-neutral-500: hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-500));
  --ob-neutral-600: hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-600));
  --ob-neutral-700: hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-700));
  --ob-neutral-800: hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-800));
  --ob-neutral-900: hsl(var(--ob-neutral-h), var(--ob-neutral-s), var(--ob-neutral-l-900));
  --ob-accent-50: hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-50));
  --ob-accent-100: hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-100));
  --ob-accent-200: hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-200));
  --ob-accent-300: hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-300));
  --ob-accent-400: hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-400));
  --ob-accent-500: hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-500));
  --ob-accent-600: hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-600));
  --ob-accent-700: hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-700));
  --ob-accent-800: hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-800));
  --ob-accent-900: hsl(var(--ob-accent-h), var(--ob-accent-s), var(--ob-accent-l-900));
  --ob-informative-50: hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-50));
  --ob-informative-100: hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-100));
  --ob-informative-200: hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-200));
  --ob-informative-300: hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-300));
  --ob-informative-400: hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-400));
  --ob-informative-500: hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-500));
  --ob-informative-600: hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-600));
  --ob-informative-700: hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-700));
  --ob-informative-800: hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-800));
  --ob-informative-900: hsl(var(--ob-informative-h), var(--ob-informative-s), var(--ob-informative-l-900));
  --ob-success-50: hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-50));
  --ob-success-100: hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-100));
  --ob-success-200: hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-200));
  --ob-success-300: hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-300));
  --ob-success-400: hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-400));
  --ob-success-500: hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-500));
  --ob-success-600: hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-600));
  --ob-success-700: hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-700));
  --ob-success-800: hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-800));
  --ob-success-900: hsl(var(--ob-success-h), var(--ob-success-s), var(--ob-success-l-900));
  --ob-warning-50: hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-50));
  --ob-warning-100: hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-100));
  --ob-warning-200: hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-200));
  --ob-warning-300: hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-300));
  --ob-warning-400: hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-400));
  --ob-warning-500: hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-500));
  --ob-warning-600: hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-600));
  --ob-warning-700: hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-700));
  --ob-warning-800: hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-800));
  --ob-warning-900: hsl(var(--ob-warning-h), var(--ob-warning-s), var(--ob-warning-l-900));
  --ob-error-50: hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-50));
  --ob-error-100: hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-100));
  --ob-error-200: hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-200));
  --ob-error-300: hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-300));
  --ob-error-400: hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-400));
  --ob-error-500: hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-500));
  --ob-error-600: hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-600));
  --ob-error-700: hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-700));
  --ob-error-800: hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-800));
  --ob-error-900: hsl(var(--ob-error-h), var(--ob-error-s), var(--ob-error-l-900));
  --ob-elevations-24dp: linear-gradient(0deg, hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.16), hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.16)), var(--ob-body-dark);
  --ob-elevations-16dp: linear-gradient(0deg, hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.15), hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.15)), var(--ob-body-dark);
  --ob-elevations-12dp: linear-gradient(0deg, hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.14), hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.14)), var(--ob-body-dark);
  --ob-elevations-9dp: linear-gradient(0deg, hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.12), hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.12)), var(--ob-body-dark);
  --ob-elevations-8dp: linear-gradient(0deg, hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.11), hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.11)), var(--ob-body-dark);
  --ob-elevations-6dp: linear-gradient(0deg, hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.09), hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.09)), var(--ob-body-dark);
  --ob-elevations-4dp: linear-gradient(0deg, hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.08), hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.08)), var(--ob-body-dark);
  --ob-elevations-3dp: linear-gradient(0deg, hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.07), hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.07)), var(--ob-body-dark);
  --ob-elevations-2dp: linear-gradient(0deg, hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.05), hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.05)), var(--ob-body-dark);
  --ob-elevations-1dp: linear-gradient(0deg, hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-elevations-comp-l), 0.01), hsla(var(--ob-elevations-comp-h), var(--ob-elevations-comp-s), var(--ob-secondary-l), 0.01)), var(--ob-body-dark);
  --ob-white-trans-90: hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.9);
  --ob-white-trans-80: hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.8);
  --ob-white-trans-70: hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.7);
  --ob-white-trans-60: hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.6);
  --ob-white-trans-50: hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.5);
  --ob-white-trans-40: hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.4);
  --ob-white-trans-20: hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.2);
  --ob-white-trans-10: hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.1);
  --ob-white-trans-5: hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.05);
  --ob-white-trans-1: hsla(var(--ob-white-h), var(--ob-white-s), var(--ob-white-l), 0.01);
}