.cno-wrap{position:relative;width:100%;aspect-ratio:1/1;margin:0 auto;overflow:hidden;user-select:none;-webkit-user-select:none}
.cno-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cno-center{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1/1;transform:translate(-50%,-50%);z-index:5;pointer-events:none;animation:cno-pulse 4.5s ease-in-out infinite}
.cno-center img,.cno-center svg{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 0 14px rgba(110,130,255,.55))}
.cno-circuit circle{animation:cno-blink 2.4s ease-in-out infinite}
.cno-circuit circle:nth-of-type(2){animation-delay:.6s}.cno-circuit circle:nth-of-type(3){animation-delay:1.2s}.cno-circuit circle:nth-of-type(4){animation-delay:1.8s}
.cno-node{position:absolute;left:0;top:0;width:19%;display:flex;flex-direction:column;align-items:center;gap:.35em;text-decoration:none;color:var(--c);will-change:transform;transform-origin:50% 50%}
.cno-sphere{width:100%;aspect-ratio:1/1;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;
 background:var(--c);box-shadow:0 0 0 .22em rgba(255,255,255,.9) inset,0 0 0 .32em var(--c) inset;
 background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.55),transparent 38%),radial-gradient(circle at 50% 50%,var(--c),color-mix(in srgb,var(--c) 55%,#000));
 box-shadow:0 0 0 .22em rgba(255,255,255,.9) inset,0 0 0 .32em var(--c) inset,0 0 1.2em color-mix(in srgb,var(--c) 70%,transparent)}
.cno-sphere img{width:58%;height:58%;object-fit:contain;filter:brightness(0) invert(1)}
.cno-keepcolor .cno-sphere img{filter:none;width:64%;height:64%}
.cno-symbol{font-size:calc(var(--cno-fs,40px)*1.1);line-height:1;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.3)}
.cno-label{font:700 clamp(10px,2.3vw,15px)/1.15 system-ui,-apple-system,"Segoe UI",sans-serif;text-align:center;color:var(--cno-label,var(--c));white-space:normal;letter-spacing:.01em;text-transform:uppercase;max-width:140%}
a.cno-node:hover .cno-sphere,a.cno-node:focus-visible .cno-sphere{box-shadow:0 0 0 .22em #fff inset,0 0 0 .32em var(--c) inset,0 0 2em var(--c)}
a.cno-node:focus-visible{outline:2px solid var(--c);outline-offset:4px;border-radius:12px}
@keyframes cno-pulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.035)}}
@keyframes cno-blink{0%,100%{opacity:.35}50%{opacity:1}}
.cno-still .cno-center,.cno-still .cno-circuit circle{animation:none}
/* posición de reserva (pentágono) si el JavaScript no llega a ejecutarse */
.cno-node[data-i="0"]{left:40.5%;top:2.5%}
.cno-node[data-i="1"]{left:76.6%;top:28.8%}
.cno-node[data-i="2"]{left:62.8%;top:71.2%}
.cno-node[data-i="3"]{left:18.2%;top:71.2%}
.cno-node[data-i="4"]{left:4.4%;top:28.8%}