/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-border-style: solid;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-duration: initial;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --color-blue-400: oklch(70.7% .165 254.624);
    --color-blue-900: oklch(37.9% .146 265.522);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-frame-bg-general-section: var(--neutral-300);
    --color-frame-bg-specific-section: var(--neutral-700);
    --color-frame-bg-specific-section-purple: var(--purple-50);
    --color-frame-bg-specific-section-green: var(--green-100);
    --color-frame-stroke-primary: var(--purple-600);
    --color-general-primary: var(--neutral-50);
    --color-general-secondary: var(--neutral-white);
    --color-general-inverted: var(--neutral-black);
    --color-general-text-black: var(--neutral-black);
    --color-general-stroke-idle: var(--neutral-200);
    --color-general-stroke-selected: var(--neutral-500);
    --color-general-stroke-focus: var(--blue-500);
    --color-general-stroke-disabled: var(--neutral-200);
    --color-general-stroke-error: var(--red-500);
    --color-general-stroke-grey: var(--neutral-400);
    --color-general-stroke-black: var(--neutral-black);
    --color-general-stroke-white: var(--neutral-white);
    --color-general-stroke-purple: var(--purple-600);
    --color-general-text-grey: var(--neutral-400);
    --color-general-text-disabled: var(--neutral-black-6);
    --color-button-bg-white-idle: var(--neutral-white);
    --color-button-bg-white-hover: var(--neutral-100);
    --color-button-bg-white-selected: var(--neutral-100);
    --color-button-bg-white-focus: var(--neutral-100);
    --color-button-bg-white-disabled: var(--neutral-white);
    --color-button-bg-blue-idle: var(--blue-50);
    --color-button-bg-blue-hover: var(--blue-100);
    --color-button-bg-blue-selected: var(--blue-100);
    --color-button-bg-blue-focus: var(--blue-100);
    --color-button-bg-blue-disabled: var(--blue-50);
    --color-button-bg-green-idle: var(--green-100);
    --color-button-bg-green-hover: var(--green-400);
    --color-button-bg-green-selected: var(--green-400);
    --color-button-bg-green-focus: var(--green-400);
    --color-button-bg-green-disabled: var(--green-100);
    --color-button-bg-red-idle: var(--red-50);
    --color-button-bg-red-hover: var(--red-200);
    --color-button-bg-red-selected: var(--red-200);
    --color-button-bg-red-focus: var(--red-200);
    --color-button-bg-red-disabled: var(--red-50);
    --color-button-bg-purple-idle: var(--purple-100);
    --color-button-bg-purple-hover: var(--purple-300);
    --color-button-bg-purple-selected: var(--purple-300);
    --color-button-bg-purple-focus: var(--purple-300);
    --color-button-bg-purple-disabled: var(--purple-100);
    --color-button-bg-yellow-idle: var(--yellow-300);
    --color-button-bg-yellow-hover: var(--yellow-400);
    --color-button-bg-yellow-selected: var(--yellow-400);
    --color-button-bg-yellow-focus: var(--yellow-400);
    --color-button-bg-yellow-disabled: var(--yellow-300);
    --color-button-text-idle: var(--neutral-black);
    --color-button-text-disabled: var(--neutral-black-6);
    --color-button-stroke-idle: var(--neutral-200);
    --color-button-stroke-hover: var(--neutral-200);
    --color-button-stroke-selected: var(--neutral-200);
    --color-button-stroke-focus: var(--blue-500);
    --color-button-stroke-disabled: var(--neutral-200);
    --color-linkbutton-text-idle: var(--blue-600);
    --color-linkbutton-text-hover: var(--blue-800);
    --color-linkbutton-text-focus: var(--blue-800);
    --color-linkbutton-text-disabled: var(--neutral-black-6);
    --color-linkbutton-stroke-focus: var(--blue-500);
    --color-iconbutton-text-idle: var(--neutral-400);
    --color-iconbutton-text-hover: var(--neutral-black);
    --color-iconbutton-text-focus: var(--neutral-black);
    --color-iconbutton-text-disabled: var(--neutral-black-6);
    --color-iconbutton-stroke-focus: var(--blue-500);
    --color-calendarcell-bg-workday: var(--color-general-secondary);
    --color-calendarcell-bg-weekend: var(--color-general-bg-primary);
    --color-calendarcell-stroke-idle: var(--neutral-200);
    --color-calendarcellcontent-bg-untitled-idle: var(--neutral-100);
    --color-calendarcellcontent-bg-untitled-hover: var(--neutral-300);
    --color-calendarcellcontent-bg-untitled-selected: var(--neutral-400);
    --color-calendarcellcontent-bg-untitled-focus: var(--neutral-400);
    --color-calendarcellcontent-bg-neutral-idle: var(--neutral-100);
    --color-calendarcellcontent-bg-neutral-hover: var(--neutral-300);
    --color-calendarcellcontent-bg-neutral-selected: var(--neutral-700);
    --color-calendarcellcontent-bg-neutral-focus: var(--neutral-700);
    --color-calendarcellcontent-bg-neutral-past: var(--neutral-100);
    --color-calendarcellcontent-bg-blue-idle: var(--blue-50);
    --color-calendarcellcontent-bg-blue-hover: var(--blue-100);
    --color-calendarcellcontent-bg-blue-selected: var(--blue-600);
    --color-calendarcellcontent-bg-blue-focus: var(--blue-600);
    --color-calendarcellcontent-bg-blue-past: var(--blue-50);
    --color-calendarcellcontent-bg-purple-idle: var(--purple-100);
    --color-calendarcellcontent-bg-purple-hover: var(--purple-300);
    --color-calendarcellcontent-bg-purple-selected: var(--purple-600);
    --color-calendarcellcontent-bg-purple-focus: var(--purple-600);
    --color-calendarcellcontent-bg-purple-past: var(--purple-100);
    --color-calendarcellcontent-bg-green-idle: var(--green-100);
    --color-calendarcellcontent-bg-green-hover: var(--green-300);
    --color-calendarcellcontent-bg-green-selected: var(--green-500);
    --color-calendarcellcontent-bg-green-focus: var(--green-500);
    --color-calendarcellcontent-bg-green-past: var(--green-100);
    --color-calendarcellcontent-bg-yellow-idle: var(--yellow-50);
    --color-calendarcellcontent-bg-yellow-hover: var(--yellow-300);
    --color-calendarcellcontent-bg-yellow-selected: var(--yellow-600);
    --color-calendarcellcontent-bg-yellow-focus: var(--yellow-600);
    --color-calendarcellcontent-bg-yellow-past: var(--yellow-50);
    --color-calendarcellcontent-bg-emerald-idle: var(--emerald-50);
    --color-calendarcellcontent-bg-emerald-hover: var(--emerald-200);
    --color-calendarcellcontent-bg-emerald-selected: var(--emerald-500);
    --color-calendarcellcontent-bg-emerald-focus: var(--emerald-500);
    --color-calendarcellcontent-bg-emerald-past: var(--emerald-50);
    --color-calendarcellcontent-bg-pink-idle: var(--pink-50);
    --color-calendarcellcontent-bg-pink-hover: var(--pink-100);
    --color-calendarcellcontent-bg-pink-selected: var(--pink-400);
    --color-calendarcellcontent-bg-pink-focus: var(--pink-400);
    --color-calendarcellcontent-bg-pink-past: var(--pink-50);
    --color-calendarcellcontent-bg-red-idle: var(--red-50);
    --color-calendarcellcontent-bg-red-hover: var(--red-100);
    --color-calendarcellcontent-bg-red-selected: var(--red-400);
    --color-calendarcellcontent-bg-red-focus: var(--red-400);
    --color-calendarcellcontent-bg-red-past: var(--red-50);
    --color-calendarcellcontent-accent-neutral-idle: var(--neutral-400);
    --color-calendarcellcontent-accent-neutral-past: var(--neutral-300);
    --color-calendarcellcontent-accent-yellow-idle: var(--yellow-600);
    --color-calendarcellcontent-accent-yellow-past: var(--yellow-500);
    --color-calendarcellcontent-accent-blue-idle: var(--blue-600);
    --color-calendarcellcontent-accent-blue-past: var(--blue-200);
    --color-calendarcellcontent-accent-purple-idle: var(--purple-600);
    --color-calendarcellcontent-accent-purple-past: var(--purple-300);
    --color-calendarcellcontent-accent-green-idle: var(--green-600);
    --color-calendarcellcontent-accent-green-past: var(--green-400);
    --color-calendarcellcontent-accent-red-idle: var(--red-400);
    --color-calendarcellcontent-accent-red-past: var(--red-200);
    --color-calendarcellcontent-accent-emerald-idle: var(--emerald-500);
    --color-calendarcellcontent-accent-emerald-past: var(--emerald-400);
    --color-calendarcellcontent-accent-pink-idle: var(--pink-400);
    --color-calendarcellcontent-accent-pink-past: var(--pink-300);
    --color-calendarcellcontent-text-title-idle-black: var(--neutral-black);
    --color-calendarcellcontent-text-title-idle-white: var(--neutral-white);
    --color-calendarcellcontent-text-title-focus-white: var(--neutral-white);
    --color-calendarcellcontent-text-title-focus-black: var(--neutral-black);
    --color-calendarcellcontent-text-title-past-black: var(--neutral-black-15);
    --color-calendarcellcontent-text-title-past-white: var(--neutral-white-25);
    --color-calendarcellcontent-text-title-hover-black: var(--neutral-black);
    --color-calendarcellcontent-text-title-hover-white: var(--neutral-white);
    --color-calendarcellcontent-text-caption-idle-black: var(--neutral-black-50);
    --color-calendarcellcontent-text-caption-idle-white: var(--neutral-white-70);
    --color-calendarcellcontent-text-caption-past-black: var(--neutral-black-15);
    --color-calendarcellcontent-text-caption-past-white: var(--neutral-white-25);
    --color-calendarcellcontent-text-caption-focus-black: var(--neutral-black);
    --color-calendarcellcontent-text-caption-focus-white: var(--neutral-white);
    --color-calendarcellcontent-text-caption-hover-black: var(--neutral-black);
    --color-calendarcellcontent-text-caption-hover-white: var(--neutral-white);
    --color-calendarcellcontent-stroke-drag: var(--neutral-500);
    --color-calendarcellcontent-stroke-focus: var(--blue-500);
    --color-calendarcellcontent-stroke-error: var(--red-500);
    --color-input-primary-bg-idle: var(--neutral-100);
    --color-input-primary-bg-hover: var(--neutral-100);
    --color-input-primary-bg-focus: var(--neutral-100);
    --color-input-primary-bg-unselected: var(--neutral-100);
    --color-input-primary-bg-error: var(--neutral-100);
    --color-input-primary-text-idle: var(--neutral-400);
    --color-input-primary-text-hover: var(--neutral-400);
    --color-input-primary-text-focus: var(--neutral-black);
    --color-input-primary-text-unselected: var(--neutral-black);
    --color-input-primary-text-disabled: var(--neutral-black-6);
    --color-input-primary-text-new: var(--neutral-400);
    --color-input-primary-text-error: var(--color-general-stroke-error);
    --color-input-primary-caption-idle: var(--neutral-400);
    --color-input-primary-caption-hover: var(--neutral-400);
    --color-input-primary-caption-focus: var(--neutral-black);
    --color-input-primary-caption-unselected: var(--neutral-black);
    --color-input-primary-caption-disabled: var(--neutral-black-6);
    --color-input-primary-caption-new: var(--neutral-400);
    --color-input-primary-stroke-focus: var(--color-general-stroke-focus);
    --color-input-primary-stroke-unselected: var(--neutral-100);
    --color-input-primary-stroke-error: var(--color-general-stroke-error);
    --color-input-primary-stroke-disabled: var(--neutral-200);
    --color-input-primary-stroke-new: var(--neutral-200);
    --color-input-child-bg-hover: var(--neutral-200);
    --color-input-child-bg-focus: var(--neutral-300);
    --color-input-child-text-idle: var(--neutral-400);
    --color-input-child-text-hover: var(--neutral-400);
    --color-input-child-text-focus: var(--neutral-black);
    --color-input-child-text-unselected: var(--neutral-black);
    --color-input-child-text-disabled: var(--neutral-black-6);
    --color-input-child-text-new: var(--neutral-400);
    --color-status-bg-new: var(--neutral-100);
    --color-status-bg-late: var(--yellow-400);
    --color-status-bg-progress: var(--blue-600);
    --color-status-bg-waiting: var(--purple-600);
    --color-status-bg-invoice: var(--green-400);
    --color-status-text-new: var(--neutral-black);
    --color-status-text-late: var(--neutral-black);
    --color-status-text-progress: var(--neutral-white);
    --color-status-text-waiting: var(--neutral-white);
    --color-status-text-invoice: var(--neutral-black);
    --color-status-text-black: var(--neutral-black);
    --color-status-text-white: var(--neutral-white);
    --color-badge-bg-blue-idle: var(--blue-100);
    --color-badge-bg-blue-selected: var(--neutral-black);
    --color-badge-bg-blue-disabled: var(--blue-50);
    --color-badge-bg-green-idle: var(--green-300);
    --color-badge-bg-green-selected: var(--neutral-black);
    --color-badge-bg-green-disabled: var(--green-200);
    --color-badge-bg-red-idle: var(--red-100);
    --color-badge-bg-red-selected: var(--neutral-black);
    --color-badge-bg-red-disabled: var(--red-50);
    --color-badge-bg-purple-idle: var(--purple-300);
    --color-badge-bg-purple-selected: var(--neutral-black);
    --color-badge-bg-purple-disabled: var(--purple-100);
    --color-badge-bg-yellow-idle: var(--yellow-300);
    --color-badge-bg-yellow-selected: var(--neutral-black);
    --color-badge-bg-yellow-disabled: var(--yellow-50);
    --color-badge-bg-emerald-idle: var(--emerald-200);
    --color-badge-bg-emerald-selected: var(--neutral-black);
    --color-badge-bg-emerald-disabled: var(--emerald-100);
    --color-badge-bg-pink-idle: var(--pink-200);
    --color-badge-bg-pink-selected: var(--neutral-black);
    --color-badge-bg-pink-disabled: var(--pink-100);
    --color-badge-text-idle: var(--neutral-black);
    --color-badge-text-selected: var(--neutral-white);
    --color-badge-text-disabled: var(--neutral-black-15);
    --color-badge-stroke-overlapping: var(--neutral-white);
    --color-calendar-general-bg-today: var(--purple-600);
    --color-calendar-general-bg-selected: var(--neutral-black);
    --color-calendar-general-bg-secondary: var(--neutral-100);
    --color-calendar-general-text-nottoday-idle: var(--neutral-400);
    --color-calendar-general-text-nottoday-secondary: var(--neutral-300);
    --color-calendar-general-text-nottoday-selected: var(--neutral-white);
    --color-calendar-general-text-today-idle: var(--purple-600);
    --color-calendar-general-text-today-selected: var(--neutral-white);
    --color-calendar-general-stroke-today: var(--purple-600);
    --color-checkbox-bg-hover: var(--neutral-black-3);
    --color-checkbox-bg-selected: var(--neutral-black);
    --color-checkbox-bg-focus: var(--neutral-100);
    --color-checkbox-text-selected: var(--neutral-white);
    --color-checkbox-stroke-idle: var(--neutral-black);
    --color-checkbox-stroke-hover: var(--neutral-black);
    --color-checkbox-stroke-focus: var(--blue-500);
    --color-checkbox-stroke-disabled: var(--neutral-200);
    --color-card-bg-idle: var(--neutral-white);
    --color-card-bg-hover: var(--neutral-50);
    --color-card-stroke-idle: var(--neutral-100);
    --color-tooltip-bg: var(--neutral-black);
    --color-tooltip-text: var(--neutral-white);
    --color-banner-bg: var(--neutral-white);
    --color-banner-text: var(--neutral-black);
    --color-banner-icon-neutral: var(--neutral-black);
    --color-banner-icon-success: var(--neutral-black);
    --color-banner-icon-error: var(--red-400);
    --color-banner-icon-warning: var(--red-400);
    --color-banner-stroke-neutral: var(--neutral-400);
    --color-banner-stroke-success: var(--neutral-400);
    --color-banner-stroke-error: var(--red-400);
    --color-banner-stroke-warning: var(--red-400);
    --color-toggle-bg-idle: var(--neutral-50);
    --color-toggle-stroke-idle: var(--neutral-200);
    --color-dropzone-bg-idle: var(--neutral-white);
    --color-dropzone-stroke-idle: var(--neutral-200);
    --color-dropzone-text-idle: var(--neutral-black);
    --color-dropzone-bg-hover: var(--neutral-100);
    --color-dropzone-bg-active: var(--blue-50);
    --color-dropzone-stroke-active: var(--blue-500);
    --color-dropzone-stroke-error: var(--red-400);
    --color-tabbar-text-active: var(--neutral-black);
    --color-tabbar-text-inactive: var(--neutral-300);
    --animate-loading: loading .8s linear infinite;
    --height-header: 66px;
    --spacing-none: var(--sizes-0);
    --spacing-one: var(--sizes-1);
    --spacing-small: var(--sizes-8);
    --spacing-xsmall: var(--sizes-4);
    --spacing-2xsmall: var(--sizes-2);
    --spacing-medium: var(--sizes-12);
    --spacing-large: var(--sizes-16);
    --spacing-xlarge: var(--sizes-20);
    --spacing-2xlarge: var(--sizes-24);
    --spacing-3xlarge: var(--sizes-48);
    --radius-none: var(--sizes-0);
    --radius-xsmall: var(--sizes-2);
    --radius-small: var(--sizes-4);
    --radius-medium: var(--sizes-7);
    --radius-large: var(--sizes-10);
    --radius-2xlarge: var(--sizes-36);
    --width-sidebar: var(--width-sidebar);
    --shadow-popup: var(--shadow-popup);
    --shadow-header: var(--shadow-header);
    --shadow-sidebar: var(--shadow-sidebar);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components {
  .h2 {
    color: var(--color-blue-900);
    font-size: 28px;
    font-weight: 700;
    line-height: 120%;
  }

  @media (min-width: 1440px) {
    .h2 {
      font-size: 60px;
    }
  }

  .h3 {
    color: var(--color-blue-750);
    font-size: 20px;
    font-weight: 700;
    line-height: 120%;
  }

  @media (min-width: 1440px) {
    .h3 {
      font-size: 30px;
    }
  }

  .paragraph-small {
    color: var(--color-blue-400);
    font-size: 16px;
    font-weight: 400;
    line-height: 120%;
  }

  @media (min-width: 1440px) {
    .paragraph-small {
      font-size: 18px;
    }
  }

  .popup-title {
    color: var(--color-blue-900);
    font-size: 22px;
    font-weight: 500;
    line-height: 120%;
  }

  @media (min-width: 1440px) {
    .popup-title {
      font-size: 28px;
    }
  }

  .h1-medium {
    font-size: 40px;
    font-weight: 500;
    line-height: 48px;
  }

  .h3-bold {
    font-size: 28px;
    font-weight: 700;
    line-height: 32px;
  }

  .h3-medium {
    font-size: 28px;
    font-weight: 500;
    line-height: 32px;
  }

  .subheading-bold {
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
  }

  .subheading-medium {
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
  }

  .heading-bold {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
  }

  .heading-medium {
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
  }

  .body-bold {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
  }

  .body-medium {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
  }

  .label-bold {
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
  }

  .label-medium {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
  }

  .caption-bold {
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
  }

  .caption-medium {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
  }
}

@layer utilities {
  .pointer-events-auto {
    pointer-events: auto;
  }

  .sticky {
    position: sticky;
  }

  .top-0 {
    top: calc(var(--spacing) * 0);
  }

  .z-10 {
    z-index: 10;
  }

  .flex {
    display: flex;
  }

  .table {
    display: table;
  }

  .h-1 {
    height: calc(var(--spacing) * 1);
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-6\.5 {
    height: calc(var(--spacing) * 6.5);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .h-full {
    height: 100%;
  }

  .w-1 {
    width: calc(var(--spacing) * 1);
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-6\.5 {
    width: calc(var(--spacing) * 6.5);
  }

  .w-10 {
    width: calc(var(--spacing) * 10);
  }

  .w-auto {
    width: auto;
  }

  .w-full {
    width: 100%;
  }

  .flex-1 {
    flex: 1;
  }

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

  .animate-loading {
    animation: var(--animate-loading);
  }

  .cursor-pointer {
    cursor: pointer;
  }

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

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

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

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

  .gap-small {
    gap: var(--spacing-small);
  }

  .gap-xsmall {
    gap: var(--spacing-xsmall);
  }

  .overflow-auto {
    overflow: auto;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-medium {
    border-radius: var(--radius-medium);
  }

  .rounded-small {
    border-radius: var(--radius-small);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .border-button-stroke-idle {
    border-color: var(--color-button-stroke-idle);
  }

  .border-general-stroke-idle {
    border-color: var(--color-general-stroke-idle);
  }

  .border-transparent {
    border-color: #0000;
  }

  .bg-\[var\(--btn-bg-idle\)\] {
    background-color: var(--btn-bg-idle);
  }

  .bg-\[var\(--btn-bg-selected\)\] {
    background-color: var(--btn-bg-selected);
  }

  .bg-\[var\(--btn-bg-selected\)\]\! {
    background-color: var(--btn-bg-selected) !important;
  }

  .bg-button-text-idle {
    background-color: var(--color-button-text-idle);
  }

  .bg-general-secondary {
    background-color: var(--color-general-secondary);
  }

  .p-2xsmall {
    padding: var(--spacing-2xsmall);
  }

  .px-large {
    padding-inline: var(--spacing-large);
  }

  .px-medium {
    padding-inline: var(--spacing-medium);
  }

  .px-xsmall {
    padding-inline: var(--spacing-xsmall);
  }

  .text-start {
    text-align: start;
  }

  .text-nowrap {
    text-wrap: nowrap;
  }

  .text-button-text-idle {
    color: var(--color-button-text-idle);
  }

  .text-general-text-black {
    color: var(--color-general-text-black);
  }

  .text-general-text-grey {
    color: var(--color-general-text-grey);
  }

  .text-iconbutton-text-idle {
    color: var(--color-iconbutton-text-idle);
  }

  .text-linkbutton-text-idle {
    color: var(--color-linkbutton-text-idle);
  }

  .outline-1 {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .outline-button-stroke-focus {
    outline-color: var(--color-button-stroke-focus);
  }

  .outline-iconbutton-stroke-focus {
    outline-color: var(--color-iconbutton-stroke-focus);
  }

  .outline-linkbutton-stroke-focus {
    outline-color: var(--color-linkbutton-stroke-focus);
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .odd\:bg-general-primary:nth-child(odd) {
    background-color: var(--color-general-primary);
  }

  .even\:bg-general-secondary:nth-child(2n) {
    background-color: var(--color-general-secondary);
  }

  @media (hover: hover) {
    .hover\:border-button-stroke-hover:hover {
      border-color: var(--color-button-stroke-hover);
    }

    .hover\:bg-\[var\(--btn-bg-hover\)\]:hover {
      background-color: var(--btn-bg-hover);
    }

    .hover\:text-iconbutton-text-hover:hover {
      color: var(--color-iconbutton-text-hover);
    }

    .hover\:text-linkbutton-text-hover:hover {
      color: var(--color-linkbutton-text-hover);
    }
  }

  .focus\:border-button-stroke-focus:focus {
    border-color: var(--color-button-stroke-focus);
  }

  .focus\:bg-\(--btn-bg-focus\):focus {
    background-color: var(--btn-bg-focus);
  }

  .focus\:text-iconbutton-text-focus:focus {
    color: var(--color-iconbutton-text-focus);
  }

  .focus\:outline:focus {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .active\:scale-95:active {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .active\:text-linkbutton-text-focus:active {
    color: var(--color-linkbutton-text-focus);
  }

  .disabled\:pointer-events-none:disabled {
    pointer-events: none;
  }

  .disabled\:border-button-stroke-disabled:disabled {
    border-color: var(--color-button-stroke-disabled);
  }

  .disabled\:bg-\(--btn-bg-disabled\):disabled {
    background-color: var(--btn-bg-disabled);
  }

  .disabled\:text-button-text-disabled:disabled {
    color: var(--color-button-text-disabled);
  }

  .disabled\:text-iconbutton-text-disabled:disabled {
    color: var(--color-iconbutton-text-disabled);
  }

  .disabled\:text-linkbutton-text-disabled:disabled {
    color: var(--color-linkbutton-text-disabled);
  }
}

:root {
  --neutral-white: #fefffc;
  --neutral-50: #fcfcfa;
  --neutral-100: #f6f7f0;
  --neutral-200: #f1f2ed;
  --neutral-300: #e3e6da;
  --neutral-400: #b9bbb2;
  --neutral-500: #96869d;
  --neutral-600: #695a70;
  --neutral-700: #564d59;
  --neutral-800: #4a444d;
  --neutral-900: #3e3b40;
  --neutral-black: #2f2533;
  --neutral-black-3: #00000008;
  --neutral-black-6: #0000000f;
  --neutral-black-15: #00000026;
  --neutral-black-25: #00000040;
  --neutral-black-50: #00000080;
  --neutral-white-3: #ffffff08;
  --neutral-white-6: #ffffff0f;
  --neutral-white-25: #ffffff40;
  --neutral-white-40: #fff6;
  --neutral-white-70: #ffffffb2;
  --blue-50: #e6f8fa;
  --green-50: #fbfcf5;
  --green-100: #f3fadc;
  --green-200: #f5fad2;
  --green-300: #f0faaf;
  --green-400: #eafa82;
  --green-500: #e4f765;
  --green-600: #d1e838;
  --green-700: #b1c626;
  --green-800: #889a13;
  --green-900: #6c7a0f;
  --red-50: #fce8ee;
  --red-100: #fcc2c3;
  --red-200: #fca4a5;
  --red-300: #f7888c;
  --red-400: #f56e7e;
  --red-500: #f0596b;
  --red-600: #f0485c;
  --red-700: #e03448;
  --red-800: #c72235;
  --red-900: #9b1d2c;
  --blue-100: #c0f6fc;
  --blue-200: #aaf2fa;
  --blue-300: #8fedf7;
  --blue-400: #76e8f5;
  --blue-500: #5ee3f2;
  --blue-600: #43d1e0;
  --blue-700: #40c7d6;
  --blue-800: #22adbd;
  --blue-900: #1d8490;
  --purple-50: #f3f2fa;
  --purple-100: #f1f0fc;
  --purple-200: #e8e6fa;
  --purple-300: #ddd9f7;
  --purple-400: #cdc8f7;
  --purple-500: #c1baf5;
  --purple-600: #a499f5;
  --purple-700: #7f72e0;
  --purple-800: #6a5dc9;
  --purple-900: #392f82;
  --yellow-50: #fffcdd;
  --yellow-100: #edebd3;
  --yellow-200: #e0dcb6;
  --yellow-300: #fff8b7;
  --yellow-400: #fff494;
  --yellow-500: #feee7b;
  --yellow-600: #f6e120;
  --yellow-700: #ead40b;
  --yellow-800: #c4b210;
  --yellow-900: #a6960e;
  --emerald-50: #f3fae6;
  --emerald-100: #f0fadc;
  --emerald-200: #eafaca;
  --emerald-300: #e1faaf;
  --emerald-400: #d4f299;
  --emerald-500: #d3f590;
  --emerald-600: #ccf57a;
  --emerald-700: #bef553;
  --emerald-800: #90c32c;
  --emerald-900: #7bab1d;
  --pink-50: #fbf4fc;
  --pink-100: #feecff;
  --pink-200: #fedfff;
  --pink-300: #fdc9ff;
  --pink-400: #f6aaf9;
  --pink-500: #f183f5;
  --pink-600: #f05cf6;
  --pink-700: #ea45f0;
  --pink-800: #d639db;
  --pink-900: #b129b6;
}

[data-theme="dark"] {
  --neutral-white: #302e31;
  --neutral-50: #2b2a2c;
  --neutral-100: #38353b;
  --neutral-200: #3c3640;
  --neutral-300: #7b7380;
  --neutral-400: #8d8890;
  --neutral-500: #96869d;
  --neutral-600: #695a70;
  --neutral-700: #f1f2ed;
  --neutral-800: #f6f7f0;
  --neutral-900: #fcfcfa;
  --neutral-black: #f2f5e9;
  --neutral-black-3: #ffffff08;
  --neutral-black-6: #ffffff0f;
  --neutral-black-15: #ffffff40;
  --neutral-black-25: #fff6;
  --neutral-black-50: #ffffffb2;
  --neutral-white-3: #00000008;
  --neutral-white-6: #0000000f;
  --neutral-white-25: #00000026;
  --neutral-white-40: #00000040;
  --neutral-white-70: #00000080;
  --blue-50: #4f6071;
  --green-50: #404437;
  --green-100: #6f7a5b;
  --green-200: #626757;
  --green-300: #868e77;
  --green-400: #9caa7f;
  --green-500: #aebd50;
  --green-600: #d1e838;
  --green-700: #b1c626;
  --green-800: #889a13;
  --green-900: #6c7a0f;
  --red-50: #4c333a;
  --red-100: #8c5567;
  --red-200: #fca4a5;
  --red-300: #f7888c;
  --red-400: #f56e7e;
  --red-500: #f0596b;
  --red-600: #f0485c;
  --red-700: #e03448;
  --red-800: #c72235;
  --red-900: #9b1d2c;
  --blue-100: #486676;
  --blue-200: #aaf2fa;
  --blue-300: #8fedf7;
  --blue-400: #76e8f5;
  --blue-500: #5ee3f2;
  --blue-600: #3cb6c4;
  --blue-700: #40c7d6;
  --blue-800: #22adbd;
  --blue-900: #1d8490;
  --purple-50: #32313a;
  --purple-100: #524f69;
  --purple-200: #696680;
  --purple-300: #8581a5;
  --purple-400: #cdc8f7;
  --purple-500: #c1baf5;
  --purple-600: #887fcf;
  --purple-700: #7f72e0;
  --purple-800: #6a5dc9;
  --purple-900: #392f82;
  --yellow-50: #57543a;
  --yellow-100: #edebd3;
  --yellow-200: #e0dcb6;
  --yellow-300: #a8a165;
  --yellow-400: #beb459;
  --yellow-500: #aea131;
  --yellow-600: #d9ca41;
  --yellow-700: #ead40b;
  --yellow-800: #c4b210;
  --yellow-900: #a6960e;
  --emerald-50: #344031;
  --emerald-100: #43533f;
  --emerald-200: #556a50;
  --emerald-300: #617b5b;
  --emerald-400: #d4f299;
  --emerald-500: #d3f590;
  --emerald-600: #ccf57a;
  --emerald-700: #bef553;
  --emerald-800: #90c32c;
  --emerald-900: #7bab1d;
  --pink-50: #3e2e3e;
  --pink-100: #523b52;
  --pink-200: #6f4e70;
  --pink-300: #fdc9ff;
  --pink-400: #f6aaf9;
  --pink-500: #f183f5;
  --pink-600: #f05cf6;
  --pink-700: #ea45f0;
  --pink-800: #d639db;
  --pink-900: #b129b6;
}

@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --neutral-white: #302e31;
    --neutral-50: #2b2a2c;
    --neutral-100: #38353b;
    --neutral-200: #3c3640;
    --neutral-300: #7b7380;
    --neutral-400: #8d8890;
    --neutral-500: #96869d;
    --neutral-600: #695a70;
    --neutral-700: #f1f2ed;
    --neutral-800: #f6f7f0;
    --neutral-900: #fcfcfa;
    --neutral-black: #f2f5e9;
    --neutral-black-3: #ffffff08;
    --neutral-black-6: #ffffff0f;
    --neutral-black-15: #ffffff40;
    --neutral-black-25: #fff6;
    --neutral-black-50: #ffffffb2;
    --neutral-white-3: #00000008;
    --neutral-white-6: #0000000f;
    --neutral-white-25: #00000026;
    --neutral-white-40: #00000040;
    --neutral-white-70: #00000080;
    --blue-50: #4f6071;
    --green-50: #404437;
    --green-100: #6f7a5b;
    --green-200: #626757;
    --green-300: #868e77;
    --green-400: #9caa7f;
    --green-500: #aebd50;
    --green-600: #d1e838;
    --green-700: #b1c626;
    --green-800: #889a13;
    --green-900: #6c7a0f;
    --red-50: #4c333a;
    --red-100: #8c5567;
    --red-200: #fca4a5;
    --red-300: #f7888c;
    --red-400: #f56e7e;
    --red-500: #f0596b;
    --red-600: #f0485c;
    --red-700: #e03448;
    --red-800: #c72235;
    --red-900: #9b1d2c;
    --blue-100: #486676;
    --blue-200: #aaf2fa;
    --blue-300: #8fedf7;
    --blue-400: #76e8f5;
    --blue-500: #5ee3f2;
    --blue-600: #3cb6c4;
    --blue-700: #40c7d6;
    --blue-800: #22adbd;
    --blue-900: #1d8490;
    --purple-50: #32313a;
    --purple-100: #524f69;
    --purple-200: #696680;
    --purple-300: #8581a5;
    --purple-400: #cdc8f7;
    --purple-500: #c1baf5;
    --purple-600: #887fcf;
    --purple-700: #7f72e0;
    --purple-800: #6a5dc9;
    --purple-900: #392f82;
    --yellow-50: #57543a;
    --yellow-100: #edebd3;
    --yellow-200: #e0dcb6;
    --yellow-300: #a8a165;
    --yellow-400: #beb459;
    --yellow-500: #aea131;
    --yellow-600: #d9ca41;
    --yellow-700: #ead40b;
    --yellow-800: #c4b210;
    --yellow-900: #a6960e;
    --emerald-50: #344031;
    --emerald-100: #43533f;
    --emerald-200: #556a50;
    --emerald-300: #617b5b;
    --emerald-400: #d4f299;
    --emerald-500: #d3f590;
    --emerald-600: #ccf57a;
    --emerald-700: #bef553;
    --emerald-800: #90c32c;
    --emerald-900: #7bab1d;
    --pink-50: #3e2e3e;
    --pink-100: #523b52;
    --pink-200: #6f4e70;
    --pink-300: #fdc9ff;
    --pink-400: #f6aaf9;
    --pink-500: #f183f5;
    --pink-600: #f05cf6;
    --pink-700: #ea45f0;
    --pink-800: #d639db;
    --pink-900: #b129b6;
  }
}

:root {
  --sizes-0: 0px;
  --sizes-1: 1px;
  --sizes-2: 2px;
  --sizes-4: 4px;
  --sizes-6: 6px;
  --sizes-7: 7px;
  --sizes-8: 8px;
  --sizes-10: 10px;
  --sizes-12: 12px;
  --sizes-14: 14px;
  --sizes-16: 16px;
  --sizes-20: 20px;
  --sizes-24: 24px;
  --sizes-28: 28px;
  --sizes-32: 32px;
  --sizes-36: 36px;
  --sizes-40: 40px;
  --sizes-48: 48px;
  --sizes-64: 64px;
  --sizes-80: 80px;
  --sizes-128: 128px;
  --sizes-300: 300px;
  --width-sidebar: 290px;
  --shadow-popup: 0px 0px 10px #0000001a;
  --shadow-header: 0 0 12px -2px #0000000d;
  --shadow-sidebar: 10px 0px 10px -5px #00000014;
}

[data-theme="dark"] {
  --shadow-popup: 0 0 15px 2px #00000040;
  --shadow-header: 0 0 12px -2px #0003;
  --shadow-sidebar: 10px 0px 10px -5px #0000003b;
}

@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --shadow-popup: 0 0 15px 2px #00000040;
    --shadow-header: 0 0 12px -2px #0003;
    --shadow-sidebar: 10px 0px 10px -5px #0000003b;
  }
}

body {
  background: var(--color-general-primary);
  color: var(--color-general-text-black);
  width: 100vw;
  height: 100svh;
}

.squircle {
  --radius-none: var(--sizes-0);
  --radius-xsmall: var(--sizes-4);
  --radius-small: var(--sizes-8);
  --radius-medium: var(--sizes-14);
  --radius-large: var(--sizes-20);
  corner-shape: superellipse(2);
}

button {
  cursor: pointer;
  outline-style: none;
}

.dragging {
  z-index: 10;
  opacity: .8;
  transform: scale(1.8);
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.double-range {
  appearance: none;
  outline: none;
}

.double-range::-webkit-slider-thumb {
  appearance: none;
  background: var(--color-white);
  border: 1px solid var(--color-black);
  cursor: pointer;
  pointer-events: auto;
  border-radius: 9999px;
  width: 16px;
  height: 16px;
}

.text-overflow {
  text-overflow: ellipsis;
  text-wrap: nowrap;
  overflow: hidden;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@keyframes loading {
  0% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(calc(-1 * var(--animation-magnitude, 3px)));
  }

  75% {
    transform: translateY(var(--animation-magnitude, 3px));
  }

  100% {
    transform: translateY(0);
  }
}
