@layer reset {

  *,
  :after,
  :before {
    box-sizing: border-box
  }

  * {
    margin: 0;
    padding: 0
  }

  html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overscroll-behavior-y: none;

    @media (prefers-reduced-motion:no-preference) {
      scroll-behavior: smooth;
      interpolate-size: allow-keywords
    }
  }

  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    &:has(dialog:open) {
      overflow: hidden
    }

    &:has(dialog[open]) {
      overflow: hidden
    }
  }

  picture,
  svg,
  video {
    display: block;
    max-width: 100%
  }

  button,
  input,
  select,
  textarea {
    font: inherit
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    overflow-wrap: break-word
  }

  p {
    text-wrap: pretty
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance
  }

  ol,
  ul {
    list-style: none
  }

  table {
    border-collapse: collapse
  }

  button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer
  }
}

@layer theme {
  @property --content-max-width {
    syntax: "<length> | <percentage>";
    inherits: true;
    initial-value: 1280px
  }

  @property --page-header-height {
    syntax: "<length>";
    inherits: true;
    initial-value: 67px
  }

  @property --section-bg-color {
    syntax: "<color>";
    inherits: true;
    initial-value: transparent
  }

  :root,
  [data-theme=superhuman] {
    --rem: 16;
    --ON: initial;
    --OFF: ;
    --theme-superhuman: var(--ON);
    --theme-grammarly: var(--OFF);
    --base-font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    --base-font-family-serif: Georgia, Times, serif;
    --base-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --font-family-sans: "Super Sans VF", var(--base-font-family-sans);
    --font-family-serif: "Super Serif VF", var(--base-font-family-serif);
    --font-family-mono: "Super Sans Mono VF", var(--base-font-family-mono);
    --neutral-0: #fcfaf7;
    --neutral-5: #f7f5f2;
    --neutral-10: #f2f0eb;
    --neutral-20: #dedbd5;
    --neutral-30: #bfbcb6;
    --neutral-40: #8d8a86;
    --neutral-60: #73716d;
    --neutral-80: #474543;
    --neutral-90: #292827;
    --neutral-95: #1f1e1d;
    --neutral-100: #141413;
    --mulberry-0: #fff2fa;
    --mulberry-10: #ffdcf3;
    --mulberry-20: #f6aadd;
    --mulberry-30: #da7cb4;
    --mulberry-40: #bf6193;
    --mulberry-60: #8d3d62;
    --mulberry-80: #792d4b;
    --mulberry-90: #602639;
    --mulberry-100: #421d24;
    --mulberry-black: #241013;
    --purple-0: #f7f5ff;
    --purple-10: #e8e0ff;
    --purple-20: #d4c7ff;
    --purple-30: #bea1f5;
    --purple-40: #9e7be0;
    --purple-50: #8861ca;
    --purple-60: #714cb6;
    --purple-80: #533192;
    --purple-90: #3f256f;
    --purple-100: #281647;
    --blue-0: #eff8fd;
    --blue-10: #daedfb;
    --blue-20: #bbdff7;
    --blue-30: #8dcaf2;
    --blue-40: #4198d2;
    --blue-60: #1173a8;
    --blue-80: #0c5683;
    --blue-90: #0a476d;
    --blue-100: #16293d;
    --green-0: #f4fdfa;
    --green-10: #d5f7eb;
    --green-20: #98ebcd;
    --green-30: #3ac7a1;
    --green-40: #26a28b;
    --green-60: #148072;
    --green-80: #005c54;
    --green-90: #0c4243;
    --green-100: #17261f;
    --orange-0: #fff3e1;
    --orange-10: #ffe9c9;
    --orange-20: #fdc298;
    --orange-30: #ff9d56;
    --orange-40: #f18333;
    --orange-60: #c25000;
    --orange-80: #a64500;
    --orange-90: #812d00;
    --orange-100: #611a00;
    --red-0: #fff0f0;
    --red-10: #fedbdb;
    --red-20: #ffa8aa;
    --red-30: #ff565e;
    --red-40: #f72a42;
    --red-60: #cd0037;
    --red-80: #9f182d;
    --red-90: #860628;
    --red-100: #5b051c;
    --yellow-0: #fff8da;
    --yellow-10: #fef1bb;
    --yellow-20: #fcdf83;
    --yellow-30: #f9d255;
    --yellow-40: #f5c428;
    --yellow-60: #dfad0d;
    --yellow-80: #ae880d;
    --yellow-90: #7f640b;
    --yellow-100: #664d02;
    --gold-pro-0: #fff6e0;
    --gold-pro-10: #ffebb8;
    --gold-pro-20: #ffdc85;
    --gold-pro-30: #ffbf47;
    --gold-pro-40: #ffa10a;
    --gold-pro-60: #e57300;
    --gold-pro-80: #bd5200;
    --gold-pro-90: #7a3500;
    --gold-pro-100: #1a0b00;
    --white: #ffffff;
    --sky-30: #b2cffe;
    --sky-40: #62abff;
    --sky-60: #0163c6;
    --olive: #4f5022;
    --steel: #4e5c69;
    --color-transparent: light-dark(rgb(255 255 255/0%), rgb(0 0 0/0%));
    --color-transparent-inverse: light-dark(rgb(0 0 0/0%), rgb(255 255 255/0%));
    --color-transparent-hover: light-dark(rgb(from var(--color-transparent-inverse) r g b/5%), rgb(from var(--color-transparent-inverse) r g b/10%));
    --color-primary-base: light-dark(var(--purple-60), var(--purple-20));
    --color-primary-dark: light-dark(var(--purple-80), rgb(from var(--purple-40) r g b/16%));
    --color-primary-darker: light-dark(var(--purple-90), rgb(from var(--purple-40) r g b/10%));
    --color-secondary-base: light-dark(var(--neutral-90), rgb(from var(--white) r g b/95%));
    --color-bg-primary: light-dark(var(--white), var(--mulberry-100));
    --color-bg-secondary: light-dark(var(--neutral-10), var(--mulberry-black));
    --color-bg-secondary-dark: light-dark(var(--neutral-20), var(--neutral-100));
    --color-bg-tertiary: light-dark(var(--neutral-5), var(--green-90));
    --color-bg-accent: light-dark(var(--purple-10), var(--purple-100));
    --color-bg-accent-subdued: light-dark(var(--purple-0), var(--purple-60));
    --color-bg-overlay: light-dark(rgb(from var(--neutral-100) r g b/80%), rgb(from var(--neutral-100) r g b/80%));
    --color-text-base: light-dark(var(--neutral-90), var(--white));
    --color-text-sub: light-dark(rgb(from var(--neutral-100) r g b/65%), rgb(from var(--white) r g b/80%));
    --color-text-soft: light-dark(var(--neutral-30), rgb(from var(--white) r g b/65%));
    --color-text-disabled: light-dark(rgb(from var(--neutral-100) r g b/40%), rgb(from var(--white) r g b/40%));
    --color-text-inverse: light-dark(var(--white), var(--neutral-90));
    --color-action-primary: light-dark(var(--purple-60), var(--purple-20));
    --color-action-primary-hover: light-dark(var(--purple-80), var(--purple-30));
    --color-action-primary-active: light-dark(var(--purple-90), var(--purple-40));
    --color-action-primary-disabled: light-dark(rgb(from var(--purple-60) r g b/40%), rgb(from var(--purple-20) r g b/40%));
    --color-action-secondary: light-dark(var(--neutral-90), rgb(from var(--white) r g b/95%));
    --color-action-secondary-hover: light-dark(var(--neutral-100), var(--white));
    --color-action-secondary-active: light-dark(var(--neutral-100), var(--white));
    --color-action-secondary-disabled: light-dark(rgb(from var(--neutral-100) r g b/20%), rgb(from var(--white) r g b/20%));
    --color-border-base: light-dark(var(--neutral-40), var(--neutral-5));
    --color-border-sub: light-dark(rgb(from var(--neutral-60) r g b/20%), rgb(from var(--neutral-0) r g b/20%));
    --color-border-soft: light-dark(rgb(from var(--neutral-60) r g b/5%), rgb(from var(--neutral-0) r g b/8%));
    --color-border-focus: light-dark(var(--sky-60), var(--sky-40));
    --color-border-inverse: light-dark(var(--neutral-5), var(--neutral-40));
    --color-icon-base: light-dark(var(--neutral-90), var(--neutral-5));
    --color-icon-sub: light-dark(rgb(from var(--neutral-90) r g b/70%), rgb(from var(--neutral-0) r g b/80%));
    --color-icon-soft: light-dark(rgb(from var(--neutral-90) r g b/50%), rgb(from var(--neutral-0) r g b/60%));
    --color-icon-disabled: light-dark(rgb(from var(--neutral-100) r g b/40%), rgb(from var(--white) r g b/40%));
    --color-icon-inverse: light-dark(var(--neutral-5), var(--neutral-90));
    --color-faded-dark: light-dark(var(--neutral-80), var(--neutral-5));
    --color-faded-base: light-dark(var(--neutral-60), rgb(from var(--neutral-0) r g b/20%));
    --color-faded-light: light-dark(var(--neutral-10), rgb(from var(--neutral-0) r g b/8%));
    --color-faded-lighter: light-dark(var(--neutral-0), rgb(from var(--white) r g b/40%));
    --color-warning-dark: light-dark(var(--orange-80), var(--orange-40));
    --color-warning-base: light-dark(var(--orange-60), var(--orange-20));
    --color-warning-light: light-dark(var(--orange-40), var(--orange-10));
    --color-error-dark: light-dark(var(--red-80), var(--red-40));
    --color-error-base: light-dark(var(--red-60), var(--red-20));
    --color-error-light: light-dark(var(--red-40), var(--red-10));
    --color-success-dark: light-dark(var(--green-80), var(--green-40));
    --color-success-base: light-dark(var(--green-60), var(--green-20));
    --color-success-light: light-dark(var(--green-40), var(--green-10));
    --color-highlight-dark: light-dark(var(--blue-80), var(--blue-40));
    --color-highlight-base: light-dark(var(--blue-60), var(--blue-20));
    --color-highlight-light: light-dark(var(--blue-40), var(--blue-10));
    --color-shadow: light-dark(var(--neutral-80), var(--neutral-100));
    --color-shadow-ring: light-dark(var(--neutral-20), var(--neutral-80));
    --color-surface-soft: light-dark(rgb(from var(--neutral-60) r g b/10%), rgb(from var(--neutral-60) r g b/16%));
    --color-surface-disabled: light-dark(rgb(from var(--neutral-40) r g b/20%), rgb(from var(--neutral-40) r g b/20%));
    --elevation-xsmall: 0 0 0 1px rgb(from var(--color-shadow) r g b/4%), 0 4px 8px -2px rgb(from var(--color-shadow) r g b/6%), 0 2px 4px 0 rgb(from var(--color-shadow) r g b/4%), 0 1px 2px 0 rgb(from var(--color-shadow) r g b/4%), 0 0 0 1px rgb(from var(--color-shadow-ring) r g b/20%);
    --elevation-small: 0 0 0 1px rgb(from var(--color-shadow) r g b/4%), 0 16px 8px -8px rgb(from var(--color-shadow) r g b/1%), 0 12px 6px -6px rgb(from var(--color-shadow) r g b/2%), 0 5px 5px -2.5px rgb(from var(--color-shadow) r g b/8%), 0 1px 3px -1.5px rgb(from var(--color-shadow) r g b/16%), 0 0 0 1px rgb(from var(--color-shadow-ring) r g b/20%);
    --elevation-medium: 0 0 0 1px rgb(from var(--color-shadow) r g b/4%), 0 1px 1px 0.5px rgb(from var(--color-shadow) r g b/4%), 0 3px 3px -1.5px rgb(from var(--color-shadow) r g b/2%), 0 6px 6px -3px rgb(from var(--color-shadow) r g b/4%), 0 12px 12px -6px rgb(from var(--color-shadow) r g b/4%), 0 24px 24px -12px rgb(from var(--color-shadow) r g b/4%), 0 48px 48px -24px rgb(from var(--color-shadow) r g b/4%), 0 0 0 1px rgb(from var(--color-shadow-ring) r g b/20%);
    --elevation-large: 0 0 0 1px rgb(from var(--color-shadow) r g b/4%), 0 1px 1px 0.5px rgb(from var(--color-shadow) r g b/4%), 0 3px 3px -1.5px rgb(from var(--color-shadow) r g b/2%), 0 6px 6px -3px rgb(from var(--color-shadow) r g b/4%), 0 12px 12px -6px rgb(from var(--color-shadow) r g b/4%), 0 24px 24px -12px rgb(from var(--color-shadow) r g b/4%), 0 48px 48px -24px rgb(from var(--color-shadow) r g b/4%), 0 96px 96px -32px rgb(from var(--color-shadow) r g b/6%), 0 0 0 1px rgb(from var(--color-shadow-ring) r g b/20%);
    --space-0x: 0rem;
    --space-0_25x: calc(1 / var(--rem) * 1rem);
    --space-0_5x: calc(2 / var(--rem) * 1rem);
    --space-1x: calc(4 / var(--rem) * 1rem);
    --space-1_5x: calc(6 / var(--rem) * 1rem);
    --space-2x: calc(8 / var(--rem) * 1rem);
    --space-2_5x: calc(10 / var(--rem) * 1rem);
    --space-3x: calc(12 / var(--rem) * 1rem);
    --space-4x: calc(16 / var(--rem) * 1rem);
    --space-5x: calc(20 / var(--rem) * 1rem);
    --space-6x: calc(24 / var(--rem) * 1rem);
    --space-7x: calc(28 / var(--rem) * 1rem);
    --space-8x: calc(32 / var(--rem) * 1rem);
    --space-9x: calc(36 / var(--rem) * 1rem);
    --space-10x: calc(40 / var(--rem) * 1rem);
    --space-12x: calc(48 / var(--rem) * 1rem);
    --space-14x: calc(56 / var(--rem) * 1rem);
    --space-16x: calc(64 / var(--rem) * 1rem);
    --space-18x: calc(72 / var(--rem) * 1rem);
    --space-20x: calc(80 / var(--rem) * 1rem);
    --space-24x: calc(96 / var(--rem) * 1rem);
    --space-32x: calc(128 / var(--rem) * 1rem);
    --space-40x: calc(160 / var(--rem) * 1rem);
    --radius-0x: 0rem;
    --radius-0_5x: calc(2 / var(--rem) * 1rem);
    --radius-1x: calc(4 / var(--rem) * 1rem);
    --radius-1_5x: calc(6 / var(--rem) * 1rem);
    --radius-2x: calc(8 / var(--rem) * 1rem);
    --radius-2_5x: calc(10 / var(--rem) * 1rem);
    --radius-3x: calc(12 / var(--rem) * 1rem);
    --radius-4x: calc(16 / var(--rem) * 1rem);
    --radius-5x: calc(20 / var(--rem) * 1rem);
    --radius-6x: calc(24 / var(--rem) * 1rem);
    --radius-8x: calc(32 / var(--rem) * 1rem);
    --radius-10x: calc(40 / var(--rem) * 1rem);
    --radius-12x: calc(48 / var(--rem) * 1rem);
    --radius-16x: calc(64 / var(--rem) * 1rem);
    --radius-full: calc(999 / var(--rem) * 1rem);
    --z-index-base: 0;
    --z-index-dropdown: 100;
    --z-index-sticky: 200;
    --z-index-fixed: 300;
    --z-index-model-backdrop: 400;
    --z-index-modal: 500;
    --z-index-popover: 600;
    --z-index-tooltip: 700;
    --font-size-12: calc(12 / var(--rem) * 1rem);
    --font-size-14: calc(14 / var(--rem) * 1rem);
    --font-size-16: calc(16 / var(--rem) * 1rem);
    --font-size-18: calc(18 / var(--rem) * 1rem);
    --font-size-20: calc(20 / var(--rem) * 1rem);
    --font-size-22: calc(22 / var(--rem) * 1rem);
    --font-size-24: calc(24 / var(--rem) * 1rem);
    --font-size-26: calc(26 / var(--rem) * 1rem);
    --font-size-28: calc(28 / var(--rem) * 1rem);
    --font-size-30: calc(30 / var(--rem) * 1rem);
    --font-size-32: calc(32 / var(--rem) * 1rem);
    --font-size-34: calc(34 / var(--rem) * 1rem);
    --font-size-36: calc(36 / var(--rem) * 1rem);
    --font-size-38: calc(38 / var(--rem) * 1rem);
    --font-size-40: calc(40 / var(--rem) * 1rem);
    --font-size-42: calc(42 / var(--rem) * 1rem);
    --font-size-44: calc(44 / var(--rem) * 1rem);
    --font-size-46: calc(46 / var(--rem) * 1rem);
    --font-size-48: calc(48 / var(--rem) * 1rem);
    --font-size-50: calc(50 / var(--rem) * 1rem);
    --font-size-54: calc(54 / var(--rem) * 1rem);
    --font-size-58: calc(58 / var(--rem) * 1rem);
    --font-size-60: calc(60 / var(--rem) * 1rem);
    --font-size-64: calc(64 / var(--rem) * 1rem);
    --font-size-66: calc(66 / var(--rem) * 1rem);
    --font-size-70: calc(70 / var(--rem) * 1rem);
    --font-size-72: calc(72 / var(--rem) * 1rem);
    --font-size-80: calc(80 / var(--rem) * 1rem);
    --font-size-86: calc(86 / var(--rem) * 1rem);
    --font-weight-book: 200;
    --font-weight-regular: 460;
    --font-weight-medium: 540;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.1;
    --line-height-default: 1.2;
    --line-height-open: 1.5;
    --line-height-display: var(--line-height-tight);
    --line-height-heading: var(--line-height-default);
    --line-height-text: var(--line-height-open);
    --letter-spacing-tight: -0.0275em;
    --letter-spacing-base: -0.0075em;
    --letter-spacing-text: var(--letter-spacing-base);
    --letter-spacing-heading: var(--letter-spacing-tight);
    --letter-spacing-display: var(--letter-spacing-tight);
    --paragraph-spacing-small: 0.5em;
    --paragraph-spacing-large: 0.75em;
    --font-size-text-xsmall: var(--font-size-14);
    --font-size-text-small: var(--font-size-16);
    --font-size-text-medium: var(--font-size-18);
    --font-size-text-large: clamp(calc(18 / var(--rem) * 1rem), calc(16.4 / var(--rem) * 1rem + 0.25vw), calc(20 / var(--rem) * 1rem));
    --font-size-heading-xsmall: clamp(calc(20 / var(--rem) * 1rem), calc(16 / var(--rem) * 1rem + 0.625vw), calc(25 / var(--rem) * 1rem));
    --font-size-heading-small: clamp(calc(24 / var(--rem) * 1rem), calc(18.4 / var(--rem) * 1rem + 0.875vw), calc(31 / var(--rem) * 1rem));
    --font-size-heading-medium: clamp(calc(28 / var(--rem) * 1rem), calc(19.2 / var(--rem) * 1rem + 1.375vw), calc(39 / var(--rem) * 1rem));
    --font-size-heading-large: clamp(calc(32 / var(--rem) * 1rem), calc(18.4 / var(--rem) * 1rem + 2.125vw), calc(49 / var(--rem) * 1rem));
    --font-size-display-small: clamp(calc(36 / var(--rem) * 1rem), calc(16 / var(--rem) * 1rem + 3.125vw), calc(61 / var(--rem) * 1rem));
    --font-size-display-medium: clamp(calc(44 / var(--rem) * 1rem), calc(18.4 / var(--rem) * 1rem + 4vw), calc(76 / var(--rem) * 1rem));
    --font-size-display-large: clamp(calc(48 / var(--rem) * 1rem), calc(16 / var(--rem) * 1rem + 5vw), calc(88 / var(--rem) * 1rem));
    --mobile-padding-inline: var(--space-4x);
    --viewport-padding: var(--space-4x);
    --grid-columns: 4;

    @media (min-width:640.02px) {
      --viewport-padding: var(--space-6x);
      --grid-columns: 8
    }

    @media (min-width:1280.02px) {
      --viewport-padding: var(--space-8x);
      --grid-columns: 12
    }
  }

  :root,
  [data-color-scheme=light] {
    color-scheme: light
  }

  [data-color-scheme=dark] {
    color-scheme: dark
  }

  :root,
  [dir=ltr] {
    --flow-direction: 1
  }

  [dir=rtl] {
    --flow-direction: -1
  }

  [data-background-color=primary-default] {
    --section-bg-color: var(--color-bg-primary);
    background-color: var(--color-bg-primary)
  }

  [data-background-color=secondary-default] {
    --section-bg-color: var(--color-bg-secondary);
    background-color: var(--color-bg-secondary)
  }

  [data-background-color=secondary-dark] {
    --section-bg-color: var(--color-bg-secondary-dark);
    background-color: var(--color-bg-secondary-dark)
  }

  [data-background-color=accent-default] {
    --section-bg-color: var(--color-bg-accent);
    background-color: var(--color-bg-accent)
  }

  [data-background-color=tertiary-default] {
    --section-bg-color: var(--color-bg-tertiary);
    background-color: var(--color-bg-tertiary)
  }
}

@layer base {
  html {
    font-size: 100%
  }

  body {
    color: var(--color-text-base);
    font-family: var(--font-family-sans);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-16);
    line-height: var(--line-height-default);
    background-color: var(--color-bg-primary)
  }

  a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;

    &:hover {
      text-decoration-thickness: 2px
    }
  }

  a,
  button {
    cursor: pointer
  }

  p {
    &+p {
      margin-block-start: 1em
    }
  }

  hr {
    border-color: var(--color-border-sub)
  }

  :where(a, button, input, textarea, select, details, audio, video, object, [contenteditable], [tabindex]) {
    &:focus-visible {
      outline: 2px solid var(--color-border-focus);
      outline-offset: 2px;
      border-radius: var(--radius-1_5x)
    }
  }

  [data-loading=true] {
    cursor: not-allowed;
    pointer-events: none
  }
}

@layer components {
  @layer text {
    .type-text-xsmall {
      font-family: var(--font-family-sans);
      font-size: var(--font-size-text-xsmall);
      line-height: var(--line-height-default);
      font-weight: var(--font-weight-medium)
    }

    .type-text-small {
      font-size: var(--font-size-text-small)
    }

    .type-text-medium,
    .type-text-small {
      font-family: var(--font-family-sans);
      line-height: var(--line-height-text);
      font-weight: var(--font-weight-medium);
      letter-spacing: var(--letter-spacing-text)
    }

    .type-text-medium {
      font-size: var(--font-size-text-medium)
    }

    .type-text-large {
      font-family: var(--font-family-sans);
      font-size: var(--font-size-text-large);
      line-height: var(--line-height-text);
      font-weight: var(--font-weight-medium);
      letter-spacing: var(--letter-spacing-text)
    }

    .type-heading-xsmall {
      font-size: var(--font-size-heading-xsmall)
    }

    .type-heading-small,
    .type-heading-xsmall {
      font-family: var(--font-family-sans);
      line-height: var(--line-height-heading);
      font-weight: var(--font-weight-regular);
      letter-spacing: var(--letter-spacing-heading)
    }

    .type-heading-small {
      font-size: var(--font-size-heading-small)
    }

    .type-heading-medium {
      font-size: var(--font-size-heading-medium)
    }

    .type-heading-large,
    .type-heading-medium {
      font-family: var(--font-family-sans);
      line-height: var(--line-height-heading);
      font-weight: var(--font-weight-regular);
      letter-spacing: var(--letter-spacing-heading)
    }

    .type-heading-large {
      font-size: var(--font-size-heading-large)
    }

    .type-display-small {
      font-family: var(--font-family-sans);
      font-size: var(--font-size-display-small);
      line-height: var(--line-height-display);
      font-weight: var(--font-weight-regular);
      letter-spacing: var(--letter-spacing-display)
    }

    .type-display-medium {
      font-size: var(--font-size-display-medium)
    }

    .type-display-large,
    .type-display-medium {
      font-family: var(--font-family-sans);
      line-height: var(--line-height-display);
      font-weight: var(--font-weight-book);
      letter-spacing: var(--letter-spacing-display)
    }

    .type-display-large {
      font-size: var(--font-size-display-large)
    }
  }

  @layer link {}

  @layer button {}

  @layer wrapper {}

  @layer grid {}

  @layer form {
    .hidden-input {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      margin: 0;
      padding: 0;
      cursor: pointer;
      z-index: 1;

      &:disabled {
        cursor: not-allowed
      }
    }

    .form-field {
      background-color: var(--color-transparent);
      padding-block: var(--space-2x);
      padding-inline: var(--space-3x) var(--space-6x);
      border-radius: var(--radius-2_5x);
      border: 1px solid var(--color-border-sub);
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      transition: border-color .15s ease-in-out, background-color .15s ease-in-out;

      &:disabled {
        color: var(--color-text-disabled);
        background-color: var(--color-surface-disabled);
        cursor: not-allowed
      }

      &:hover:not(:disabled) {
        border-color: var(--color-border-base);
        background-color: var(--color-transparent-hover)
      }
    }

    .form-field-invalid {
      border-color: var(--color-error-base)
    }
  }
}

@layer atoms {
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap
  }

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

  .text-align-center {
    text-align: center
  }

  .text-align-end {
    text-align: end
  }

  .font-weight-book {
    font-weight: var(--font-weight-book)
  }

  .font-weight-regular {
    font-weight: var(--font-weight-regular)
  }

  .font-weight-medium {
    font-weight: var(--font-weight-medium)
  }

  .font-weight-semibold {
    font-weight: var(--font-weight-semibold)
  }

  .font-weight-bold {
    font-weight: var(--font-weight-bold)
  }

  .line-clamp {
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--line-clamp);
    line-clamp: var(--line-clamp)
  }

  .color-text-base {
    color: var(--color-text-base)
  }

  .color-text-sub {
    color: var(--color-text-sub)
  }

  .color-text-soft {
    color: var(--color-text-soft)
  }

  .color-text-inverse {
    color: var(--color-text-inverse)
  }

  .color-text-disabled {
    color: var(--color-text-disabled)
  }

  .display-none {
    display: none
  }

  .display-block {
    display: block
  }

  .display-row {
    display: flex
  }

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

  .display-stack {
    display: grid;
    isolation: isolate;

    >* {
      grid-area: 1/1;
      align-self: start;
      justify-self: start
    }
  }

  .flex-wrap {
    flex-wrap: wrap
  }

  .flex-1 {
    flex: 1 1
  }

  .align-items-start {
    align-items: start
  }

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

  .align-items-end {
    align-items: end
  }

  .align-items-stretch {
    align-items: stretch
  }

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

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

  .justify-content-end {
    justify-content: end
  }

  .justify-content-space-between {
    justify-content: space-between
  }

  .justify-content-space-around {
    justify-content: space-around
  }

  .justify-content-space-evenly {
    justify-content: space-evenly
  }

  .top-start {
    align-self: start;
    justify-self: start
  }

  .top-center {
    align-self: start;
    justify-self: center
  }

  .top-end {
    align-self: start;
    justify-self: end
  }

  .top-stretch {
    align-self: start;
    justify-self: stretch
  }

  .center-start {
    align-self: center;
    justify-self: start
  }

  .center-center {
    align-self: center;
    justify-self: center
  }

  .center-end {
    align-self: center;
    justify-self: end
  }

  .center-stretch {
    align-self: center;
    justify-self: stretch
  }

  .bottom-start {
    align-self: end;
    justify-self: start
  }

  .bottom-center {
    align-self: end;
    justify-self: center
  }

  .bottom-end {
    align-self: end;
    justify-self: end
  }

  .bottom-stretch {
    align-self: end;
    justify-self: stretch
  }

  .stretch-start {
    align-self: stretch;
    justify-self: start
  }

  .stretch-center {
    align-self: stretch;
    justify-self: center
  }

  .stretch-end {
    align-self: stretch;
    justify-self: end
  }

  .stretch-stretch {
    align-self: stretch;
    justify-self: stretch
  }

  .gap-0x {
    gap: var(--space-0x)
  }

  .gap-0\.5x {
    gap: var(--space-0_5x)
  }

  .gap-1x {
    gap: var(--space-1x)
  }

  .gap-1\.5x {
    gap: var(--space-1_5x)
  }

  .gap-2x {
    gap: var(--space-2x)
  }

  .gap-2\.5x {
    gap: var(--space-2_5x)
  }

  .gap-3x {
    gap: var(--space-3x)
  }

  .gap-4x {
    gap: var(--space-4x)
  }

  .gap-6x {
    gap: var(--space-6x)
  }

  .gap-8x {
    gap: var(--space-8x)
  }

  .gap-9x {
    gap: var(--space-9x)
  }

  .gap-10x {
    gap: var(--space-10x)
  }

  .gap-12x {
    gap: var(--space-12x)
  }

  .gap-16x {
    gap: var(--space-16x)
  }

  .gap-20x {
    gap: var(--space-20x)
  }

  .gap-24x {
    gap: var(--space-24x)
  }

  .gap-32x {
    gap: var(--space-32x)
  }

  .pt-2x {
    padding-block-start: var(--space-2x)
  }

  .py-2x {
    padding-block: var(--space-2x)
  }

  .py-4x {
    padding-block: var(--space-4x)
  }

  .h-full {
    height: 100%
  }

  .min-height-dvh {
    min-height: 100dvh
  }

  .full-bleed {
    margin-inline-start: calc(-1 * var(--mobile-padding-inline));
    max-width: calc(100% + (2 * var(--mobile-padding-inline)));
    width: calc(100% + (2 * var(--mobile-padding-inline)));

    @media (min-width:640.02px) {
      --mobile-padding-inline: var(--space-0x)
    }

    @media (min-width:1280.02px) {
      --mobile-padding-inline: var(--space-0x)
    }
  }

  .contain-images {
    img {
      max-height: 100%;
      max-width: 100%;
      -o-object-fit: contain;
      object-fit: contain
    }
  }
}

@layer reset, theme, base, components, atoms;