.connect-pairs {box-sizing:border-box;max-width:100%;border:1px solid #cbd5e1;border-radius:12px;padding:18px;margin:18px 0;background:#f8fafc;color:#182435;font-family:Arial,sans-serif}
.connect-pairs * {box-sizing:border-box}
.connect-pairs .cp-heading {margin:0 0 7px;font-size:1.35em}
.connect-pairs .cp-instructions {margin:0 0 15px}
.connect-pairs .cp-board {position:relative;display:flex;gap:clamp(46px,12%,140px);align-items:stretch}
.connect-pairs .cp-column {width:50%;display:flex;flex-direction:column;gap:14px;justify-content:space-around;min-width:0;z-index:1}
.connect-pairs .cp-item {position:relative;display:flex;align-items:center;min-height:68px;padding:12px;border:2px solid #cbd5e1;border-radius:9px;background:white;box-shadow:0 1px 2px #0001;word-break:break-word;touch-action:pan-y}
.connect-pairs .cp-content {width:100%;text-align:center}
.connect-pairs .cp-item img {display:block;max-width:100%;max-height:145px;object-fit:contain;margin:0 auto}
.connect-pairs .cp-dot {position:absolute;top:50%;width:18px;height:18px;border:3px solid white;box-shadow:0 0 0 2px #175fad;background:#175fad;border-radius:50%;transform:translateY(-50%);cursor:crosshair;touch-action:none}
.connect-pairs .cp-left .cp-dot {right:-10px}
.connect-pairs .cp-right .cp-dot {left:-10px}
.connect-pairs .cp-dot:focus {outline:3px solid #f59e0b;outline-offset:4px}
.connect-pairs .cp-item.cp-selected {border-color:#d97706;background:#fffbeb}
.connect-pairs .cp-item.cp-linked {border-color:#15803d}
.connect-pairs .cp-lines {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.connect-pairs .cp-lines line {stroke:#1664b5;stroke-width:3;stroke-linecap:round}
.connect-pairs .cp-lines line.cp-preview {stroke:#d97706;stroke-dasharray:6 5}
.connect-pairs .cp-feedback {min-height:1.3em;font-size:.9em;color:#334155;margin:12px 0}
.connect-pairs .cp-reset {border:1px solid #7b8797;border-radius:5px;background:white;padding:8px 14px;cursor:pointer;color:#182435}
.connect-pairs .cp-reset:focus {outline:3px solid #f59e0b}
@media(max-width:480px){.connect-pairs{padding:10px}.connect-pairs .cp-board{gap:38px}.connect-pairs .cp-item{padding:6px;font-size:.84em}.connect-pairs .cp-dot{width:17px;height:17px}}