.for-fd {
    --for-fd-speed: 38s;
    --for-fd-size: 64px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    color: inherit;
    font: 800 var(--for-fd-size)/0.92 "Overpass", system-ui, sans-serif;
    letter-spacing: -0.045em;
}

.for-fd *, .for-fd *::before, .for-fd *::after { box-sizing: border-box; }
.for-fd--uppercase { text-transform: uppercase; }
.for-fd__track { display: flex; width: max-content; will-change: transform; }
.for-fd__group { display: flex; flex: none; min-width: 100vw; align-items: center; justify-content: space-around; white-space: nowrap; }
.for-fd__word { display: inline-block; padding: 0.13em 0.08em; }
.for-fd__separator { display: inline-block; margin: 0 0.22em; font-size: 0.34em; letter-spacing: 0; opacity: 0.48; }

.for-fd--left .for-fd__track,
.for-fd--subway .for-fd__track { animation: for-fd-left var(--for-fd-speed) linear infinite; }
.for-fd--right .for-fd__track { animation: for-fd-right var(--for-fd-speed) linear infinite; }
.for-fd--subway {
    padding-block: 0.13em;
    border-block: 0.055em solid #ffb000;
    background: #080703;
    color: #ffb000;
    box-shadow: inset 0 0 0.5em rgba(255, 176, 0, 0.12);
    font-family: "Overpass Mono", "Overpass", ui-monospace, monospace;
    letter-spacing: 0.015em;
    text-shadow: 0 0 0.08em rgba(255, 176, 0, 0.85), 0 0 0.32em rgba(255, 176, 0, 0.3);
}
.for-fd--subway .for-fd__word { display: inline-flex; align-items: baseline; gap: 0.26em; padding-inline: 0.18em; }
.for-fd--subway .for-fd__minutes { font-size: 0.36em; font-weight: 600; letter-spacing: 0.08em; opacity: 0.78; }
.for-fd--subway .for-fd__word.is-flashing { animation: for-fd-flash 1.15s steps(2, end) infinite; }

.for-fd__vertical { display: grid; height: 1.2em; overflow: hidden; will-change: transform; }
.for-fd__vertical .for-fd__word { display: block; grid-column: 1; height: 1.2em; text-align: center; }
.for-fd--up .for-fd__vertical { animation: for-fd-up var(--for-fd-speed) steps(var(--for-fd-count, 6), end) infinite; }
.for-fd--down .for-fd__vertical { animation: for-fd-down var(--for-fd-speed) steps(var(--for-fd-count, 6), end) infinite; }
.for-fd__shuffle { display: block; min-height: 1.15em; text-align: center; transition: opacity 120ms ease, transform 120ms ease; }
.for-fd__shuffle.is-changing { opacity: 0; transform: translateY(0.15em); }

.for-fd--static .for-fd__track { width: 100%; }
.for-fd--static .for-fd__group { min-width: 0; flex-wrap: wrap; justify-content: center; white-space: normal; }
.for-fd--static .for-fd__group[aria-hidden="true"] { display: none; }
.for-fd--pause:hover *, .for-fd--pause:focus-within * { animation-play-state: paused !important; }

@keyframes for-fd-left { to { transform: translateX(-50%); } }
@keyframes for-fd-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes for-fd-up { to { transform: translateY(calc(-100% + 1.2em)); } }
@keyframes for-fd-down { from { transform: translateY(calc(-100% + 1.2em)); } to { transform: translateY(0); } }
@keyframes for-fd-flash { 0%, 46% { opacity: 1; } 47%, 73% { opacity: 0.16; } 74%, 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .for-fd * { animation: none !important; transition: none !important; }
    .for-fd__track { width: 100%; }
    .for-fd__group { flex-wrap: wrap; justify-content: center; white-space: normal; }
    .for-fd__group[aria-hidden="true"] { display: none; }
    .for-fd__vertical { display: flex; flex-wrap: wrap; height: auto; justify-content: center; }
    .for-fd__vertical .for-fd__word { height: auto; }
}