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

/* The native [hidden] attribute must always win over a component class's
   own `display` rule (e.g. `.foo { display: flex }` on an element that also
   carries [hidden] to toggle visibility) -- otherwise the class's higher
   specificity silently defeats hidden and the element stays visible. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* Fallback paint layer behind everything, including the globe canvas --
   if JS fails or hasn't run yet, the page still has its theme color
   instead of the browser's default white showing through. */
html {
  background-color: var(--color-bg-base);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

input[type="radio"],
input[type="checkbox"] {
  accent-color: #2e7d32;
}

/* Touch screens: iOS Safari zooms the whole page on focus into any field
   under 16px and doesn't zoom back out -- !important because component
   rules (e.g. the 12px search input) are more specific than this. */
@media (max-width: 1023px) {
  input:not([type="radio"]):not([type="checkbox"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  input[type="radio"],
  input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }
}

html.dark {
  color-scheme: dark;
}

body {
  background-color: var(--color-bg-base);
  color: var(--color-fg-base);
  font-family: var(--font-family);
  font-size: var(--text-base-regular-size);
  line-height: var(--text-base-regular-line);
  transition: background-color 200ms ease, color 200ms ease;
}

/* Body's own background steps aside so the fixed globe canvas (behind it,
   z-index -1) shows through the empty gaps -- content sections keep their
   own opaque backgrounds and still cover it normally. */
body {
  background-color: transparent;
}

#globe-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: none;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-block: 96px;
  text-align: center;
}

.not-found h1,
.not-found p {
  margin: 0;
}

.not-found p {
  color: var(--color-fg-subtle);
  margin-bottom: 16px;
}

.not-found .button {
  padding-inline: 20px;
  min-height: 40px;
}

.content-container {
  max-width: var(--content-container-max-width);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--content-container-padding-inline);
}

.text-xsmall-regular {
  font-size: var(--text-xsmall-regular-size);
  line-height: var(--text-xsmall-regular-line);
  font-weight: 400;
}
.text-small-regular {
  font-size: var(--text-small-regular-size);
  line-height: var(--text-small-regular-line);
  font-weight: 400;
}
.text-small-semi {
  font-size: var(--text-small-semi-size);
  line-height: var(--text-small-semi-line);
  font-weight: 600;
}
.text-base-regular {
  font-size: var(--text-base-regular-size);
  line-height: var(--text-base-regular-line);
  font-weight: 400;
}
.text-base-semi {
  font-size: var(--text-base-semi-size);
  line-height: var(--text-base-semi-line);
  font-weight: 600;
}
.text-large-regular {
  font-size: var(--text-large-regular-size);
  line-height: var(--text-large-regular-line);
  font-weight: 400;
}
.text-large-semi {
  font-size: var(--text-large-semi-size);
  line-height: var(--text-large-semi-line);
  font-weight: 600;
}
.text-xl-regular {
  font-size: var(--text-xl-regular-size);
  line-height: var(--text-xl-regular-line);
  font-weight: 400;
}
.text-xl-semi {
  font-size: var(--text-xl-semi-size);
  line-height: var(--text-xl-semi-line);
  font-weight: 600;
}
.text-2xl-regular {
  font-size: var(--text-2xl-regular-size);
  line-height: var(--text-2xl-regular-line);
  font-weight: 400;
}
.text-2xl-semi {
  font-size: var(--text-2xl-semi-size);
  line-height: var(--text-2xl-semi-line);
  font-weight: 600;
}
.text-3xl-regular {
  font-size: var(--text-3xl-regular-size);
  line-height: var(--text-3xl-regular-line);
  font-weight: 400;
}
.text-3xl-semi {
  font-size: var(--text-3xl-semi-size);
  line-height: var(--text-3xl-semi-line);
  font-weight: 600;
}

/* Present for screen readers and crawlers, invisible on screen. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}