html {
  scroll-behavior: smooth;
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: #ffffff;
  color: #0f172a;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02" 1, "cv03" 1, "cv04" 1, "cv11" 1;
}

::selection {
  background-color: rgb(29 78 216 / 0.12);
  color: #172554;
}

:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

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

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

.bg-grid {
  background-image:
    linear-gradient(to right, rgb(15 23 42 / 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(15 23 42 / 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
}

.bg-dots {
  background-image: radial-gradient(rgb(15 23 42 / 0.08) 1px, transparent 1px);
  background-size: 22px 22px;
}

.mask-fade-b {
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
}

.mask-fade-x {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 12%,
    black 88%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    black 12%,
    black 88%,
    transparent
  );
}

.animate-tab-enter {
  animation: tab-enter 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes tab-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}