.how-b{--b-green: #46b84a;--b-rib: #a3e396;--b-deep: #2f8a34;--b-pic: 24%;--b-ease: cubic-bezier(.2, 0, 0, 1);--b-unfurl: cubic-bezier(.2, .85, .3, 1.12)}.how-b .b-stage{position:relative}.how-b .b-pics{position:relative;aspect-ratio:100 / 16.8}.how-b .b-pic{position:absolute;left:var(--c);bottom:0;width:calc(var(--b-pic) * var(--s, 1));aspect-ratio:800 / 540;transform:translate(-50%,var(--dy, 0%));transition:opacity .6s var(--b-ease)}.how-b .b-pic.ahead{opacity:.42}.how-b .b-art{position:absolute;inset:0}.how-b .b-art svg :is(path,polygon,polyline,ellipse,circle,line,rect){vector-effect:non-scaling-stroke;stroke-width:.75px!important}.how-b .b-band{display:block;width:100%;height:42px;overflow:visible}.how-b .b-track{fill:none;stroke:#d6d1c7;stroke-width:1.3;stroke-linecap:round;stroke-dasharray:0 4.5}.how-b .b-stem{fill:none;stroke:var(--b-green);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .3s var(--b-ease)}.how-b .b-leaf{fill:var(--b-green);stroke:var(--b-deep);stroke-width:.6px;stroke-linejoin:round;vector-effect:non-scaling-stroke}.how-b .b-rib{fill:none;stroke:var(--b-rib);stroke-width:.7px;stroke-linecap:round;vector-effect:non-scaling-stroke}.how-b .b-stalk{fill:none;stroke:var(--b-green);stroke-width:1.3;stroke-linecap:round}.how-b .b-seed path{fill:var(--b-rib);stroke:var(--b-deep);stroke-width:.6px;vector-effect:non-scaling-stroke}.how-b .b-pop{transform:scale(0);transition:transform .5s var(--b-unfurl)}.how-b .b-seed.on .b-pop{transform:none}.how-b .b-grow{transform:scale(0);transition:transform .35s var(--b-ease)}.how-b .b-lf{transition:transform .75s var(--b-unfurl) .06s}.how-b .b-lf.l{transform:rotate(42deg) scale(0)}.how-b .b-lf.r{transform:rotate(-42deg) scale(0)}.how-b .b-node.on .b-grow,.how-b .b-node.on .b-lf,.how-b .b-sprout.on .b-lf{transform:none}.how-b .b-node.on.cur .b-grow{transform:scale(1.18)}.how-b .b-sprout .b-lf{transition-duration:.9s}.how-b .b-sprout .b-lf.r{transition-delay:.14s}.how-b .b-node:not(.on) .b-grow,.how-b .b-node:not(.on) .b-lf,.how-b .b-sprout:not(.on) .b-lf{transition-duration:.3s;transition-delay:0s;transition-timing-function:var(--b-ease)}.how-b .b-budp{fill:var(--b-rib);stroke:var(--b-deep);stroke-width:.6px;vector-effect:non-scaling-stroke;transform:scale(0);transition:transform .45s var(--b-unfurl)}.how-b .b-bud.on .b-budp{transform:none}.how-b .b-bud:not(.on) .b-budp{transition-duration:.25s;transition-timing-function:var(--b-ease)}.how-b .b-sprout.on .b-sway{animation:b-sway 3.6s linear 1s infinite}.how-b .b-sprout.on .b-sway.r{animation-duration:4.1s;animation-delay:1.3s;animation-direction:reverse}.how-b.pointing .b-sprout.on .b-sway{animation-play-state:paused}@keyframes b-sway{0%,to{transform:rotate(0)}12.5%{transform:rotate(2.8deg)}25%{transform:rotate(4deg)}37.5%{transform:rotate(2.8deg)}50%{transform:rotate(0)}62.5%{transform:rotate(-2.8deg)}75%{transform:rotate(-4deg)}87.5%{transform:rotate(-2.8deg)}}.how-b .b-hits{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}.how-b .b-hit{cursor:pointer}.how-b .b-labels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:6px}.how-b .b-lab{appearance:none;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;margin:0;padding:4px 1px 6px;border:0;border-radius:6px;background:none;color:inherit;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s var(--b-ease)}.how-b .b-lab:active{transform:scale(.97)}.how-b .b-lab:focus-visible{outline:1.5px solid var(--b-green);outline-offset:0}.how-b .b-n{font:500 11px/1 var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--ink-3);transition:color .4s var(--b-ease)}.how-b .b-title{font:500 13px/1.2 var(--font-sans);letter-spacing:-.01em;color:var(--ink-3);white-space:nowrap;transition:color .4s var(--b-ease)}.how-b .b-days{font:500 15px/1 Caveat,cursive;color:var(--ink-3);white-space:nowrap;transition:color .4s var(--b-ease)}.how-b .b-lab.done .b-title,.how-b .b-lab.done .b-days{color:var(--ink-2)}.how-b .b-lab.on .b-title,.how-b .b-lab.on .b-days{color:var(--ink)}.how-b .b-lab.on .b-n{color:var(--b-deep)}.how-b .b-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media (max-width: 400px){.how-b{--b-pic: 25.5%}.how-b .b-pics{aspect-ratio:100 / 17.8}.how-b .b-title{font-size:12px}.how-b .b-days{font-size:14px}}@media (prefers-reduced-motion: reduce){.how-b .b-pic,.how-b .b-stem,.how-b .b-pop,.how-b .b-grow,.how-b .b-lf,.how-b .b-budp,.how-b .b-lab{transition:none!important}.how-b .b-sprout.on .b-sway{animation:none}.how-b .b-lab:active{transform:none}}