:root{--color-text:var(--color-slate-800);--color-bg:papayawhip;--color-bg-accent:var(--color-slate-100);--size:clamp(9rem, 1rem + 40vmin, 15rem);--gap:calc(var(--size) / 14);--duration:60s;--scroll-start:0;--scroll-end:calc(-100% - var(--gap))}.marquee{-webkit-user-select:none;user-select:none;gap:var(--gap);-webkit-mask-image:linear-gradient(var(--mask-direction,to right), #bf404000, #bf4040 20%, #bf4040 80%, #bf404000);mask-image:linear-gradient(var(--mask-direction,to right), #bf404000, #bf4040 20%, #bf4040 80%, #bf404000);display:flex;overflow:hidden}.marquee__group{justify-content:space-around;align-items:center;gap:var(--gap);min-width:100%;animation:scroll-x var(--duration) linear infinite;flex-shrink:0;display:flex}@media (prefers-reduced-motion:reduce){.marquee__group{animation-play-state:paused}}.marquee--vertical{--mask-direction:to bottom}.marquee--vertical,.marquee--vertical .marquee__group{flex-direction:column}.marquee--vertical .marquee__group{animation-name:scroll-y}.marquee--reverse .marquee__group{animation-direction:reverse;animation-delay:-3s}@keyframes scroll-x{0%{transform:translateX(var(--scroll-start))}to{transform:translateX(var(--scroll-end))}}@keyframes scroll-y{0%{transform:translateY(var(--scroll-start))}to{transform:translateY(var(--scroll-end))}}.marquee svg{width:var(--size);fill:var(--color-text);background:var(--color-bg-accent);aspect-ratio:16/9;padding:calc(var(--size) / 10);border-radius:.5rem;place-items:center;display:grid}.marquee--vertical svg{aspect-ratio:1;width:calc(var(--size) / 1.5);padding:calc(var(--size) / 6)}.wrapper{gap:var(--gap);flex-direction:column;max-width:100vw;margin:auto;display:flex}.wrapper--vertical{flex-direction:row;height:100vh}.toggle{--size:3rem;width:var(--size);height:var(--size);font:inherit;text-align:center;cursor:pointer;color:inherit;background-color:var(--color-bg-accent);z-index:1;border:none;border-radius:50%;outline:none;position:fixed;top:1rem;left:1rem}.toggle:focus-visible{box-shadow:0 0 0 2px var(--color-text)}.toggle span{white-space:nowrap;-webkit-user-select:none;user-select:none;width:fit-content;animation:.4s ease-out 4s forwards fade;display:inline-block;position:absolute;top:50%;left:calc(100% + .4em);transform:translateY(-50%)}.toggle svg{--size:1.5rem;width:var(--size);height:var(--size);fill:currentColor;transition:transform .3s cubic-bezier(.25,1,.5,1);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.toggle--vertical svg{transform:translate(-50%,-50%)rotate(-90deg)}@keyframes fade{to{opacity:0;visibility:hidden}}