html {
  background-color: var(--color-page-bg);
  background-image:
    radial-gradient(ellipse at 4% 22%, rgba(229, 235, 255, 0.35) 0%, rgba(229, 235, 255, 0) 52%),
    radial-gradient(ellipse at 94% 18%, rgba(222, 248, 232, 0.32) 0%, rgba(222, 248, 232, 0) 50%),
    radial-gradient(ellipse at 52% 5%, rgba(255, 230, 238, 0.28) 0%, rgba(255, 230, 238, 0) 46%),
    linear-gradient(rgba(250, 251, 253, 0.85), rgba(250, 251, 253, 0.85)),
    url("../assets/graphics/ui-bg.webp");
  background-position: center, center, center, center, center;
  background-repeat: no-repeat;
  background-size: auto, auto, auto, 100% 100%, 100% 100%;
}

body {
  position: relative;
  overflow-x: hidden;
  color: inherit;
  background: transparent;
  font-family: var(--font-body);
  font-weight: 400;
  font-synthesis-weight: none;
  isolation: isolate;
}

html:not(.fonts-ready) .module-header__step,
html:not(.fonts-ready) .module-header__name,
html:not(.fonts-ready) .quiz-title,
html:not(.fonts-ready) .quiz-text,
html:not(.fonts-ready) .category-button,
html:not(.fonts-ready) .option-button,
html:not(.fonts-ready) .statement-button,
html:not(.fonts-ready) .system-button,
html:not(.fonts-ready) .quiz-input,
html:not(.fonts-ready) .phone-code-select,
html:not(.fonts-ready) .phone-number-input,
html:not(.fonts-ready) .enter-submit-hint,
html:not(.fonts-ready) .rating-question,
html:not(.fonts-ready) .rating-row,
html:not(.fonts-ready) .rating-scale,
html:not(.fonts-ready) .rating-scale-preview,
html:not(.fonts-ready) .rating-guide-key,
html:not(.fonts-ready) .completion-title,
html:not(.fonts-ready) .completion-intro-text,
html:not(.fonts-ready) .completion-path,
html:not(.fonts-ready) .assessment-intro-page {
  visibility: hidden;
}

html.no-page-scroll-root,
html:has(body.no-page-scroll) {
  height: 100%;
  overflow: hidden;
}

body.no-page-scroll {
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}

html.page-scroll-locked-root,
html:has(body.page-scroll-locked) {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body.page-scroll-locked {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}

body.page-scroll-locked > .email-page,
body.page-scroll-locked > .landing-page,
body.page-scroll-locked > .completion-page {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

button,
.button,
.option-label,
input,
textarea,
select {
  font-family: var(--font-ui);
}

button,
.button,
input,
textarea,
select {
  width: 100%;
}

body > * {
  position: relative;
  z-index: 1;
}

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