.kb{--k-sq:calc(100% / var(--k-n));position:relative;width:100%;aspect-ratio:1;container-type:inline-size;border-radius:3px;touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;cursor:pointer;background:repeating-conic-gradient(var(--k-dark) 0 25%,var(--k-light) 0 50%) 0 0 /calc(200% / var(--k-n)) calc(200% / var(--k-n));box-shadow:0 0 0 1px rgba(0,0,0,.55),0 18px 40px rgba(0,0,0,.5),0 4px 10px rgba(0,0,0,.35)}.kb.has-image{background:var(--k-image) center /100% 100% no-repeat,var(--k-dark)}.kb:before{content:"";inset:0;z-index:0;background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,0) 36%,rgba(0,0,0,0) 64%,rgba(0,0,0,.14)),radial-gradient(110% 80% at 28% 8%,rgba(255,238,205,.08),transparent 60%)}.kb-route,.kb:before,.kb>b,.kb>i{position:absolute;pointer-events:none}.kb-route,.kb>b,.kb>i{top:0;left:0;width:var(--k-sq);height:var(--k-sq)}.kb-hl{z-index:1;background:var(--k-hl);opacity:.55}.kb-hl.is-end{opacity:1;box-shadow:inset 0 0 0 max(2px,.3cqw) rgba(255,226,150,.5)}.kb-hl.is-sel{opacity:1;box-shadow:inset 0 0 0 3px rgba(255,255,255,.32)}.kb-forced{z-index:1}.kb-forced:after{content:"";position:absolute;inset:5%;border-radius:50%;box-shadow:0 0 0 .55cqw rgba(255,196,64,.9),0 0 2.4cqw rgba(255,170,40,.6);animation:kb-breathe 1.6s ease-in-out infinite alternate}.kb-forced.is-flash:after{animation:kb-flash .5s ease-out 2,kb-breathe 1.6s ease-in-out 1s infinite alternate}@keyframes kb-breathe{0%{opacity:.55}to{opacity:1}}@keyframes kb-flash{50%{opacity:1;box-shadow:0 0 0 .9cqw rgba(255,220,90,1),0 0 4cqw rgba(255,170,40,.9)}}.kb-pulse{z-index:1;box-shadow:inset 0 0 0 .6cqw rgba(46,230,166,.9);animation:kb-breathe .9s ease-in-out infinite alternate}.kb>.kb-piece{z-index:2;will-change:transform}.kb>.kb-piece:after{content:"";position:absolute;inset:-5% -1.6% 1.8%;background:var(--img) center /100% 100% no-repeat}.kb>.kb-piece.is-lifted:after{transform:translateY(-4%) scale(1.06);filter:drop-shadow(0 .8cqw .6cqw rgba(0,0,0,.35));transition:transform .12s ease-out}.kb>.kb-piece.is-lifted,.kb>.kb-piece.is-moving{z-index:4}.kb>.kb-piece.is-dragging{z-index:7;cursor:-webkit-grabbing;cursor:grabbing}.kb>.kb-piece.is-dragging:after{filter:drop-shadow(0 1.6cqw 1cqw rgba(0,0,0,.4))}.kb>.kb-piece.is-ghost:after{opacity:.35;transform:none;filter:none}.kb>.kb-piece.is-route{z-index:5}.kb>.kb-piece.is-jumped:after{opacity:.45;filter:grayscale(.6)}.kb>.kb-piece.is-gone{z-index:3;animation:kb-gone .26s ease-in forwards}@keyframes kb-gone{to{opacity:0;transform-origin:center;scale:.82}}.kb>.kb-dot{z-index:6}.kb>.kb-dot:after{content:"";position:absolute;inset:34%;border-radius:50%;background:rgba(255,246,222,.5);box-shadow:0 0 0 1px rgba(0,0,0,.25)}.kb>.kb-dot.is-take:after{inset:8%;background:transparent;box-shadow:inset 0 0 0 .75cqw rgba(255,210,90,.85),0 0 1.6cqw rgba(255,190,60,.45)}.kb>.kb-dot.is-hop:after{inset:40%;background:rgba(255,210,90,.75)}.kb>.kb-dot.is-hover:after{box-shadow:inset 0 0 0 1cqw rgba(255,226,120,1),0 0 2cqw rgba(255,190,60,.7)}.kb-route{z-index:5;width:100%!important;height:100%!important}.kb-route polyline{fill:none;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2 16;opacity:.9}.kb-route circle{opacity:.9}.kb-route.is-hint polyline{stroke:#2ee6a6}.kb-route.is-hint circle{fill:#2ee6a6}.kb-route.is-plan polyline{stroke:#ffd36b}.kb-route.is-plan circle{fill:#ffd36b}.kb>.kb-num{z-index:1;padding:3% 0 0 5%;font:700 calc(100cqw / var(--k-n) * .17) /1 var(--font-sans,system-ui),sans-serif;color:rgba(255,244,222,.55);text-shadow:0 1px 1px rgba(0,0,0,.4)}.kb.is-small{cursor:default}@media (prefers-reduced-motion:reduce){.kb-forced:after,.kb-pulse{animation:none}}