/* Reserved glyph positions keep the title and following content stationary. */
.hero-title-wrap{position:relative;z-index:2}
#hero-title .typewriter-line{display:block;white-space:nowrap}
.typewriter-toggle{position:absolute;right:0;bottom:8px;display:grid;place-items:center;width:30px;height:30px;padding:7px;border:1px solid #cdd9c1;border-radius:50%;background:transparent;color:#6a8058;opacity:.65;transition:color 180ms,border-color 180ms,background 180ms,opacity 180ms}
.typewriter-toggle:hover,.typewriter-toggle:focus-visible{color:var(--blue);border-color:#a6bdeb;background:#edf3ff;opacity:1}
.typewriter-toggle svg{width:14px;height:14px;fill:currentColor}
.typewriter-toggle[hidden],.typewriter-play,.typewriter-toggle[aria-pressed=true] .typewriter-pause{display:none}
.typewriter-toggle[aria-pressed=true] .typewriter-play{display:block}
#hero-title .type-char{position:relative}
#hero-title.typing-ready .type-char:not(.is-typed){visibility:hidden}
#hero-title .typing-caret::after{content:"";position:absolute;left:100%;top:.12em;width:2px;height:.92em;background:var(--blue);visibility:visible;pointer-events:none;animation:hero-caret 800ms steps(1,end) infinite;transform:translateX(.04em)}
#hero-title .typing-caret:not(.is-typed)::after{left:0;transform:none}
#hero-title .blue-period .typing-caret.is-typed::after{left:48%}
#hero-title.typing-ready .marker::after{clip-path:inset(0 calc(100% - var(--marker-progress,0%)) 0 0)}
#hero-title[data-typing-paused=true] .typing-caret::after{animation-play-state:paused;opacity:0}
@keyframes hero-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){#hero-title.typing-ready .type-char{visibility:visible}#hero-title .typing-caret::after{display:none;animation:none}#hero-title.typing-ready .marker::after{clip-path:none}}