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

html {
  min-width: 320px;
  scroll-behavior: smooth;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

.cdx-theme-transition,
.cdx-theme-transition *,
.cdx-theme-transition *::before,
.cdx-theme-transition *::after {
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    box-shadow var(--transition-base) !important;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  background:
    radial-gradient(circle at 86% 0%, rgba(6, 182, 212, 0.14), transparent 22rem),
    radial-gradient(circle at 8% 0%, rgba(37, 99, 235, 0.14), transparent 28rem),
    radial-gradient(circle at 18% 42%, rgba(124, 58, 237, 0.07), transparent 24rem),
    linear-gradient(180deg, var(--cdx-page) 0%, var(--cdx-surface-2) 100%);
  color: var(--cdx-text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition-base), color var(--transition-base);
}

html[data-theme="dark"] body,
body[data-theme="dark"] {
  background:
    radial-gradient(circle at 78% 0%, rgba(34, 211, 238, 0.13), transparent 27rem),
    radial-gradient(circle at 8% 0%, rgba(81, 165, 246, 0.16), transparent 32rem),
    radial-gradient(circle at 22% 44%, rgba(167, 139, 250, 0.09), transparent 24rem),
    linear-gradient(180deg, var(--cdx-page) 0%, #0f172a 100%);
}

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

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

button {
  cursor: pointer;
}

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

::selection {
  background: rgba(47, 128, 237, 0.18);
  color: var(--cdx-ink);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-muted {
  color: var(--cdx-muted);
}

.text-strong {
  color: var(--cdx-ink);
  font-weight: 750;
}

.app-root {
  position: relative;
  width: min(100%, var(--app-max-width));
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  overflow-x: clip;
}

.mobile-only-scroll {
  scrollbar-width: none;
}

.mobile-only-scroll::-webkit-scrollbar {
  display: none;
}

.page-link {
  color: var(--cdx-primary-600);
  font-weight: 800;
}

.brand-gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}