<div class="tv-webcore-marquee">
  <span class="tv-webcore-marquee-label">news</span>
  <div class="tv-webcore-marquee-window">
    <div class="tv-webcore-marquee-track">
      <p class="tv-webcore-marquee-text">✦ the guestbook is open ✦ new art in the gallery ✦ webring links updated ✦ thank you for visiting ♡</p>
      <p class="tv-webcore-marquee-text" aria-hidden="true">✦ the guestbook is open ✦ new art in the gallery ✦ webring links updated ✦ thank you for visiting ♡</p>
    </div>
  </div>
</div>

/* A marquee ticker without the marquee element: two copies of the text slide left in a loop. */
.tv-webcore-marquee {
  --tv-webcore-marquee-face: var(--tv-webcore-pink, #f7b5e4);
  --tv-webcore-marquee-ink: var(--tv-webcore-navy, #2c2b9f);
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--tv-webcore-navy, #2c2b9f);
  background: var(--tv-webcore-marquee-face, #f7b5e4);
  color: var(--tv-webcore-marquee-ink, #2c2b9f);
  font: 14px/1.2 "Lucida Console", "Courier New", ui-monospace, monospace;
  letter-spacing: 0.05em;
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--tv-webcore-navy, #2c2b9f) 25%, transparent);
}

.tv-webcore-marquee-label {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  padding: 0 10px;
  border-right: 1px solid var(--tv-webcore-navy, #2c2b9f);
  background: var(--tv-webcore-navy, #2c2b9f);
  color: var(--tv-webcore-paper, #ffffff);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tv-webcore-marquee-window {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border: 2px dotted color-mix(in srgb, var(--tv-webcore-marquee-ink, #2c2b9f) 45%, transparent);
  margin: 3px;
}

.tv-webcore-marquee-track {
  display: flex;
  width: max-content;
  animation-name: tv-webcore-marquee-scroll;
  animation-duration: var(--tv-webcore-marquee-duration, 18s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.tv-webcore-marquee-text {
  margin: 0;
  padding: 8px 2rem 8px 0;
  white-space: nowrap;
}

/* Hovering or focusing inside the box pauses the text so it can be read. */
.tv-webcore-marquee:hover .tv-webcore-marquee-track,
.tv-webcore-marquee:focus-within .tv-webcore-marquee-track {
  animation-play-state: paused;
}

@keyframes tv-webcore-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.tv-webcore-marquee--lilac {
  --tv-webcore-marquee-face: var(--tv-webcore-lilac, #a49bf3);
}

.tv-webcore-marquee--navy {
  --tv-webcore-marquee-face: var(--tv-webcore-navy, #2c2b9f);
  --tv-webcore-marquee-ink: var(--tv-webcore-paper, #ffffff);
}

.tv-webcore-marquee--navy .tv-webcore-marquee-label {
  border-right-color: var(--tv-webcore-paper, #ffffff);
  background: var(--tv-webcore-pink, #f7b5e4);
  color: var(--tv-webcore-navy, #2c2b9f);
}

/* Still: the text sits in place and wraps, and the loop copy is hidden. */
@media (prefers-reduced-motion: reduce) {
  .tv-webcore-marquee-track {
    width: auto;
    animation: none;
  }

  .tv-webcore-marquee-text {
    white-space: normal;
  }

  .tv-webcore-marquee-text[aria-hidden="true"] {
    display: none;
  }
}