.article h2,.article h3,.article h4{transition:color 250ms}.article h2::before,.article h3::before,.article h4::before{width:0;display:inline-block;transition:opacity 250ms,transform 250ms,width 250ms;content:"›";grid-template-rows:0fr;opacity:0;transform:translateX(-0.4em);color:var(--theme-color)}@starting-style{.article h2::before,.article h3::before,.article h4::before{width:0;grid-template-rows:0fr;opacity:0;transform:translateX(-0.4em)}}.article .active-header{color:var(--theme-color-500)}.article .active-header::before{width:.4em;opacity:1;transform:none}.steps-wrapper{position:relative}.steps-wrapper h2:first-child{margin-top:0}.steps-wrapper>*+*{margin-top:1.25rem}.sidenote__note:hover,.sidenote__text:hover+.sidenote__note{z-index:calc(var(--layer-sidenote) + 10)}.drawing{position:sticky;top:0;z-index:calc(var(--layer-sidenote) + 1);background:#202125;padding:1rem;top:1rem;max-width:40vh;max-width:40svh;border-radius:4px}@media(min-width: 960px){.drawing{top:4.75rem;max-width:100%;margin-inline:0;width:20rem;--window-width: calc(100vw - var(--scrollbar-width));--content-width: min(var(--window-width), 60rem);--drawing-width: calc(var(--content-width) - 40rem - 4.5rem);width:var(--drawing-width);float:right;margin-right:calc(var(--drawing-width)*-1 - 1rem)}}@media(min-width: 1050px){.drawing{width:18rem;margin-right:-19rem}}@media(min-width: 1200px){.drawing{width:21rem;margin-right:-22.5rem}}.invader-svg path{stroke-linecap:round;stroke-linejoin:round}.invader-svg path,.invader-svg rect{transition:opacity 500ms,stroke 500ms,fill 500ms}.invader-svg[data-state~="4--end"] .body-point,.invader-svg[data-state~="5"] .body-point{opacity:0}.invader-svg[data-state~="7"] .tentacle-point{opacity:0}.invader-svg[data-state~="8"] .normal-point{opacity:0}.invader-svg[data-state~="8--end"] .tentacle-mid-path,.invader-svg[data-state~="8--end"] .normal-point,.invader-svg[data-state~="8--end"] .normal-path,.invader-svg[data-state~="9"] .tentacle-mid-path,.invader-svg[data-state~="9"] .normal-point,.invader-svg[data-state~="9"] .normal-path{opacity:0}.invader-svg[data-state~="11--end"] .body-rect-center,.invader-svg[data-state~="12"] .body-rect-center{opacity:0}.invader-svg[data-state~="12"] .body-path{opacity:0}.invader-svg[data-state~="13"] .other-tentancle-path,.invader-svg[data-state~="13"] .tentancle-path,.invader-svg[data-state~="13"] .horn-path{opacity:0}.invader-svg[data-state~="14--end"] .body-rect--o,.invader-svg[data-state~="14--end"] .body-rect--z,.invader-svg[data-state~="14--end"] .horn-tentacle-rect--o,.invader-svg[data-state~="14--end"] .horn-tentacle-rect--z,.invader-svg[position=below] .body-rect--o,.invader-svg[position=below] .body-rect--z,.invader-svg[position=below] .horn-tentacle-rect--o,.invader-svg[position=below] .horn-tentacle-rect--z{opacity:0}.invader-svg[data-position=below] .horn-tentacle-rect,.invader-svg[data-position=below] .around-eyes-rect,.invader-svg[data-position=below] .body-rect{fill:var(--invader-color);stroke:var(--invader-color)}.invader-svg[data-position=below] .invader-grid,.invader-svg[data-position=below] .body-center{opacity:0}.btn-replay{color:var(--neutral-400);position:absolute;bottom:1.125rem;right:1.125rem;border-radius:50%;padding:.5rem;background-color:rgba(32,33,37,.7);width:2rem;opacity:0}.btn-replay svg{transition:transform 750ms}.btn-replay:hover{background-color:#202125;color:var(--neutral-300)}.btn-replay:hover svg{transform:rotate(-1turn)}.drawing:has(.invader-svg[data-position=in]) .btn-replay{opacity:1}.invader-animation{position:relative}@keyframes invader-animation{0%{transform:translateX(0)}50%{transform:translateX(-100%)}100%{transform:translateX(0)}}.invader--animate{overflow:hidden;background:#202125;padding:1rem;border-radius:var(--radius)}.invader--animate .invader-pixels-wrapper{animation:invader-animation 1000ms infinite steps(1)}@keyframes size-animation{0%{transform:none}100%{transform:translateX(-100%)}}.size-animation{width:100%;overflow:hidden;border-radius:var(--radius);position:relative}.size-animation-inner{animation:size-animation 3300ms infinite steps(11) alternate;width:1100%;display:grid;grid-template-columns:repeat(11, 1fr);place-items:center;background:#202125}.size-animation-inner svg{width:calc(var(--invader-width)*3%)}.animation-pause{position:absolute;bottom:.5rem;right:.5rem;padding:.5rem;z-index:1;color:hsla(0,0%,100%,.3);font-size:.75em;line-height:1;font-weight:600}.animation-pause:hover{color:hsla(0,0%,100%,.7)}.animation-pause span:last-child,.paused .animation-pause span:first-child{display:none}.paused .animation-pause span:last-child{display:block}.paused *{animation-play-state:paused !important}