@layer reset, global, primitive, responsive;
@layer reset {
  *, *::before, *::after { 
    box-sizing: inherit; 
    line-height: inherit;
    user-select: none;
    margin: 0;
    box-sizing: border-box; 
  }
  html {
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    text-wrap: pretty;
  }
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    html {
      interpolate-size: allow-keywords;
    }
  }
  :focus:not(:focus-visible) {
    outline: none;
  }
  button{
    -webkit-appearance: none;  
    appearance: none;
    padding: 0;
    line-height: 1;
    border: none;
    background: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    color-scheme: inherit;
    font: inherit;
    color: inherit;
    text-transform: none;
  }
  button::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  button:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  svg * {
    vector-effect: non-scaling-stroke;
    stroke-width: 1;
    touch-action: none;
  }
  svg *{
    fill: currentColor;
    stroke: currentColor;
  }
  svg g *{
    fill: inherit;
    stroke: inherit;
  }
  a {
    text-decoration: none;
    color: inherit;
    border-radius:inherit;
  }
  a, a:visited {
    color: inherit;
  }
}
@layer global {
  :root {
  /* #region Size */
    --micro-size-3xs: 1rem;   /* 16px  */
    --micro-size-2xs: 1.5rem; /* 24px  */
    --micro-size-xs:  2rem;   /* 32px  */
    --micro-size-s:   2.5rem; /* 40px  */
    --micro-size-m:   3rem;   /* 48px  */
    --micro-size-l:   4rem;   /* 64px  */
    --micro-size-xl:  5rem;   /* 80px  */
    --micro-size-2xl: 6rem;   /* 96px  */
    --micro-size-3xl: 7rem;   /* 112px */
    --size-3xs:  8rem;         /* 128px */
    --size-2xs: 10rem;         /* 160px */
    --size-xs:  12rem;         /* 192px */
    --size-s:   16rem;         /* 256px */
    --size-m:   20rem;         /* 320px */
    --size-l:   25rem;         /* 400px */
    --size-xl:  30rem;         /* 480px */
    --size-2xl: 35rem;         /* 560px */
    --size-3xl: 40rem;         /* 640px */
    --content-width-s:  45rem;   /* 720px  */
    --content-width-m:  55rem;   /* 880px  */
    --content-width-l:  70rem;   /* 1120px */
    --content-width-xl: 85rem;   /* 1360px */
    --content-width-2xl: 100rem; /* 1600px */
  /* #endregion */
  /* #region Space */
    --space-base: 0.75rem;
    --space-ratio: 1.4;
    --space-none: 0; /* 0px */
    --space-one: 1px; /* 1px */
    --space-two: 2px; /* 1px */
    --space-3xs:  calc(var(--space-base) / var(--space-ratio) / var(--space-ratio) / var(--space-ratio) / var(--space-ratio)); /* 3.1px */
    --space-2xs:  calc(var(--space-base) / var(--space-ratio) / var(--space-ratio) / var(--space-ratio)); /* 4.4px */
    --space-xs:  calc(var(--space-base) / var(--space-ratio) / var(--space-ratio)); /* 6.1px */
    --space-s:   calc(var(--space-base) / var(--space-ratio)); /* 8.6px */
    --space-m:        var(--space-base); /* 12px */
    --space-l:    calc(var(--space-base) * var(--space-ratio)); /* 16.8px */
    --space-xl:   calc(var(--space-base) * var(--space-ratio) * var(--space-ratio)); /* 23.5px */
    --space-2xl:  calc(var(--space-base) * var(--space-ratio) * var(--space-ratio) * var(--space-ratio)); /* 32.9px */
    --space-3xl:  calc(var(--space-base) * var(--space-ratio) * var(--space-ratio) * var(--space-ratio) * var(--space-ratio)); /* 46.1px */
    /* #endregion */
  /* #region Typography */
    --font-base: 1rem;
    --font-scale: 1.2;
    --font-size-2xs: calc(var(--font-base) / var(--font-scale) / var(--font-scale) / var(--font-scale)); /* 9.26px */
    --font-size-xs:  calc(var(--font-base) / var(--font-scale) / var(--font-scale)); /* 11.11px */
    --font-size-s:   calc(var(--font-base) / var(--font-scale)); /* 13.33px */
    --font-size-m:        var(--font-base); /* 16px */
    --font-size-l:   calc(var(--font-base) * var(--font-scale)); /* 19.2px */
    --font-size-xl:  calc(var(--font-base) * var(--font-scale) * var(--font-scale)); /* 23.04px */
    --font-size-2xl: calc(var(--font-base) * var(--font-scale) * var(--font-scale) * var(--font-scale)); /* 27.65px */
    --font-size-3xl: calc(var(--font-base) * var(--font-scale) * var(--font-scale) * var(--font-scale) * var(--font-scale)); /* 33.18px */
    --font-size-4xl: calc(var(--font-base) * var(--font-scale) * var(--font-scale) * var(--font-scale) * var(--font-scale) * var(--font-scale)); /* 39.81px */
    --font-size-5xl: calc(var(--font-base) * var(--font-scale) * var(--font-scale) * var(--font-scale) * var(--font-scale) * var(--font-scale) * var(--font-scale)); /* 47.78px */
    
    --font-sans: "Inter", Verdana, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-serif: "Charter", "Source Serif 4", Georgia, "Times New Roman", Times, serif;
    --font-math:  "Latin Modern Math", "Cambria Math", serif;
    --font-mono:  "JetBrains Mono", "Fira Code", "Cascadia Code", "Source Code Pro", Consolas, monospace;
    
    --line-height-one: 1;
    --line-height-xs: 1.1;
    --line-height-s: 1.25;
    --line-height-m: 1.5;
    --line-height-l: 1.6;
    --line-height-xl: 1.9;

    --font-weight-thinnest: 100;
    --font-weight-thin:    300;
    --font-weight-normal:  400;
    --font-weight-boldish: 500;
    --font-weight-bold:    600;
    --font-weight-bolder:  700;
    --font-weight-boldest: 900;

    --letter-spacing-xs: -0.02em;
    --letter-spacing-s:  -0.01em;
    --letter-spacing-m:   0;
    --letter-spacing-l:   0.01em;
    --letter-spacing-xl:  0.02em;

    --text-transform-none: none;
    --text-transform-caps: capitalize;
    --text-transform-upper: uppercase;
    --text-transform-lower: lowercase;

    --text-slant-none: normal;
    --text-slant-italic: italic;

  /* #endregion */
  /* #region Color */
    --theme-hue: 270;

    --theme-bright-dark-1  : oklch(0.10 0.08 var(--theme-hue));
    --theme-bright-dark-2  : oklch(0.15 0.10 var(--theme-hue));
    --theme-bright-dark-3  : oklch(0.20 0.12 var(--theme-hue));
    --theme-bright-dark-4  : oklch(0.25 0.14 var(--theme-hue));
    --theme-bright-dark-5  : oklch(0.30 0.18 var(--theme-hue));
    --theme-bright-dark-6  : oklch(0.35 0.22 var(--theme-hue));
    --theme-bright-dark-7  : oklch(0.40 0.26 var(--theme-hue));
    --theme-bright-dark-8  : oklch(0.45 0.30 var(--theme-hue));
    --theme-bright         : oklch(0.50 0.32 var(--theme-hue));
    --theme-bright-light-8 : oklch(0.55 0.30 var(--theme-hue));
    --theme-bright-light-7 : oklch(0.60 0.24 var(--theme-hue));
    --theme-bright-light-6 : oklch(0.65 0.18 var(--theme-hue));
    --theme-bright-light-5 : oklch(0.70 0.14 var(--theme-hue));
    --theme-bright-light-4 : oklch(0.75 0.10 var(--theme-hue));
    --theme-bright-light-3 : oklch(0.80 0.08 var(--theme-hue));
    --theme-bright-light-2 : oklch(0.85 0.06 var(--theme-hue));
    --theme-bright-light-1 : oklch(0.90 0.05 var(--theme-hue));

    --theme-dull-dark-1  : oklch(0.10 0.008 var(--theme-hue));
    --theme-dull-dark-2  : oklch(0.15 0.012 var(--theme-hue));
    --theme-dull-dark-3  : oklch(0.20 0.016 var(--theme-hue));
    --theme-dull-dark-4  : oklch(0.25 0.020 var(--theme-hue));
    --theme-dull-dark-5  : oklch(0.30 0.028 var(--theme-hue));
    --theme-dull-dark-6  : oklch(0.35 0.036 var(--theme-hue));
    --theme-dull-dark-7  : oklch(0.40 0.044 var(--theme-hue));
    --theme-dull-dark-8  : oklch(0.45 0.052 var(--theme-hue));
    --theme-dull         : oklch(0.50 0.056 var(--theme-hue));
    --theme-dull-light-8 : oklch(0.55 0.054 var(--theme-hue));
    --theme-dull-light-7 : oklch(0.60 0.048 var(--theme-hue));
    --theme-dull-light-6 : oklch(0.65 0.040 var(--theme-hue));
    --theme-dull-light-5 : oklch(0.70 0.032 var(--theme-hue));
    --theme-dull-light-4 : oklch(0.75 0.024 var(--theme-hue));
    --theme-dull-light-3 : oklch(0.80 0.018 var(--theme-hue));
    --theme-dull-light-2 : oklch(0.85 0.012 var(--theme-hue));
    --theme-dull-light-1 : oklch(0.90 0.008 var(--theme-hue));

    --black   : oklch(0 0 0);
    --dark    : oklch(0.05 0 0);
    --dark-1  : oklch(0.10 0 0);
    --dark-2  : oklch(0.15 0 0);
    --dark-3  : oklch(0.20 0 0);
    --dark-4  : oklch(0.25 0 0);
    --dark-5  : oklch(0.30 0 0);
    --dark-6  : oklch(0.35 0 0);
    --dark-7  : oklch(0.40 0 0);
    --dark-8  : oklch(0.45 0 0);
    --gray    : oklch(0.50 0 0);
    --light-8 : oklch(0.55 0 0);
    --light-7 : oklch(0.60 0 0);
    --light-6 : oklch(0.65 0 0);
    --light-5 : oklch(0.70 0 0);
    --light-4 : oklch(0.75 0 0);
    --light-3 : oklch(0.80 0 0);
    --light-2 : oklch(0.85 0 0);
    --light-1 : oklch(0.90 0 0);
    --light   : oklch(0.95 0 0);
    --white   : oklch(1 0 0);

    --dull-red:      oklch(0.32 0.07 25);
    --dull-orange:   oklch(0.32 0.07 55);
    --dull-yellow:   oklch(0.32 0.05 95);
    --dull-green:    oklch(0.32 0.07 145);
    --dull-cyan:     oklch(0.32 0.07 195);
    --dull-blue:     oklch(0.32 0.07 250);
    --dull-purple:   oklch(0.32 0.07 295);
    --dull-magenta:  oklch(0.32 0.07 330);

    --mid-red:       oklch(0.55 0.14 25);
    --mid-orange:    oklch(0.55 0.14 55);
    --mid-yellow:    oklch(0.55 0.11 95);
    --mid-green:     oklch(0.55 0.14 145);
    --mid-cyan:      oklch(0.55 0.14 195);
    --mid-blue:      oklch(0.55 0.14 250);
    --mid-purple:    oklch(0.55 0.14 295);
    --mid-magenta:   oklch(0.55 0.14 330);

    --sharp-red:     oklch(0.63 0.254  21);
    --sharp-orange:  oklch(0.69 0.207  42);
    --sharp-yellow:  oklch(0.97 0.191 105);
    --sharp-green:   oklch(0.80 0.291 145);
    --sharp-cyan:    oklch(0.89 0.153 196);
    --sharp-blue:    oklch(0.68 0.175 245);
    --sharp-purple:  oklch(0.54 0.294 296);
    --sharp-magenta: oklch(0.70 0.323 328);


    --bright-red:    oklch(0.90 0.20 25);
    --bright-orange: oklch(0.90 0.20 55);
    --bright-yellow: oklch(0.90 0.16 95);
    --bright-green:  oklch(0.90 0.20 145);
    --bright-cyan:   oklch(0.90 0.20 195);
    --bright-blue:   oklch(0.90 0.20 250);
    --bright-purple: oklch(0.90 0.20 295);
    --bright-magenta:oklch(0.90 0.20 330);

    --pale-red:      oklch(0.96 0.14 25);
    --pale-orange:   oklch(0.96 0.14 55);
    --pale-yellow:   oklch(0.96 0.12 95);
    --pale-green:    oklch(0.96 0.14 145);
    --pale-cyan:     oklch(0.96 0.14 195);
    --pale-blue:     oklch(0.96 0.14 250);
    --pale-purple:   oklch(0.96 0.14 295);
    --pale-magenta:  oklch(0.96 0.14 330);

  /* #endregion */
  /* #region Misc Appearance */
    --shadow-xs:
      0 1px 2px -1px var(--color-shadow);
    --shadow-s:
      0 2px 4px -1px var(--color-shadow),
      0 1px 2px -1px var(--color-shadow);
    --shadow-m:
      0 4px 8px -2px var(--color-shadow),
      0 2px 4px -2px var(--color-shadow);
    --shadow-l:
      0 8px 16px -4px var(--color-shadow),
      0 4px 8px -4px var(--color-shadow);
    --shadow-xl:
      0 16px 32px -8px var(--color-shadow),
      0 8px 16px -8px var(--color-shadow);

    --shadow-none: none;
    --shadow-focus: 0 0 4px 4px var(--theme-bright);
    --shadow-around: 0 0 5px 0 var(--color-shadow);

    --radius-none: 0;
    --radius-full: 9999px;
    --radius-xs:   0.25rem;  /* 4px  */
    --radius-s:    0.5rem;   /* 6px */
    --radius-m:   0.75rem;   /* 12px */
    --radius-l:    1rem;     /* 16px */
    --radius-xl:   1.5rem;   /* 24px */

    --opacity-none:  0;
    --opacity-disabled:  0.5;
    --opacity-mute:  0.8;
    --opacity-full:  1;

    --background-dark: oklch(0 0 0 / 0.25);
    --background-darker: oklch(0 0 0 / 0.5);
    
    --text-color-select: var(--background-page);
    --background-select: var(--theme-bright);

    --border-color: var(--text-color);
  /* #endregion */
  /* #region transition */
    --duration-none: 50ms;
    --duration-xs: 100ms;
    --duration-s:  150ms;
    --duration-m:  200ms;
    --duration-l:  250ms;
    --duration-xl: 500ms;
  /* #endregion */
  /* #region default theme */
    color-scheme: dark;

    --text-color:         var(--white);
    --text-color-mute:    var(--light-4);
    --text-color-link:    var(--theme-bright-light-7);
    --text-color-hover:   var(--theme-bright-light-8);
    --text-color-card:    var(--text-color);
    --text-color-math:    var(--text-color);
    --text-color-heading: var(--text-color);
    --text-label:         var(--white);

    --background-page:  var(--theme-dull-dark-3);
    --background-text:  var(--theme-dull-dark-4);
    --background-plot:  var(--theme-dull-dark-4);
    --background-model: var(--theme-dull-dark-5);
    --background-math:  var(--theme-dull-dark-6);
    --background-group: var(--theme-dull-dark-6);
    --background-track: var(--theme-dull-dark-6);
    --background-card:  var(--theme-dull-dark-7);
    --background-input: var(--theme-dull-dark-8);

    --background-theme:    var(--theme-bright-dark-5);
    --background-button:   var(--theme-bright);
    --background-active:   var(--theme-bright-light-8);
    --background-inactive: var(--theme-dull-dark-8);
    --text-color-theme:    var(--white);
    --text-color-button:   var(--white);
    --text-color-input:    var(--white);
    --text-color-active:   var(--white);
    --text-color-inactive: var(--white);

    --line-axis: var(--white);
    --line-grid: var(--dark-6);
    --line-zero: var(--light-6);
    --line-default: var(--theme-bright-light-5);
    --dot-default:  var(--theme-bright-light-5);
    --fill-default: var(--theme-bright-light-5);

    --color-shadow: color-mix(in oklch, var(--black) 30%, transparent);
  /* #endregion */
  }
  :root.light {
    color-scheme: light;

    --text-color:         var(--black);
    --text-color-mute:    var(--dark-4);
    --text-color-link:    var(--theme-bright-dark-4);
    --text-color-hover:   var(--theme-bright-dark-8);
    --text-color-card:    var(--text-color);
    --text-color-math:    var(--text-color);
    --text-color-heading: var(--text-color);
    --text-label:         var(--black);
    
    --background-page:  var(--theme-dull-light-2);
    --background-text:  var(--theme-dull-light-1);
    --background-plot:  var(--theme-dull-light-1);
    --background-model: var(--theme-dull-light-2);
    --background-math:  var(--theme-dull-light-4);
    --background-group: var(--theme-dull-light-3);
    --background-track: var(--theme-dull-light-4);
    --background-card:  var(--theme-dull-light-5);
    --background-input: var(--theme-dull-light-7);

    --background-theme:    var(--theme-bright-light-8);
    --background-button:   var(--theme-bright);
    --background-active:   var(--theme-bright-light-8);
    --background-inactive: var(--theme-dull-light-7);
    --text-color-theme:    var(--white);
    --text-color-button:   var(--white);
    --text-color-input:    var(--white);
    --text-color-active:   var(--white);
    --text-color-inactive: var(--white);
    
    --line-axis:    var(--black);
    --line-grid:    var(--light-4);
    --line-zero:    var(--dark-8);
    --line-default: var(--theme-bright-dark-4);
    --dot-default:  var(--theme-bright-dark-4);
    --fill-default: var(--theme-bright-dark-4);

    --color-shadow: color-mix(in oklch, var(--black) 50%, transparent);
  }
  html {
    line-height: var(--line-height-m);
    font-size: 1rem;
    scrollbar-color: var(--background-theme) transparent;
    scrollbar-width: auto;
    scroll-behavior: smooth;
    height: 100%;
    cursor: none;
  }
  body {
    font-family: var(--font-sans);
    color: var(--text-color);
    background: var(--background-page);
    cursor: default;
    user-select: text;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-clip: padding-box;

    color-scheme: inherit;

    font-size: var(--font-size-m);
    letter-spacing: var(--letter-spacing-m);
    font-weight: var(--font-weight-normal);

    min-height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;

    overscroll-behavior: none;
    touch-action: manipulation;
  }
  :focus-visible{
    outline: none;
    outline-offset: var(--space-2px);
    box-shadow: var(--shadow-focus) !important;
  }
  ::selection {
    background: var(--background-select);
    color: var(--text-color-select);
  }
  mos-main{
    visibility: hidden;
  }
}
@layer primitive {
/* #region Themeable */
  .background-page    { background: var(--background-page); }
  .background-text    { background: var(--background-text); }
  .background-group   { background: var(--background-group); }
  .background-play    { background: var(--background-play); }
  .background-card    { background: var(--background-card); }
  .background-plot    { background: var(--background-plot); }
  .background-model   { background: var(--background-model); }
  .background-theme   { background: var(--background-theme); }
  .background-math    { background: var(--background-math); }
  .background-input   { background: var(--background-input); }
  .background-track   { background: var(--background-track); }
  .background-button  { background: var(--background-button); }
  .background-active  { background: var(--background-active); }
  .background-inactive{ background: var(--background-inactive); }
  .background-dark    { background: var(--background-dark); }
  .background-darker  { background: var(--background-darker); }
  .background-page,
  .background-text,
  .background-group,
  .background-card,
  .background-plot,
  .background-model,
  .background-theme,
  .background-input,
  .background-math,
  .background-track,
  .background-button,
  .background-active,
  .background-inactive,
  .background-dark,
  .background-darker
  { transition: background var(--duration-xl) ease}
  .fill-plot    { fill: var(--background-plot); }
  .fill-input   { fill: var(--background-input); }
  .fill-button  { fill: var(--background-button); }
  .fill-active  { fill: var(--background-active); }
  .stroke-input    { stroke: var(--background-input); }
  .stroke-button   { stroke: var(--background-button); }
  .stroke-active   { stroke: var(--background-active); }
  .background-none { background: transparent; }
  .fill-none       { fill: transparent; }
  .stroke-none     { stroke: transparent; }

  .text-color        { color: var(--text-color); }
  .text-color-theme  { color: var(--text-color-theme); }
  .text-color-math   { color: var(--text-color-math); }
  .text-color-card   { color: var(--text-color-card); }
  .text-color-input  { color: var(--text-color-input); }
  .text-color-button { color: var(--text-color-button); }
  .text-color-active { color: var(--text-color-active); }
  .text-color-inactive { color: var(--text-color-inactive); }
  .text-color-mute   { color: var(--text-color-mute); }
  .text-color-heading{ color: var(--text-color-heading); }
  .text-color-link   { color: var(--text-color-link); }
  .text-color-link:hover   { color: var(--text-color-hover); }
  .text-color-select { color: var(--text-color-select); }
  .text-color-inherit { color: inherit; }
/* #endregion */
/* #region Appearance */
  .border-s { border: 1px solid var(--border-color); }
  .border-m { border: 2px solid var(--border-color); }
  .border-l { border: 3px solid var(--border-color); }
  .border-none { border: none; }
  .stroke-border-s { stroke-width: 1px; stroke: var(--border-color); }
  .stroke-border-m { stroke-width: 2px; stroke: var(--border-color); }
  .stroke-border-l { stroke-width: 3px; stroke: var(--border-color); }

  .cursor-default { cursor: default; }
  .cursor-pointer { cursor: pointer; }
  .cursor-text    { cursor: text; }
  .cursor-inherit { cursor: inherit; }
  .cursor-none    { cursor: none; }

  .corner-xs { border-radius: var(--radius-xs); }
  .corner-s  { border-radius: var(--radius-s); }
  .corner-m  { border-radius: var(--radius-m); }
  .corner-l  { border-radius: var(--radius-l); }
  .corner-xl { border-radius: var(--radius-xl); }
  .corner-full { border-radius: var(--radius-full); }
  .corner-none    { border-radius: 0;}
  .corner-none-tl { border-top-left-radius: 0; }
  .corner-none-tr { border-top-right-radius: 0; }
  .corner-none-bl { border-bottom-left-radius: 0; }
  .corner-none-br { border-bottom-right-radius: 0; }  

  .shadow-none { box-shadow: var(--shadow-none); }
  .shadow-xs   { box-shadow: var(--shadow-xs); }
  .shadow-s    { box-shadow: var(--shadow-s); }
  .shadow-m    { box-shadow: var(--shadow-m); }
  .shadow-l    { box-shadow: var(--shadow-l); }
  .shadow-xl   { box-shadow: var(--shadow-xl); }
  .shadow-around { box-shadow: var(--shadow-around); }
  .shadow-interactive        { box-shadow: var(--shadow-s); }
  .shadow-interactive:hover  { box-shadow: var(--shadow-l); }
  .shadow-interactive:active { box-shadow: var(--shadow-l); }
  .background-button.shadow-interactive:active { box-shadow: var(--shadow-m); }

  .opacity-none { opacity: 0 }
  .opacity-disabled { opacity: 0.5}
  .opacity-mute { opacity: 0.9 }
  .opacity-full { opacity: 1 }
  
  .blur-xs {
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
  }
  .blur-s {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .blur-m {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
  .blur-l {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  .blur-xl {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
/* #endregion */
/* #region Typography */
  .font-sans { font-family: var(--font-sans);}
  .font-serif { font-family: var(--font-serif);}
  .font-math { font-family: var(--font-math);}
  .font-mono { font-family: var(--font-mono);}

  .text-left { text-align: start; }
  .text-center { text-align: center; }
  .text-right { text-align: end; }
  .text-down { writing-mode: sideways-rl; }
  .text-up   { writing-mode: sideways-lr; }
  .text-nowrap { white-space: nowrap; }
  .text-selectable { user-select: text; cursor: text; }
  
  .line-height-one { line-height: var(--line-height-one); }
  .line-height-xs  { line-height: var(--line-height-xs); }
  .line-height-s   { line-height: var(--line-height-s); }
  .line-height-m   { line-height: var(--line-height-m); }
  .line-height-l   { line-height: var(--line-height-l); }
  .line-height-xl  { line-height: var(--line-height-xl); }

  .font-weight-thinnest { font-weight: var(--font-weight-thinnest); }
  .font-weight-thin     { font-weight: var(--font-weight-thin); }
  .font-weight-normal   { font-weight: var(--font-weight-normal); }
  .font-weight-boldish  { font-weight: var(--font-weight-boldish); }
  .font-weight-bold     { font-weight: var(--font-weight-bold); }
  .font-weight-bolder   { font-weight: var(--font-weight-bolder); }
  .font-weight-boldest  { font-weight: var(--font-weight-boldest); }

  .letter-spacing-xs { letter-spacing: var(--letter-spacing-xs); }
  .letter-spacing-s  { letter-spacing: var(--letter-spacing-s); }
  .letter-spacing-m  { letter-spacing: var(--letter-spacing-m); }
  .letter-spacing-l  { letter-spacing: var(--letter-spacing-l); }
  .letter-spacing-xl { letter-spacing: var(--letter-spacing-xl); }

  .normal-case  { text-transform: var(--text-transform-none); }
  .cap-case  { text-transform: var(--text-transform-caps); }
  .upper-case { text-transform: var(--text-transform-upper); }
  .lower-case { text-transform: var(--text-transform-lower); }

  .non-italic { font-style: var(--text-slant-none); }
  .italic { font-style: var(--text-slant-italic); }

  .font-size-2xs { font-size: var(--font-size-2xs); }
  .font-size-xs  { font-size: var(--font-size-xs); }
  .font-size-s   { font-size: var(--font-size-s); }
  .font-size-m   { font-size: var(--font-size-m); }
  .font-size-l   { font-size: var(--font-size-l); }
  .font-size-xl  { font-size: var(--font-size-xl); }
  .font-size-2xl { font-size: var(--font-size-2xl); }
  .font-size-3xl { font-size: var(--font-size-3xl); }
  .font-size-4xl { font-size: var(--font-size-4xl); }
  .font-size-5xl { font-size: var(--font-size-5xl); }

  .font-size-half { font-size: 0.5em }
  .font-size-smaller { font-size: 0.75em }
  .font-size-same   { font-size: 1em }
  .font-size-larger { font-size: 1.25em }
  .font-size-double { font-size: 2em }

  .indent-none { text-indent: 0; }
  .indent p, p.indent { text-indent: 2.5em; }

  .underscore { border-bottom: 1px solid currentColor; }

/* #endregion */
/* #region Layout */
  .flex-column { display: flex; flex-direction: column; }
  .flex-row { display: flex; flex-direction: row; }
  .flex-column.reverse-column { flex-direction: column-reverse }
  .flex-row.reverse-row { flex-direction: row-reverse}
  .flex-column > *,
  .flex-row > *{
    flex: 0 1 auto;
    min-width: 0;
    min-height: 0;
  }
  .flex-direction-column { flex-direction: column; }
  .flex-direction-row { flex-direction: row; }
  .flex-direction-column.reverse-column { flex-direction: column-reverse }
  .flex-direction-row.reverse-row { flex-direction: row-reverse}
  .flex-direction-column > *,
  .flex-direction-row > *{
    flex: 0 1 auto;
    min-width: 0;
    min-height: 0;
  }

  .wrap { flex-wrap:wrap }
  .n_wrap { flex-wrap:nowrap }

  .justify-start   { justify-content: flex-start; }
  .justify-center  { justify-content: center; }
  .justify-end     { justify-content: flex-end; }
  .justify-between { justify-content: space-between; }
  .justify-around  { justify-content: space-around; }

  .align-start   { align-items: flex-start; }
  .align-center  { align-items: center; }
  .align-end     { align-items: flex-end; }
  .align-stretch { align-items: stretch; }
  .align-baseline { align-items: baseline; }

  .margin-right-auto {margin-right:auto}

/* #endregion */
/* #region Sizing */
  /* #region min-height */
    .min-height-text-2xs { min-height: var(--font-size-2xs); }
    .min-height-text-xs  { min-height: var(--font-size-xs); }
    .min-height-text-s   { min-height: var(--font-size-s); }
    .min-height-text-m   { min-height: var(--font-size-m); }
    .min-height-text-l   { min-height: var(--font-size-l); }
    .min-height-text-xl  { min-height: var(--font-size-xl); }
    .min-height-text-2xl { min-height: var(--font-size-2xl); }
    .min-height-text-3xl { min-height: var(--font-size-3xl); }
    .min-height-text-4xl { min-height: var(--font-size-4xl); }
    .min-height-text-5xl { min-height: var(--font-size-5xl); }

    .min-height-micro-3xs { min-height: var(--micro-size-3xs); }
    .min-height-micro-2xs { min-height: var(--micro-size-2xs); }
    .min-height-micro-xs  { min-height: var(--micro-size-xs); }
    .min-height-micro-s   { min-height: var(--micro-size-s); }
    .min-height-micro-m   { min-height: var(--micro-size-m); }
    .min-height-micro-l   { min-height: var(--micro-size-l); }
    .min-height-micro-xl  { min-height: var(--micro-size-xl); }
    .min-height-micro-2xl { min-height: var(--micro-size-2xl); }
    .min-height-micro-3xl { min-height: var(--micro-size-3xl); }

    .min-height-3xs { min-height: var(--size-3xs); }
    .min-height-2xs { min-height: var(--size-2xs); }
    .min-height-xs  { min-height: var(--size-xs); }
    .min-height-s   { min-height: var(--size-s); }
    .min-height-m   { min-height: var(--size-m); }
    .min-height-l   { min-height: var(--size-l); }
    .min-height-xl  { min-height: var(--size-xl); }
    .min-height-2xl { min-height: var(--size-2xl); }
    .min-height-3xl { min-height: var(--size-3xl); }

    .min-height-none     { min-height: 0; }
    .min-height-screen { min-height: 100vh; }
    .min-height-fill   { min-height: 100%; }
    .min-height-max   { min-height: max-content; }
    .min-height-fit   { min-height: fit-content; }
    .min-height-min   { min-height: min-content; }
  /* #endregion */
  /* #region max-height */
    .max-height-text-2xs { max-height: var(--font-size-2xs); }
    .max-height-text-xs  { max-height: var(--font-size-xs); }
    .max-height-text-s   { max-height: var(--font-size-s); }
    .max-height-text-m   { max-height: var(--font-size-m); }
    .max-height-text-l   { max-height: var(--font-size-l); }
    .max-height-text-xl  { max-height: var(--font-size-xl); }
    .max-height-text-2xl { max-height: var(--font-size-2xl); }
    .max-height-text-3xl { max-height: var(--font-size-3xl); }
    .max-height-text-4xl { max-height: var(--font-size-4xl); }
    .max-height-text-5xl { max-height: var(--font-size-5xl); }

    .max-height-micro-3xs { max-height: var(--micro-size-3xs); }
    .max-height-micro-2xs { max-height: var(--micro-size-2xs); }
    .max-height-micro-xs  { max-height: var(--micro-size-xs); }
    .max-height-micro-s   { max-height: var(--micro-size-s); }
    .max-height-micro-m   { max-height: var(--micro-size-m); }
    .max-height-micro-l   { max-height: var(--micro-size-l); }
    .max-height-micro-xl  { max-height: var(--micro-size-xl); }
    .max-height-micro-2xl { max-height: var(--micro-size-2xl); }
    .max-height-micro-3xl { max-height: var(--micro-size-3xl); }

    .max-height-3xs { max-height: var(--size-3xs); }
    .max-height-2xs { max-height: var(--size-2xs); }
    .max-height-xs  { max-height: var(--size-xs); }
    .max-height-s   { max-height: var(--size-s); }
    .max-height-m   { max-height: var(--size-m); }
    .max-height-l   { max-height: var(--size-l); }
    .max-height-xl  { max-height: var(--size-xl); }
    .max-height-2xl { max-height: var(--size-2xl); }
    .max-height-3xl { max-height: var(--size-3xl); }

    .max-height-none     { max-height: 0; }
    .max-height-screen { max-height: 100vh; }
    .max-height-fill   { max-height: 100%; }
    .max-height-max   { max-height: max-content; }
    .max-height-min   { max-height: min-content; }
  /* #endregion */
  /* #region min-width */
    .min-width-text-2xs { min-width: var(--font-size-2xs); }
    .min-width-text-xs  { min-width: var(--font-size-xs); }
    .min-width-text-s   { min-width: var(--font-size-s); }
    .min-width-text-m   { min-width: var(--font-size-m); }
    .min-width-text-l   { min-width: var(--font-size-l); }
    .min-width-text-xl  { min-width: var(--font-size-xl); }
    .min-width-text-2xl { min-width: var(--font-size-2xl); }
    .min-width-text-3xl { min-width: var(--font-size-3xl); }
    .min-width-text-4xl { min-width: var(--font-size-4xl); }
    .min-width-text-5xl { min-width: var(--font-size-5xl); }

    .min-width-micro-3xs { min-width: var(--micro-size-3xs); }
    .min-width-micro-2xs { min-width: var(--micro-size-2xs); }
    .min-width-micro-xs  { min-width: var(--micro-size-xs); }
    .min-width-micro-s   { min-width: var(--micro-size-s); }
    .min-width-micro-m   { min-width: var(--micro-size-m); }
    .min-width-micro-l   { min-width: var(--micro-size-l); }
    .min-width-micro-xl  { min-width: var(--micro-size-xl); }
    .min-width-micro-2xl { min-width: var(--micro-size-2xl); }
    .min-width-micro-3xl { min-width: var(--micro-size-3xl); }

    .min-width-3xs { min-width: var(--size-3xs); }
    .min-width-2xs { min-width: var(--size-2xs); }
    .min-width-xs  { min-width: var(--size-xs); }
    .min-width-s   { min-width: var(--size-s); }
    .min-width-m   { min-width: var(--size-m); }
    .min-width-l   { min-width: var(--size-l); }
    .min-width-xl  { min-width: var(--size-xl); }
    .min-width-2xl { min-width: var(--size-2xl); }
    .min-width-3xl { min-width: var(--size-3xl); }

    .min-width-content-s    { min-width: var(--content-width-s);   }
    .min-width-content-m    { min-width: var(--content-width-m);   }
    .min-width-content-l    { min-width: var(--content-width-l);   }
    .min-width-content-xl   { min-width: var(--content-width-xl);  }
    .min-width-content-2xl  { min-width: var(--content-width-2xl); }

    .min-width-none     { min-width: 0; }
    .min-width-screen { min-width: 100vw; }
    .min-width-fill   { min-width: 100%; }
    .min-width-max   { min-width: max-content; }
    .min-width-fit   { min-width: fit-content; }
    .min-width-min   { min-width: min-content; }
  /* #endregion */
  /* #region max-width */
    .max-width-text-2xs { max-width: var(--font-size-2xs); }
    .max-width-text-xs  { max-width: var(--font-size-xs); }
    .max-width-text-s   { max-width: var(--font-size-s); }
    .max-width-text-m   { max-width: var(--font-size-m); }
    .max-width-text-l   { max-width: var(--font-size-l); }
    .max-width-text-xl  { max-width: var(--font-size-xl); }
    .max-width-text-2xl { max-width: var(--font-size-2xl); }
    .max-width-text-3xl { max-width: var(--font-size-3xl); }
    .max-width-text-4xl { max-width: var(--font-size-4xl); }
    .max-width-text-5xl { max-width: var(--font-size-5xl); }

    .max-width-micro-3xs { max-width: var(--micro-size-3xs); }
    .max-width-micro-2xs { max-width: var(--micro-size-2xs); }
    .max-width-micro-xs  { max-width: var(--micro-size-xs); }
    .max-width-micro-s   { max-width: var(--micro-size-s); }
    .max-width-micro-m   { max-width: var(--micro-size-m); }
    .max-width-micro-l   { max-width: var(--micro-size-l); }
    .max-width-micro-xl  { max-width: var(--micro-size-xl); }
    .max-width-micro-2xl { max-width: var(--micro-size-2xl); }
    .max-width-micro-3xl { max-width: var(--micro-size-3xl); }

    .max-width-3xs { max-width: var(--size-3xs); }
    .max-width-2xs { max-width: var(--size-2xs); }
    .max-width-xs  { max-width: var(--size-xs); }
    .max-width-s   { max-width: var(--size-s); }
    .max-width-m   { max-width: var(--size-m); }
    .max-width-l   { max-width: var(--size-l); }
    .max-width-xl  { max-width: var(--size-xl); }
    .max-width-2xl { max-width: var(--size-2xl); }
    .max-width-3xl { max-width: var(--size-3xl); }

    .max-width-none     { max-width: 0; }
    .max-width-screen { max-width: 100vw; }
    .max-width-fill   { max-width: 100%; }
    .max-width-max   { max-width: max-content; }
    .max-width-min   { max-width: min-content; }

    .max-width-content-s    { max-width: var(--content-width-s);   }
    .max-width-content-m    { max-width: var(--content-width-m);   }
    .max-width-content-l    { max-width: var(--content-width-l);   }
    .max-width-content-xl   { max-width: var(--content-width-xl);  }
    .max-width-content-2xl  { max-width: var(--content-width-2xl); }
  /* #endregion */
  /* #region base */
    .base-text-2xs { flex-basis: var(--font-size-2xs); }
    .base-text-xs  { flex-basis: var(--font-size-xs); }
    .base-text-s   { flex-basis: var(--font-size-s); }
    .base-text-m   { flex-basis: var(--font-size-m); }
    .base-text-l   { flex-basis: var(--font-size-l); }
    .base-text-xl  { flex-basis: var(--font-size-xl); }
    .base-text-2xl { flex-basis: var(--font-size-2xl); }
    .base-text-3xl { flex-basis: var(--font-size-3xl); }
    .base-text-4xl { flex-basis: var(--font-size-4xl); }
    .base-text-5xl { flex-basis: var(--font-size-5xl); }

    .base-micro-3xs { flex-basis: var(--micro-size-3xs); }
    .base-micro-2xs { flex-basis: var(--micro-size-2xs); }
    .base-micro-xs  { flex-basis: var(--micro-size-xs); }
    .base-micro-s   { flex-basis: var(--micro-size-s); }
    .base-micro-m   { flex-basis: var(--micro-size-m); }
    .base-micro-l   { flex-basis: var(--micro-size-l); }
    .base-micro-xl  { flex-basis: var(--micro-size-xl); }
    .base-micro-2xl { flex-basis: var(--micro-size-2xl); }
    .base-micro-3xl { flex-basis: var(--micro-size-3xl); }

    .base-3xs { flex-basis: var(--size-3xs); }
    .base-2xs { flex-basis: var(--size-2xs); }
    .base-xs  { flex-basis: var(--size-xs); }
    .base-s   { flex-basis: var(--size-s); }
    .base-m   { flex-basis: var(--size-m); }
    .base-l   { flex-basis: var(--size-l); }
    .base-xl  { flex-basis: var(--size-xl); }
    .base-2xl { flex-basis: var(--size-2xl); }
    .base-3xl { flex-basis: var(--size-3xl); }

    .base-macro-s   { flex-basis: var(--content-width-s); }
    .base-macro-m   { flex-basis: var(--content-width-m); }
    .base-macro-l   { flex-basis: var(--content-width-l); }
    .base-macro-xl  { flex-basis: var(--content-width-xl); }
    .base-macro-2xl { flex-basis: var(--content-width-2xl); }

    .base-none  { flex-basis: 0; }
    .base-auto  { flex-basis: auto; }
    .base-fill  { flex-basis: 100%; }
    .base-fit   { flex-basis: fit-content; }
    .base-min   { flex-basis: min-content; }
    .base-max   { flex-basis: max-content; }
  /* #endregion */

  .height-none   { height: 0; }
  .height-screen { height: 100vh; }
  .height-fill   { height: 100%; }
  .height-auto   { height: max-content; }

  .width-none   { width: 0 }
  .width-screen { width: 100vw }
  .width-fill   { width: 100%; }
  .width-auto   { width: max-content; }

  .grow     { flex-grow: 1; }
  .nogrow   { flex-grow: 0; }   /* Default */
  .no-shrink { flex-shrink: 0; }
  .shrink   { flex-shrink: 1; } /* Default */
  
  .resize-none{ resize: none; }
  .resize{ overflow: hidden; resize: both; }
  .resize-x{ resize: horizontal; }
  .resize-y{ resize: vertical; }

  .clip    { overflow: hidden; }
  .no-clip { overflow: visible; }
  .scroll  { overflow: auto; }

  .square {aspect-ratio: 1;}
/* #endregion */
/* #region Spacing */
  .pad-one { padding: var(--space-one); }
  .pad-two { padding: var(--space-two); }
  .pad-3xs { padding: var(--space-3xs); }
  .pad-2xs { padding: var(--space-2xs); }
  .pad-xs  { padding: var(--space-xs); }
  .pad-s   { padding: var(--space-s); }
  .pad-m   { padding: var(--space-m); }
  .pad-l   { padding: var(--space-l); }
  .pad-xl  { padding: var(--space-xl); }
  .pad-2xl { padding: var(--space-2xl); }
  .pad-3xl { padding: var(--space-3xl); }

  .pad-inline-one  { padding-inline: var(--space-one); }
  .pad-inline-two  { padding-inline: var(--space-two); }
  .pad-inline-3xs  { padding-inline: var(--space-3xs); }
  .pad-inline-2xs  { padding-inline: var(--space-2xs); }
  .pad-inline-xs   { padding-inline: var(--space-xs); }
  .pad-inline-s    { padding-inline: var(--space-s); }
  .pad-inline-m    { padding-inline: var(--space-m); }
  .pad-inline-l    { padding-inline: var(--space-l); }
  .pad-inline-xl   { padding-inline: var(--space-xl); }
  .pad-inline-2xl  { padding-inline: var(--space-2xl); }
  .pad-inline-3xl  { padding-inline: var(--space-3xl); }

  .pad-block-one  { padding-block: var(--space-one); }
  .pad-block-two  { padding-block: var(--space-two); }
  .pad-block-3xs  { padding-block: var(--space-3xs); }
  .pad-block-2xs  { padding-block: var(--space-2xs); }
  .pad-block-xs   { padding-block: var(--space-xs); }
  .pad-block-s    { padding-block: var(--space-s); }
  .pad-block-m    { padding-block: var(--space-m); }
  .pad-block-l    { padding-block: var(--space-l); }
  .pad-block-xl   { padding-block: var(--space-xl); }
  .pad-block-2xl  { padding-block: var(--space-2xl); }
  .pad-block-3xl  { padding-block: var(--space-3xl); }

  .pad-left-one   { padding-left: var(--space-one); }
  .pad-left-two   { padding-left: var(--space-two); }
  .pad-left-3xs   { padding-left: var(--space-3xs); }
  .pad-left-2xs   { padding-left: var(--space-2xs); }
  .pad-left-xs    { padding-left: var(--space-xs); }
  .pad-left-s     { padding-left: var(--space-s); }
  .pad-left-m     { padding-left: var(--space-m); }
  .pad-left-l     { padding-left: var(--space-l); }
  .pad-left-xl    { padding-left: var(--space-xl); }
  .pad-left-2xl   { padding-left: var(--space-2xl); }
  .pad-left-3xl   { padding-left: var(--space-3xl); }

  .pad-right-one  { padding-right: var(--space-one); }
  .pad-right-two  { padding-right: var(--space-two); }
  .pad-right-3xs  { padding-right: var(--space-3xs); }
  .pad-right-2xs  { padding-right: var(--space-2xs); }
  .pad-right-xs   { padding-right: var(--space-xs); }
  .pad-right-s    { padding-right: var(--space-s); }
  .pad-right-m    { padding-right: var(--space-m); }
  .pad-right-l    { padding-right: var(--space-l); }
  .pad-right-xl   { padding-right: var(--space-xl); }
  .pad-right-2xl  { padding-right: var(--space-2xl); }
  .pad-right-3xl  { padding-right: var(--space-3xl); }

  .pad-top-one    { padding-top: var(--space-one); }
  .pad-top-two    { padding-top: var(--space-two); }
  .pad-top-3xs    { padding-top: var(--space-3xs); }
  .pad-top-2xs    { padding-top: var(--space-2xs); }
  .pad-top-xs     { padding-top: var(--space-xs); }
  .pad-top-s      { padding-top: var(--space-s); }
  .pad-top-m      { padding-top: var(--space-m); }
  .pad-top-l      { padding-top: var(--space-l); }
  .pad-top-xl     { padding-top: var(--space-xl); }
  .pad-top-2xl    { padding-top: var(--space-2xl); }
  .pad-top-3xl    { padding-top: var(--space-3xl); }

  .pad-bottom-one  { padding-bottom: var(--space-one); }
  .pad-bottom-two  { padding-bottom: var(--space-two); }
  .pad-bottom-3xs  { padding-bottom: var(--space-3xs); }
  .pad-bottom-2xs  { padding-bottom: var(--space-2xs); }
  .pad-bottom-xs   { padding-bottom: var(--space-xs); }
  .pad-bottom-s    { padding-bottom: var(--space-s); }
  .pad-bottom-m    { padding-bottom: var(--space-m); }
  .pad-bottom-l    { padding-bottom: var(--space-l); }
  .pad-bottom-xl   { padding-bottom: var(--space-xl); }
  .pad-bottom-2xl  { padding-bottom: var(--space-2xl); }
  .pad-bottom-3xl  { padding-bottom: var(--space-3xl); }

  .pad-none        { padding: var(--space-none); }
  .pad-inline-none { padding-inline: var(--space-none); }
  .pad-block-none  { padding-block: var(--space-none); }
  .pad-left-none   { padding-left: var(--space-none); }
  .pad-right-none  { padding-right: var(--space-none); }
  .pad-top-none    { padding-top: var(--space-none); }
  .pad-bottom-none { padding-bottom: var(--space-none); }

  .gap-inherit { gap: inherit; }
  .gap-one  { gap: var(--space-one); }
  .gap-two  { gap: var(--space-two); }
  .gap-two  { gap: var(--space-two); }
  .gap-two  { gap: var(--space-two); }
  .gap-3xs  { gap: var(--space-3xs); }
  .gap-2xs  { gap: var(--space-2xs); }
  .gap-xs   { gap: var(--space-xs); }
  .gap-s    { gap: var(--space-s); }
  .gap-m    { gap: var(--space-m); }
  .gap-l    { gap: var(--space-l); }
  .gap-xl   { gap: var(--space-xl); }
  .gap-2xl  { gap: var(--space-2xl); }
  .gap-3xl  { gap: var(--space-3xl); }
  
  .gap-inline-one  { column-gap: var(--space-one); }
  .gap-inline-two  { column-gap: var(--space-two); }
  .gap-inline-3xs  { column-gap: var(--space-3xs); }
  .gap-inline-2xs  { column-gap: var(--space-2xs); }
  .gap-inline-xs   { column-gap: var(--space-xs); }
  .gap-inline-s    { column-gap: var(--space-s); }
  .gap-inline-m    { column-gap: var(--space-m); }
  .gap-inline-l    { column-gap: var(--space-l); }
  .gap-inline-xl   { column-gap: var(--space-xl); }
  .gap-inline-2xl  { column-gap: var(--space-2xl); }
  .gap-inline-3xl  { column-gap: var(--space-3xl); }
  
  .gap-block-one  { row-gap: var(--space-one); }
  .gap-block-two  { row-gap: var(--space-two); }
  .gap-block-3xs  { row-gap: var(--space-3xs); }
  .gap-block-2xs  { row-gap: var(--space-2xs); }
  .gap-block-xs   { row-gap: var(--space-xs); }
  .gap-block-s    { row-gap: var(--space-s); }
  .gap-block-m    { row-gap: var(--space-m); }
  .gap-block-l    { row-gap: var(--space-l); }
  .gap-block-xl   { row-gap: var(--space-xl); }
  .gap-block-2xl  { row-gap: var(--space-2xl); }
  .gap-block-3xl  { row-gap: var(--space-3xl); }
  
  .gap-none        { gap: var(--space-none); }
  .gap-inline-none { column-gap: var(--space-none); }
  .gap-block-none  { row-gap: var(--space-none); }
/* #endregion */
/* #region Positioning */
  .z-main    { z-index: 1 }
  .z-playback{ z-index: 2 }
  .z-hud     { z-index: 3 }
  .z-overlay { z-index: 4 }
  .z-dialog  { z-index: 5 }
  .z-popover { z-index: 6 }
  .z-panel   { z-index: 7 }
  .z-menu    { z-index: 8 }

  .vertical-align-baseline      { vertical-align: baseline; }
  .vertical-align-top           { vertical-align: top; }
  .vertical-align-middle        { vertical-align: middle; }
  .vertical-align-bottom        { vertical-align: bottom; }
  .vertical-align-text-top      { vertical-align: text-top; }
  .vertical-align-text-bottom   { vertical-align: text-bottom; }
  .vertical-align-super         { vertical-align: super; }
  .vertical-align-sub           { vertical-align: sub; }

  .display-block { display: block; }
  .display-inline { display: inline; }
  .display-inline-block { display: inline-block; }
  .display-flex { display: flex; }
  .display-inline-flex { display: inline-flex; }

  .push-right { margin-left: auto; }
  .push-left  { margin-right: auto; }
  .push-in    { margin-inline: auto; }

  .align-self-start  { align-self: flex-start; }
  .align-self-center { align-self: center; }
  .align-self-end    { align-self: flex-end; }
  .align-self-stretch { align-self: stretch; }

  .order-1 { order: 1; }
  .order-2 { order: 2; }
  .order-3 { order: 3; }
  .order-4 { order: 4; }

  .z-modal { z-index: var(--z-modal); }
  .center-translate-x {transform: translateX(-50%)}
  .center-translate-y {transform: translateY(-50%)}
  .center-translate {transform: translate(-50%,-50%)}

  .position-relative { position: relative; }
  .position-absolute { position: absolute; }
  .position-fixed { position: fixed; }
  .position-sticky { position: sticky; }

  .top-none      { top: 0; }
  .top-one    { top: var(--space-one); }
  .top-xs     { top: var(--space-xs); }
  .top-s      { top: var(--space-s); }
  .top-m      { top: var(--space-m); }
  .top-l      { top: var(--space-l); }
  .top-xl     { top: var(--space-xl); }
  .top-2xl    { top: var(--space-2xl); }
  .top-3xl    { top: var(--space-3xl); }
  .top-25     { top: 25%; }
  .top-50     { top: 50%; }
  .top-75     { top: 75%; }
  .top-100    { top: 100%;}
  
  .right-none    { right: 0; }
  .right-one  { right: var(--space-one); }
  .right-xs   { right: var(--space-xs); }
  .right-s    { right: var(--space-s); }
  .right-m    { right: var(--space-m); }
  .right-l    { right: var(--space-l); }
  .right-xl   { right: var(--space-xl); }
  .right-2xl  { right: var(--space-2xl); }
  .right-3xl  { right: var(--space-3xl); }
  .right-25     { right: 25%; }
  .right-50     { right: 50%; }
  .right-75     { right: 75%; }
  .right-100    { right: 100%;}
  
  .bottom-none   { bottom: 0; }
  .bottom-one { bottom: var(--space-one); }
  .bottom-xs  { bottom: var(--space-xs); }
  .bottom-s   { bottom: var(--space-s); }
  .bottom-m   { bottom: var(--space-m); }
  .bottom-l   { bottom: var(--space-l); }
  .bottom-xl  { bottom: var(--space-xl); }
  .bottom-2xl { bottom: var(--space-2xl); }
  .bottom-3xl { bottom: var(--space-3xl); }
  .bottom-25     { bottom: 25%; }
  .bottom-50     { bottom: 50%; }
  .bottom-75     { bottom: 75%; }
  .bottom-100    { bottom: 100%;}
  
  .left-none     { left: 0; }
  .left-one   { left: var(--space-one); }
  .left-xs    { left: var(--space-xs); }
  .left-s     { left: var(--space-s); }
  .left-m     { left: var(--space-m); }
  .left-l     { left: var(--space-l); }
  .left-xl    { left: var(--space-xl); }
  .left-2xl   { left: var(--space-2xl); }
  .left-3xl   { left: var(--space-3xl); }
  .left-25     { left: 25%; }
  .left-50     { left: 50%; }
  .left-75     { left: 75%; }
  .left-100    { left: 100%;}
  
  .inset-none    { inset: 0; }
  .inset-one  { inset: var(--space-one); }
  .inset-xs   { inset: var(--space-xs); }
  .inset-s    { inset: var(--space-s); }
  .inset-m    { inset: var(--space-m); }
  .inset-l    { inset: var(--space-l); }
  .inset-xl   { inset: var(--space-xl); }
  .inset-2xl  { inset: var(--space-2xl); }
  .inset-3xl  { inset: var(--space-3xl); }
  .inset-25     { inset: 25%; }
/* #endregion */
/* #region Visibility */
  .display-contents { 
    display: contents;
  }
  .hidden { 
    display: none;
  }
  .invisible { 
    visibility: hidden;
  }
  .transparent {
    opacity: 0;
  }
  .hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .unresponsive{
    pointer-events: none;
  }
  .responsive{
    pointer-events: auto;
  }
  .touch-none{
    touch-action: none;
  }
  .touch-auto{
    touch-action: auto;
  }
/* #endregion */
/* #region Transition */
  .transition-opacity-xs { transition: opacity var(--duration-xs) ease; }
  .transition-opacity-s { transition: opacity var(--duration-s) ease;}
  .transition-opacity-m { transition: opacity var(--duration-m) ease;}
  .transition-opacity-l { transition: opacity var(--duration-l) ease;}
  .transition-opacity-xl { transition: background var(--duration-xl) ease;}
  .transition-opacity-none { transition: opacity var(--duration-none) ease;}

  .transition-background-xs   { transition: background var(--duration-xs) ease;}
  .transition-background-s    { transition: background var(--duration-s) ease;}
  .transition-background-m    { transition: background var(--duration-m) ease;}
  .transition-background-l    { transition: background var(--duration-l) ease;}
  .transition-background-xl   { transition: background var(--duration-xl) ease;}
  .transition-background-none { transition: background var(--duration-none) ease;}

  .transition-fill-xs   { transition: fill var(--duration-xs) ease;}
  .transition-fill-s    { transition: fill var(--duration-s) ease;}
  .transition-fill-m    { transition: fill var(--duration-m) ease;}
  .transition-fill-l    { transition: fill var(--duration-l) ease;}
  .transition-fill-xl   { transition: fill var(--duration-xl) ease;}
  .transition-fill-none { transition: fill var(--duration-none) ease;}

  .transition-transform-xs   { transition: transform var(--duration-xs) ease;}
  .transition-transform-s    { transition: transform var(--duration-s) ease;}
  .transition-transform-m    { transition: transform var(--duration-m) ease;}
  .transition-transform-l    { transition: transform var(--duration-l) ease;}
  .transition-transform-xl   { transition: transform var(--duration-xl) ease;}
  .transition-transform-none { transition: transform var(--duration-none) ease;}

  .transition-none { transition: 0s; }
/* #endregion */
}