.component-relations{position:fixed;inset:0;width:100%;height:100%;overflow:visible;z-index:9;pointer-events:none;fill:none;stroke:#c6d6e0;stroke-width:.35;stroke-dasharray:.4 4.6;stroke-linecap:round;opacity:.14}
.component-relations.is-active{animation:relationship-arrival 1s ease-out both}
.component-relations.is-active path{animation:relationship-travel 1s cubic-bezier(.12,.65,.25,1) both}
.relationship-touch{position:relative;animation:relationship-text 1s ease-out both}
@keyframes relationship-arrival{0%{opacity:0}16%,48%{opacity:.23}100%{opacity:0}}
@keyframes relationship-travel{0%{stroke-dashoffset:20;opacity:0}24%{opacity:1}72%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-4;opacity:0}}
@keyframes relationship-text{0%,100%{left:0}18%{left:.8px}36%{left:-.5px}60%{left:.3px}}
@media(prefers-reduced-motion:reduce){.component-relations,.component-relations path,.relationship-touch{animation:none!important}}