.wif{--wif-total:15s;--wif-step:3s;--wif-c:377}.wif-figure{width:100%;max-width:28rem;margin-inline:auto}.wif-figure svg{width:100%;height:auto;display:block}.wif-bar{fill:var(--bg-sunken);stroke:var(--border)}.wif-pay,.wif-drop,.wif-drip,.wif-liquid{fill:var(--accent-strong)}.wif-drop,.wif-drip{opacity:0}.wif-drop{transform-box:fill-box;transform-origin:50%}.wif-ring{transform-box:view-box;transform-origin:160px 152px}.wif-dots{stroke:var(--accent-strong);opacity:.55}.wif-bad-hole{fill:var(--bg);opacity:0}.wif-bad-hole circle:last-child{fill:var(--text-muted)}.wif-arc{stroke:var(--accent-strong);stroke-dasharray:var(--wif-c);stroke-dashoffset:0}.wif-halo{stroke:var(--accent-strong);opacity:.18}.wif-cup{fill:none;stroke:var(--text-muted)}.wif-liquid{opacity:.9;transform-box:fill-box;transform-origin:bottom}.wif-label{font-family:var(--font-stack-text);fill:var(--text-muted)}.wif-fri{font-family:var(--font-stack-display);font-weight:var(--display-weight);fill:var(--text)}.wif-lines{counter-reset:wif}.wif-line{counter-increment:wif;grid-template-columns:1.5rem 1fr;column-gap:.5rem;display:grid}.wif-line:before{content:counter(wif);font-family:var(--font-stack-display);font-variant-numeric:tabular-nums;color:var(--accent);line-height:inherit}.wif-sub{color:var(--text-muted);display:block}@media (prefers-reduced-motion:no-preference){.wif .wif-halo{animation:6s ease-in-out infinite wif-breathe}.wif.is-armed .wif-drop{animation:.9s ease-in both paused wif-drop}.wif.is-armed .wif-drop:nth-child(2){animation-delay:1.1s}.wif.is-armed .wif-drop:nth-child(3){animation-delay:1.9s}.wif.is-armed .wif-drop:first-child{animation-delay:.3s}.wif.is-armed .wif-arc{animation:wif-arc var(--wif-total) linear both paused}.wif.is-armed .wif-dots{animation:wif-dots var(--wif-total) linear both paused}.wif.is-armed .wif-bad-hole{animation:wif-bad var(--wif-total) linear both paused}.wif.is-armed .wif-ring{animation:wif-grow var(--wif-total) ease-in-out both paused}.wif.is-armed .wif-drip{animation:2.8s ease-in 9.2s infinite backwards paused wif-drip}.wif.is-armed .wif-drip:nth-child(2){animation-delay:10.6s}.wif.is-armed .wif-liquid{animation:wif-fill var(--wif-total) linear both paused}.wif.is-armed .wif-cup-label{animation:wif-cup-label var(--wif-total) linear both paused}.wif.is-armed .wif-halo{animation:wif-halo-in var(--wif-total) linear both paused, wif-breathe 6s ease-in-out var(--wif-total) infinite paused}.wif.is-armed .wif-fri{animation:wif-fri var(--wif-total) linear both paused}.wif.is-armed .wif-line{animation:.8s ease-out both paused wif-line}.wif.is-armed .wif-line:nth-child(2){animation-delay:calc(var(--wif-step) * 1)}.wif.is-armed .wif-line:nth-child(3){animation-delay:calc(var(--wif-step) * 2)}.wif.is-armed .wif-line:nth-child(4){animation-delay:calc(var(--wif-step) * 3)}.wif.is-armed .wif-line:nth-child(5){animation-delay:calc(var(--wif-step) * 4)}.wif.is-armed .wif-sub{animation:.8s ease-out 4.5s both paused wif-line}.wif.is-playing .wif-a{animation-play-state:running}@keyframes wif-drop{0%{opacity:1;transform:translate(0)scale(1)}75%{opacity:1;transform:translate(-96px,73px)scale(1)}to{opacity:0;transform:translate(-96px,73px)scale(.3)}}@keyframes wif-arc{0%,7%{stroke-dashoffset:var(--wif-c)}10%,12.3%{stroke-dashoffset:calc(var(--wif-c) * .93)}15%,17.5%{stroke-dashoffset:calc(var(--wif-c) * .85)}20.5%,40%{stroke-dashoffset:calc(var(--wif-c) * .76)}44%{stroke-dashoffset:calc(var(--wif-c) * .68)}48%{stroke-dashoffset:calc(var(--wif-c) * .62)}51%{stroke-dashoffset:calc(var(--wif-c) * .66)}55%{stroke-dashoffset:calc(var(--wif-c) * .53)}57%{stroke-dashoffset:calc(var(--wif-c) * .51)}60%{stroke-dashoffset:calc(var(--wif-c) * .4)}80%{stroke-dashoffset:calc(var(--wif-c) * .34)}90%,to{stroke-dashoffset:0}}@keyframes wif-dots{0%,20%{opacity:0}27%,to{opacity:.55}}@keyframes wif-bad{0%,30%{opacity:0}33%,43%{opacity:1}47%,to{opacity:0}}@keyframes wif-grow{0%,40%{transform:scale(.78)}44%{transform:scale(.84)}48%{transform:scale(.81)}52%{transform:scale(.9)}55%{transform:scale(.87)}60%,to{transform:scale(1)}}@keyframes wif-drip{0%{opacity:0;transform:translateY(0)}8%{opacity:1}45%{opacity:1;transform:translateY(54px)}50%,to{opacity:0;transform:translateY(54px)}}@keyframes wif-fill{0%,60%{transform:scaleY(0)}80%{transform:scaleY(.55)}90%,to{transform:scaleY(1)}}@keyframes wif-cup-label{0%,60%{opacity:0}64%,to{opacity:1}}@keyframes wif-halo-in{0%,88%{opacity:0}92%{opacity:.5}to{opacity:.18}}@keyframes wif-breathe{0%,to{opacity:.18}50%{opacity:.3}}@keyframes wif-fri{0%,90%{opacity:0}96%,to{opacity:1}}@keyframes wif-line{0%{opacity:0;transform:translateY(.4rem)}to{opacity:1;transform:none}}}
