.arch{border:1px solid var(--line);background:linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 40px 40px, rgb(var(--fg-rgb) / .015);border-radius:clamp(20px,2vw,28px);gap:16px;padding:clamp(16px,2.4vw,32px);display:grid}.arch__scroll{scrollbar-width:thin;overflow-x:auto}.arch__canvas{min-width:760px;position:relative}.arch__edges{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.arch__edge{fill:none;stroke:rgb(var(--fg-rgb) / .18);stroke-width:1.5px;vector-effect:non-scaling-stroke;transition:stroke .25s}.arch__flow{fill:none;stroke:var(--accent);stroke-width:2px;stroke-linecap:round;stroke-dasharray:2 18;vector-effect:non-scaling-stroke;transition:opacity .25s;animation:2.4s linear infinite mini-flow}.arch.is-focus .arch__flow:not(.is-on){opacity:.12}.arch.is-focus .arch__edge.is-on{stroke:rgb(var(--accent-rgb) / .6)}.arch__node{border:1px solid var(--line-strong);background:var(--surface);text-align:left;border-radius:12px;gap:2px;min-width:118px;padding:10px 14px;transition:border-color .2s,background-color .2s,opacity .25s,box-shadow .25s;display:grid;position:absolute;transform:translate(-50%,-50%)}@media (prefers-reduced-motion:no-preference){.arch__node{animation:node-in .6s var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 60ms + .2s)}}@keyframes node-in{0%{opacity:0;translate:0 14px}}.arch__node span{white-space:nowrap;font-size:14px;font-weight:600}.arch__node small{font-family:var(--font-mono);color:var(--fg-3);font-size:10.5px}.arch__node[data-layer=ai]{border-color:rgb(var(--accent-rgb) / .6)}.arch__node[data-layer=data]{border-color:rgb(var(--accent-2-rgb) / .7)}.arch.is-focus .arch__node{opacity:.35}.arch.is-focus .arch__node.is-near{opacity:1}.arch.is-focus .arch__node.is-on{opacity:1;border-color:var(--accent);box-shadow:0 0 0 4px rgb(var(--accent-rgb) / .18)}.arch__info{min-height:3em;color:var(--fg-2);font-size:15px}.arch__info b{color:var(--fg);margin-right:6px}@media (prefers-reduced-motion:reduce){.arch__flow{animation:none}}@media (max-width:899px){.arch__scroll{-webkit-mask-image:linear-gradient(90deg,#000 80%,#0000);mask-image:linear-gradient(90deg,#000 80%,#0000)}}
