/* KATA Comparison Slider — two states, one seam. */
.k-cmp{--pos:55%;width:100%;position:relative;overflow:hidden;border-radius:var(--k-radius-lg);border:1px solid var(--k-line);font-family:var(--k-font);max-width:520px;aspect-ratio:8/5;background:var(--k-bg-soft)}
.k-cmp .layer{position:absolute;inset:0}
.k-cmp .top{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.k-cmp .tag{position:absolute;top:10px;font-size:11px;font-weight:600;letter-spacing:.06em;padding:3px 9px;border-radius:99px;background:rgba(24,24,27,.72);color:var(--k-on-color)}
.k-cmp .tag.l{left:10px}
.k-cmp .tag.r{right:10px}
.k-cmp .seam{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--k-on-color);box-shadow:0 0 0 1px rgba(24,24,27,.25)}
.k-cmp .grip{position:absolute;top:50%;left:var(--pos);transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:var(--k-on-color);color:var(--k-ink);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(16,24,40,.3);pointer-events:none}
.k-cmp input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}