.hero[data-astro-cid-oj7zdehc]{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:80px 80px 120px;gap:40px;text-align:center;border-radius:var(--radius-xl);background:var(--color-hunter);color:#fff;font-weight:var(--fw-dark);overflow:hidden;@media (max-width: 1000px){gap:30px}@media (max-width: 600px){padding:40px 30px 80px}@media (max-width: 500px){padding:40px 30px}}.hero__eyebrow[data-astro-cid-oj7zdehc]{display:flex;flex-direction:column;align-items:center;gap:20px;color:hsl(var(--hs-sage),84%);svg{height:26px;width:26px;overflow:visible;path{stroke:hsl(var(--hs-sage),84%);stroke-width:1.25}}@media (max-width: 1000px){gap:15px;svg{height:22px;width:22px}}}.hero__title[data-astro-cid-oj7zdehc]{max-width:750px;@media (max-width: 1200px){max-width:650px}@media (max-width: 1000px){max-width:600px}}.hero__text[data-astro-cid-oj7zdehc]{width:100%;max-width:600px;font-size:1.25rem}.hero__example[data-astro-cid-oj7zdehc]{position:relative;margin-top:40px;width:620px;max-width:100%}@keyframes rotate{to{transform:rotate(360deg)}}.hero__sticker[data-astro-cid-oj7zdehc]{position:absolute;right:-62px;top:-62px;height:92px;width:92px;transform:scale(.5) rotate(-60deg);transition:all 1s .2s var(--ease-out-back);opacity:0;overflow:hidden;@media (prefers-reduced-motion: reduce){transition:none}body.ready &{opacity:1;transform:rotate(-15deg)}>svg{height:100%;width:100%;path{fill:var(--color-hunter)}path:first-child{fill:var(--color-mint);transition:all .4s ease;@media (prefers-reduced-motion: reduce){transition:none}}}@media (prefers-reduced-motion: no-preference){&.loading{>svg{animation:rotate infinite 1.5s linear}}}@media (max-width: 1000px){height:72px;width:72px;right:-50px;top:-50px}@media (max-width: 600px){right:-22px;top:-57px}}.hero__sticker_text[data-astro-cid-oj7zdehc]{position:absolute;top:2px;left:0;display:flex;align-items:center;justify-content:center;height:100%;width:100%;text-align:center;font-weight:800;font-size:1rem;line-height:1;color:var(--color-ink);transition:all .4s ease;@media (max-width: 1000px){font-size:.875rem}@media (prefers-reduced-motion: no-preference){.loading &{transform:scale(.9)}}}.hero__example[data-astro-cid-oj7zdehc]{max-width:100%}.hero__url[data-astro-cid-oj7zdehc]{display:flex;align-items:center;justify-content:space-between;height:80px;padding:0 20px 0 30px;background-color:hsl(var(--hs-lime),80%);border-radius:var(--radius-l);color:var(--color-text);font-family:var(--font-code);letter-spacing:.01em;overflow:hidden;@media (max-width: 1000px){height:60px;padding:0 10px 0 20px}}.hero__url-text[data-astro-cid-oj7zdehc]{flex-shrink:1;overflow:hidden;text-overflow:ellipsis;font-size:1.125rem;@media (max-width: 1000px){font-size:1rem}}.hero__url-button[data-astro-cid-oj7zdehc]{display:flex;align-items:center;justify-content:center;flex-shrink:0;height:50px;width:50px;border-radius:var(--radius-m);svg{height:22px;width:22px;transition:all .3s var(--ease)}&:active{svg{transform:translateY(5px)}}@media (max-width: 1000px){height:40px;width:40px;svg{height:16px;width:16px}}}.hero__code[data-astro-cid-oj7zdehc]{position:relative;display:flex;max-width:675px;max-height:800px;margin-top:20px;text-align:left;background-color:hsl(var(--hs-hunter),10%);border-radius:var(--radius-l);@media (prefers-reduced-motion: no-preference){transition:all .5s var(--ease);&.loading{transition:all .3s var(--ease)}}}.hero__code-loader[data-astro-cid-oj7zdehc]{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;height:100px;width:100%;pointer-events:none;l-ring{transform:scale(0);transition:all .5s var(--ease);.loading &{transform:none}}}.hero__code-result[data-astro-cid-oj7zdehc]{position:relative;z-index:1;width:100%;height:0px;opacity:0;transition:all .5s var(--ease);.showing-result &{opacity:1}}.how[data-astro-cid-oj7zdehc]{--height: 421px;--offset: 50px;position:relative;display:grid;grid-template-columns:1fr 1fr;margin-top:100px;padding-bottom:100px;@media (max-height: 900px){--offset: 0px}@media (max-width: 750px){display:flex;justify-content:center;margin-top:40px;padding-bottom:40px}}.how__text[data-astro-cid-oj7zdehc]{display:flex;flex-direction:column;font-size:1.125rem;padding-right:60px;@media (max-width: 750px){padding:0}}.how__title[data-astro-cid-oj7zdehc]{position:sticky;top:calc((100vh - var(--height)) / 2 - var(--offset));background-color:var(--color-bg);&[data-astro-cid-oj7zdehc]:before{content:"";position:absolute;z-index:1;bottom:100%;left:0;height:50vh;width:100%;background-color:var(--color-bg)}&[data-astro-cid-oj7zdehc]:after{content:"";position:absolute;top:100%;left:0;height:100px;width:100%;background:-webkit-gradient(linear,left top,left bottom,from(var(--color-bg)),to(hsl(var(--hs-bg),98%,0%)));background:-o-linear-gradient(var(--color-bg),hsl(var(--hs-bg),98%,0%));background:linear-gradient(var(--color-bg),hsl(var(--hs-bg),98%,0%))}@media (max-width: 750px){position:relative;top:unset;left:unset;margin-bottom:20px;text-align:center;&[data-astro-cid-oj7zdehc]:before,&[data-astro-cid-oj7zdehc]:after{display:none}}}.how__bullet[data-astro-cid-oj7zdehc]{display:flex;flex-direction:column;justify-content:center;min-height:75vh;max-width:475px;margin-top:80px;@media (max-width: 750px){padding:30px;margin-top:20px;min-height:0px;border-radius:var(--radius-xl);background-color:var(--color-sage)}}.how__bullet-title[data-astro-cid-oj7zdehc]{margin-bottom:30px;@media (max-width: 750px){margin-bottom:15px}}.how__graphic[data-astro-cid-oj7zdehc]{position:relative;display:flex;height:var(--height);margin-left:auto;aspect-ratio:650 / 421;position:sticky;top:calc((100vh - var(--height)) / 2 - var(--offset));right:0;align-self:start;border-radius:10px;transition:background .4s var(--ease);background-color:transparent;overflow:hidden;svg{position:relative;z-index:1;height:100%;width:100%}@media (max-width: 1450px){--height: 350px;border-radius:8px}@media (max-width: 1200px){--height: 300px;border-radius:6px}@media (max-width: 1000px){--height: 250px;border-radius:6px}@media (max-width: 850px){--height: 200px;border-radius:4px}@media (max-width: 750px){display:none}}.how__graphic-image[data-astro-cid-oj7zdehc]{position:absolute;bottom:0;left:0;display:flex;align-items:center;justify-content:center;height:calc(var(--height) - 35px);width:100%;opacity:0;transform:scale(1.1);overflow:hidden;@media (prefers-reduced-motion: no-preference){transition:all .4s var(--ease)}img{max-height:100%}&.is-visible{opacity:1;transform:none}.expressive-code figure{--code-background: transparent}}