/* The Typeface hero's contour/fill/erase sequence, scoped to a single title. */
.title-hero{position:relative;isolation:isolate;--outline-duration:2.6s;--fill-duration:1.2s;--fill-delay:calc(var(--last-contour-delay,0ms) + var(--outline-duration) + 1.5s)}
.title-hero .hero-word{display:inline-block;position:relative;white-space:nowrap}
.title-hero .hero-text{position:relative;z-index:1;padding-right:.12em;margin-right:-.12em}
.title-hero .baseline-probe{display:inline-block;width:0;height:0;vertical-align:baseline;font-size:0;line-height:0}
.title-hero .title-guides{position:absolute;inset:0;pointer-events:none;z-index:0}
.title-hero .title-guide{position:absolute;left:0;right:0;height:0;border-top:1px solid var(--title-guide-line,rgb(255 255 255 / .13))}
.title-hero .title-guide[data-kind="xHeight"]{border-top-style:dashed}
.title-hero .title-guide[data-kind="baseline"]{border-color:var(--title-guide-baseline,rgb(255 255 255 / .2))}
.title-hero .title-guide[data-kind="descender"]{border-top-style:dotted}
.title-hero .title-guide-label{position:absolute;right:0;bottom:4px;display:flex;gap:8px;padding-left:5px;white-space:nowrap;font:400 .625rem/1.2 Rays,sans-serif;color:var(--title-guide-label,#55575a);background:var(--surface,var(--ink,#202124))}
.title-hero .title-guide-value{font-variant-numeric:tabular-nums;min-width:3ch;text-align:right}
@media(max-width:600px){.title-hero .title-guide-label{font-size:.5625rem;bottom:3px;gap:5px}.title-hero .title-guide[data-kind="baseline"] .title-guide-label,.title-hero .title-guide[data-kind="descender"] .title-guide-label{bottom:auto;top:3px}}
.title-hero .hero-trace{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.title-hero .hero-outline{fill:none;stroke:currentColor;stroke-width:var(--outline-stroke-width,1.15);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.title-hero[data-drawing="waiting"] .hero-text{opacity:.06}
.title-hero[data-drawing="resting"] .hero-text{opacity:0}
.title-hero[data-drawing="running"] .hero-text{animation:title-hero-fill var(--fill-duration) ease-out var(--fill-delay) both}
.title-hero[data-drawing="running"] .hero-outline{animation:title-hero-draw var(--outline-duration) linear var(--draw-delay) both}
.title-hero[data-drawing="running"] .hero-trace{animation:title-hero-trace-out var(--fill-duration) linear var(--fill-delay) both}
.title-hero[data-drawing="erasing"] .hero-text{animation:title-hero-unfill .45s ease-in both}
.title-hero[data-drawing="erasing"] .hero-outline{animation:title-hero-erase 1s ease-in-out var(--erase-delay) both}
.title-hero[data-drawing="erasing"] .hero-trace{animation:title-hero-erase-out .1s linear 1.9s both}
.title-hero[data-drawing-paused="true"] .hero-text,.title-hero[data-drawing-paused="true"] .hero-outline,.title-hero[data-drawing-paused="true"] .hero-trace{animation-play-state:paused}
@keyframes title-hero-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes title-hero-fill{from{opacity:0}to{opacity:1}}
@keyframes title-hero-trace-out{from{opacity:1}to{opacity:0}}
@keyframes title-hero-unfill{from{opacity:1}to{opacity:0}}
@keyframes title-hero-erase{from{stroke-dashoffset:0}to{stroke-dashoffset:1}}
@keyframes title-hero-erase-out{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){.title-hero .hero-text{opacity:1!important}.title-hero .hero-trace{display:none}}