.sv .n { transition: opacity var(--duration-focus) var(--ease-system); }
.sv .n rect, .sv .n circle, .sv .n .shape {
  fill: var(--surface-charcoal); stroke: var(--line-2); stroke-width: var(--stroke-hairline);
  transition: stroke var(--duration-pulse) var(--ease-system), fill var(--duration-pulse) var(--ease-system), stroke-opacity var(--duration-focus) var(--ease-system);
}
.sv .n text { fill: var(--text-3); transition: fill var(--duration-pulse) var(--ease-system); }
.sv .n.on rect, .sv .n.on circle, .sv .n.on .shape { fill: var(--surface-node-active); stroke: var(--state-active); stroke-opacity: 1; }
.sv .n.on text { fill: var(--text); }
.sv .n.held rect, .sv .n.held circle, .sv .n.held .shape { stroke: var(--state-active); stroke-opacity: var(--opacity-held-stroke); }
.sv .n.held text { fill: var(--text-2); }
.sv .ring { fill: none; stroke: var(--state-active); stroke-width: var(--stroke-hairline); opacity: 0; transform-origin: center; transform-box: fill-box; }
.sv .n.on .ring { animation: m-ring var(--duration-ring) var(--ease-system) forwards; }
@keyframes m-ring { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(var(--ring-scale-max)); } }
.sv .p { fill: none; stroke: var(--line-2); stroke-width: var(--stroke-hairline); }
.sv .p.dash { stroke: var(--line); stroke-dasharray: var(--stroke-dash-path); }
.sv .f { fill: none; stroke: var(--state-active); stroke-width: var(--stroke-signal); stroke-dasharray: var(--len); stroke-dashoffset: var(--len); opacity: .9;
  transition: stroke-dashoffset var(--duration-flow) var(--ease-flow), opacity var(--duration-focus) var(--ease-system); }
.sv .f.go { stroke-dashoffset: 0; }
.sv .f.held { opacity: var(--opacity-held-path); }
.sv.focus .n:not(.on):not(.held) { opacity: var(--opacity-focus-rest); }
.sv .core { fill: none; stroke: var(--line-2); stroke-width: var(--stroke-hairline); }
.sv .core-on { fill: none; stroke: var(--state-active); stroke-width: var(--stroke-signal); opacity: 0; transition: opacity var(--duration-resolve) var(--ease-system); }
.sv.lit .core-on { opacity: 1; }
.sv.resolved .n { opacity: 1; }
.sv.resolved .n rect, .sv.resolved .n circle, .sv.resolved .n .shape { stroke: var(--state-active); stroke-opacity: var(--opacity-resolved-stroke); }
.sv.resolved .n text { fill: var(--text-2); }
.sv.resolved .f { stroke-dashoffset: 0; opacity: var(--opacity-resolved-path); }
.sv .c { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset var(--duration-construct-segment) var(--ease-system); transition-delay: calc(var(--i, 0) * var(--duration-construct-stagger)); }
.sv.built .c { stroke-dashoffset: 0; }
.sv .ghost { stroke: var(--line); stroke-width: var(--stroke-hairline); fill: none; }
.steps > * { opacity: var(--opacity-caption-rest); transition: opacity var(--duration-focus) var(--ease-system); }
.steps > .on { opacity: 1; }
.steps > .was { opacity: var(--opacity-caption-held); }
.enter { opacity: 0; transform: translateY(var(--translate-enter)); transition: opacity var(--duration-enter) var(--ease-system), transform var(--duration-enter) var(--ease-system); transition-delay: calc(var(--i, 0) * var(--duration-construct-stagger)); }
.entered .enter, .no-js .enter { opacity: 1; transform: none; }
.u-line { position: relative; }
.u-line::after { content: ""; position: absolute; left: 0; bottom: 0; height: var(--stroke-hairline); width: 18px; background: var(--state-active); transition: width var(--duration-hover) var(--ease-system); }
.u-line:hover::after, .u-line:focus-visible::after { width: 100%; }
.u-shift { transition: transform var(--duration-hover) var(--ease-system); }
.u-shift:hover { transform: translateX(var(--translate-hover)); }
@media (prefers-reduced-motion: reduce) {
  .sv .n.on .ring { animation: none; }
  html { scroll-behavior: auto; }
}
.sv .n.hz .hzrect { fill: var(--surface-charcoal); stroke: var(--state-hazard); stroke-dasharray: var(--stroke-dash-hazard); stroke-width: var(--stroke-hairline); }
.sv .n.hz.on .hzrect, .sv .n.hz.held .hzrect, .sv.resolved .n.hz .hzrect { stroke: var(--state-hazard); stroke-dasharray: none; stroke-width: var(--stroke-signal); }
.sv .n.hz.on .hzrect { fill: var(--surface-node-hazard); }
.sv .n.hz .hatch { fill: none; stroke: none; }
.sv .n.hz.on .hatch, .sv .n.hz.held .hatch, .sv.resolved .n.hz .hatch { fill: url(#hz-hatch); }
.sv .hatch-line { stroke: var(--state-hazard); stroke-opacity: .35; stroke-width: var(--stroke-hairline); }
.sv .hzring { stroke: var(--state-hazard); }
.sv .f.hzf { stroke: var(--state-hazard); }
.sv .n.hz.on text { fill: var(--text); }
.sv .nofill { fill: none !important; }
.sv .boundary { stroke-dasharray: var(--stroke-dash-boundary); }
.sv .dashc { stroke-dasharray: var(--stroke-dash-path); }
.sv .dashl { stroke-dasharray: var(--stroke-dash-leader); }
.sv .lane .shape { fill: none; }
.stations > * { opacity: var(--opacity-caption-rest); transition: opacity var(--duration-focus) var(--ease-system); }
.stations > .on { opacity: 1; }
.stations > .was { opacity: var(--opacity-caption-held); }
.entered .stations > *, .no-js .stations > * { opacity: 1; }
.sv .n .occ { fill: var(--line); stroke: var(--line-2); }
.sv .n.on .occ, .sv .n.held .occ, .sv.resolved .n .occ { fill: var(--state-active); fill-opacity: var(--opacity-held-path); }
.sv .pipe-o { fill: none; stroke: var(--line-2); stroke-width: calc(var(--stroke-signal) * 4); stroke-linejoin: round; }
.sv .pipe-i { fill: none; stroke: var(--surface-charcoal); stroke-width: calc(var(--stroke-signal) * 4 - var(--stroke-hairline) * 2); stroke-linejoin: round; }
.sv .p.sig { stroke: var(--text-3); }
.sv .ghost-node rect { fill: none; stroke: var(--line-2); stroke-width: var(--stroke-hairline); stroke-dasharray: var(--stroke-dash-boundary); }
.sv .ghost-node text { fill: var(--text-3); }
.sv .err-gap { fill: var(--text-3); }
.sv .p.bnd { stroke: var(--text-3); stroke-dasharray: var(--stroke-dash-boundary); }
.sv .err-ring { fill: none; stroke: var(--state-active); stroke-width: var(--stroke-hairline); opacity: 0; transform-origin: center; transform-box: fill-box; }
.sv.resolved .err-ring { animation: m-ring var(--duration-ring) var(--ease-system) var(--duration-focus) 3; }
@media (prefers-reduced-motion: reduce) { .sv.resolved .err-ring { animation: none; } }