section.tool-scroll{background:var(--clr-mint-50);position:relative}section.tool-scroll div.header-wrapper{height:300svh;min-height:max-content;margin-bottom:-100svh;position:relative}section.tool-scroll div.header-wrapper div.header{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:100svh;display:flex;position:sticky;top:0}section.tool-scroll div.header-wrapper div.header h2.headline{width:calc(var(--col) * 10 + var(--g) * 9);letter-spacing:clamp(-.27rem,-.202817vw - .0874648rem,-.135rem);z-index:2;font-size:clamp(4.5rem,6.76056vw + 2.91549rem,9rem);font-weight:var(--display-weight);line-height:100%;position:relative}section.tool-scroll div.header-wrapper div.header div.block-text{width:calc(var(--col) * 6 + var(--g) * 5);z-index:4;max-width:500px;margin-top:2rem;position:relative}section.tool-scroll div.header-wrapper div.header div.tags{pointer-events:none;position:absolute;inset:0;overflow:hidden}section.tool-scroll div.header-wrapper div.header div.tags div.tag{background-color:var(--clr-mist-100);border:1px solid var(--clr-mist-200);transform-origin:50%;z-index:3;will-change:transform;border-radius:24px;flex-direction:row;justify-content:center;align-items:center;width:max-content;padding:8px 20px;display:flex;position:absolute;top:100%;left:0;translate:-50% -50%}section.tool-scroll div.header-wrapper div.header div.tags div.tag p.tag-text{font-size:clamp(.5rem,.938967vw + .27993rem,1.125rem)}section.tool-scroll div.header-wrapper div.header div.tags div.tag:nth-of-type(3n+2){background-color:var(--clr-parchment-100);border-color:var(--clr-parchment-200)}section.tool-scroll div.header-wrapper div.header div.tags div.tag:nth-of-type(3n+3){background-color:var(--clr-celadon-200);border-color:var(--clr-celadon-400)}section.tool-scroll div.header-wrapper div.header div.tags div.tag.placeholder{z-index:1;filter:blur(6px);width:120px;height:clamp(1.2rem,1.95305vw + .742254rem,2.5rem)}section.tool-scroll div.scroll-wrapper{z-index:1;background:var(--clr-mint-50);border-top:1px solid var(--line);border-bottom:1px solid var(--line);flex-direction:row;justify-content:flex-start;align-items:flex-start;display:flex;position:relative}section.tool-scroll div.scroll-wrapper div.content-wrapper{padding-left:var(--m);flex-grow:1;min-width:0;position:relative}section.tool-scroll div.scroll-wrapper div.content-wrapper div.items-wrapper div.item-content{flex-direction:column;justify-content:center;align-items:flex-start;height:100svh;display:flex}section.tool-scroll div.scroll-wrapper div.content-wrapper div.items-wrapper div.item-content figure.icon{width:clamp(3rem,1.50235vw + 2.64789rem,4rem);height:clamp(3rem,1.50235vw + 2.64789rem,4rem);margin:0 0 clamp(2rem,.751174vw + 1.82394rem,2.5rem)}section.tool-scroll div.scroll-wrapper div.content-wrapper div.items-wrapper div.item-content div.block-text{width:calc(var(--col) * 6 + var(--g) * 5)}section.tool-scroll div.scroll-wrapper div.content-wrapper div.progress-wrapper{height:0;margin-right:var(--m);pointer-events:none;opacity:0;transition:transform 1.2s var(--ease), opacity .4s var(--ease);flex-direction:row;justify-content:center;align-items:center;column-gap:.875rem;display:flex;position:sticky;bottom:0;transform:translateY(10px)}section.tool-scroll div.scroll-wrapper div.content-wrapper div.progress-wrapper div.progress-bar{background-color:var(--line);flex-grow:1;height:6px;position:relative}section.tool-scroll div.scroll-wrapper div.content-wrapper div.progress-wrapper div.progress-bar div.progress-fill{transform-origin:0;background-color:var(--clr-black-900);width:100%;height:100%;transform:scaleX(.2)}section.tool-scroll div.scroll-wrapper div.content-wrapper div.progress-wrapper div.progress-count{text-align:right;width:60px}section.tool-scroll div.scroll-wrapper div.content-wrapper div.progress-wrapper.active{opacity:1;transform:translateY(calc(-1rem - 10px))}section.tool-scroll div.scroll-wrapper div.media-wrapper{height:100svh;width:calc(var(--col) * 8 + var(--g) * 7 + var(--m));background-color:var(--clr-surface);border-left:1px solid var(--line);flex-shrink:0;position:sticky;top:0;overflow:hidden}section.tool-scroll div.scroll-wrapper div.media-wrapper div.item-media,section.tool-scroll div.scroll-wrapper div.media-wrapper div.item-media-spacer{padding:var(--col) calc(var(--col) * .5);clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);background-color:var(--clr-surface);transition:clip-path 1.2s var(--ease);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}section.tool-scroll div.scroll-wrapper div.media-wrapper div.item-media>.mock{width:100%}section.tool-scroll div.scroll-wrapper div.media-wrapper div.item-media>.mock.fill{aspect-ratio:100/72;height:auto;max-height:100%}section.tool-scroll div.scroll-wrapper div.media-wrapper div.item-media-spacer{background-color:var(--clr-mint-200);transition:clip-path .4s var(--ease)}section.tool-scroll div.scroll-wrapper div.media-wrapper div.item-media.active,section.tool-scroll div.scroll-wrapper div.media-wrapper div.item-media-spacer.active{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}section.tool-scroll div.scroll-wrapper div.media-wrapper.reverse div.item-media{transition:clip-path .4s var(--ease)}section.tool-scroll div.scroll-wrapper div.media-wrapper.reverse div.item-media-spacer{transition:clip-path 1.2s var(--ease)}@media not (min-width:58.75rem){section.tool-scroll div.header-wrapper div.header{padding-left:var(--m);padding-right:var(--m)}section.tool-scroll div.header-wrapper div.header div.block-text,section.tool-scroll div.header-wrapper div.header h2.headline{width:100%}section.tool-scroll div.scroll-wrapper div.content-wrapper{padding:0}section.tool-scroll div.scroll-wrapper div.content-wrapper div.items-wrapper div.item-content{height:auto;padding-bottom:10svh}section.tool-scroll div.scroll-wrapper div.content-wrapper div.items-wrapper div.item-content div.item-media{background-color:var(--clr-surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);width:100svw;padding:2.75rem var(--m);margin-bottom:1.5rem}section.tool-scroll div.scroll-wrapper div.content-wrapper div.items-wrapper div.item-content figure.icon{margin:0 var(--m)}section.tool-scroll div.scroll-wrapper div.content-wrapper div.items-wrapper div.item-content div.block-text{width:calc(var(--col) * 8 + var(--g) * 7);margin:2rem var(--m) 0}section.tool-scroll div.scroll-wrapper div.content-wrapper div.progress-wrapper{margin:0 var(--m)}}