.kbl{--kbl-start:var(--k-pal-5);--kbl-todo:var(--k-pal-6);--kbl-prog:var(--k-pal-7);--kbl-done:var(--k-pal-3);--kbl-drop:cubic-bezier(.2,1.3,.4,1);text-align:center;flex-direction:column;align-items:center;gap:16px;display:flex}.kbl--screen{background:var(--surface-0);justify-content:center;min-height:100dvh;padding:24px}.kbl__label{font-family:var(--font-display);color:var(--text-primary);margin:0;font-size:18px;font-weight:700;line-height:1.3}.kbl__sub{color:var(--text-tertiary);max-width:34ch;margin:-10px 0 0;font-size:13px}.kbl__b{border-radius:var(--r-xs);background:var(--kbl-c);box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--kbl-c)72%,black);animation-timing-function:var(--kbl-drop);animation-iteration-count:infinite;animation-fill-mode:both;display:block}.kbl-default{grid-template-columns:26px 26px;gap:5px;display:grid}.kbl-default .kbl__b{width:26px;height:26px;animation-name:kbl-snap;animation-duration:2s}.kbl-default .kbl__b:first-child{--kbl-c:var(--kbl-prog);--fx:-22px;--fy:-22px}.kbl-default .kbl__b:nth-child(2){--kbl-c:var(--kbl-start);--fx:22px;--fy:-22px;animation-delay:.14s}.kbl-default .kbl__b:nth-child(3){--kbl-c:var(--kbl-todo);--fx:-22px;--fy:22px;animation-delay:.28s}.kbl-default .kbl__b:nth-child(4){--kbl-c:var(--kbl-done);--fx:22px;--fy:22px;animation-delay:.42s}@keyframes kbl-snap{0%{opacity:0;transform:translate(var(--fx),var(--fy))}20%{opacity:1;transform:none}75%{opacity:1;transform:none}90%,to{opacity:0;transform:scale(.85)}}.kbl-board{align-items:flex-end;gap:6px;height:60px;display:flex}.kbl-board .kbl__b{width:34px;animation-name:kbl-rise;animation-duration:2.4s}.kbl-board .kbl__b:first-child{--kbl-c:var(--kbl-start);height:14px}.kbl-board .kbl__b:nth-child(2){--kbl-c:var(--kbl-todo);height:26px;animation-delay:.12s}.kbl-board .kbl__b:nth-child(3){--kbl-c:var(--kbl-prog);height:40px;animation-delay:.24s}.kbl-board .kbl__b:nth-child(4){--kbl-c:var(--kbl-done);height:54px;animation-delay:.36s}@keyframes kbl-rise{0%{opacity:0;transform:translateY(-30px)}18%{opacity:1;transform:none}78%{opacity:1;transform:none}92%,to{opacity:0;transform:translateY(6px)}}.kbl-workspace{flex-direction:column-reverse;align-items:center;gap:4px;height:70px;display:flex}.kbl-workspace .kbl__b{height:14px;animation-name:kbl-land;animation-duration:2.6s}.kbl-workspace .kbl__b:first-child{--kbl-c:var(--kbl-done);width:72px}.kbl-workspace .kbl__b:nth-child(2){--kbl-c:var(--kbl-prog);width:56px;animation-delay:.18s}.kbl-workspace .kbl__b:nth-child(3){--kbl-c:var(--kbl-todo);width:40px;animation-delay:.36s}.kbl-workspace .kbl__b:nth-child(4){--kbl-c:var(--kbl-start);width:24px;animation-delay:.54s}@keyframes kbl-land{0%{opacity:0;transform:translateY(-36px)}16%{opacity:1;transform:none}76%{opacity:1;transform:none}90%,to{opacity:0}}.kbl-connect{width:150px;height:44px;position:relative}.kbl-connect .kbl__b{animation-duration:1.8s;position:absolute}.kbl-connect .kbl__b:first-child{--kbl-c:var(--kbl-todo);width:44px;height:32px;animation-name:kbl-in-l;top:6px;left:16px}.kbl-connect .kbl__b:nth-child(2){--kbl-c:var(--kbl-start);width:44px;height:32px;animation-name:kbl-in-r;top:6px;right:16px}.kbl-connect .kbl__b:nth-child(3){--kbl-c:var(--kbl-done);border-radius:var(--r-dot);width:12px;height:12px;box-shadow:none;animation-name:kbl-key;top:16px;left:69px}@keyframes kbl-in-l{0%{opacity:0;transform:translate(-26px)}25%{opacity:1;transform:none}35%,70%{opacity:1;transform:translate(9px)}90%,to{opacity:0;transform:translate(9px)}}@keyframes kbl-in-r{0%{opacity:0;transform:translate(26px)}25%{opacity:1;transform:none}35%,70%{opacity:1;transform:translate(-9px)}90%,to{opacity:0;transform:translate(-9px)}}@keyframes kbl-key{0%,30%{transform:scale(0)}42%{transform:scale(1.25)}50%,70%{transform:scale(1)}90%,to{transform:scale(0)}}.kbl-chat{flex-direction:column;gap:6px;width:120px;display:flex}.kbl-chat .kbl__b{height:16px;animation-name:kbl-land;animation-duration:2.4s}.kbl-chat .kbl__b:first-child{--kbl-c:var(--kbl-todo);width:70px}.kbl-chat .kbl__b:nth-child(2){--kbl-c:var(--kbl-prog);align-self:flex-end;width:54px;animation-delay:.2s}.kbl-chat .kbl__b:nth-child(3){--kbl-c:var(--kbl-start);width:86px;animation-delay:.4s}.kbl-payment{border-radius:var(--r-btn);background:var(--k-selected-bg);gap:6px;padding:6px;display:flex}.kbl-payment .kbl__b{width:30px;height:30px;animation-name:kbl-fill;animation-duration:2.4s}.kbl-payment .kbl__b:first-child{--kbl-c:var(--kbl-todo)}.kbl-payment .kbl__b:nth-child(2){--kbl-c:var(--kbl-prog);animation-delay:.18s}.kbl-payment .kbl__b:nth-child(3){--kbl-c:var(--kbl-start);animation-name:kbl-fill-go;animation-delay:.36s}@keyframes kbl-fill{0%{opacity:0;transform:translateY(-24px)}18%{opacity:1;transform:none}80%{opacity:1}92%,to{opacity:0}}@keyframes kbl-fill-go{0%{opacity:0;--kbl-c:var(--kbl-start);transform:translateY(-24px)}18%{opacity:1;transform:none}45%,80%{opacity:1;--kbl-c:var(--kbl-done)}92%,to{opacity:0;--kbl-c:var(--kbl-done)}}@property --kbl-c{syntax:"<color>";inherits:true;initial-value:transparent}.kbl--small{flex-direction:row;gap:10px}.kbl--small .kbl__label{color:var(--text-tertiary);font-family:inherit;font-size:13px;font-weight:400}.kbl-small{align-items:flex-end;gap:5px;height:22px;display:flex}.kbl-small .kbl__b{border-radius:var(--r-dot);width:10px;height:10px;box-shadow:none;animation-name:kbl-hop;animation-duration:1s}.kbl-small .kbl__b:first-child{--kbl-c:var(--kbl-todo)}.kbl-small .kbl__b:nth-child(2){--kbl-c:var(--kbl-prog);animation-delay:.12s}.kbl-small .kbl__b:nth-child(3){--kbl-c:var(--kbl-done);animation-delay:.24s}@keyframes kbl-hop{0%,60%,to{transform:none}30%{transform:translateY(-10px)}}@media (prefers-reduced-motion:reduce){.kbl__b{opacity:1!important;animation:none!important;transform:none!important}.kbl-payment .kbl__b:nth-child(3){--kbl-c:var(--kbl-done)}}