fig-habit-journey{display:block;container-type:inline-size}.hj{letter-spacing:-.01em;flex-direction:column;gap:30px;padding:4px 0 10px;font-size:14px;line-height:1.35;display:flex}.hj p{margin:0}.hj-g{--ink:var(--faint);transition:opacity .35s var(--ease)}.hj a.hj-node{z-index:1;background:var(--brand);color:var(--brand-ink);letter-spacing:-.015em;text-align:center;white-space:nowrap;box-shadow:0 1px 0 #ffffff59 inset, 0 6px 18px -8px color-mix(in srgb, var(--brand) 85%, transparent);opacity:0;transition:opacity .5s var(--ease) var(--d), scale .8s cubic-bezier(.3, 1.5, .5, 1) var(--d), translate .3s var(--ease), box-shadow .3s;border-radius:99px;justify-content:center;align-items:center;padding:12px 22px;font-size:15px;font-weight:650;line-height:1.2;text-decoration:none;display:inline-flex;position:relative;scale:.9}.hj a.hj-node:is(:hover,:focus-visible){color:var(--brand-ink);box-shadow:0 1px 0 #ffffff59 inset, 0 0 0 5px var(--brand-soft), 0 10px 24px -8px color-mix(in srgb, var(--brand) 90%, transparent);translate:0 -2px}.hj a.hj-node:focus-visible{outline-offset:4px;border-radius:99px}.hj-box{z-index:1;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--text);text-align:center;white-space:nowrap;border-radius:12px;padding:10px 16px;font-weight:520;position:relative}.hj-side{z-index:1;color:var(--text);text-align:center;text-wrap:balance;font-weight:520;position:relative}.hj-box,.hj-side{opacity:0;transition:opacity .5s var(--ease) var(--d), translate .6s var(--ease) var(--d), background .3s, box-shadow .3s, color .3s;translate:0 6px}.hj-line{background:var(--ink);transition:transform .6s var(--ease) var(--d), background .3s;display:block}.hj-col{transform-origin:50% 100%;width:1.5px;height:28px;transform:scaleY(0)}.hj-in,.hj-out{flex:28px;height:1.5px;transform:scaleX(0)}.hj-arm-l .hj-line{transform-origin:100%}.hj-arm-r .hj-line{transform-origin:0}.hj-tip{background:var(--ink);clip-path:polygon(50% 0,100% 100%,0 100%);opacity:0;width:10px;height:9px;transition:opacity .4s var(--ease) var(--d), background .3s;flex:none;display:block}.hj-tip-left{rotate:-90deg}.hj-tip-right{rotate:90deg}.hj-v{flex-direction:column;align-items:center;display:flex}.hj-h{grid-template-columns:1fr auto 1fr;align-items:center;display:grid}.hj-arm{align-items:center;display:flex}.hj-c{--d:.3s;transition:opacity .35s var(--ease), border-color .8s var(--ease) var(--d);border:1.5px solid #0000;border-radius:34px;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;margin-top:8px;padding:32px 24px 36px;display:grid;position:relative}.hj-band{z-index:1;background:var(--raised);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:var(--accent);opacity:0;transition:opacity .6s var(--ease) .9s;padding:2px 12px;font-size:11.5px;font-weight:650;position:absolute;bottom:0;left:50%;translate:-50% 50%}.hj-leaves{pointer-events:none;position:absolute;inset:-18px 12px 4px;overflow:hidden;container-type:size}.hj-leaf{--autumn:color-mix(in srgb, color-mix(in srgb, var(--skip), var(--fail) 45%) 70%, var(--faint));top:0;left:var(--x);width:var(--s);height:var(--s);color:var(--brand);opacity:0;position:absolute}.hj-leaf svg{width:100%;height:100%;display:block}.in .hj-leaf{animation:hj-fall var(--dur) linear calc(var(--delay) + 1.4s) infinite}.in .hj-leaf svg{animation:hj-sway calc(var(--dur) / 4) ease-in-out infinite alternate}.off .hj-leaf,.off .hj-leaf svg{animation-play-state:paused}@keyframes hj-fall{0%{opacity:0;color:var(--brand);transform:translateY(0)}6%{opacity:1}22%{color:var(--brand)}42%{opacity:1;color:var(--autumn)}60%{transform:translateY(calc(100cqh - var(--s)));opacity:0;color:var(--autumn)}to{transform:translateY(calc(100cqh - var(--s)));opacity:0}}@keyframes hj-sway{0%{transform:translateX(calc(var(--dx) * -1)) rotate(calc(var(--rot) * -1))}to{transform:translateX(var(--dx)) rotate(var(--rot))}}.in :is(.hj-box,.hj-side){opacity:1;translate:none}.in a.hj-node{opacity:1;scale:none}.in .hj-line{transform:none}.in .hj-tip,.in .hj-band{opacity:1}.in .hj-c{border-color:color-mix(in srgb, var(--faint) 45%, transparent)}.hj:has(a.hj-node:is(:hover,:focus-visible)) .hj-g:not(:has(a.hj-node:is(:hover,:focus-visible))){opacity:.32}.hj-g:has(a.hj-node:is(:hover,:focus-visible)){--ink:var(--brand)}.hj-g:has(a.hj-node:is(:hover,:focus-visible)) .hj-box{background:var(--brand-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brand) 60%, transparent);color:var(--fg)}.hj-g:has(a.hj-node:is(:hover,:focus-visible)) .hj-side{color:var(--fg)}.in .hj-c:has(a.hj-node:is(:hover,:focus-visible)){border-color:color-mix(in srgb, var(--brand) 70%, transparent)}@container (width<=519px){.hj{gap:22px;font-size:13px}.hj a.hj-node{white-space:normal;padding:10px 16px;font-size:14px}.hj-h a.hj-node{max-width:112px}.hj-box{white-space:normal;text-wrap:balance;padding:8px 10px}.hj-v .hj-box{max-width:240px}.hj-h .hj-box{max-width:84px}.hj-in{flex:8px}.hj-out{flex:0 0 4px}.hj-c{border-radius:26px;grid-template-columns:1fr 1fr;gap:16px 12px;padding:24px 14px 30px}.hj-c a.hj-node{order:-1;grid-column:1/-1;justify-self:center}}@media (prefers-reduced-motion:reduce){.hj *,.hj-c{transition:none!important}.hj-leaf,.hj-leaf svg{animation-play-state:paused!important;animation-delay:calc(-1s - var(--delay))!important}}