@scope (body[data-design]) {
  .design-site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1200px;
    padding: 24px;
    margin: auto;
  }
  .design-site-header img {
    width: 150px;
    filter: invert(1);
  }
  .design-site-header nav {
    display: flex;
    gap: 20px;
    align-items: center;
  }
  .design-site-header a {
    text-decoration: none;
  }
  .design-site-footer {
    max-width: 1100px;
    margin: 30px auto;
    padding: 24px;
    border-top: 1px solid var(--color-line);
    color: var(--color-muted);
    display: flex;
    gap: 20px;
    justify-content: space-between;
  }
  .landing-wrap {
    max-width: 1100px;
    padding: 35px 24px;
    margin: auto;
  }
  @media (max-width: 640px) {
    .design-site-header {
      padding: 20px;
      gap: 12px;
    }
    .design-site-header img {
      width: 120px;
    }
    .design-site-header nav {
      gap: 12px;
      font-size: 12px;
    }
  }
  .seo-content {
    max-width: 850px;
    margin: 30px auto;
    padding: 25px;
    line-height: 1.85;
    font-size: 14px;
  }
  .seo-content h1 {
    font: 650 clamp(30px, 4vw, 48px) / 1.2 var(--font-landing);
    margin: 18px 0;
  }
  .seo-content h2 {
    font-size: 22px;
    margin: 32px 0 16px;
  }
  .seo-content p {
    margin: 16px 0;
  }
  .seo-example {
    background: var(--color-surface-soft);
    padding: 24px;
    border-radius: 16px;
  }
  .seo-page .actions {
    margin: 24px 0;
  }
}