.wb-mock{background-color:var(--color-canvas-bg);background-image:radial-gradient(var(--color-canvas-grid) 1px, transparent 1px);background-size:18px 18px;container-type:inline-size}.wb-mock-text{font-size:clamp(8px,2.1cqi,14px);line-height:1.25}.wb-mock-text-sm{font-size:clamp(7px,1.6cqi,12px);line-height:1.2}.wb-sticky{background:var(--sticky,var(--color-sticky-yellow));color:var(--color-canvas-sticky-text);box-shadow:0 2px 4px var(--color-canvas-sticky-shadow)}[data-play=true] .wb-step{animation:var(--wb-anim) var(--wb-cycle,12s) ease-out infinite}[data-play=true] .wb-char{animation:wb-char var(--wb-cycle,12s) linear infinite;animation-delay:calc(var(--i) * 55ms)}@keyframes wb-in-1{0%,4%{opacity:0;transform:translateY(6px)scale(.92)}9%,93%{opacity:1;transform:none}98%,to{opacity:0}}@keyframes wb-in-2{0%,12%{opacity:0;transform:translateY(6px)scale(.92)}17%,93%{opacity:1;transform:none}98%,to{opacity:0}}@keyframes wb-in-3{0%,20%{opacity:0;transform:translateY(6px)scale(.92)}25%,93%{opacity:1;transform:none}98%,to{opacity:0}}@keyframes wb-in-4{0%,28%{opacity:0;transform:translateY(6px)scale(.92)}33%,93%{opacity:1;transform:none}98%,to{opacity:0}}@keyframes wb-in-5{0%,52%{opacity:0;transform:translateY(8px)scale(.95)}58%,93%{opacity:1;transform:none}98%,to{opacity:0}}@keyframes wb-in-6{0%,60%{opacity:0;transform:translateY(8px)scale(.95)}66%,93%{opacity:1;transform:none}98%,to{opacity:0}}@keyframes wb-in-7{0%,68%{opacity:0;transform:translateY(8px)scale(.95)}74%,93%{opacity:1;transform:none}98%,to{opacity:0}}@keyframes wb-draw{0%,22%{opacity:0;transform:scaleX(0)}30%,93%{opacity:1;transform:scaleX(1)}98%,to{opacity:0;transform:scaleX(1)}}@keyframes wb-char{0%,34%{opacity:0}34.5%,80%{opacity:1}84%,to{opacity:0}}@keyframes wb-cursor-a{0%,10%{transform:translate(0)}30%{transform:translate(18cqi,6cqi)}50%{transform:translate(10cqi,16cqi)}70%{transform:translate(26cqi,12cqi)}to{transform:translate(0)}}@keyframes wb-cursor-b{0%,15%{transform:translate(0)}35%{transform:translate(-14cqi,-8cqi)}60%{transform:translate(-22cqi,4cqi)}80%{transform:translate(-6cqi,-12cqi)}to{transform:translate(0)}}[data-play=true] .wb-cursor-a{animation:wb-cursor-a var(--wb-cycle,12s) ease-in-out infinite}[data-play=true] .wb-cursor-b{animation:wb-cursor-b var(--wb-cycle,12s) ease-in-out infinite}@keyframes wb-float{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}[data-play=true] .wb-float{animation:6s ease-in-out infinite wb-float}@keyframes wb-move-column{0%,25%{transform:translate(0)}45%,85%{transform:translate(calc(100% + .5rem))}to{transform:translate(0)}}[data-play=true] .wb-move-column{animation:7s ease-in-out infinite wb-move-column}@keyframes wb-dim{0%,25%{opacity:1}35%,80%{opacity:.25}90%,to{opacity:1}}@keyframes wb-pick{0%,35%{transform:scale(1)}45%,80%{transform:scale(1.08)}90%,to{transform:scale(1)}}[data-play=true] .wb-dim{animation:7s ease-in-out infinite wb-dim}[data-play=true] .wb-pick{animation:7s ease-in-out infinite wb-pick}@keyframes wb-stack{0%,20%{transform:translateX(var(--from,0))}50%,85%{transform:translate(0)}to{transform:translateX(var(--from,0))}}[data-play=true] .wb-stack{animation:7s ease-in-out infinite wb-stack}.wb-stack{transform:translateX(var(--from,0))}@keyframes wb-shrink{0%{transform:scaleX(1)}90%{transform:scaleX(.15)}to{transform:scaleX(1)}}[data-play=true] .wb-shrink{animation:8s linear infinite wb-shrink}.wb-shrink{transform-origin:0;transform:scaleX(.6)}@media (prefers-reduced-motion:reduce){[data-play] *,[data-play]{animation:none!important}}