sf-hero::part(backdrop) {
  --tantu-sky-1: light-dark(#6fd3e4, #0e0a24);
  --tantu-sky-2: light-dark(#a8ece6, #2a1660);
  --tantu-sky-3: light-dark(#ffd9b8, #7a2d7e);
  --tantu-sky-4: light-dark(#ffb7c9, #e2507e);
  --tantu-ridge-1: light-dark(#f3a6c4, #4a2270);
  --tantu-ridge-2: light-dark(#d9668f, #2a1648);
  --tantu-moon: light-dark(#ffffff, #f4ecdc);
  --tantu-sun: #ffb341;
  --tantu-planet: light-dark(#6fd9cf, #5fe8d6);
  --tantu-planet-at: 76% 42%;
  --tantu-planet-r: min(15vw, 180px);
  --tantu-moon-at: 56% 15%;
  --tantu-moon-r: min(7.5vw, 90px);
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse 75% 16% at 18% 104%,
      var(--ground) 96%,
      transparent 100%),
    radial-gradient(
      ellipse 70% 14% at 86% 104%,
      var(--ground) 96%,
      transparent 100%),
    radial-gradient(
      ellipse 60% 22% at 12% 100%,
      var(--tantu-ridge-2) 96%,
      transparent 100%),
    radial-gradient(
      ellipse 70% 26% at 78% 102%,
      var(--tantu-ridge-2) 96%,
      transparent 100%),
    radial-gradient(
      ellipse 80% 30% at 40% 104%,
      var(--tantu-ridge-1) 96%,
      transparent 100%),
    radial-gradient(
      ellipse calc(var(--tantu-planet-r) * 1.8) calc(var(--tantu-planet-r) * 0.3) at var(--tantu-planet-at),
      transparent 84%,
      var(--tantu-sun) 86% 93%,
      transparent 95%),
    radial-gradient(
      circle var(--tantu-planet-r) at var(--tantu-planet-at),
      var(--tantu-planet) 0,
      var(--slate) 98%,
      transparent 100%),
    radial-gradient(
      circle calc(var(--tantu-moon-r) * 1.14) at var(--tantu-moon-at),
      transparent 96%,
      color-mix(in srgb, var(--tantu-moon) 80%, transparent) 97% 98%,
      transparent 99%),
    radial-gradient(
      circle var(--tantu-moon-r) at var(--tantu-moon-at),
      color-mix(in srgb, var(--tantu-moon) 50%, transparent) 99%,
      transparent 100%),
    linear-gradient(
      180deg,
      var(--tantu-sky-1),
      var(--tantu-sky-2) 40%,
      var(--tantu-sky-3) 66%,
      var(--tantu-sky-4) 90%);
}
@media (max-width: 640px) {
  sf-hero::part(backdrop) {
    --tantu-planet-at: 80% 63px;
    --tantu-planet-r: 22vw;
    --tantu-moon-at: 12% 6%;
    --tantu-moon-r: 10vw;
  }
}
sf-hero::part(backdrop) {
  pointer-events: auto;
}
sf-hero::part(wrap) {
  pointer-events: none;
}
sf-hero::part(copy),
sf-hero::part(visual) {
  pointer-events: auto;
}
sf-hero::part(copy) {
  --text-h1: clamp(2.6rem, 8.5vw, 6rem);
  font-synthesis: none;
  text-wrap: balance;
  text-shadow: 0 1px 12px var(--ground);
}
sf-cards::part(h2),
sf-steps::part(h2),
sf-pricing::part(h2),
sf-faq::part(h2) {
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
  color: var(--ink);
  text-shadow: 0.045em 0.045em 0 var(--mint);
  text-wrap: balance;
}
sf-header::part(nav) {
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-synthesis: none;
}
sf-theme-switch::part(button) {
  border-radius: var(--r-sm, 2px);
}
sf-theme-switch::part(button):focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
}
sf-cards::part(li),
sf-steps::part(li),
sf-panel::part(card) {
  border-radius: var(--r-sm, 2px);
  background:
    linear-gradient(var(--slate), var(--slate)) top left / 20px 3px no-repeat,
    linear-gradient(var(--slate), var(--slate)) top left / 3px 20px no-repeat,
    linear-gradient(var(--slate), var(--slate)) bottom right / 20px 3px no-repeat,
    linear-gradient(var(--slate), var(--slate)) bottom right / 3px 20px no-repeat,
    var(--raised);
}
sf-pricing::part(signup-slot) {
  --card-shadow: 6px 6px 0 var(--mint);
}
sf-cta::part(wrap) {
  --slate: var(--ink);
  --on-slate: var(--ground);
}
sf-cta::part(box) {
  --ink: var(--mint);
  font-synthesis: none;
}