/* Motion is an enhancement: no loading screen, autoplay media or hidden article text. */
.jl-index .jl-identity h1 .jl-letter{display:inline-block;color:inherit;transform-origin:50% 90%}
.jl-index .jl-identity h1 .jl-letter-dot{color:var(--jl-rust)}
.jl-motion-enter .jl-letter{animation:jl-letter-in .8s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--letter-index)*45ms)}
.jl-motion-enter .jl-deck{animation:jl-copy-in .7s ease-out .28s both}
.jl-motion-enter .jl-welcome-character img{animation:jl-paste-in 1.05s cubic-bezier(.16,1,.3,1) .18s both}
.jl-motion-enter .jl-welcome-character::before{animation:jl-sun-in 1.1s cubic-bezier(.16,1,.3,1) .1s both}
.jl-motion-enter .jl-hello{animation:jl-hello-in .7s cubic-bezier(.16,1,.3,1) .55s both}
@keyframes jl-letter-in{from{opacity:0;transform:translateY(28%) rotate(5deg) scaleY(.88)}to{opacity:1;transform:none}}
@keyframes jl-copy-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes jl-paste-in{from{opacity:0;transform:translateY(24px) rotate(-7deg) scale(.94)}to{opacity:1;transform:rotate(3deg)}}
@keyframes jl-sun-in{from{opacity:0;transform:rotate(-32deg) scale(.68)}to{opacity:1;transform:rotate(-12deg) scale(1)}}
@keyframes jl-hello-in{from{opacity:0;transform:translateY(8px) rotate(2deg) scale(.9)}to{opacity:1;transform:rotate(-5deg)}}
.jl-motion-ready [data-jl-reveal]{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1);transition-delay:var(--reveal-delay,0ms)}
.jl-motion-ready [data-jl-reveal].jl-visible,.jl-motion-ready [data-jl-reveal]:focus-within{opacity:1;transform:none}
.jl-index .jl-feature-image img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover) and (pointer:fine){.jl-index .jl-card{transition:transform .3s cubic-bezier(.16,1,.3,1)}.jl-index .jl-card:hover{transform:translateY(-5px)}.jl-index .jl-nav a{transition:color .2s}.jl-index .jl-welcome-character:hover img{transform:rotate(-2deg);transition:transform .4s cubic-bezier(.16,1,.3,1)}}
@media(prefers-reduced-motion:reduce){.jl-motion-enter .jl-letter,.jl-motion-enter .jl-deck,.jl-motion-enter .jl-welcome-character img,.jl-motion-enter .jl-welcome-character::before,.jl-motion-enter .jl-hello{animation:none!important}.jl-motion-ready [data-jl-reveal]{opacity:1;transform:none;transition:none!important}.jl-index .jl-card,.jl-index .jl-welcome-character img,.jl-index .jl-nav a{transition:none!important}.jl-index .jl-card:hover{transform:none}.jl-index .jl-feature-image img{transition:none!important}.jl-index .jl-welcome-character:hover img{transform:rotate(3deg)}}
/* An outlined wordmark keeps the same weight and spacing on every device. */
.jl-index .jl-identity h1{font-size:inherit;line-height:1;margin:0;max-width:820px;width:100%}
.jl-index .jl-wordmark{display:block;width:100%;height:auto;overflow:visible;color:var(--jl-ink)}
.jl-index .jl-logo-dot{fill:var(--jl-rust)}
.jl-motion-enter .jl-glyph{animation:jl-glyph-in .8s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--letter-index)*45ms)}
@keyframes jl-glyph-in{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@media(max-width:700px){.jl-index .jl-identity h1{max-width:none}.jl-index .jl-wordmark{width:100%}}
@media(prefers-reduced-motion:reduce){.jl-motion-enter .jl-glyph{animation:none!important}}