/* 12-second cycle; IT stays fixed. Overlapping words reserve a stable width. */
.start-typewriter{display:inline-flex;white-space:pre;vertical-align:bottom}
.start-typewriter .type-words{display:inline-grid;text-align:left}
.start-typewriter .type-word{grid-area:1/1;white-space:pre}
.start-typewriter .type-word>span{animation-duration:12s;animation-timing-function:steps(1,end);animation-iteration-count:infinite}
.start-typewriter .type-sparq>span{opacity:0}
.start-typewriter .type-work>span:nth-child(1){animation-name:start-work-0}
@keyframes start-work-0{0%{opacity:1}29.5%{opacity:0}89%,100%{opacity:1}}
.start-typewriter .type-work>span:nth-child(2){animation-name:start-work-1}
@keyframes start-work-1{0%{opacity:1}28%{opacity:0}90.5%,100%{opacity:1}}
.start-typewriter .type-work>span:nth-child(3){animation-name:start-work-2}
@keyframes start-work-2{0%{opacity:1}26.5%{opacity:0}92%,100%{opacity:1}}
.start-typewriter .type-work>span:nth-child(4){animation-name:start-work-3}
@keyframes start-work-3{0%{opacity:1}25%{opacity:0}93.5%,100%{opacity:1}}
.start-typewriter .type-sparq>span:nth-child(1){animation-name:start-sparq-0}
@keyframes start-sparq-0{0%{opacity:0}35%{opacity:1}81%,100%{opacity:0}}
.start-typewriter .type-sparq>span:nth-child(2){animation-name:start-sparq-1}
@keyframes start-sparq-1{0%{opacity:0}36.5%{opacity:1}79.5%,100%{opacity:0}}
.start-typewriter .type-sparq>span:nth-child(3){animation-name:start-sparq-2}
@keyframes start-sparq-2{0%{opacity:0}38%{opacity:1}78%,100%{opacity:0}}
.start-typewriter .type-sparq>span:nth-child(4){animation-name:start-sparq-3}
@keyframes start-sparq-3{0%{opacity:0}39.5%{opacity:1}76.5%,100%{opacity:0}}
.start-typewriter .type-sparq>span:nth-child(5){animation-name:start-sparq-4}
@keyframes start-sparq-4{0%{opacity:0}41%{opacity:1}75%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
 .start-typewriter .type-word>span{animation:none}
 .start-typewriter .type-work{visibility:hidden}
 .start-typewriter .type-sparq>span{opacity:1}
}
