:where([data-zs-ui="site-header"], [data-zs-ui="site-footer"]) {
  padding-inline: var(--zs-space-page-inline);
}

[data-zs-ui="site-header"] {
  min-height: var(--zs-size-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--zs-theme-border);
}

[data-zs-ui="brand-mark"] {
  inline-size: var(--zs-brand-mark-size);
  block-size: var(--zs-brand-mark-size);
  flex: 0 0 var(--zs-brand-mark-size);
}

[data-zs-nav="platform-home"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: 8px;
  padding-inline-start: 16px;
  border-inline-start: 1px solid var(--zs-theme-border);
}

[data-zs-ui="cloud-return-icon"] {
  inline-size: 18px;
  block-size: 18px;
  flex: 0 0 18px;
  background-color: currentColor;
  -webkit-mask: url("../assets/cloud-return.svg") center / contain no-repeat;
  mask: url("../assets/cloud-return.svg") center / contain no-repeat;
}

[data-zs-ui="site-footer"] {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--zs-theme-muted);
  font-size: var(--zs-type-label);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--zs-focus-width) solid var(--zs-theme-accent);
  outline-offset: var(--zs-focus-offset);
}

@media (max-width: 800px) {
  :root {
    --zs-type-display: clamp(26px, 8.3vw, 42px);
  }

  [data-zs-ui="site-footer"] {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
  }

  [data-zs-nav="platform-home"] {
    margin-inline-start: 0;
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}