.kc-wrap{ display:flex; gap:var(--kc-gap,16px); align-items:center; flex-wrap:wrap }
.kc-left-chart .kc-chart{ order:1 } .kc-left-chart .kc-legend{ order:2 }
.kc-right-chart .kc-chart{ order:2 } .kc-right-chart .kc-legend{ order:1 }
.kc-top-chart .kc-chart{ width:100% } .kc-top-chart .kc-legend{ width:100% }
.kc-bottom-chart .kc-chart{ order:2; width:100% } .kc-bottom-chart .kc-legend{ order:1; width:100% }
.kc-chart{ max-width:640px }
.kc-chart svg{ width:100%; height:auto; display:block; max-height: var(--kc-maxh, 320px); overflow:visible }
.kc-caption{ margin-top:8px }
.kc-legend{ display:flex; flex-direction:column; gap:8px; min-width:240px }
.kc-legend-item{ display:flex; align-items:center; gap:8px; line-height:1.2 }
.kc-swatch{ width:18px; height:18px; border-radius:2px; display:inline-block; border:1px solid rgba(0,0,0,.08) }
.kc-label{ font-weight:500 }
.kc-value{ margin-left:6px }
@keyframes kc-draw { to { stroke-dashoffset: 0; } }
@media (max-width: 640px){
  .kc-wrap{ flex-direction:column; align-items:flex-start }
  .kc-legend{ min-width:0; width:100% }
}