.preview-watermark {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: min(72%, 112px);
  padding: 5px 7px;
  color: #fff;
  background: rgba(5, 6, 6, .68);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .13);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: clamp(.46rem, .58vw, .56rem);
  line-height: 1;
  letter-spacing: .01em;
  text-transform: lowercase;
  white-space: nowrap;
  opacity: .76;
  pointer-events: none;
  transform: translateZ(0);
  transition: opacity .35s ease;
}

.preview-watermark__label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-watermark__icon {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  opacity: .95;
  color: #fff;
}

.preview-watermark__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:is(.page-preview-card, .project-preview-frame, .work-hero-card, .portfolio-project-card):is(:hover, :focus-visible) .preview-watermark {
  opacity: .92;
}

.page-preview-card .preview-watermark {
  top: 51px;
  right: 19px;
}

.work-hero-card .preview-watermark {
  top: 14px;
  right: 14px;
  max-width: min(88%, 96px);
  font-size: .44rem;
  opacity: .68;
}

.portfolio-social-card .preview-watermark {
  max-width: min(72%, 112px);
}

.site-card::after {
  display: none;
}

.project-preview-frame::after {
  display: none;
}

@media (max-width: 760px) {
  .preview-watermark {
    top: 13px;
    right: 13px;
    max-width: min(calc(100% - 26px), 112px);
    gap: 4px;
    font-size: .43rem;
    opacity: .8;
  }

  .page-preview-card .preview-watermark {
    top: 48px;
    right: 15px;
  }

  .work-hero-card .preview-watermark {
    top: 10px;
    right: 10px;
    max-width: calc(100% - 20px);
    font-size: .36rem;
    opacity: .72;
  }

  .work-hero-card:not(.work-hero-card-main) .preview-watermark__label {
    max-width: 7ch;
  }

  .preview-watermark__icon {
    width: 12px;
    height: 12px;
  }
}