.wf{--half:min(45vh, 410px);box-sizing:border-box;max-width:1320px;margin:clamp(150px,16vw,240px) auto 0;padding:0 20px}.wf-h{text-align:center;letter-spacing:-.035em;text-wrap:balance;max-width:27em;margin:0 auto clamp(48px,6vw,96px);scroll-margin-top:clamp(96px,12vh,140px);font-size:clamp(22px,3.63636vw - 1.45455px,47px);font-weight:700;line-height:1.08}.wf-body{grid-template-columns:minmax(210px,300px) 1fr;column-gap:clamp(24px,4vw,64px);display:grid}@property --k{syntax:"<number>";inherits:true;initial-value:0}@property --p{syntax:"<number>";inherits:true;initial-value:1}@property --q{syntax:"<number>";inherits:true;initial-value:7}@property --wr{syntax:"<number>";inherits:true;initial-value:0}@property --fl{syntax:"<length>";inherits:false;initial-value:0}@property --fr{syntax:"<length>";inherits:false;initial-value:0}.wf-rail{--row:clamp(44px, 7vh, 64px);--act:clamp(210px, 42vh, 400px);--tw:44px;--bw:calc(var(--tw) * 2 + 12px);--trk:var(--color-sand-150);top:calc(50vh - ((var(--n) - 1) * var(--row) + var(--act)) / 2);isolation:isolate;align-self:start;margin:0;padding:0;list-style:none;position:sticky}.wf-rail:before{content:"";z-index:-2;width:var(--tw);inset-inline-start:calc((var(--tw) * 2 - var(--tw)) / 2);background:var(--trk);-webkit-mask:linear-gradient(transparent, var(--color-black) 56px, var(--color-black) calc(100% - 56px), transparent);-webkit-mask:linear-gradient(transparent, var(--color-black) 56px, var(--color-black) calc(100% - 56px), transparent);mask:linear-gradient(transparent, var(--color-black) 56px, var(--color-black) calc(100% - 56px), transparent);position:absolute;top:-56px;bottom:-56px}.wf-rail li{height:calc(var(--row) + (var(--act) - var(--row)) * var(--k));position:relative}.wf-rail li:before{content:"";z-index:-1;inset-inline-start:calc(var(--tw) - var(--bw) / 2);width:var(--bw);height:calc(var(--bw) * 2);margin-top:calc(var(--bw) * -1);background:var(--trk);transform:scale(calc(.44 + .56 * var(--k)), var(--k));position:absolute;top:50%;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 200'%3E%3Cpath d='M28 0H72V20C72 45 83.3 57.7 93.3 75A50 50 0 0 1 93.3 125C83.3 142.3 72 155 72 180V200H28V180C28 155 16.7 142.3 6.7 125A50 50 0 0 1 6.7 75C16.7 57.7 28 45 28 20Z'/%3E%3C/svg%3E") 0 0/100% 100%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 200'%3E%3Cpath d='M28 0H72V20C72 45 83.3 57.7 93.3 75A50 50 0 0 1 93.3 125C83.3 142.3 72 155 72 180V200H28V180C28 155 16.7 142.3 6.7 125A50 50 0 0 1 6.7 75C16.7 57.7 28 45 28 20Z'/%3E%3C/svg%3E") 0 0/100% 100%}.wf-rail a{grid-template-columns:calc(var(--tw) * 2) minmax(0, 1fr);height:100%;color:color-mix(in srgb, var(--color-ink) calc(min(1, var(--p) + var(--k) * 2) * 100%), var(--color-sand-500));letter-spacing:-.01em;align-items:center;column-gap:clamp(24px,3vw,44px);font-size:clamp(17px,1.35vw,19px);font-weight:450;text-decoration:none;display:grid}.wf-mk{width:calc(var(--tw) * 2);height:calc(var(--tw) * 2);position:relative}.wf-mk i{display:block;position:absolute}.wf-mk .bg{background:var(--c);transform:scale(var(--k));border-radius:50%;inset:0}.wf-mk .dt{background:color-mix(in srgb, var(--color-black) calc(var(--k) * 100%), color-mix(in srgb, var(--c) calc(var(--p) * 100%), var(--color-sand-250)));width:60px;height:60px;transform:scale(calc((20 + 40 * var(--k)) / 60));border-radius:50%;margin:-30px 0 0 -30px;top:50%;left:50%}.wf-lb{transform-origin:0;transform:scale(calc(1 + (var(--fit,1.62) - 1) * var(--k)));font-weight:calc(450 + 300 * var(--k));white-space:nowrap}[dir=rtl] .wf-lb{transform-origin:100%}.wf-steps{flex-direction:column;display:flex}.wf-step{box-sizing:border-box;height:calc(var(--half) * 2);scroll-margin-top:calc(50vh - var(--half));flex-direction:column;justify-content:center;gap:clamp(16px,2vw,26px);display:flex}.wf-blk{height:calc(var(--half) * 2 - 170px);background:var(--c);border-radius:var(--r);flex:none;position:relative;overflow:hidden}.wf-vid{box-sizing:border-box;object-fit:contain;width:100%;height:100%;padding:clamp(16px,3vw,44px);position:absolute;inset:0}.wf-art{position:absolute;inset:0;overflow:hidden;container-type:size}.wf-art>.oi-pv{align-content:center;gap:var(--tg);--tg:clamp(10px, 3.2cqh, 26px);position:absolute;inset:0}.wf-art .pv-r{--t:calc((100cqh - var(--tg) * (var(--rows,2) + 1)) / var(--rows,2));--tg:clamp(10px, 3.2cqh, 26px)}.wf-cap{letter-spacing:-.015em;max-width:30em;color:var(--color-ink);margin:0;font-size:clamp(18px,1.8vw,27px);line-height:1.3}.wf-cap b{font-weight:700}.wf-tag{display:none}@supports (animation-timeline:view()){.wf-h{animation:linear both wfInk;animation-timeline:view();animation-range:entry 60% cover 55%}.wf-h span{color:color-mix(in srgb, var(--color-ink) calc(clamp(0, (var(--wr) - var(--i)) * 5, 1) * 100%), var(--color-sand-300))}.wf-rail li{animation:linear both wfK;animation-timeline:var(--t);animation-range:cover calc(50% - var(--half) * 1.25) cover calc(50% + var(--half) * 1.25)}.wf-blk{animation:linear both wfBlk;animation-timeline:view();animation-range:entry cover 45%}}@keyframes wfInk{to{--wr:var(--n)}}@keyframes wfK{0%{--k:0;--p:0;animation-timing-function:cubic-bezier(.65,0,.35,1)}20%{--k:1;--p:0}50%{--p:0}50.01%{--p:1}80%{--k:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}to{--k:0;--p:1}}@keyframes wfBlk{0%{opacity:.4;scale:.9}to{opacity:1;scale:1}}@media (width<=820px),(width<=1024px) and (orientation:portrait){.wf-body{display:block}.wf-rail{display:none}.wf-step{gap:14px;height:auto;padding:28px 0}.wf-blk{aspect-ratio:4/3;height:auto}.wf-tag{align-items:center;gap:10px;font-size:18px;font-weight:700;display:flex}.wf-tag i{background:var(--c);border-radius:50%;width:14px;height:14px}}@media (width>=641px) and (width<=1024px){.wf{margin-top:clamp(110px,13vw,150px)}.wf-h{max-width:none;font-size:calc(3.84615vw - 1.53846px)}}@media (width>=641px) and (width<=820px),(width>=641px) and (width<=1024px) and (orientation:portrait){.wf-step{padding:18px 0}.wf-blk{aspect-ratio:16/10}.wf-vid{padding:clamp(8px,1.6vw,16px)}#wf-scope .wf-vid{scale:1.45}.wf-cap{font-size:clamp(18px,2.4vw,22px)}}@media (prefers-reduced-motion:reduce){.wf *{animation:none!important}.wf-h span{color:var(--color-ink)}}.wf-hs{display:none}@media (width<=640px){.wf-h:has(.wf-hs) .wf-hl{display:none}.wf-hs{display:inline}.wf-h{font-size:min(7.35294vw - 2.94118px,34px)}.wf-h:has(.wf-hs){font-size:min(8.62069vw - 3.44828px,34px);line-height:1.08}.wf-h{margin-bottom:28px}.wf{margin-top:96px}.wf-step{gap:12px;padding:20px 0}.wf-blk:has(.wf-vid){aspect-ratio:auto}.wf-vid{aspect-ratio:auto 16/10;height:auto;max-height:380px;padding:8px;display:block;position:static}}
