/**
 * Do not edit directly, this file was auto-generated.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');

:root {
  --typography-body-family: 'Inter', sans-serif;
  --typography-code-family: 'Source Code Pro', monospace;
  --typography-headings-family: 'Inter', sans-serif;
}

/* Typography styles must be imported first as the import rules must be the first in the stylesheet */

/**
 * Do not edit directly, this file was auto-generated.
 */

@keyframes animation-appear {
  from {
    transform: translateY(10%);
    opacity: 0;
  }

  to {
    transform: translateY(0%);
    opacity: 1;
  }
}
@keyframes animation-disappear {
  from {
    transform: translateY(0%);
    opacity: 1;
  }

  to {
    transform: translateY(10%);
    opacity: 0;
  }
}

/**
 * Do not edit directly, this file was auto-generated.
 */

.display-appear {
  animation: appear var(--transition-short-duration) forwards;
}

.display-disappear {
  animation: disappear var(--transition-short-duration) forwards;
}

.display-flex {
  display: flex;
}

.display-flex-align-content-center {
  display: flex;
  align-content: center;
}

.display-flex-align-content-flex-end {
  display: flex;
  align-content: flex-end;
}

.display-flex-align-content-flex-start {
  display: flex;
  align-content: flex-start;
}

.display-flex-align-content-space-around {
  display: flex;
  align-content: space-around;
}

.display-flex-align-content-space-between {
  display: flex;
  align-content: space-between;
}

.display-flex-align-content-stretch {
  display: flex;
  align-content: stretch;
}

.display-flex-align-items-baseline {
  display: flex;
  align-items: baseline;
}

.display-flex-align-items-center {
  display: flex;
  align-items: center;
}

.display-flex-align-items-flex-end {
  display: flex;
  align-items: flex-end;
}

.display-flex-align-items-flex-start {
  display: flex;
  align-items: flex-start;
}

.display-flex-align-items-stretch {
  display: flex;
  align-items: stretch;
}

.display-flex-align-self-auto {
  display: flex;
  align-self: auto;
}

.display-flex-align-self-baseline {
  display: flex;
  align-self: baseline;
}

.display-flex-align-self-center {
  display: flex;
  align-self: center;
}

.display-flex-align-self-flex-end {
  display: flex;
  align-self: flex-end;
}

.display-flex-align-self-flex-start {
  display: flex;
  align-self: flex-start;
}

.display-flex-align-self-stretch {
  display: flex;
  align-self: stretch;
}

.display-flex-basis-0 {
  display: flex;
  flex-basis: 0;
}

.display-flex-basis-auto {
  display: flex;
  flex-basis: auto;
}

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

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

.display-flex-expand {
  display: flex;
  margin: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
}

.display-flex-grow-0 {
  display: flex;
  flex-grow: 0;
}

.display-flex-justify-content-center {
  display: flex;
  justify-content: center;
}

.display-flex-justify-content-flex-end {
  display: flex;
  justify-content: flex-end;
}

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

.display-flex-justify-content-space-around {
  display: flex;
  justify-content: space-around;
}

.display-flex-justify-content-space-between {
  display: flex;
  justify-content: space-between;
}

.display-flex-no-wrap {
  display: flex;
  flex-wrap: nowrap;
}

.display-flex-order-first {
  display: flex;
  order: -1;
}

.display-flex-order-last {
  display: flex;
  order: 1;
}

.display-flex-order-none {
  display: flex;
  order: 0;
}

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

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

.display-flex-shrink-0 {
  display: flex;
  flex-shrink: 0;
}

.display-flex-wrap {
  display: flex;
  flex-wrap: wrap;
}

.display-flex-wrap-reverse {
  display: flex;
  flex-wrap: wrap-reverse;
}

.display-full-height {
  height: 100%;
}

.display-full-width {
  width: 100%;
}

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

/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --actionable-element-border-radius-large: round(
    calc(var(--actionable-element-height-large) * var(--template-border-radius-height-ratio)),
    var(--template-rounding-number)
  );
  --actionable-element-border-radius-normal: round(
    calc(var(--actionable-element-height-normal) * var(--template-border-radius-height-ratio)),
    var(--template-rounding-number)
  );
  --actionable-element-border-radius-small: round(
    calc(var(--actionable-element-height-small) * var(--template-border-radius-height-ratio)),
    var(--template-rounding-number)
  );
  --actionable-element-border-radius-x-small: round(
    calc(var(--actionable-element-height-x-small) * var(--template-border-radius-height-ratio)),
    var(--template-rounding-number)
  );
  --actionable-element-font-size-large: calc(var(--size-unit) * 4);
  --actionable-element-font-size-normal: calc(var(--size-unit) * 3.5);
  --actionable-element-font-size-small: calc(var(--size-unit) * 3);
  --actionable-element-font-size-x-small: calc(var(--size-unit) * 3);
  --actionable-element-font-weight: 400;
  --actionable-element-height-large: calc(var(--size-unit) * 12);
  --actionable-element-height-normal: calc(var(--size-unit) * 9);
  --actionable-element-height-small: calc(var(--size-unit) * 6);
  --actionable-element-height-x-small: calc(var(--size-unit) * 4);
  --actionable-element-icon-margin-large: calc(var(--size-unit) * 2);
  --actionable-element-icon-margin-normal: calc(var(--size-unit) * 1.5);
  --actionable-element-icon-margin-small: calc(var(--size-unit) * 0.5);
  --actionable-element-icon-margin-x-small: calc(var(--size-unit) * 0.5);
  --actionable-element-icon-size-large: calc(var(--size-unit) * 6);
  --actionable-element-icon-size-normal: calc(var(--size-unit) * 6);
  --actionable-element-icon-size-small: calc(var(--size-unit) * 4);
  --actionable-element-icon-size-x-small: calc(var(--size-unit) * 4);
  --actionable-element-line-height: calc(var(--size-unit) * 6);
  --actionable-element-padding-large: 0px calc(var(--size-unit) * 4) 0px calc(var(--size-unit) * 4);
  --actionable-element-padding-normal: 0px calc(var(--size-unit) * 2) 0px calc(var(--size-unit) * 2);
  --actionable-element-padding-small: 0px calc(var(--size-unit) * 1) 0px calc(var(--size-unit) * 1);
  --actionable-element-padding-x-small: 0px calc(var(--size-unit) * 1) 0px
    calc(var(--size-unit) * 1);
  --border-radius-0: 2px;
  --border-radius-1: 4px;
  --border-radius-2: 8px;
  --border-radius-3: 16px;
  --border-radius-4: 24px;
  --color-background: #ffffff;
  --color-black: #001807;
  --color-constructive-100: #d7edc5;
  --color-constructive-200: #b6dd94;
  --color-constructive-300: #9cd16e;
  --color-constructive-400: #8bca56;
  --color-constructive-500: #70aa3f;
  --color-constructive-600: #53832a;
  --color-constructive-700: #3b5d1e;
  --color-constructive-800: #283f14;
  --color-constructive-900: #19270c;
  --color-default-text: #001807;
  --color-destructive-100: #f9cbb8;
  --color-destructive-200: #f39772;
  --color-destructive-300: #ef7443;
  --color-destructive-400: #ea5d25;
  --color-destructive-500: #e14d13;
  --color-destructive-600: #b43d0f;
  --color-destructive-700: #822c0b;
  --color-destructive-800: #521c07;
  --color-destructive-900: #2f1004;
  --color-neutral-100: #e4e7e5;
  --color-neutral-200: #cdd3d0;
  --color-neutral-300: #b7bfba;
  --color-neutral-400: #a0aaa5;
  --color-neutral-500: #89968f;
  --color-neutral-600: #6b7670;
  --color-neutral-700: #4e5551;
  --color-neutral-800: #303532;
  --color-neutral-900: #121413;
  --color-popover-background: #ffffff;
  --color-popover-color: #ffffff;
  --color-primary-100: #b9f8df;
  --color-primary-200: #74f1bf;
  --color-primary-300: #46eda9;
  --color-primary-400: #27d890;
  --color-primary-500: #10a267;
  --color-primary-600: #0d8354;
  --color-primary-700: #0b6b44;
  --color-primary-800: #085134;
  --color-primary-900: #052e1e;
  --color-tooltip-background: #121413;
  --color-tooltip-color: #ffffff;
  --color-warning-100: #fae8b8;
  --color-warning-200: #f5d271;
  --color-warning-300: #f1c241;
  --color-warning-400: #efb925;
  --color-warning-500: #eeb519;
  --color-warning-600: #b88b0f;
  --color-warning-700: #83620a;
  --color-warning-800: #533e06;
  --color-warning-900: #2f2404;
  --color-white: #ffffff;
  --cursor-col-resize: col-resize;
  --cursor-default: default;
  --cursor-grab: grab;
  --cursor-grabbing: grabbing;
  --cursor-not-allowed: not-allowed;
  --cursor-pointer: pointer;
  --cursor-row-resize: row-resize;
  --cursor-text: text;
  --dialog-element-border-radius: round(
    calc(var(--actionable-element-height-normal) * var(--template-border-radius-height-ratio)),
    var(--template-rounding-number)
  );
  --elevation-shadow-0: 0px 0px 0px 1px
    color-mix(
      in srgb,
      var(--color-neutral-900) calc(15% * max(var(--template-light-strength), 1)),
      transparent
    );
  --elevation-shadow-1: 0px 0px 0px 1px
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(15% * max(var(--template-light-strength), 1)),
        transparent
      ),
    calc(var(--template-light-position-occlusion-x) * var(--template-light-position-x-direction))
      calc(var(--template-light-position-occlusion-y) * var(--template-light-position-y-direction))
      calc(var(--template-shadow-blur) * 2)
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(15% * var(--template-light-strength)),
        transparent
      );
  --elevation-shadow-2: 0px 0px 0px 1px
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(15% * max(var(--template-light-strength), 1)),
        transparent
      ),
    calc(var(--template-light-position-occlusion-x) * var(--template-light-position-x-direction))
      calc(var(--template-light-position-occlusion-y) * var(--template-light-position-y-direction))
      calc(var(--template-shadow-blur) * 2)
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(15% * var(--template-light-strength)),
        transparent
      ),
    calc(var(--template-light-position-x) * 1px * var(--template-light-position-x-direction))
      calc(
        var(--template-shadow-spread) * 4 * var(--template-light-position-y) *
          var(--template-light-position-y-direction)
      )
      calc(var(--template-shadow-blur) * 8) var(--template-light-position-distance-spread)
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(10% * var(--template-light-strength)),
        transparent
      );
  --elevation-shadow-3: 0px 0px 0px 1px
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(15% * max(var(--template-light-strength), 1)),
        transparent
      ),
    calc(var(--template-light-position-occlusion-x) * var(--template-light-position-x-direction))
      calc(var(--template-light-position-occlusion-y) * var(--template-light-position-y-direction))
      calc(var(--template-shadow-blur) * 2)
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(15% * var(--template-light-strength)),
        transparent
      ),
    calc(var(--template-light-position-x) * 1px * var(--template-light-position-x-direction))
      calc(
        var(--template-shadow-spread) * 6 * var(--template-light-position-y) *
          var(--template-light-position-y-direction)
      )
      calc(var(--template-shadow-blur) * 10) var(--template-light-position-distance-spread)
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(10% * var(--template-light-strength)),
        transparent
      );
  --elevation-shadow-4: 0px 0px 0px 1px
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(15% * max(var(--template-light-strength), 1)),
        transparent
      ),
    calc(var(--template-light-position-occlusion-x) * var(--template-light-position-x-direction))
      calc(var(--template-light-position-occlusion-y) * var(--template-light-position-y-direction))
      calc(var(--template-shadow-blur) * 2)
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(15% * var(--template-light-strength)),
        transparent
      ),
    calc(var(--template-light-position-x) * 1px * var(--template-light-position-x-direction))
      calc(
        var(--template-shadow-spread) * 8 * var(--template-light-position-y) *
          var(--template-light-position-y-direction)
      )
      calc(var(--template-shadow-blur) * 12) var(--template-light-position-distance-spread)
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(10% * var(--template-light-strength)),
        transparent
      );
  --elevation-shadow-popover: 0px 0px 0px 1px
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(15% * max(var(--template-light-strength), 1)),
        transparent
      ),
    0px 0px calc(var(--template-shadow-blur) * 2)
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(15% * var(--template-light-strength)),
        transparent
      );
  --fill-style-ghost: Ghost;
  --fill-style-solid: Solid;
  --horizontal-alignment-center: Center;
  --horizontal-alignment-left: Left;
  --horizontal-alignment-right: Right;
  --popover-element-border-radius: round(
    calc(var(--actionable-element-height-normal) * var(--template-border-radius-height-ratio)),
    var(--template-rounding-number)
  );
  --popover-element-padding: calc(var(--size-unit) * 4);
  --shape-circular: Circular;
  --shape-rectangular: Rectangular;
  --size-large: Large;
  --size-normal: Normal;
  --size-small: Small;
  --size-xsmall: Xsmall;
  --size-unit: 4px;
  --template-border-radius-height-ratio: 0.225;
  --template-gloss-strength: 1;
  --template-light-position-distance-spread: max(calc(1px - var(--template-shadow-blur) / 2), 0px);
  --template-light-position-occlusion: calc(
    (var(--size-unit) / 2) * var(--template-light-position-occlusion-strength)
  );
  --template-light-position-occlusion-strength: 0.75;
  --template-light-position-occlusion-x: min(
    calc(1px * var(--template-light-position-x)),
    var(--template-light-position-occlusion)
  );
  --template-light-position-occlusion-y: min(
    calc(1px * var(--template-light-position-y)),
    var(--template-light-position-occlusion)
  );
  --template-light-position-x: 0;
  --template-light-position-x-direction: 1;
  --template-light-position-y: 1;
  --template-light-position-y-direction: 1;
  --template-light-strength: 0.75;
  --template-rounding-number: 1px;
  --template-shadow-blur: 1px;
  --template-shadow-spread: 1px;
  --template-text-color-over-ghost-constructive: #588b2c;
  --template-text-color-over-ghost-destructive: #e14d13;
  --template-text-color-over-ghost-neutral: #6b7670;
  --template-text-color-over-ghost-primary: #0c794d;
  --template-text-color-over-ghost-warning: #83620a;
  --template-text-color-over-solid-constructive: #ffffff;
  --template-text-color-over-solid-destructive: #ffffff;
  --template-text-color-over-solid-neutral: #6b7670;
  --template-text-color-over-solid-primary: #ffffff;
  --template-text-color-over-solid-warning: #83620a;
  --tooltip-element-background-transparency: 90%;
  --tooltip-element-border-radius: round(
    calc(var(--actionable-element-height-normal) * var(--template-border-radius-height-ratio)),
    var(--template-rounding-number)
  );
  --tooltip-element-padding: calc(var(--size-unit) * 2);
  --transition-default: all var(--transition-short-duration) linear;
  --transition-long-duration: 0.3s;
  --transition-short-duration: 0.15s;
  --vertical-alignment-bottom: Bottom;
  --vertical-alignment-center: Center;
  --vertical-alignment-top: Top;
  --z-index-modals: 100000;
  --z-index-popover: 100001;
}

[theme='Dark'],
.op-theme-dark {
  --color-background: #323b36;
  --color-black: #001807;
  --color-constructive-100: #d7edc5;
  --color-constructive-200: #b6dd94;
  --color-constructive-300: #9cd16e;
  --color-constructive-400: #8bca56;
  --color-constructive-500: #70aa3f;
  --color-constructive-600: #53832a;
  --color-constructive-700: #3b5d1e;
  --color-constructive-800: #283f14;
  --color-constructive-900: #19270c;
  --color-default-text: #ffffff;
  --color-destructive-100: #f9cbb8;
  --color-destructive-200: #f39772;
  --color-destructive-300: #ef7443;
  --color-destructive-400: #ea5d25;
  --color-destructive-500: #e14d13;
  --color-destructive-600: #b43d0f;
  --color-destructive-700: #822c0b;
  --color-destructive-800: #521c07;
  --color-destructive-900: #2f1004;
  --color-neutral-100: #e4e7e5;
  --color-neutral-200: #cdd3d0;
  --color-neutral-300: #b7bfba;
  --color-neutral-400: #a0aaa5;
  --color-neutral-500: #89968f;
  --color-neutral-600: #6b7670;
  --color-neutral-700: #4e5551;
  --color-neutral-800: #303532;
  --color-neutral-900: #121413;
  --color-popover-background: #38413c;
  --color-popover-color: #001807;
  --color-primary-100: #b9f8df;
  --color-primary-200: #74f1bf;
  --color-primary-300: #46eda9;
  --color-primary-400: #27d890;
  --color-primary-500: #10a267;
  --color-primary-600: #0d8354;
  --color-primary-700: #0b6b44;
  --color-primary-800: #085134;
  --color-primary-900: #052e1e;
  --color-tooltip-background: #ffffff;
  --color-tooltip-color: #001807;
  --color-warning-100: #fae8b8;
  --color-warning-200: #f5d271;
  --color-warning-300: #f1c241;
  --color-warning-400: #efb925;
  --color-warning-500: #eeb519;
  --color-warning-600: #b88b0f;
  --color-warning-700: #83620a;
  --color-warning-800: #533e06;
  --color-warning-900: #2f2404;
  --color-white: #ffffff;
  --elevation-shadow-0: 0px 0px 0px 1px
    color-mix(
      in srgb,
      var(--color-neutral-900) calc(45% * max(var(--template-light-strength), 1)),
      transparent
    );
  --elevation-shadow-1: 0px 0px 0px 1px
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(50% * max(var(--template-light-strength), 1)),
        transparent
      ),
    calc(var(--template-light-position-occlusion-x) * var(--template-light-position-x-direction))
      calc(var(--template-light-position-occlusion-y) * var(--template-light-position-y-direction))
      calc(var(--template-shadow-blur) * 2)
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(40% * var(--template-light-strength)),
        transparent
      );
  --elevation-shadow-2: 0px 0px 0px 1px
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(50% * max(var(--template-light-strength), 1)),
        transparent
      ),
    calc(var(--template-light-position-occlusion-x) * var(--template-light-position-x-direction))
      calc(var(--template-light-position-occlusion-y) * var(--template-light-position-y-direction))
      calc(var(--template-shadow-blur) * 2)
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(40% * var(--template-light-strength)),
        transparent
      ),
    calc(var(--template-light-position-x) * 1px * var(--template-light-position-x-direction))
      calc(
        var(--template-shadow-spread) * 4 * var(--template-light-position-y) *
          var(--template-light-position-y-direction)
      )
      calc(var(--template-shadow-blur) * 8) var(--template-light-position-distance-spread)
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(55% * var(--template-light-strength)),
        transparent
      );
  --elevation-shadow-3: 0px 0px 0px 1px
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(50% * max(var(--template-light-strength), 1)),
        transparent
      ),
    calc(var(--template-light-position-occlusion-x) * var(--template-light-position-x-direction))
      calc(var(--template-light-position-occlusion-y) * var(--template-light-position-y-direction))
      calc(var(--template-shadow-blur) * 2)
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(40% * var(--template-light-strength)),
        transparent
      ),
    calc(var(--template-light-position-x) * 1px * var(--template-light-position-x-direction))
      calc(
        var(--template-shadow-spread) * 6 * var(--template-light-position-y) *
          var(--template-light-position-y-direction)
      )
      calc(var(--template-shadow-blur) * 10) var(--template-light-position-distance-spread)
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(55% * var(--template-light-strength)),
        transparent
      );
  --elevation-shadow-4: 0px 0px 0px 1px
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(50% * max(var(--template-light-strength), 1)),
        transparent
      ),
    calc(var(--template-light-position-occlusion-x) * var(--template-light-position-x-direction))
      calc(var(--template-light-position-occlusion-y) * var(--template-light-position-y-direction))
      calc(var(--template-shadow-blur) * 2)
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(40% * var(--template-light-strength)),
        transparent
      ),
    calc(var(--template-light-position-x) * 1px * var(--template-light-position-x-direction))
      calc(
        var(--template-shadow-spread) * 8 * var(--template-light-position-y) *
          var(--template-light-position-y-direction)
      )
      calc(var(--template-shadow-blur) * 12) var(--template-light-position-distance-spread)
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(55% * var(--template-light-strength)),
        transparent
      );
  --elevation-shadow-popover: 0px 0px 0px 1px
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(50% * max(var(--template-light-strength), 1)),
        transparent
      ),
    0px 0px calc(var(--template-shadow-blur) * 2)
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(65% * var(--template-light-strength)),
        transparent
      );
  --template-text-color-over-ghost-constructive: #8bca56;
  --template-text-color-over-ghost-destructive: #f39772;
  --template-text-color-over-ghost-neutral: #a0aaa5;
  --template-text-color-over-ghost-primary: #27d890;
  --template-text-color-over-ghost-warning: #eeb519;
  --template-text-color-over-solid-constructive: #ffffff;
  --template-text-color-over-solid-destructive: #ffffff;
  --template-text-color-over-solid-neutral: #ffffff;
  --template-text-color-over-solid-primary: #ffffff;
  --template-text-color-over-solid-warning: #83620a;
}

[theme='Light'],
.op-theme-light {
  --color-background: #ffffff;
  --color-black: #001807;
  --color-constructive-100: #d7edc5;
  --color-constructive-200: #b6dd94;
  --color-constructive-300: #9cd16e;
  --color-constructive-400: #8bca56;
  --color-constructive-500: #70aa3f;
  --color-constructive-600: #53832a;
  --color-constructive-700: #3b5d1e;
  --color-constructive-800: #283f14;
  --color-constructive-900: #19270c;
  --color-default-text: #001807;
  --color-destructive-100: #f9cbb8;
  --color-destructive-200: #f39772;
  --color-destructive-300: #ef7443;
  --color-destructive-400: #ea5d25;
  --color-destructive-500: #e14d13;
  --color-destructive-600: #b43d0f;
  --color-destructive-700: #822c0b;
  --color-destructive-800: #521c07;
  --color-destructive-900: #2f1004;
  --color-neutral-100: #e4e7e5;
  --color-neutral-200: #cdd3d0;
  --color-neutral-300: #b7bfba;
  --color-neutral-400: #a0aaa5;
  --color-neutral-500: #89968f;
  --color-neutral-600: #6b7670;
  --color-neutral-700: #4e5551;
  --color-neutral-800: #303532;
  --color-neutral-900: #121413;
  --color-popover-background: #ffffff;
  --color-popover-color: #ffffff;
  --color-primary-100: #b9f8df;
  --color-primary-200: #74f1bf;
  --color-primary-300: #46eda9;
  --color-primary-400: #27d890;
  --color-primary-500: #10a267;
  --color-primary-600: #0d8354;
  --color-primary-700: #0b6b44;
  --color-primary-800: #085134;
  --color-primary-900: #052e1e;
  --color-tooltip-background: #121413;
  --color-tooltip-color: #ffffff;
  --color-warning-100: #fae8b8;
  --color-warning-200: #f5d271;
  --color-warning-300: #f1c241;
  --color-warning-400: #efb925;
  --color-warning-500: #eeb519;
  --color-warning-600: #b88b0f;
  --color-warning-700: #83620a;
  --color-warning-800: #533e06;
  --color-warning-900: #2f2404;
  --color-white: #ffffff;
  --elevation-shadow-0: 0px 0px 0px 1px
    color-mix(
      in srgb,
      var(--color-neutral-900) calc(15% * max(var(--template-light-strength), 1)),
      transparent
    );
  --elevation-shadow-1: 0px 0px 0px 1px
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(15% * max(var(--template-light-strength), 1)),
        transparent
      ),
    calc(var(--template-light-position-occlusion-x) * var(--template-light-position-x-direction))
      calc(var(--template-light-position-occlusion-y) * var(--template-light-position-y-direction))
      calc(var(--template-shadow-blur) * 2)
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(15% * var(--template-light-strength)),
        transparent
      );
  --elevation-shadow-2: 0px 0px 0px 1px
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(15% * max(var(--template-light-strength), 1)),
        transparent
      ),
    calc(var(--template-light-position-occlusion-x) * var(--template-light-position-x-direction))
      calc(var(--template-light-position-occlusion-y) * var(--template-light-position-y-direction))
      calc(var(--template-shadow-blur) * 2)
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(15% * var(--template-light-strength)),
        transparent
      ),
    calc(var(--template-light-position-x) * 1px * var(--template-light-position-x-direction))
      calc(
        var(--template-shadow-spread) * 4 * var(--template-light-position-y) *
          var(--template-light-position-y-direction)
      )
      calc(var(--template-shadow-blur) * 8) var(--template-light-position-distance-spread)
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(10% * var(--template-light-strength)),
        transparent
      );
  --elevation-shadow-3: 0px 0px 0px 1px
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(15% * max(var(--template-light-strength), 1)),
        transparent
      ),
    calc(var(--template-light-position-occlusion-x) * var(--template-light-position-x-direction))
      calc(var(--template-light-position-occlusion-y) * var(--template-light-position-y-direction))
      calc(var(--template-shadow-blur) * 2)
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(15% * var(--template-light-strength)),
        transparent
      ),
    calc(var(--template-light-position-x) * 1px * var(--template-light-position-x-direction))
      calc(
        var(--template-shadow-spread) * 6 * var(--template-light-position-y) *
          var(--template-light-position-y-direction)
      )
      calc(var(--template-shadow-blur) * 10) var(--template-light-position-distance-spread)
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(10% * var(--template-light-strength)),
        transparent
      );
  --elevation-shadow-4: 0px 0px 0px 1px
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(15% * max(var(--template-light-strength), 1)),
        transparent
      ),
    calc(var(--template-light-position-occlusion-x) * var(--template-light-position-x-direction))
      calc(var(--template-light-position-occlusion-y) * var(--template-light-position-y-direction))
      calc(var(--template-shadow-blur) * 2)
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(15% * var(--template-light-strength)),
        transparent
      ),
    calc(var(--template-light-position-x) * 1px * var(--template-light-position-x-direction))
      calc(
        var(--template-shadow-spread) * 8 * var(--template-light-position-y) *
          var(--template-light-position-y-direction)
      )
      calc(var(--template-shadow-blur) * 12) var(--template-light-position-distance-spread)
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(10% * var(--template-light-strength)),
        transparent
      );
  --elevation-shadow-popover: 0px 0px 0px 1px
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(15% * max(var(--template-light-strength), 1)),
        transparent
      ),
    0px 0px calc(var(--template-shadow-blur) * 2)
      color-mix(
        in srgb,
        var(--color-neutral-900) calc(15% * var(--template-light-strength)),
        transparent
      );
  --template-text-color-over-ghost-constructive: #588b2c;
  --template-text-color-over-ghost-destructive: #e14d13;
  --template-text-color-over-ghost-neutral: #6b7670;
  --template-text-color-over-ghost-primary: #0c794d;
  --template-text-color-over-ghost-warning: #83620a;
  --template-text-color-over-solid-constructive: #ffffff;
  --template-text-color-over-solid-destructive: #ffffff;
  --template-text-color-over-solid-neutral: #6b7670;
  --template-text-color-over-solid-primary: #ffffff;
  --template-text-color-over-solid-warning: #83620a;
}

.no-select {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

input,
button {
  outline: none;
  border: none;
  padding: 0;
}

a {
  text-decoration: none;
}

td:not(table td) {
  padding: unset;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block-start: 0;
  margin-block-end: 0;
}

ul {
  margin: 0;
}

span,
p,
body {
  --font-family: var(--typography-body-family);
  font-family: var(--font-family);
  color: var(--color-default-text);
}

code {
  --font-family: var(--typography-code-family);
  font-family: var(--font-family);
  color: var(--color-default-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  --font-family: var(--typography-headings-family);
  font-family: var(--font-family);

  span,
  ::slotted(span) {
    --font-family: var(--typography-headings-family) !important;
  }
}

h1 {
  font-family: var(--typography-headings-family);
  font-size: calc(var(--size-unit) * 12);
  line-height: calc(var(--size-unit) * 15);
  letter-spacing: 0px;
  color: var(--color-default-text);
}

h2 {
  font-family: var(--typography-headings-family);
  font-size: calc(var(--size-unit) * 10);
  line-height: calc(var(--size-unit) * 13);
  letter-spacing: 0px;
  color: var(--color-default-text);
}

h3 {
  font-family: var(--typography-headings-family);
  font-size: calc(var(--size-unit) * 8);
  line-height: calc(var(--size-unit) * 10);
  letter-spacing: 0px;
  color: var(--color-default-text);
}

h4 {
  font-family: var(--typography-headings-family);
  font-size: calc(var(--size-unit) * 6);
  line-height: calc(var(--size-unit) * 8);
  letter-spacing: 0px;
  color: var(--color-default-text);
}

h5 {
  font-family: var(--typography-headings-family);
  font-size: calc(var(--size-unit) * 4);
  line-height: calc(var(--size-unit) * 6);
  letter-spacing: 0px;
  color: var(--color-default-text);
}

h6 {
  font-family: var(--typography-headings-family);
  font-size: calc(var(--size-unit) * 3);
  line-height: calc(var(--size-unit) * 4);
  letter-spacing: 0px;
  color: var(--color-default-text);
}