/* Capability two: animated "one change rippling" system map on the navy surface. */
.sync-demo{--fig-bg:#132438;--fig-border:#1f3449;--cap-color:#a7b3bd;--surf:#0f1e30;--surf-border:#223850;--divider:#1f3449;--t-ink:#f4f1ea;--t-muted:#9aa7b0;--t-warn:#efc6a6;--node-bg:#172c42;--node-border:#284058;--link:#2f4a63;--pulse:#a8dcbb;--rec-glow:168,220,187;--flag-glow:239,198,166;--hub-bg:#1b3350;--hub-border:#3a5878;background:var(--fig-bg);border-color:var(--fig-border)}
.sync-demo figcaption{color:var(--cap-color)}
.sync-surface{background:var(--surf);border:1px solid var(--surf-border);border-radius:4px;overflow:hidden;color:var(--t-ink)}
.sync-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-bottom:1px solid var(--divider)}
.sync-head h4{font-family:Manrope,sans-serif;font-size:1rem;font-weight:600;line-height:1.4;letter-spacing:-.025em;margin:0;color:var(--t-ink)}
.sync-head span{font-size:.8125rem;color:var(--t-muted);white-space:nowrap}
.sync-demo .system-map{margin:18px 18px 0;min-height:250px}
.sync-demo .system-links{stroke:var(--link);stroke-width:1.5;transition:opacity .4s}
.sync-demo .system-links.off{opacity:0}
.sync-pulse{fill:none;stroke:var(--pulse);stroke-width:3;stroke-linecap:round;stroke-dasharray:14 100;stroke-dashoffset:14;opacity:0}
.sync-pulse.is-active{opacity:1;animation:sync-travel .6s linear forwards}
@keyframes sync-travel{from{stroke-dashoffset:14}to{stroke-dashoffset:-100}}
.sync-demo .system-node{position:relative;overflow:hidden;padding:12px 10px 11px;background:var(--node-bg);border:1px solid var(--node-border);border-radius:4px;text-align:left;will-change:transform}
.sync-demo .system-node::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s ease;background:radial-gradient(130px 90px at 0 0,rgba(var(--rec-glow),.16),transparent 70%)}
.sync-demo .system-node.is-sync::before{opacity:1}
.sync-demo .system-node.is-sync{border-color:#3f6b58}
.sync-demo .system-node.is-drift{border-color:#5b4a3a}
.sync-demo .system-node strong{display:block;font-weight:600;font-size:.8125rem;line-height:1.3;letter-spacing:-.01em;color:var(--t-ink)}
.sync-demo .system-node span{display:block;font-size:.6875rem;line-height:1.4;color:var(--t-muted);margin-top:0}
.sync-demo .node-figure{margin-top:6px;font-variant-numeric:tabular-nums}
.sync-demo .node-figure b{font-family:Manrope,sans-serif;font-weight:600;font-size:1.375rem;line-height:1.1;letter-spacing:-.03em;color:var(--t-ink);margin-right:4px}
.sync-demo .node-status{display:inline-block;margin-top:7px;padding:2px 7px;border-radius:2px;font-size:.5625rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:14px;white-space:nowrap;min-height:18px;box-sizing:border-box;background:#1d3247;color:#93a3b0;transition:background .2s,color .2s}
.sync-demo .system-node.is-sync .node-status{background:#1e3d33;color:#a8dcbb}
.sync-demo .system-node.is-drift .node-status{background:#efc6a6;color:#3b2314}
.sync-demo .node-event{margin-top:6px;min-height:15px;color:var(--t-muted)}
.sync-demo .system-node.is-sync .node-event{color:#a8dcbb}
.sync-demo .system-node.bloom,.sync-demo .system-hub.bloom{animation:sync-bloom .9s ease-out}
@keyframes sync-bloom{0%{box-shadow:0 0 0 0 rgba(var(--g),0)}25%{box-shadow:0 0 0 1px rgba(var(--g),.75),0 0 26px rgba(var(--g),.35)}100%{box-shadow:0 0 0 0 rgba(var(--g),0)}}
.sync-demo .system-hub{background:var(--hub-bg);border-color:var(--hub-border);padding:16px 10px;transition:opacity .4s,border-color .4s;will-change:transform}
.sync-demo .system-hub.is-dim{opacity:.55;border-color:#2b4057}
.sync-demo .system-hub strong{font-size:.9375rem}
.sync-demo .system-hub>span:last-child{color:#c9d4dd;min-height:36px;margin-top:6px}
.sync-demo .system-hub.is-live>span:last-child{color:#a8dcbb}
.sync-demo .hub-symbol{color:#e1b18b;margin-bottom:8px}
.sync-demo .enter{animation:sync-slab .24s cubic-bezier(.2,.8,.2,1) both}
@keyframes sync-slab{from{opacity:0;transform:translateX(-12px) skewX(-12deg) scaleX(.82)}to{opacity:1;transform:none}}
.sync-demo .out{animation:sync-slab-out .18s ease-in both}
@keyframes sync-slab-out{from{opacity:1;transform:none}to{opacity:0;transform:translateX(10px) skewX(10deg) scaleX(.85)}}
.sync-note{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:12px 0 0;padding:10px 18px 14px;border-top:1px solid var(--divider);font-size:.75rem;line-height:1.5;color:var(--t-muted)}
.sync-note [data-sync-note]{color:var(--t-warn);transition:opacity .3s}
.sync-note [data-sync-note].swap{opacity:0}
@media(max-width:1050px){.sync-demo .system-map{margin:14px 14px 0}.sync-demo .node-figure b{font-size:1.25rem}}
@media(max-width:460px){.sync-demo .system-map{min-height:320px;margin:12px 12px 0}.sync-demo .system-hub{width:70%}.sync-demo .system-hub .hub-symbol{display:none}.sync-note{padding-left:12px;padding-right:12px}}
@media(prefers-reduced-motion:reduce){.sync-demo .system-node,.sync-demo .system-hub,.sync-demo .system-links,.sync-pulse,.sync-demo .system-node::before{animation:none!important;transition:none!important}}