<details class="acc-marq" name="acc-marq">
  <summary>
    <span class="acc-marq__t"
      >A long-running show that scrolls until you click · A long-running show that scrolls until you
      click ·&nbsp;</span
    >
  </summary>
  <p>Stop the marquee. The title settles. The body opens. Calm restored.</p>
</details>
<details class="acc-marq" name="acc-marq" open>
  <summary>
    <span class="acc-marq__t"
      >Now open · The motion holds still · Now open · The motion holds still ·&nbsp;</span
    >
  </summary>
  <p>The opened panel doesn't animate its title. Use marquee for "more here than fits."</p>
</details>
<details class="acc-marq" name="acc-marq">
  <summary>
    <span class="acc-marq__t"
      >Tap to open · Hover anywhere to slow down · Tap to open · Hover anywhere ·&nbsp;</span
    >
  </summary>
  <p>Marquee speed pairs nicely with hover-to-pause for accessibility on long titles.</p>
</details>

.acc-marq {
  margin-bottom: 6px; background: rgba(212,154,92,0.06);
  border: 1px solid rgba(212,154,92,0.16); border-radius: 8px;
  overflow: hidden;
}
.acc-marq summary {
  cursor: pointer; list-style: none;
  padding: 12px 0; overflow: hidden; position: relative;
}
.acc-marq summary::-webkit-details-marker { display: none; }
.acc-marq__t {
  display: inline-block; white-space: nowrap;
  font: 600 13px/1 system-ui; color: rgba(240,238,255,0.78);
  padding-left: 100%;
  animation: acc-marq-roll 14s linear infinite;
}
.acc-marq:hover .acc-marq__t { animation-play-state: paused; }
.acc-marq[open] .acc-marq__t {
  animation: none; padding-left: 16px; color: #f0eeff;
}
@keyframes acc-marq-roll {
  to { transform: translateX(-100%); }
}
.acc-marq p {
  margin: 0; padding: 0 16px 14px;
  font: 12px/1.55 system-ui; color: rgba(240,238,255,0.6);
}
@media (prefers-reduced-motion: reduce) {
  .acc-marq__t { animation: none; padding-left: 16px; }
}