.rv {
  --rv-ink: var(--ink, #0a0a0b);
  --rv-name: var(--ink-nav, #111);
  --rv-faint: var(--ink-faint, #8b8f9a);
  --rv-rule: #c4c7cf;
  --rv-mark: rgb(35 71 255 / .13);
  --rv-size: 46px;
  max-width: var(--container, 1200px); margin: 0 auto;
  view-timeline-name: --rv;
}
.rv--m { --rv-size: 40px; }
.rv--l { --rv-size: 34px; }
.rv--row { padding: 88px 32px 96px; }

.rv .tp-stars { display: block; height: 24px; width: auto; }

.rv__text { margin: 30px 0 0; }
.rv__text p {
  margin: 0; max-width: 24em;
  font: 300 var(--rv-size)/1.2 var(--font-display); letter-spacing: -.024em;
  color: var(--rv-ink);
  text-indent: -.42em;
  text-wrap: pretty;
}
.rv mark {
  color: inherit;
  background: linear-gradient(var(--rv-mark), var(--rv-mark)) no-repeat 0 60% / 100% 86%;
}

.rv__by {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  margin-top: 36px;
  font: 400 15px/1.4 var(--font-ui);
}
.rv__by::before { content: ""; flex: none; width: 28px; height: 1px; margin-right: 4px; background: var(--rv-rule); }
.rv__by b { font-weight: 500; color: var(--rv-name); }
.rv__by span { color: var(--rv-faint); }

.rv--night {
  --rv-ink: #f4f4f6;
  --rv-name: #fff;
  --rv-faint: rgb(255 255 255 / .45);
  --rv-rule: rgb(255 255 255 / .3);
  --rv-mark: rgb(110 132 255 / .28);
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rv mark {
      animation: rvMark linear both;
      animation-timeline: --rv;
      animation-range: cover 22% cover 42%;
    }
  }
}
@keyframes rvMark { from { background-size: 0% 86%; } }

@media (max-width: 900px) {
  .rv { --rv-size: 32px; }
  .rv--m { --rv-size: 29px; }
  .rv--l { --rv-size: 26px; }
  .rv--row { padding: 64px 24px 72px 34px; }
  .rv .tp-stars { height: 20px; }
  .rv__text { margin-top: 24px; }
  .rv__by { margin-top: 28px; font-size: 14.5px; }
}