.jhonlink-strip {
  background: #f5f6f8;
  color: #16212f;
  padding: .65rem 1rem;
}
.jhonlink-strip a { color: inherit; text-decoration: underline; }
.jhonlink-strip label { margin-inline-start: .4em; font-size: .85em; }
.jhonlink-window { overflow: hidden; }
.jhonlink-window ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  margin: .4rem 0;
  padding: 0;
  list-style: none;
}
.jhonlink-window li { overflow-wrap: anywhere; }
@supports (width: 1cqw) {
  .jhonlink-window { container-type: inline-size; }
  .jhonlink-window ul {
    width: max-content;
    flex-wrap: nowrap;
    animation: jhonlink-scroll 22s ease-in-out infinite alternate;
  }
  @keyframes jhonlink-scroll {
    0%, 8% { transform: translateX(0); }
    92%, 100% { transform: translateX(calc(100cqw - 100%)); }
  }
}
.jhonlink-stop:checked ~ .jhonlink-window ul,
.jhonlink-window:focus-within ul { animation: none; width: auto; flex-wrap: wrap; }
.jhonlink-window:hover ul { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .jhonlink-window ul { animation: none; width: auto; flex-wrap: wrap; }
  .jhonlink-stop, .jhonlink-strip label { display: none; }
}