.skills-network{position:relative;width:100%;max-width:none;height:480px;margin:24px 0 0;padding:0;overflow:visible;border:0;background:var(--paper,#f5f4ee);color:var(--ink,#20211e);isolation:isolate;z-index:4;--network-bleed:360px}
.skills-network::before{display:none}
.skills-network canvas{position:absolute;left:0;right:0;top:calc(-1 * var(--network-bleed));bottom:auto;display:block;width:100%;height:calc(100% + 2 * var(--network-bleed));pointer-events:none;z-index:1}
.network-caption{position:absolute;top:27px;left:var(--gutter);margin:0;font:11px/1.5 "Courier New",monospace;letter-spacing:1.4px;color:var(--muted,#65675f);pointer-events:none;text-transform:uppercase;z-index:3}
.network-hint{position:absolute;right:var(--gutter);bottom:24px;margin:0;font:11px/1.5 "Courier New",monospace;color:var(--muted,#65675f);pointer-events:none;z-index:3}
.network-nodes{position:absolute;inset:0;margin:0;padding:0;list-style:none;z-index:2}
.network-nodes li{position:absolute;left:var(--nx);top:var(--ny);width:48px;height:48px;transform:translate(-50%,-50%)}
.network-node{position:relative;display:block;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink,#20211e);cursor:crosshair;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.network-node::before{content:"";position:absolute;left:20px;top:20px;width:8px;height:8px;border-radius:50%;background:#665bc2;box-shadow:0 0 16px #665bc233;transition:transform .22s,background .22s,box-shadow .22s}
.network-ready .network-node::before{opacity:0}
.network-word{position:absolute;top:38px;left:50%;transform:translateX(-50%);display:block;width:max-content;max-width:min(360px,70vw);padding:0;font-family:inherit;font-size:clamp(18px,1.6vw,23px);font-weight:400;line-height:1.08;letter-spacing:-.4px;text-align:center;text-wrap:balance;color:var(--ink,#20211e);text-shadow:none;background:transparent;border-radius:0;box-shadow:none;pointer-events:none;transition:opacity .2s,transform .35s var(--ease)}
.network-ready .network-word{opacity:0;transform:translateX(-50%) translateY(12px) scale(.72)}
.network-node.is-active .network-word,.network-node:focus-visible .network-word{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.network-node:focus-visible{outline:2px solid #665bc2;outline-offset:5px}
.motion-paused .network-word{opacity:1;transform:translateX(-50%);font-size:clamp(16px,1.7vw,24px);max-width:190px;letter-spacing:-.5px}

@media(max-width:620px){.skills-network{height:540px;margin-top:20px}.network-nodes li{left:var(--mx);top:var(--my)}.network-caption{left:23px;top:25px;right:23px;font-size:10px}.network-hint{left:23px;right:23px;bottom:22px;font-size:10px}.network-word{font-size:18px;max-width:190px;letter-spacing:-.2px;top:38px}.network-node[data-word="4"] .network-word{width:175px}.motion-paused .network-word{font-size:16px;max-width:145px}}
@media(prefers-reduced-motion:reduce){.skills-network::before{animation:none}.network-ready .network-word{opacity:1;transform:translateX(-50%);font-size:clamp(16px,1.7vw,24px);max-width:190px}}

/* Same families as the site and its project cards; all kept light. */
.network-node[data-word="1"] .network-word{font-family:Georgia,"Times New Roman",serif;font-style:italic;letter-spacing:0}
.network-node[data-word="2"] .network-word{font-family:"Courier New",monospace;letter-spacing:-.7px}
.network-node[data-word="3"] .network-word{font-family:Georgia,"Times New Roman",serif;letter-spacing:0}
.network-node[data-word="4"] .network-word{font-style:italic;letter-spacing:-.3px}
.network-node[data-word="5"] .network-word{font-family:Georgia,"Times New Roman",serif;font-style:italic;letter-spacing:.2px}