/* The kinetic marquee (from home lab design 14), standalone: sized by its own container so it behaves the same on the
   home page, inside the lab's phone frame and in the real preview. */
.mq { container-type: inline-size; overflow: hidden; width: 100%; }
.mq-marq { display: grid; gap: 4px; direction: ltr; margin-block: 6px; }
.mq-row { overflow: hidden; }
.mq-track { display: flex; align-items: center; width: max-content; font-size: clamp(3rem, 1rem + 13cqi, 9rem); font-weight: 900; line-height: 1.15; white-space: nowrap; color: var(--text); animation: mq-slide 42s linear infinite; }
.mq-row.rev .mq-track { animation-direction: reverse; animation-duration: 54s; }
.mq-track span { direction: rtl; unicode-bidi: isolate; padding-inline: .12em; }
.mq-track span.out { color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.6); }
.mq-track i { width: .16em; height: .16em; border-radius: 50%; background: var(--accent-2); flex: none; }
@keyframes mq-slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mq-track { animation: none !important; } }
.mq-hero { padding-block: 6px 0; }
@media (min-width: 900px) { .mq-hero { padding-top: 96px; } }   /* clears the floating header pill */