.earth-home {
  color-scheme: dark;
  background: #020407;
  color: #f4f7f8;
  --earth-line: rgba(224, 239, 247, 0.22);
}

.with-globe-background {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 76% 32%, rgba(22, 68, 91, 0.2), transparent 31rem),
    #020407;
  color: #f4f7f8;
}

.earth-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.earth-background::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(2, 4, 7, 0.97) 0%, rgba(2, 4, 7, 0.84) 34%, rgba(2, 4, 7, 0.28) 72%, rgba(2, 4, 7, 0.46) 100%);
}

.earth-stars {
  position: absolute;
  inset: -20%;
  background-repeat: repeat;
}

.earth-stars-near {
  opacity: 0.48;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.78) 0 1px, transparent 1.2px),
    radial-gradient(circle, rgba(149, 209, 235, 0.56) 0 0.8px, transparent 1px);
  background-position: 0 0, 3.5rem 5rem;
  background-size: 8rem 8rem, 11rem 11rem;
}

.earth-stars-far {
  opacity: 0.28;
  background-image: radial-gradient(circle, #ffffff 0 0.65px, transparent 0.9px);
  background-position: 2rem 1rem;
  background-size: 4.75rem 4.75rem;
  transform: rotate(17deg);
}

.earth-globe-stage {
  position: absolute;
  top: 48%;
  right: max(-12rem, -8vw);
  width: min(78vw, 70rem);
  aspect-ratio: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

#earth-globe,
.earth-globe-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#earth-globe {
  z-index: 1;
  contain: layout paint size;
  cursor: grab;
  opacity: 0;
  pointer-events: auto;
  touch-action: none;
  transition: opacity 800ms ease;
}

#earth-globe.is-ready {
  opacity: 0.92;
}

#earth-globe.is-dragging {
  cursor: grabbing;
}

.earth-globe-fallback {
  border: 1px solid rgba(152, 221, 246, 0.3);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 29%, rgba(205, 244, 255, 0.45), transparent 3%),
    radial-gradient(circle at 47% 40%, rgba(118, 191, 219, 0.34), transparent 18%),
    radial-gradient(circle at 65% 70%, rgba(78, 151, 181, 0.24), transparent 22%),
    radial-gradient(circle at 35% 35%, #173444, #071018 58%, #020407 76%);
  box-shadow: 0 0 5rem rgba(81, 179, 215, 0.2);
  opacity: 0.74;
  transition: opacity 500ms ease;
}

.earth-globe-stage.has-webgl .earth-globe-fallback {
  opacity: 0;
}

.with-globe-background main {
  position: relative;
  z-index: 2;
}

.with-globe-background:not(.home-with-globe) main {
  pointer-events: none;
}

.with-globe-background:not(.home-with-globe) main a,
.with-globe-background:not(.home-with-globe) main button,
.with-globe-background:not(.home-with-globe) main iframe,
.with-globe-background:not(.home-with-globe) main img,
.with-globe-background:not(.home-with-globe) main p,
.with-globe-background:not(.home-with-globe) main blockquote {
  pointer-events: auto;
}

.home-with-globe main {
  position: relative;
  z-index: 2;
  width: min(800px, calc(100% - 40px));
  padding: 28px 0 96px;
  pointer-events: none;
}

.home-with-globe main a,
.home-with-globe main button,
.home-with-globe .article-text {
  pointer-events: auto;
}

.with-globe-background .site-header {
  align-items: center;
  min-height: 64px;
  border-bottom: 1px solid var(--earth-line);
}

.home-with-globe .site-header {
  margin: 0;
}

.with-globe-background .site-title {
  letter-spacing: 0.02em;
}

.with-globe-background .menu-toggle {
  border-color: var(--earth-line);
  background: rgba(4, 9, 14, 0.72);
  color: #f4f7f8;
  backdrop-filter: blur(12px);
}

.with-globe-background .site-nav {
  border-color: var(--earth-line);
  background: rgba(3, 8, 12, 0.96);
  color: #f4f7f8;
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(18px);
}

.home-with-globe h1 {
  max-width: none;
  margin: clamp(8rem, 21vh, 15rem) 0 2rem;
  font-size: clamp(3rem, 5.5vw, 5rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.98;
  text-wrap: balance;
  text-shadow: 0 0.12em 1.1em rgba(0, 0, 0, 0.55);
}

.home-with-globe .headline.is-active,
.home-with-globe .headline-line {
  display: block;
}

.home-with-globe .headline-line {
  white-space: nowrap;
}

.with-globe-background .language-switch {
  gap: 10px;
  margin-top: 0;
}

.with-globe-background .language-switch button {
  border-color: rgba(224, 239, 247, 0.35);
  background: rgba(3, 8, 12, 0.64);
  color: #f4f7f8;
  backdrop-filter: blur(10px);
}

.with-globe-background .language-switch button[aria-pressed="true"] {
  background: #e7f4f9;
  color: #071018;
}

.home-with-globe .article-text {
  max-width: 700px;
  margin: 5.5rem 0 0;
  color: #dce5e8;
  font-size: clamp(1rem, 1.4vw, 1.08rem);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.72);
}

.home-with-globe .article-text p {
  margin: 0;
  padding: 1.45rem 0;
  border-top: 1px solid var(--earth-line);
}

.home-with-globe .article-number {
  color: #91a9b4;
}

.home-with-globe .article-text a {
  text-decoration-color: rgba(220, 238, 245, 0.65);
}

.with-globe-background:not(.home-with-globe) h1 {
  text-shadow: 0 0.12em 1.1em rgba(0, 0, 0, 0.55);
}

.with-globe-background .playlist-frame,
.with-globe-background .study-frame,
.with-globe-background .forum-frame,
.with-globe-background .video-embed,
.with-globe-background .book-cover img {
  border-color: var(--earth-line);
}

.earth-home :focus-visible {
  outline: 2px solid #d7f1fb;
  outline-offset: 0.35rem;
}

@media (max-width: 760px) {
  .earth-background::after {
    background: linear-gradient(180deg, rgba(2, 4, 7, 0.14) 0%, rgba(2, 4, 7, 0.58) 40%, rgba(2, 4, 7, 0.96) 72%);
  }

  .earth-globe-stage {
    top: 30%;
    right: -32vw;
    width: 118vw;
  }

  .home-with-globe main {
    width: min(100% - 32px, 800px);
    padding-top: 16px;
  }

  .home-with-globe .site-header {
    min-height: 64px;
  }

  .home-with-globe h1 {
    margin-top: clamp(17rem, 55svh, 30rem);
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .home-with-globe .article-text {
    margin-top: 4.5rem;
  }

}

@media (prefers-reduced-motion: reduce) {
  #earth-globe {
    transition: none;
  }
}