.riix-content-watermark-host {
  position: relative !important;
}

.riix-book-watermark-host {
  isolation: isolate;
}

.riix-book-watermark-layer {
  z-index: 3;
}

.riix-inline-video-watermarked {
  position: relative !important;
}

@media (min-width: 1180px) {
  .dx-riixdesign.is-reading > article.dx-narrow.riix-content-watermark-host {
    position: fixed !important;
  }
}

.riix-content-watermark-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.riix-content-watermark-item {
  position: absolute;
  display: block;
  max-width: min(620px, 72vw);
  padding: 5px 10px;
  border: 0;
  border-radius: 0;
  color: rgba(18, 18, 18, .18) !important;
  -webkit-text-fill-color: rgba(18, 18, 18, .18) !important;
  background: transparent;
  box-shadow: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .02em;
  text-align: center;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
}

.riix-watermark-line {
  display: inline;
}

.riix-watermark-line-secondary::before {
  content: " · ";
}

/* The book reader uses a light-gray panel, so retain the article watermark
 * typography while increasing only its foreground contrast. */
.riix-book-watermark-item {
  color: rgba(18, 18, 18, .28) !important;
  -webkit-text-fill-color: rgba(18, 18, 18, .28) !important;
}

@media (max-width: 620px) {
  .riix-content-watermark-item {
    max-width: 86vw;
    padding: 4px 7px;
    font-size: clamp(8px, 2.2vw, 9px);
    line-height: 1.35;
    white-space: nowrap;
  }

  .riix-watermark-line {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .riix-watermark-line-secondary {
    margin-top: 1px;
  }

  .riix-watermark-line-secondary::before {
    content: none;
  }
}

@media print {
  .riix-content-watermark-layer {
    position: absolute !important;
    display: block !important;
  }
  .riix-content-watermark-item {
    color: rgba(18, 18, 18, .24) !important;
    background: transparent !important;
  }
}

.dx-interview-native-player.riix-video-protected {
  position: relative;
  z-index: 2147482001;
}

/* Keep the article trace layer above protected inline players. The player
 * still owns the browser fullscreen top layer, where its dedicated video
 * watermark remains responsible for coverage. */
body.single-post article.dx-narrow .riix-content-watermark-layer:not(.riix-book-watermark-layer) {
  z-index: 2147482002;
}

.riix-video-watermark {
  position: absolute;
  z-index: 3;
  display: block;
  max-width: min(620px, 78%);
  padding: 5px 9px;
  border: 0;
  border-radius: 0;
  color: rgba(18, 18, 18, .3) !important;
  -webkit-text-fill-color: rgba(18, 18, 18, .3) !important;
  background: transparent;
  box-shadow: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .02em;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  mix-blend-mode: normal;
  transform: translate(-50%, -50%);
  opacity: 0 !important;
  transition: opacity .6s ease;
  will-change: opacity;
  -webkit-font-smoothing: antialiased;
}

.riix-video-watermark.is-video-watermark-active {
  opacity: 1 !important;
}

.riix-video-watermark.riix-video-watermark-relocating {
  opacity: 0 !important;
}

.riix-video-message {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  max-width: min(520px, calc(100% - 40px));
  padding: 10px 14px;
  border-radius: 6px;
  color: #fff;
  background: rgba(20, 20, 20, .82);
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
  transform: translate(-50%, -50%);
}

.riix-video-message[hidden] {
  display: none;
}

@media (max-width: 620px) {
  .riix-video-watermark {
    max-width: 88%;
    padding: 4px 7px;
    font-size: clamp(7px, 1.9vw, 8px);
    line-height: 1.35;
    white-space: nowrap;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .riix-video-watermark {
    max-width: 74%;
    padding: 3px 6px;
    font-size: 7px;
    line-height: 1.25;
    white-space: nowrap;
  }
  .riix-video-watermark .riix-watermark-line {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .riix-video-watermark .riix-watermark-line-secondary::before {
    content: none;
  }
}