/* Decorative protocol illustrations, never a map or live network dashboard. */
#network{--proof-green:#b8ec83;--proof-cyan:#82cdbd;--proof-edge:#547764;--proof-panel:#10251c;--proof-paper:#0a1912;--proof-muted:#a8bdb1;--proof-amber:#e7b77b}
#network .proof-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;flex-wrap:wrap}
#network .proof-toolbar>span{font-size:12px;line-height:1.5;color:var(--proof-muted);overflow-wrap:anywhere}
#network .proof-motion-toggle{display:inline-flex!important;align-items:center;gap:8px;min-height:44px;max-width:100%;padding:8px 10px;border:1px solid var(--proof-edge);border-radius:6px;background:transparent;color:inherit;font:inherit;font-size:12px;line-height:1.4;cursor:pointer;text-align:left}
#network .proof-motion-toggle[hidden]{visibility:hidden}
#network .proof-motion-toggle svg{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:2}
#network .proof-play-icon{display:none}
#network .proof-motion-toggle[aria-pressed="true"] .proof-play-icon{display:block}
#network .proof-motion-toggle[aria-pressed="true"] .proof-pause-icon{display:none}
#network .proof-motion-toggle:focus-visible{outline:2px solid var(--proof-green);outline-offset:3px}
#network .network-stats>.proof-property{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:8px;align-content:start;min-width:0;padding:12px;border:1px solid var(--proof-edge);border-radius:9px;background:#091710}
#network .proof-property>b{font-size:14px!important;line-height:1.3!important;overflow-wrap:anywhere}
#network .proof-property>small{font-size:12px!important;line-height:1.5!important;overflow-wrap:anywhere}
#network .proof-demo{width:100%;max-width:320px;aspect-ratio:280 / 180;justify-self:center;min-width:0}
#network .proof-demo>svg{display:block;grid-row:auto;width:100%;height:100%;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:hidden}
#network .proof-demo :is(path,rect,circle){vector-effect:non-scaling-stroke}
#network .proof-shadow{fill:#000;stroke:none;opacity:.2}
#network .proof-wire{stroke:var(--proof-edge);opacity:.35}
#network :is(.proof-document,.proof-node){fill:var(--proof-panel);stroke:var(--proof-edge)}
#network .proof-rule{stroke:var(--proof-edge)}
#network :is(.proof-signature,.proof-tick){stroke:var(--proof-green);stroke-width:2.2}
#network .proof-seal{fill:var(--proof-paper);stroke:var(--proof-green)}
#network .proof-distribute{stroke:var(--proof-green);stroke-dasharray:4 10}
#network .proof-status{fill:var(--proof-cyan);stroke:none}
#network .proof-private-flow{stroke:var(--proof-cyan);stroke-dasharray:4 12}
#network .proof-envelope{fill:var(--proof-paper);stroke:var(--proof-cyan)}
#network .proof-lock{stroke:var(--proof-cyan);stroke-width:2}
#network .proof-cipher{fill:var(--proof-cyan);stroke:none}
#network .proof-boundary{fill:var(--proof-panel);stroke:var(--proof-edge)}
#network .proof-boundary-line{stroke:var(--proof-edge);stroke-dasharray:2 6}
#network .proof-approved-flow{stroke:var(--proof-green);stroke-dasharray:4 10}
#network .proof-denied-flow{stroke:var(--proof-amber);stroke-dasharray:3 9}
#network .proof-rejected{fill:var(--proof-paper);stroke:var(--proof-amber)}
#network .proof-cross{stroke:var(--proof-amber);stroke-width:2.2}
#network .network-caption{font-size:11px;line-height:1.5}
/* Each part is named so the old page-wide animation:none stays intact. */
#network .proof-demo .proof-signature{stroke-dasharray:125;animation:proof-sign 6s ease-in-out infinite!important}
#network .proof-demo .proof-sign-seal{transform-origin:151px 95px;animation:proof-confirm 6s ease-in-out infinite!important}
#network .proof-demo .proof-distribute{animation:proof-distribute 6s linear infinite!important}
#network .proof-demo .proof-receiver{animation:proof-receive 6s ease-in-out infinite!important}
#network .proof-demo .proof-receiver.second{animation-delay:.15s!important}
#network .proof-demo .proof-receiver.third{animation-delay:.3s!important}
#network .proof-demo .proof-private-flow{animation:proof-flow 2s linear infinite!important}
#network .proof-demo .proof-private-envelope{animation:proof-envelope 6s ease-in-out infinite!important}
#network .proof-demo .proof-approved-flow{animation:proof-flow 2s linear infinite!important}
#network .proof-demo .proof-denied-flow{animation:proof-flow 2.8s linear infinite!important}
#network .proof-demo .proof-approved-packet{animation:proof-pass 6s ease-in-out infinite!important}
#network .proof-demo .proof-denied-packet{animation:proof-refuse 6s ease-in-out infinite!important}
#network .proof-demo .proof-stop{animation:proof-stop 6s ease-in-out infinite!important}
#network .proof-demo[data-playing="false"] * { animation-play-state: paused !important; }
@keyframes proof-sign{0%,10%{stroke-dashoffset:125}38%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:125}}
@keyframes proof-confirm{0%,24%{opacity:.25;transform:scale(.9)}42%,87%{opacity:1;transform:scale(1)}100%{opacity:.25;transform:scale(.9)}}
@keyframes proof-distribute{0%,35%{opacity:0;stroke-dashoffset:0}45%,85%{opacity:1}100%{opacity:0;stroke-dashoffset:-56}}
@keyframes proof-receive{0%,40%{opacity:.4}58%,85%{opacity:1}100%{opacity:.4}}
@keyframes proof-flow{to{stroke-dashoffset:-56}}
@keyframes proof-envelope{0%,100%{transform:translateY(2px)}50%{transform:translateY(-3px)}}
@keyframes proof-pass{0%,12%{transform:translateX(0);opacity:1}65%,80%{transform:translateX(183px);opacity:1}88%,100%{transform:translateX(183px);opacity:0}}
@keyframes proof-refuse{0%,12%{transform:translateX(0);opacity:1}43%,61%{transform:translateX(24px);opacity:1}76%,100%{transform:translateX(24px);opacity:0}}
@keyframes proof-stop{0%,31%{opacity:.25}45%,77%{opacity:1}100%{opacity:.25}}
html[data-theme="light"] #network{--proof-green:#39752b;--proof-cyan:#226e65;--proof-edge:#83a18d;--proof-panel:#e3eee5;--proof-paper:#f8fcf8;--proof-muted:#496450;--proof-amber:#956122}
html[data-theme="light"] #network .network-stats>.proof-property{background:#f5faf6}
@media(max-width:620px){
  #network .network-stats{gap:12px}
  #network .network-stats>.proof-property{padding:14px}
  #network .proof-toolbar{align-items:flex-start}
  #network .proof-toolbar>span{flex:1 1 130px}
}
@media (prefers-reduced-motion: reduce) {
  #network .proof-demo[data-proof-demo] * { animation: none !important; }
}