.hl{width:100%;color:inherit;--hl-sw:1.6;display:block}.hl svg{width:100%;height:auto;display:block;overflow:visible}.hl svg *{fill:none;stroke:var(--hl-line,currentColor);stroke-width:calc(var(--hl-sw) * var(--hl-k,1));stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s var(--ease)}.hl .hl-big{--hl-k:.6}.hl .hl-small{--hl-k:1.35}.hl .hl-gh{stroke-dasharray:2 5;opacity:.55}.hl .hl-ln{stroke-dasharray:1;stroke-dashoffset:0}.hl svg .hl-mv,.hl svg .hl-rv,.hl svg .hl-drop,.hl svg .hl-rise{transition:transform .75s var(--ease), opacity .4s, stroke .35s}.hl .hl-rv{opacity:0}.hl .hl-drop{transform:translateY(-22px)}.hl .hl-rise{transform-origin:156px 124px;transform:translateY(12px)}.hl .hl-g-shadow{transform-origin:60px 108px}.hl .hl-g-plus,.hl .hl-g-ring,.hl .hl-g-lens,.hl .hl-g-big{transform-origin:60px 60px}.hl .hl-g-big2{transform-origin:60px 40px}.hl .hl-g-pc{transform-origin:60px 52px}.hl .hl-g-pk{transform-origin:60px 62px}.hl .hl-g-leaf{transform-origin:60px 98px}[data-hl]:is(:hover,:focus-within) .hl .hl-ac{stroke:var(--hl-acc,var(--volt))}[data-hl]:is(:hover,:focus-within) .hl .hl-rv{opacity:1}[data-hl]:is(:hover,:focus-within) .hl .hl-ln{animation:hl-draw .9s var(--ease) both}[data-hl]:is(:hover,:focus-within) .hl .hl-rv.hl-ln{animation:hl-draw .9s .1s var(--ease) both}[data-hl]:is(:hover,:focus-within) .hl .hl-drop,[data-hl]:is(:hover,:focus-within) .hl .hl-rise{transform:translateY(0)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-shadow{opacity:.3;transform:scaleX(.7)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-plus{transform:rotate(90deg)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-lid{transform:translateY(-10px)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-ring{transform:rotate(180deg)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-l{transform:translate(7px)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-r{transform:translate(-7px)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-lens{transform:scaleX(1.35)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-cur{transform:translate(-17px,-16px)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-big,[data-hl]:is(:hover,:focus-within) .hl .hl-g-big2{transform:scale(1.9)rotate(90deg)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-pin{transform:translateY(-7px)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-cl{transform:translate(5px)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-cr{transform:translate(-5px)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-pc,[data-hl]:is(:hover,:focus-within) .hl .hl-g-pk{transform:scale(1.9)rotate(90deg)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-can{transform:translateY(-7px)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-leaf{transform:rotate(8deg)}@keyframes hl-draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}.hl-tile{aspect-ratio:1;transition:background .35s var(--ease), border-color .35s;border:1px solid #0b0b0a29;place-items:center;display:grid}.hl-tile .hl{width:58%}[data-hl]:is(:hover,:focus-within) .hl-tile{background:var(--hl-tone,var(--ink-2));border-color:var(--hl-tone,var(--ink-2));--hl-line:var(--hl-tone-line,var(--paper));--hl-acc:var(--hl-tone-acc,var(--volt))}@media (prefers-reduced-motion:reduce){[data-hl]:is(:hover,:focus-within) .hl .hl-ln,[data-hl]:is(:hover,:focus-within) .hl .hl-rv.hl-ln{animation:none}.hl svg .hl-mv,.hl svg .hl-rv,.hl svg .hl-drop,.hl svg .hl-rise{transition:stroke .35s}[data-hl]:is(:hover,:focus-within) .hl [class*=hl-g-],[data-hl]:is(:hover,:focus-within) .hl .hl-drop,[data-hl]:is(:hover,:focus-within) .hl .hl-rise{transform:none}}.hl .hl-g-tilt{transform-origin:60px 40px}.hl .hl-g-circ{transform-origin:60px 60px}.hl .hl-g-key{transform-origin:60px 74px}.hl .hl-g-rot{transform-origin:60px 60px}.hl .hl-g-clap{transform-origin:24px 50px;transform:rotate(-16deg)}.hl .hl-g-dot{transform-origin:88px 42px}.hl .hl-g-pl{transform-origin:60px 54px}.hl .hl-g-turn{transform-origin:60px 60px}.hl .hl-g-big4{transform-origin:60px 28px}.hl .hl-g-big5{transform-origin:60px 36px}.hl .hl-g-cut{transform-origin:312px 44px}.hl .hl-g-fsheet{transform:translateY(8px)}.hl .hl-g-let{transform:translateY(18px)}.hl .hl-g-min,.hl .hl-g-hr{transform-origin:60px 60px}[data-hl]:is(:hover,:focus-within) .hl .hl-g-hop{transform:translateY(-5px)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-sheet{transform:translateY(-7px)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-tilt{transform:rotate(-9deg)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-lid2{transform:translateY(-9px)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-climb{transform:translate(52px,-50px)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-circ{transform:scale(1.07)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-key{transform:rotate(90deg)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-k1{transform:translate(30px)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-k2{transform:translate(-30px)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-k3{transform:translate(22px)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-plug{transform:translate(9px)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-rot{transform:rotate(180deg)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-clap{transform:rotate(0)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-q1,[data-hl]:is(:hover,:focus-within) .hl .hl-g-q2,[data-hl]:is(:hover,:focus-within) .hl .hl-g-q3{transform:translateY(-5px)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-dot{transform:scale(1.4)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-bl{transform:translate(-6px)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-br{transform:translate(6px)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-pl{transform:scale(1.9)rotate(90deg)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-turn{transform:rotate(90deg)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-big4,[data-hl]:is(:hover,:focus-within) .hl .hl-g-big5{transform:scale(1.9)rotate(90deg)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-cap{transform:translateY(-9px)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-cut{transform:translate(10px,-8px)rotate(14deg)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-pen2{transform:translate(-6px,4px)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-fsheet{transform:translateY(-6px)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-let{transform:translateY(-4px)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-min{transform:rotate(210deg)}[data-hl]:is(:hover,:focus-within) .hl .hl-g-hr{transform:rotate(60deg)}.hl svg .hl-g-q2{transition-delay:80ms}.hl svg .hl-g-q3{transition-delay:.16s}.hl svg .hl-sf{transition:opacity .45s var(--ease)}[data-hl]:is(:hover,:focus-within) .hl .hl-sf{opacity:0}.hl-label{--hl-line:var(--ink);--hl-acc:var(--teal);width:clamp(44px,4vw,56px);margin-bottom:16px;display:block}.hl-way{--hl-line:var(--white);--hl-acc:var(--volt);width:64px;margin-bottom:14px;display:block}.hl-step{--hl-line:var(--ink);--hl-acc:var(--teal);flex:none;align-self:center;width:44px;display:block}
