@keyframes how-rise{0%{opacity:0;translate:0 14px}to{opacity:1;translate:0}}@keyframes how-out{to{opacity:0;translate:0 -8px}}@keyframes how-fill-y{0%{scale:1 0}to{scale:1}}@keyframes how-fly-l{to{opacity:0;translate:-45% 4%;rotate:-8deg}}@keyframes how-fly-r{to{opacity:0;translate:45% 4%;rotate:8deg}}@keyframes how-deck-1{0%{translate:0 18px;scale:.94}to{translate:0;scale:1}}@keyframes how-deck-2{0%{translate:0 36px;scale:.88}35%,55%{translate:0 18px;scale:.94}to{translate:0;scale:1}}@keyframes how-ring{to{box-shadow:0 0 0 2px var(--color-brand)}}@keyframes how-pick{to{background:var(--color-brand);color:var(--color-brand-fg)}}@keyframes how-cursor{0%{opacity:0;translate:110px 90px}20%{opacity:1}to{opacity:1;translate:0}}@keyframes how-cursor-2{0%{opacity:0;translate:calc(var(--x1) + 90px) calc(var(--y) + 80px)}25%{opacity:1;translate:var(--x1) var(--y)}50%{translate:var(--x1) var(--y)}78%,to{opacity:1;translate:var(--x2) var(--y)}}@keyframes how-press{50%{scale:.82}}@keyframes how-card-in{0%{opacity:0;transform:rotateY(25deg)}to{opacity:1;transform:rotateY(0)}}@keyframes how-dot{0%,60%,to{opacity:.4;translate:0}30%{opacity:1;translate:0 -4px}}@media (prefers-reduced-motion:reduce){[data-how] *{transition:none!important;animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:0s!important}}