body:has(meta-ads-hero[data-skins-color-mode="dark"]) {
  --skins-foreground: #f5f5f3;
  --skins-muted: #bdbdb8;
  --skins-border: #555;
  background: var(--skins-dark-background);

  .theme-content,
  .theme-content > .shopify-section {
    background: var(--skins-dark-background);
    color: var(--skins-foreground);
  }

  .meta-ads-device__trigger,
  .meta-ads-device__dialog > section,
  .meta-ads-device__models,
  .meta-ads-designs__card,
  .image-with-text__card {
    background: var(--skins-dark-surface);
    color: var(--skins-foreground);
    border-color: var(--skins-border);
  }

  .meta-ads-hero--separated {
    background: var(--skins-dark-background);
    color: var(--skins-foreground);
  }

  .meta-ads-device,
  .meta-ads-designs,
  .meta-ads-device__models button,
  .image-with-text,
  .image-with-text__content :is(h1, h2),
  .meta-ads-hero--separated :is(h1, .meta-ads-hero__eyebrow) {
    color: var(--skins-foreground);
  }

  .meta-ads-hero--separated [data-meta-ads-text],
  .meta-ads-device__copy small,
  .image-with-text__text {
    color: var(--skins-muted);
  }

  .meta-ads-device__visual,
  .meta-ads-device__action {
    background: var(--skins-dark-background);
    color: var(--skins-foreground);
    border-color: var(--skins-border);
    box-shadow: none;
  }

  .meta-ads-designs__image {
    background: #000;
  }

  .meta-ads-designs__card {
    background: #000;
    border-color: transparent;
  }

  .meta-ads-device__models button {
    border-color: var(--skins-border);
  }

  .meta-ads-device__models button:hover,
  .meta-ads-device__models button.is-active {
    background: #303030;
  }

  .meta-ads-device__handle {
    background: var(--skins-muted);
  }

  .meta-ads-device__trigger:hover {
    border-color: #999;
  }

  .meta-ads-designs__card:hover {
    border-color: transparent;
  }

  :is(.meta-ads-designs__card, .meta-ads-device button, .image-with-text__button):focus-visible {
    outline: 2px solid var(--skins-foreground);
    outline-offset: 3px;
  }

  .image-with-text__button--primary,
  .image-with-text__button--secondary {
    background: #f5f5f3;
    color: #171717;
    border-color: #f5f5f3;
  }
}

meta-ads-hero[data-skins-color-mode].meta-ads-hero--separated .meta-ads-hero__copy {
  width: min(calc(100% - 56px), 398px);
  margin-bottom: 8px;
}

meta-ads-hero[data-skins-color-mode].meta-ads-hero--separated .meta-ads-hero__copy > [data-meta-ads-text] {
  max-width: 48ch;
  text-wrap: balance;
}

meta-ads-hero[data-skins-color-mode].meta-ads-hero--separated .meta-ads-hero__copy h1 {
  font-size: 36px;
  line-height: 1.02;
}

@media (min-width: 768px) {
  meta-ads-hero[data-skins-color-mode].meta-ads-hero--separated .meta-ads-hero__copy {
    width: min(calc(100% - 96px), 1200px);
    margin-bottom: 16px;
  }

  meta-ads-hero[data-skins-color-mode].meta-ads-hero--separated .meta-ads-hero__copy h1 {
    font-size: clamp(42px, 4.5vw, 64px);
  }
}

meta-ads-hero[data-skins-color-mode="light"].meta-ads-hero--separated .meta-ads-hero__copy {
  margin-top: 16px;
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  meta-ads-hero[data-skins-color-mode="light"].meta-ads-hero--separated .meta-ads-hero__copy {
    margin-top: 24px;
    margin-bottom: 24px;
  }
}

@media (max-width: 767px) {
  meta-ads-hero[data-skins-color-mode].meta-ads-hero--separated .meta-ads-hero__media {
    aspect-ratio: 5 / 4;
  }
}