/* === Extracted from view @section Styles === */
.cn-art { position: relative; height: 100%; display: grid; place-items: center; }
.cn-hub { width: 96px; height: 96px; border-radius: 24px; background: linear-gradient(135deg, var(--yail-coffee), var(--yail-amber)); display: flex; align-items: center; justify-content: center; color: var(--yail-cream); box-shadow: 0 16px 40px rgba(168,109,44,.25); position: relative; z-index: 2; }
.cn-line { position: absolute; top: 50%; left: 50%; width: 1px; height: 1px; pointer-events: none; }
.cn-line path { stroke: var(--yail-stone); stroke-width: 1; stroke-dasharray: 4 4; fill: none; }
.cn-line svg { position: absolute; top: -200px; left: -200px; width: 400px; height: 400px; overflow: visible; }
.cn-node { position: absolute; width: 64px; height: 64px; background: #fff; border: 1px solid var(--yail-stone); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--yail-coffee); box-shadow: var(--shadow-card-soft); flex-direction: column; gap: 3px; padding: 4px; }
.cn-node .lab { font-size: 9px; letter-spacing: .08em; color: var(--yail-mocha); font-weight: 500; }
.cn-node.n1 { top: 8%; left: 18%; }
.cn-node.n2 { top: 14%; right: 14%; }
.cn-node.n3 { bottom: 18%; left: 12%; }
.cn-node.n4 { bottom: 10%; right: 18%; }