.connection-section{margin-top:64px;padding-top:36px;border-top:1px solid #494949;min-width:0}.connection-heading{display:flex;justify-content:space-between;gap:24px;align-items:center;flex-wrap:wrap}.connection-kicker{color:#bfff9b;letter-spacing:2px;font-size:12px;font-weight:700}.connection-heading h2{font-size:32px;margin:12px 0}.connection-heading p,.connection-note{color:#c9c9c9;font-size:14px;line-height:1.7}.connection-stats{font-size:15px;background:#252525;border:1px solid #444;border-radius:8px;padding:16px}.connection-stats b{color:#fff;font-size:22px}.connection-stats span{margin:0 8px}.connection-filters{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 16px}.connection-filters button{font-size:14px;padding:10px 16px}.connection-filters [aria-pressed=true]{background:#d3f6b4;color:#171717;border-color:#d3f6b4}.connection-clear{margin-left:auto}.connection-detail{border:1px solid #474747;border-radius:10px;background:#242424;padding:20px;color:#e8e8e8;line-height:1.65;font-size:15px;margin-bottom:20px}.connection-detail h3{font-size:20px;margin:8px 0}.connection-detail ul{padding-left:22px}.connection-detail li{margin:14px 0}.connection-detail li p{margin:5px 0;color:#ccc;white-space:pre-wrap}.connection-scroll{overflow:auto;border:1px solid #3d3d3d;border-radius:12px;background:#181818;max-height:850px}.connection-canvas{position:relative;display:grid;grid-template-columns:minmax(250px,1fr) minmax(280px,1fr) minmax(250px,1fr);gap:90px;min-width:1050px;padding:28px;align-items:start;background-image:radial-gradient(#353535 1px,transparent 1px);background-size:22px 22px}.connection-column{position:relative;z-index:1;min-width:0}.connection-column-label{font-size:15px;letter-spacing:1px;color:#eee;font-weight:700;margin-bottom:26px;min-height:48px}.connection-column-label small{display:block;color:#aaa;font-size:12px;letter-spacing:0;font-weight:400;margin-top:8px}.connection-group h3{margin:16px 0 12px;font-size:18px}.connection-group h3 span{font-size:12px;color:#aaa;margin-left:8px}.connection-node{position:relative;display:block;width:100%;text-align:left;background:#242424;border:1px solid #555;border-left:3px solid var(--node-color);border-radius:9px;padding:17px;margin-bottom:15px;color:#fff;transition:opacity .18s,box-shadow .18s,background .18s;white-space:normal;overflow-wrap:anywhere}.connection-node strong{display:block;font-size:16px;line-height:1.45;margin:10px 0 14px;font-weight:600}.connection-meta{display:block;color:var(--node-color,#d5d5d5);font-size:12px;line-height:1.6}.connection-node-footer{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#ccc}.connection-node-footer>span{color:#aaa}.connection-node.problem{background:#30312c;border-color:#79806e}.connection-node:hover,.connection-node.is-selected{background:#343434}.connection-node:focus-visible{outline:3px solid #fff;outline-offset:4px}.connection-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.connection-lines path{fill:none;stroke:var(--line-color);stroke-width:1.5;opacity:.4;transition:opacity .18s,stroke-width .18s}.has-spotlight .connection-node:not(.is-connected){opacity:.22}.has-spotlight path:not(.is-connected){opacity:.06}.connection-node.is-connected{box-shadow:0 0 0 1px var(--node-color),0 10px 28px #0009;z-index:3}.connection-lines path.is-connected{stroke-width:4;opacity:1;filter:drop-shadow(0 0 5px var(--line-color))}.connection-node.is-selected:after{content:'';position:absolute;right:-6px;top:50%;width:10px;height:10px;border-radius:50%;background:var(--node-color);box-shadow:0 0 12px var(--node-color)}.connection-empty{padding:22px;color:#ccc;font-size:15px;line-height:1.6}.connection-note{margin-top:16px;font-size:12px}@media(max-width:700px){.connection-heading h2{font-size:27px}.connection-clear{margin-left:0}.connection-scroll{max-height:680px}}@media(prefers-reduced-motion:reduce){.connection-node,.connection-lines path{transition:none}}@media print{.connection-scroll{max-height:none;overflow:visible}.connection-filters{display:none}}

.main:has(.connection-section){min-width:0}.connection-section{max-width:100%}.connection-scroll{width:100%;box-sizing:border-box}


.connection-canvas{grid-template-columns:minmax(200px,1fr) minmax(250px,1fr) minmax(200px,1fr);gap:56px;min-width:900px}