.ebbinghaus-illusion{--ebbinghaus-scale: .5;--ebbinghaus-loop-duration: 28s;--ebbinghaus-primary: hsl(var(--primary));--ebbinghaus-secondary: hsl(var(--secondary));position:relative;overflow:hidden;margin:0;width:100%;min-height:40vh;background:transparent}.ebbinghaus-illusion:before,.ebbinghaus-illusion:after{--size: 6em;content:"";font-size:calc(1vmin * var(--ebbinghaus-scale));position:absolute;width:50em;aspect-ratio:1;top:50%;left:calc(50% - min(55em,50vw));translate:0 -50%;background:radial-gradient(farthest-side circle,var(--ebbinghaus-secondary) 99%,#0000 0) var(--p1) var(--p1) / var(--size2) var(--size2),radial-gradient(farthest-side circle,var(--ebbinghaus-secondary) 99%,#0000 0) var(--p3) var(--p1) / var(--size2) var(--size2),radial-gradient(farthest-side circle,var(--ebbinghaus-secondary) 99%,#0000 0) var(--p2) var(--p1) / var(--size2) var(--size2),radial-gradient(farthest-side circle,var(--ebbinghaus-secondary) 99%,#0000 0) var(--p1) var(--p3) / var(--size2) var(--size2),radial-gradient(farthest-side circle,var(--ebbinghaus-secondary) 99%,#0000 0) var(--p2) var(--p3) / var(--size2) var(--size2),radial-gradient(farthest-side circle,var(--ebbinghaus-secondary) 99%,#0000 0) var(--p1) var(--p2) / var(--size2) var(--size2),radial-gradient(farthest-side circle,var(--ebbinghaus-secondary) 99%,#0000 0) var(--p3) var(--p2) / var(--size2) var(--size2),radial-gradient(farthest-side circle,var(--ebbinghaus-secondary) 99%,#0000 0) var(--p2) var(--p2) / var(--size2) var(--size2),radial-gradient(farthest-side,var(--ebbinghaus-primary) 99%,#0000 0) 50% 50% / var(--size) var(--size);background-repeat:no-repeat;animation-timing-function:ease-in-out;animation-iteration-count:infinite}.ebbinghaus-illusion:before{--size2: calc(var(--size) * 1);--p1: calc(50% - var(--size2) * 1.2);--p2: calc(50% - var(--size2) * -1.2);--p3: 50%;animation-name:ebbinghaus-loop-before;animation-duration:var(--ebbinghaus-loop-duration)}.ebbinghaus-illusion:after{--size2: calc(var(--size) * 2.5);--p1: 0;--p2: 100%;--p3: 50%;animation-name:ebbinghaus-loop-after;animation-duration:var(--ebbinghaus-loop-duration)}@keyframes ebbinghaus-loop-before{0%,to{left:calc(50% - min(55em,50vw));top:50%;translate:0 -50%}14%,22%{left:50%;top:50%;translate:-50% -50%}36%,42%{left:calc(50% + min(55em,50vw));top:50%;translate:-100% -50%}56%,64%{left:50%;top:50%;translate:-50% -50%}}@keyframes ebbinghaus-loop-after{0%,to{left:calc(50% + min(55em,50vw));top:50%;translate:-100% -50%}14%,22%{left:50%;top:50%;translate:-50% -50%}36%,42%{left:calc(50% - min(55em,50vw));top:50%;translate:0 -50%}56%,64%{left:50%;top:50%;translate:-50% -50%}}@media (aspect-ratio >= 1){.ebbinghaus-illusion{max-height:none}}@media (aspect-ratio < 1){.ebbinghaus-illusion:not(.process-pipelines-synergy-band__illusion){--ebbinghaus-travel: min(55em, 36vh);font-size:calc(1.1vmin * var(--ebbinghaus-scale));height:calc(2 * var(--ebbinghaus-travel) + 6em);min-height:calc(2 * var(--ebbinghaus-travel) + 6em);max-height:calc(2 * var(--ebbinghaus-travel) + 6em)}.ebbinghaus-illusion:before,.ebbinghaus-illusion:after{font-size:inherit;left:50%;top:calc(50% - var(--ebbinghaus-travel));translate:-50% 0%}.ebbinghaus-illusion:before{animation-name:ebbinghaus-loop-before-portrait}.ebbinghaus-illusion:after{animation-name:ebbinghaus-loop-after-portrait}}@media (aspect-ratio < 1){.process-pipelines-synergy-band__illusion.ebbinghaus-illusion{--ebbinghaus-travel: min(55em, 32vh);font-size:calc(1.1vmin * var(--ebbinghaus-scale));height:calc(2 * var(--ebbinghaus-travel) + 6em);min-height:calc(2 * var(--ebbinghaus-travel) + 6em);max-height:calc(2 * var(--ebbinghaus-travel) + 6em)}}@keyframes ebbinghaus-loop-before-portrait{0%,to{left:50%;top:calc(50% - var(--ebbinghaus-travel));translate:-50% 0%}14%,22%{left:50%;top:50%;translate:-50% -50%}36%,42%{left:50%;top:calc(50% + var(--ebbinghaus-travel));translate:-50% -100%}56%,64%{left:50%;top:50%;translate:-50% -50%}}@keyframes ebbinghaus-loop-after-portrait{0%,to{left:50%;top:calc(50% + var(--ebbinghaus-travel));translate:-50% -100%}14%,22%{left:50%;top:50%;translate:-50% -50%}36%,42%{left:50%;top:calc(50% - var(--ebbinghaus-travel));translate:-50% 0%}56%,64%{left:50%;top:50%;translate:-50% -50%}}.ebbinghaus-illusion:not(.ebbinghaus-illusion--active):before,.ebbinghaus-illusion:not(.ebbinghaus-illusion--active):after{animation-play-state:paused}@media (prefers-reduced-motion: reduce){.ebbinghaus-illusion:before,.ebbinghaus-illusion:after{animation:none}.ebbinghaus-illusion:after{left:calc(50% + min(55em,50vw));top:50%;translate:-100% -50%}}.ebbinghaus-illusion--pipelines-branded{--ebbinghaus-primary: hsl(var(--primitive-brand-magenta))}.ebbinghaus-illusion--pipelines-branded:before{--ebbinghaus-secondary: hsl(var(--primitive-pipeline-process-on-light))}.ebbinghaus-illusion--pipelines-branded:after{--ebbinghaus-secondary: hsl(var(--primitive-brand-magenta))}.ebbinghaus-illusion__hint{position:absolute;z-index:1;left:50%;bottom:1.5rem;translate:-50% 0;padding:.5rem 1rem;border-radius:9999px;border:1px solid hsl(var(--border) / .8);background:hsl(var(--card) / .85);color:#94a3b8;font-size:.875rem;text-align:center;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}