.xf{gap:var(--x-space-7);flex-direction:column;display:flex}.xf-track{position:relative}.xf-stage{gap:var(--x-space-7);align-items:center;display:grid}@media (min-width:1024px){.xf-stage{gap:var(--x-gutter);grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}.xf-steps{border-bottom:var(--x-stroke) solid var(--x-line-faint);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.xf-step{padding-block:var(--x-space-5);border-top:var(--x-stroke) solid var(--x-line-faint);--xf-on:1;grid-template-columns:minmax(0,1fr);display:grid}.xf-step[data-step="1"]{--xf-n:1}.xf-step[data-step="2"],.xf-lamp[data-step="2"]{--xf-n:2}.xf-step[data-step="3"],.xf-lamp[data-step="3"]{--xf-n:3}.xf-step[data-step="4"],.xf-lamp[data-step="4"]{--xf-n:4}.xf-step h3{color:color-mix(in oklab, var(--x-ink) calc(var(--xf-on) * 100%), var(--x-ink-2))}.xf-step__body .x-body{color:color-mix(in oklab, var(--x-ink-2) calc(var(--xf-on) * 100%), var(--x-ink-3))}.xf-step__body{gap:var(--x-space-2);flex-direction:column;display:flex}.xf-step__body p{margin:0}.xf-ring{justify-self:center;width:100%;max-width:40rem;position:relative}.xf-ring svg{width:100%;height:auto;display:block}.xf-ring .xf-hairline{fill:none;stroke:var(--x-line-faint);stroke-width:1px}.xf-ring .xf-arc{fill:none;stroke:var(--x-gold-dim);stroke-width:1.5px;stroke-linecap:square}.xf-ring .xf-node{fill:var(--x-bg-1);stroke:var(--x-accent);stroke-width:1.5px}.xf-ring .xf-dot{fill:var(--x-accent)}.xf-ring .xf-hand{fill:none;stroke:var(--x-gold-bright);stroke-width:1.5px;stroke-linecap:square;transform-origin:280px 280px;rotate:270deg}.xf-centre{align-items:center;gap:var(--x-space-2);text-align:center;pointer-events:none;flex-direction:column;max-width:12rem;display:flex;position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%}.xf-centre__title{font-family:var(--x-family-display);font-weight:var(--x-weight-body);font-size:var(--x-text-h4);color:var(--x-peach)}.xf[data-variant=compact] .xf-ring{max-width:24rem}.xf[data-variant=compact] .xf-centre{max-width:8rem}.xf[data-variant=narrative] .xf-stage{grid-template-columns:minmax(0,1fr)}@supports (animation-timeline:view()){@media (min-width:1024px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.xf[data-pinned=true]{--xf-stage-h:max(43rem, calc(100svh - var(--x-header-h)));--xf-travel:20rem}.xf[data-pinned=true] .xf-track{block-size:calc(var(--xf-stage-h) + var(--xf-travel));view-timeline-name:--xf-scroll;view-timeline-axis:block;view-timeline-inset:var(--x-header-h) calc(100svh - var(--x-header-h) - var(--xf-stage-h))}.xf[data-pinned=true] .xf-stage{block-size:var(--xf-stage-h);animation:steps(4,jump-none) both xf-advance;animation-timeline:--xf-scroll;animation-range:contain;position:sticky;inset-block-start:var(--x-header-h)}.xf[data-pinned=true] .xf-steps{align-self:stretch}.xf[data-pinned=true] .xf-step{--xf-on:clamp(0, calc(1 - max(var(--xf-active) - var(--xf-n), var(--xf-n) - var(--xf-active))), 1);background-color:color-mix(in oklab, var(--x-accent) calc(var(--xf-on) * 7%), transparent);border-top-color:color-mix(in oklab, var(--x-accent) calc(var(--xf-on) * 100%), var(--x-line-faint));box-shadow:inset var(--x-stroke-active) 0 0 color-mix(in oklab, var(--x-accent) calc(var(--xf-on) * 100%), transparent);flex:1 0 auto;align-content:center;padding-inline-start:var(--x-space-4)}.xf[data-pinned=true] .xf-hand{animation:linear both xf-turn;animation-timeline:--xf-scroll;animation-range:contain contain 75%}.xf[data-pinned=true] .xf-lamp{opacity:clamp(0, calc(var(--xf-active) - var(--xf-n) + 1), 1)}}}html[data-motion=reduce] .xf[data-pinned=true] .xf-track{block-size:auto}html[data-motion=reduce] .xf[data-pinned=true] .xf-stage{block-size:auto;position:static}html[data-motion=reduce] .xf[data-pinned=true] .xf-hand,html[data-motion=reduce] .xf[data-pinned=true] .xf-stage{animation:none}html[data-motion=reduce] .xf[data-pinned=true] .xf-step{--xf-on:1;border-top-color:var(--x-line-faint);box-shadow:none;background-color:#0000}html[data-motion=reduce] .xf[data-pinned=true] .xf-lamp{opacity:1}@keyframes xf-turn{0%{rotate:none}to{rotate:270deg}}@property --xf-active{syntax:"<integer>";inherits:true;initial-value:4}@keyframes xf-advance{0%{--xf-active:1}to{--xf-active:4}}@media (forced-colors:active){.xf-ring .xf-node,.xf-ring .xf-arc,.xf-ring .xf-hand{stroke:canvastext}.xf-ring .xf-dot{fill:canvastext}.xf[data-pinned=true] .xf-step{--xf-on:1}.xf[data-pinned=true] .xf-lamp{opacity:1}}.xf-ring .xf-label{font-family:var(--x-family-text);font-variant-numeric:tabular-nums;letter-spacing:var(--x-tracking-caps);fill:var(--x-ink);font-size:17px;font-variant-caps:all-small-caps}.xf-ring .xf-sub{font-family:var(--x-family-text);letter-spacing:var(--x-tracking-caps);fill:var(--x-ink-3);font-size:14px;font-variant-caps:all-small-caps}.xf[data-variant=compact] .xf-sub{display:none}@media (forced-colors:active){.xf-ring .xf-label,.xf-ring .xf-sub{fill:canvastext}}@media (max-width:1023px){.xf-ring{align-items:center;gap:var(--x-space-5);flex-direction:column;max-width:none;display:flex}.xf-ring svg{width:14rem}.xf-ring .xf-label,.xf-ring .xf-sub{display:none}.xf[data-variant] .xf-centre{max-width:none;position:static;translate:none}}