/* fine.earth — планета в шапке главной. Тема переключается так же, как в style.css:
   data-theme на <html>, без него — по системе. */
.hero { padding-top: 8px; }
.hero::before {
  content: '';
  flex: 1 1 100%;
  order: -1;
  height: clamp(150px, 24vw, 280px);
  margin-bottom: -24px;
  background: url('/planet-light.svg') left center / cover no-repeat;
  /* снизу и слева растворяется в фон страницы */
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent), linear-gradient(to right, transparent, #000 14%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 62%, transparent), linear-gradient(to right, transparent, #000 14%);
  mask-composite: intersect;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero::before { background-image: url('/planet-dark.svg'); }
}
:root[data-theme="dark"] .hero::before { background-image: url('/planet-dark.svg'); }
@media (max-width: 760px) {
  .hero::before { margin-bottom: -8px; }
}