.news-ticker {
  --ticker-background: #eef8fb;
  --ticker-border: #c9e5ed;
  --ticker-text: #244653;
  --ticker-accent: #006b87;
  display: flex;
  align-items: stretch;
  height: 38px;
  max-width: 100%;
  overflow: hidden;
  border-bottom: 1px solid var(--ticker-border);
  background: var(--ticker-background);
  color: var(--ticker-text);
  font: 500 12px/1.5 var(--font-mono);
  letter-spacing: 0.015em;
}

html[data-theme="dark"] .news-ticker {
  --ticker-background: #071c2a;
  --ticker-border: #153746;
  --ticker-text: #cae1e9;
  --ticker-accent: #51d6eb;
}

.news-ticker__label {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  padding-inline: 20px;
  border-right: 1px solid var(--ticker-border);
  color: var(--ticker-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.news-ticker__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ticker-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--ticker-accent) 35%, transparent);
}

.news-ticker__viewport {
  min-width: 0;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}

.news-ticker__viewport::-webkit-scrollbar { display: none; }

.news-ticker__track {
  display: flex;
  width: max-content;
  height: 100%;
}

.news-ticker .news-ticker__group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-ticker__item {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0 30px 0 18px;
  white-space: nowrap;
}

.news-ticker__separator { color: var(--ticker-accent); font-weight: 700; }
.news-ticker__separator span { font-size: 10px; }

.news-ticker .news-ticker__link {
  color: var(--ticker-text);
  text-decoration: none;
}

.news-ticker .news-ticker__link:hover,
.news-ticker .news-ticker__link:focus-visible {
  color: var(--ticker-accent);
  text-decoration: underline;
}

.news-ticker__arrow { margin-left: 8px; color: var(--ticker-accent); }

.news-ticker__toggle {
  display: grid;
  flex: 0 0 38px;
  place-items: center;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--ticker-border);
  border-radius: 0;
  background: transparent;
  color: var(--ticker-accent);
  cursor: pointer;
}

.news-ticker__toggle[hidden],
.news-ticker__play-icon,
.news-ticker.is-paused .news-ticker__pause-icon { display: none; }
.news-ticker.is-paused .news-ticker__play-icon { display: block; }
.news-ticker__toggle:hover { background: color-mix(in srgb, var(--ticker-accent) 10%, transparent); }
.news-ticker :focus-visible { outline: 2px solid var(--ticker-accent); outline-offset: -3px; }

.news-ticker.is-ready .news-ticker__viewport { overflow-x: hidden; }
.news-ticker.is-ready .news-ticker__track {
  animation: news-ticker-scroll var(--ticker-duration, 50s) linear infinite;
  will-change: transform;
}

.news-ticker.is-paused .news-ticker__track,
.news-ticker.is-offscreen .news-ticker__track { animation-play-state: paused; }

@media (hover: hover) {
  .news-ticker:hover .news-ticker__track { animation-play-state: paused; }
}

/* Keyboard readers can inspect every original link in a stationary, scrollable row. */
.news-ticker__viewport:focus-visible,
.news-ticker__viewport:has(:focus-visible) { overflow-x: auto !important; }
.news-ticker__viewport:focus-visible .news-ticker__track,
.news-ticker__viewport:has(:focus-visible) .news-ticker__track { animation: none !important; transform: none; }
.news-ticker__viewport:focus-visible [data-ticker-clone],
.news-ticker__viewport:has(:focus-visible) [data-ticker-clone] { display: none; }

@keyframes news-ticker-scroll {
  to { transform: translate3d(calc(-1 * var(--ticker-distance)), 0, 0); }
}

@media (max-width: 600px) {
  .news-ticker { height: 36px; font-size: 11px; }
  .news-ticker__label { padding-inline: 12px; gap: 7px; font-size: 9px; }
  .news-ticker__label-extra { display: none; }
  .news-ticker__item { gap: 12px; padding-right: 24px; }
  .news-ticker__toggle { flex-basis: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .news-ticker.is-ready .news-ticker__viewport { overflow-x: auto; }
  .news-ticker.is-ready .news-ticker__track { animation: none; transform: none; will-change: auto; }
  .news-ticker [data-ticker-clone], .news-ticker__toggle { display: none; }
}