.kybd{--kybd-cycle:7.2s;aspect-ratio:440/360;width:100%;position:relative}.kybd__stage{transform-origin:top;width:440px;height:360px;position:absolute;top:0;left:50%;transform:translate(-50%)}.kybd__scene{position:absolute;inset:0}.kybd.is-playing .kybd__scene{animation:kybd-scene var(--kybd-cycle) linear infinite}@keyframes kybd-scene{0%{opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1);transform:translateY(18px)scale(.985)}6%{opacity:1;animation-timing-function:linear;transform:translateY(0)scale(1)}88%{opacity:1;animation-timing-function:cubic-bezier(.5,0,.6,1);transform:translateY(0)scale(1)}95%{opacity:0;transform:translateY(30px)scale(.97)}to{opacity:0;transform:translateY(30px)scale(.97)}}.kybd.is-playing .kybd__count{animation:.45s cubic-bezier(.34,1.32,.64,1) kybd-count-pop}@keyframes kybd-count-pop{0%{opacity:.4;transform:scale(.55)}to{opacity:1;transform:scale(1)}}.kybd.is-playing .kybd__spin{animation:.8s linear infinite kybd-spin}@keyframes kybd-spin{to{transform:rotate(360deg)}}.kybd__seal{stroke-dasharray:1;stroke-dashoffset:1px;transform-origin:50%;transition:stroke-dashoffset .55s cubic-bezier(.16,1,.3,1) 80ms;transform:rotate(-90deg)}.kybd__seal.is-drawn{stroke-dashoffset:0}@media (prefers-reduced-motion:reduce){.kybd .kybd__scene,.kybd .kybd__count,.kybd .kybd__spin{animation:none!important}.kybd .kybd__seal{stroke-dashoffset:0;transition:none!important}}
