:root{--xk-obsidian:#0b1220;--xk-limestone:#f4f1ea;--xk-graphite:#2a2e37;--xk-teal:#0fb5a6;--xk-teal-300:#5fe6d3;--xk-teal-600:#0c9488;--xk-amber:#f4a81d;--xk-amber-600:#d88710;--xk-muted:rgba(147,163,173,.4);--xk-fall:cubic-bezier(.42,0,1,.58);--xk-rise:cubic-bezier(0,.42,.58,1);--xk-hop:cubic-bezier(.42,0,.58,1);--xk-pop:cubic-bezier(.34,1.4,.64,1);--xk-cycle:2.2s;--xk-cycle-fast:1.4s;--xk-cycle-hop:4.2s;--xk-cycle-rest:3.2s}.xook{position:relative;width:40px;height:40px;flex:none}.xook--plated{background:var(--xk-obsidian);border-radius:24%;overflow:hidden}.xook--teal.xook--plated{background:var(--xk-teal)}.xook--limestone.xook--plated{background:var(--xk-limestone)}.xook__scope{position:absolute;inset:0;pointer-events:none}.xook__scope i{position:absolute;width:26%;height:26%;border:2px solid rgba(95,230,211,.55);transition:border-color .3s ease}.xook__scope i:first-child{left:0;top:0;border-right:0;border-bottom:0;border-radius:6px 0 0 0}.xook__scope i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-radius:0 6px 0 0}.xook__scope i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-radius:0 0 0 6px}.xook__scope i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 6px 0}.xook[data-state=working] .xook__scope i{border-color:var(--xk-teal-300)}.xook[data-state=resting] .xook__scope i{border-color:var(--xk-muted)}.xook__stage{position:absolute;inset:0}.xook--scoped .xook__stage{inset:15%}.xook__bar{position:absolute;left:8%;top:72%;width:84%;height:10%;background:var(--xk-limestone);border-radius:2px}.xook__ball{position:absolute;top:41%;width:18%;height:18%;border-radius:9999px;will-change:transform}.xook__ball.b1{left:13%;background:var(--xk-amber);transform-origin:50% -140%}.xook__ball.b2{left:32%;background:var(--xk-teal-300)}.xook__ball.b3{left:51%;background:var(--xk-teal-300)}.xook__ball.b4{left:70%;background:var(--xk-amber);transform-origin:50% -140%}.xook--limestone .xook__bar{background:var(--xk-graphite)}.xook--limestone .b1,.xook--limestone .b4{background:var(--xk-amber-600)}.xook--limestone .b2,.xook--limestone .b3{background:var(--xk-teal-600)}.xook--mono .xook__ball,.xook--mono .xook__bar{background:var(--xk-limestone)}.xook[data-state=idle] .b2,.xook[data-state=idle] .b3,.xook[data-state=idle] .b4{display:none}.xook[data-state=idle] .xook__bar{left:14%;width:52%;top:70%;height:11%}.xook[data-state=idle] .b1{left:12%;top:44%;width:20%;height:20%;transform-origin:center;animation:xk-hop var(--xk-cycle-hop) var(--xk-hop) infinite}@keyframes xk-hop{0%{transform:translate(0)}12%{transform:translate(30%,-46%)}25%{transform:translate(60%)}37%{transform:translate(90%,-46%)}50%{transform:translate(120%)}62%{transform:translate(90%,-46%)}75%{transform:translate(60%)}87%{transform:translate(30%,-46%)}to{transform:translate(0)}}.xook[data-state=working] .b1{animation:xk-launch-l var(--xk-cycle) infinite}.xook[data-state=working] .b2{animation:xk-pass-2 var(--xk-cycle) infinite}.xook[data-state=working] .b3{animation:xk-pass-3 var(--xk-cycle) infinite}.xook[data-state=working] .b4{animation:xk-launch-r var(--xk-cycle) infinite}.xook[data-state=working].xook--fast .b1,.xook[data-state=working].xook--fast .b2,.xook[data-state=working].xook--fast .b3,.xook[data-state=working].xook--fast .b4{animation-duration:var(--xk-cycle-fast)}@keyframes xk-launch-l{0%{transform:rotate(20deg);animation-timing-function:var(--xk-fall)}24%{transform:rotate(0deg);animation-timing-function:linear}82%{transform:rotate(0deg);animation-timing-function:var(--xk-rise)}to{transform:rotate(20deg)}}@keyframes xk-launch-r{0%,30%{transform:rotate(0deg);animation-timing-function:var(--xk-rise)}52%{transform:rotate(-20deg);animation-timing-function:var(--xk-fall)}76%,to{transform:rotate(0deg)}}@keyframes xk-pass-2{0%,24%{transform:translateX(0) scale(1)}28%{transform:translateX(7%) scale(1.09)}33%{transform:translateX(0) scale(1)}76%{transform:translateX(0) scale(1)}81%{transform:translateX(-7%) scale(1.09)}86%,to{transform:translateX(0) scale(1)}}@keyframes xk-pass-3{0%,27%{transform:translateX(0) scale(1)}31%{transform:translateX(7%) scale(1.09)}36%{transform:translateX(0) scale(1)}73%{transform:translateX(0) scale(1)}78%{transform:translateX(-7%) scale(1.09)}83%,to{transform:translateX(0) scale(1)}}.xook[data-state=resting] .xook__ball{animation:none;background:var(--xk-teal-300)}.xook[data-state=resting] .b4{background:var(--xk-amber);animation:xk-blink var(--xk-cycle-rest) ease-in-out infinite}@keyframes xk-blink{0%,58%{opacity:1}72%{opacity:.28}86%,to{opacity:1}}.xook-arrival{position:relative;width:40px;height:40px;border-radius:24%;background:var(--xk-obsidian);overflow:hidden;flex:none}.xook-arrival .bar{position:absolute;left:-5%;top:74%;width:72%;height:13.5%;background:var(--xk-limestone)}.xook-arrival .dot{position:absolute;left:41.5%;top:17.5%;width:40%;height:40%;border-radius:9999px;background:var(--xk-amber)}.xook-arrival--animate .dot{animation:xk-arrive 3.4s var(--xk-pop) infinite}@keyframes xk-arrive{0%{transform:translate(46%,-52%) scale(.45);opacity:0}16%{opacity:1}52%{transform:translate(-7%,7%) scale(1.1)}68%{transform:translate(3%,-3%) scale(.97)}82%,to{transform:translate(0) scale(1)}}.chuun{position:relative;width:40px;height:40px;flex:none}.chuun--plated{background:var(--xk-obsidian);border-radius:24%;overflow:hidden}.chuun--teal.chuun--plated{background:var(--xk-teal)}.chuun--limestone.chuun--plated{background:var(--xk-limestone)}.chuun__lintel{left:12.5%;top:21.9%;width:75%;height:10.9%;background:var(--xk-limestone)}.chuun__jamb,.chuun__lintel{position:absolute;border-radius:2px}.chuun__jamb{top:32.8%;width:9.4%;height:46.9%;background:var(--xk-teal);transition:opacity .3s ease}.chuun__jamb.j1{left:20.3%}.chuun__jamb.j2{left:70.3%}.chuun__dot{position:absolute;left:40.6%;top:50%;width:18.8%;height:18.8%;border-radius:9999px;background:var(--xk-amber);will-change:transform}.chuun--limestone .chuun__lintel{background:var(--xk-graphite)}.chuun--limestone .chuun__jamb{background:var(--xk-teal-600)}.chuun--limestone .chuun__dot{background:var(--xk-amber-600)}.chuun--mono .chuun__dot,.chuun--mono .chuun__jamb,.chuun--mono .chuun__lintel{background:var(--xk-limestone)}.chuun[data-state=waiting] .chuun__dot{animation:ch-wait 3.8s ease-in-out infinite alternate}@keyframes ch-wait{0%{transform:scale(.92)}to{transform:scale(1.06)}}.chuun[data-state=progress] .chuun__dot{animation:ch-climb 3.4s cubic-bezier(.45,0,.55,1) infinite}.chuun[data-state=progress] .chuun__jamb{animation:ch-glow 3.4s ease-in-out infinite}.chuun[data-state=progress] .chuun__jamb.j2{animation-delay:.12s}@keyframes ch-climb{0%,6%{transform:translateY(37%)}46%,58%{transform:translateY(-56%)}94%,to{transform:translateY(37%)}}@keyframes ch-glow{0%,20%{opacity:.45}50%{opacity:1}84%,to{opacity:.45}}.chuun[data-state=cleared] .chuun__dot{top:31.3%;background:var(--xk-teal-300);animation:ch-pass 2.6s ease-in-out infinite}@keyframes ch-pass{0%,64%{opacity:1}78%{opacity:.32}92%,to{opacity:1}}.chuun-band{position:relative;width:40px;height:40px;flex:none}.chuun-band .bar{position:absolute;left:12.5%;width:75%;height:10.9%;background:var(--xk-limestone);border-radius:2px}.chuun-band .dot{position:absolute;top:34.4%;width:17.2%;height:17.2%;border-radius:9999px;background:var(--xk-teal-300)}.chuun-band[data-band="10"] .bar{background:var(--xk-amber)}@media (prefers-reduced-motion:reduce){.chuun__dot,.chuun__jamb,.xook-arrival .dot,.xook__ball{animation:none!important}.xook[data-state=working] .xook__ball{background:var(--xk-teal-300)}.xook[data-state=working] .b4{background:var(--xk-amber)}.chuun[data-state=progress] .chuun__jamb{opacity:1}}