.site-watermark-layer {
  position: fixed;
  inset: 0;
  z-index: var(--site-watermark-z, 4);
  overflow: hidden;
  pointer-events: none !important;
  user-select: none;
  touch-action: none;
  contain: strict;
  opacity: 1;
}

.site-watermark-region {
  position: absolute;
  inset: auto;
  overflow: hidden;
  pointer-events: none !important;
  contain: strict;
}

.site-watermark-layer.is-entering {
  animation: site-watermark-fade 220ms ease-out both;
}

.site-watermark-item {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: min(80vw, 680px);
  color: var(--site-watermark-color, #0f172a);
  font-family: var(--site-watermark-font, system-ui, sans-serif);
  font-size: var(--site-watermark-size, 28px);
  font-weight: var(--site-watermark-weight, 600);
  letter-spacing: var(--site-watermark-spacing, 2px);
  line-height: var(--site-watermark-line-height, 1.25);
  white-space: pre-wrap;
  text-align: center;
  opacity: var(--site-watermark-opacity, .14);
  transform-origin: center;
  -webkit-text-stroke: var(--site-watermark-stroke-width, 0) var(--site-watermark-stroke-color, transparent);
  text-shadow: var(--site-watermark-shadow, none);
  filter: none;
  transform: translate(-50%, -50%) rotate(var(--site-watermark-rotation, -24deg)) rotate(var(--site-watermark-mask-rotation, 0deg)) scaleX(var(--site-watermark-scale-x, 1)) scaleY(var(--site-watermark-scale-y, 1));
}

.site-watermark-item.is-banner {
  width: calc(100% - 32px);
  max-width: none;
  min-height: 44px;
  padding: 8px 16px;
  background: color-mix(in srgb, var(--site-watermark-color, #0f172a) 7%, transparent);
}

.site-watermark-item.is-hollow {
  color: transparent;
}

.site-watermark-item img {
  display: block;
  width: var(--site-watermark-logo-width, 96px);
  max-width: min(42vw, 320px);
  max-height: 120px;
  object-fit: contain;
  opacity: var(--site-watermark-logo-opacity, .42);
  filter: var(--site-watermark-logo-filter, none);
  transform: rotate(var(--site-watermark-logo-rotation, 0deg)) scaleX(var(--site-watermark-logo-flip-x, 1)) scaleY(var(--site-watermark-logo-flip-y, 1));
}

.site-watermark-item.is-secondary {
  z-index: 1;
}

@keyframes site-watermark-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 640px) {
  .site-watermark-item {
    max-width: 72vw;
    font-size: min(var(--site-watermark-size, 28px), 22px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-watermark-layer.is-entering {
    animation: none;
  }
}