[data-logo-boxes]>div{border:1px solid;animation:1s ease-in forwards logo-box-fade;position:absolute}@keyframes logo-box-fade{to{opacity:0}}[data-hero-marks] .hero-mark{color:var(--color-signal-green);position:absolute}[data-hero-marks] .hero-mark-box{border:.5px solid;display:none;position:absolute;top:50%;left:50%}[data-hero-marks] .hero-mark-box-br{inset:auto 50% 50% auto}.fim-how{--ratio:1;padding:var(--section-top) var(--gutter) 0;color:var(--color-ink)}.fim-how-ruler{visibility:hidden;pointer-events:none;width:0;height:100svh;position:absolute;top:0;left:0}.fim-how-label{font:400 var(--type-small)/1.15 var(--font-label);color:var(--color-text);align-items:center;gap:4px;margin:0 0 32px;display:flex}.fim-how-label:before{content:"";background:var(--color-signal-green);flex:none;width:12px;height:12px}.fim-how-fig{margin:0}.fim-how-art{aspect-ratio:var(--ratio);background:var(--color-panel)}.fim-how-head{font:400 var(--type-small)/1.15 var(--font-label);color:var(--color-text);align-items:flex-start;gap:12px;margin:0;transition:color .3s;display:flex}.fim-how-head:before{content:"";background:var(--color-mute);flex:none;width:16px;height:16px;transition:background-color .3s}.fim-how-step.on .fim-how-head,.fim-how-lede .fim-how-head{color:var(--color-ink)}.fim-how-step.on .fim-how-head:before,.fim-how-lede .fim-how-head:before{background:var(--color-signal-orange)}.fim-how-body p,.fim-how-text{background:var(--color-panel);color:var(--color-ink);font:300 var(--type-heading)/1.1 var(--font-sans);margin:0}.fim-how-lede{display:none}.fim-how-more{box-sizing:border-box;background:var(--color-signal-green);width:fit-content;min-width:50%;color:var(--color-ink);font:300 var(--type-lead)/1.1 var(--font-sans);margin-top:24px;padding:0 56px 28px 0;text-decoration:none;display:block;position:relative}.fim-how-more svg{width:20px;height:20px;transition:translate .2s;position:absolute;bottom:12px;right:12px}@media (hover:hover){.fim-how-more:hover svg{translate:2px -2px}}@media (width>=56.3125rem){.fim-how{--label-h:calc(var(--type-small) * 1.15 + 48px);--label-ext:max(0px, var(--release) - var(--header) - var(--gutter) - var(--label-h));--head-h:32px;--body-h:180px;--release:0px}.fim-how-label{z-index:25;top:var(--header);box-sizing:content-box;height:calc(var(--type-small) * 1.15);margin:calc(-1 * var(--gutter)) 0 0;padding:var(--gutter) 0 calc(48px + var(--label-ext));background:linear-gradient(var(--color-paper) 0 0) top / 100% calc(var(--gutter) + var(--label-h)) no-repeat;pointer-events:none;position:sticky}.fim-how-scrolly{margin-top:calc(-1 * var(--label-ext));grid-template-columns:minmax(0,53.483%) minmax(0,1fr);align-items:start;gap:50px;display:grid}.fim-how-fig{top:calc(var(--header) + var(--label-h));padding-block:var(--gutter);position:sticky}.fim-how-art{width:min(100%, (var(--screen) - 2 * var(--gutter) - var(--label-h)) * var(--ratio))}.fim-how-steps{--stack-top:calc(var(--header) + var(--gutter) + var(--label-h));width:90%}.fim-how-step{--head-ext:max(0px, var(--release) - var(--stack-top) - (var(--i) + 1) * var(--head-h));--body-ext:max(0px, var(--release) - var(--stack-top) - (var(--i) + 1) * var(--head-h) - var(--body-h));--prev-ext:max(0px, var(--release) - var(--stack-top) - var(--i) * var(--head-h) - var(--body-h));--gap:calc(var(--screen) * .45);display:contents}.fim-how-steps:before{content:"";z-index:20;top:var(--header);box-sizing:content-box;height:calc(var(--gutter) + var(--label-h));padding-bottom:max(0px, var(--release) - var(--stack-top));background:linear-gradient(var(--color-paper) 0 0) top / 100% calc(var(--gutter) + var(--label-h)) no-repeat;pointer-events:none;display:block;position:sticky}.fim-how-step>.fim-how-head{z-index:calc(10 - var(--i));top:calc(var(--stack-top) + var(--i) * var(--head-h));box-sizing:content-box;height:var(--head-h);padding-bottom:var(--head-ext);margin-top:calc(var(--gap) - var(--prev-ext));background:linear-gradient(var(--color-paper) 0 0) top / 100% var(--head-h) no-repeat;position:sticky}.fim-how-step:first-child>.fim-how-head{margin-top:calc(-1 * max(0px, var(--release) - var(--stack-top)))}.fim-how-step>.fim-how-head>span{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.fim-how-body{z-index:1;top:calc(var(--stack-top) + (var(--i) + 1) * var(--head-h));box-sizing:content-box;height:var(--body-h);padding-bottom:var(--body-ext);margin-top:calc(-1 * var(--head-ext));background:linear-gradient(var(--color-paper) 0 0) top / 100% var(--body-h) no-repeat;position:sticky}.fim-how-body p{transition:color .3s}.fim-how-step:not(.on) .fim-how-body p{color:color-mix(in srgb, var(--color-text) 40%, var(--color-panel))}.fim-how-step:last-child .fim-how-body{z-index:15}.fim-how-steps:after{content:"";height:calc(var(--screen) * .8);margin-top:calc(var(--screen) * .45 - max(0px, var(--release) - var(--stack-top) - var(--n) * var(--head-h) - var(--body-h)));display:block}}@media (width<56.3125rem){.fim-how{--ratio:calc(700 / 600);--label-h:calc(var(--type-small) * 1.15 + 32px);--fig-h:calc(var(--screen) - var(--gutter) - var(--label-h))}.fim-how-label{top:var(--header);box-sizing:content-box;height:calc(var(--type-small) * 1.15);margin:calc(-1 * var(--gutter)) 0 0;padding:var(--gutter) 0 calc(32px + var(--fig-h));position:sticky}.fim-how-scrolly{margin-top:calc(-1 * var(--fig-h))}.fim-how-fig{z-index:1;top:calc(var(--header) + var(--gutter) + var(--label-h));height:var(--fig-h);padding-bottom:var(--gutter);background:var(--color-paper);flex-direction:column;gap:16px;display:flex;position:sticky}.fim-how-lede .fim-how-head{font:300 var(--type-lead)/1.1 var(--font-sans)}.fim-how-lede .fim-how-head:before{content:none}.fim-how-lede{display:grid}.fim-how-lede>div{opacity:0;visibility:hidden;flex-direction:column;grid-area:1/1;gap:8px;transition:opacity .3s,visibility .3s;display:flex}.fim-how-lede>.on{opacity:1;visibility:visible}.fim-how-text{font-size:var(--type-body);line-height:1.15}.fim-how-lede .fim-how-more{margin-top:8px}.fim-how-art-box{min-height:0;margin-inline:calc(-1 * var(--gutter));flex:1;container-type:size}.fim-how-art{width:min(100cqw, 100cqh * var(--ratio))}.fim-how-steps{margin-top:calc(-1 * var(--fig-h))}.fim-how-steps:after{content:"";height:calc(var(--screen) * .8);display:block}.fim-how-step{height:var(--screen);visibility:hidden}}@media (prefers-reduced-motion:reduce){.fim-how-head,.fim-how-head:before,.fim-how-body p,.fim-how-lede>div,.fim-how-more svg{transition:none}}