.sys-flow {
  --sys-flow-cream: #f5f3ed;
  --sys-flow-blue: #dbe2d7;
  --sys-flow-apricot: #a58a58;
  --sys-flow-ink: #111111;
  --sys-flow-accent: #26382d;
  --sys-flow-amber: #947c4f;
  --sys-flow-mobile: 0;
  container: sys-flow / inline-size;
  box-sizing: border-box;
  max-width: 1100px;
  width: 100%;
  margin-inline: auto;
  color: var(--sys-flow-ink);
  background: var(--sys-flow-cream);
  border-block: 1px solid #11111126;
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.sys-flow *, .sys-flow *::before, .sys-flow *::after { box-sizing: border-box; }
.sys-flow-inner { padding: 22px 30px 18px; }
.sys-flow-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.sys-flow-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 10px; line-height: 1.4; letter-spacing: .13em; text-transform: uppercase; font-weight: 650; }
.sys-flow-eyebrow > span { width: 6px; height: 6px; background: var(--sys-flow-accent); }
.sys-flow h2 { margin: 0; max-width: 560px; font-family: "Manrope", sans-serif; font-size: clamp(22px, 3.2cqi, 31px); font-weight: 650; letter-spacing: -.045em; line-height: 1.2; }
.sys-flow-toggle { display: flex; align-items: center; flex-shrink: 0; padding: 4px; border: 1px solid #11111133; border-radius: 100px; gap: 3px; }
.sys-flow-toggle button { appearance: none; border: 0; border-radius: 100px; min-height: 40px; min-width: 76px; padding: 9px 19px; font: inherit; font-weight: 600; font-size: 13px; color: var(--sys-flow-ink); background: transparent; cursor: pointer; transition: background .22s ease, color .22s ease; }
.sys-flow-toggle button[aria-pressed="true"] { background: var(--sys-flow-ink); color: var(--sys-flow-cream); }
.sys-flow-toggle button:hover:not([aria-pressed="true"]):not(:disabled) { background: #dbe2d780; }
.sys-flow-toggle button:focus-visible { outline: 3px solid var(--sys-flow-accent); outline-offset: 3px; }
.sys-flow-toggle button:disabled { cursor: default; opacity: .55; }
.sys-flow-stage-labels { display: flex; justify-content: space-between; position: relative; margin-top: 22px; padding-bottom: 9px; border-bottom: 1px solid #11111120; font-size: 9px; line-height: 1.4; letter-spacing: .12em; font-weight: 650; text-transform: uppercase; }
.sys-flow-stage-labels > :first-child { width: 24%; }
.sys-flow-route-label { position: absolute; left: 29%; right: 22%; text-align: center; }
.sys-flow-role-label { width: 18%; text-align: center; }
.sys-flow-diagram { position: relative; height: 280px; margin-top: 5px; isolation: isolate; --sys-flow-mobile: 0; }
.sys-flow-lines { display: block; position: absolute; inset: 0; overflow: visible; pointer-events: none; z-index: 0; }
.sys-flow-fallback { fill: none; stroke: var(--sys-flow-amber); stroke-width: 1.6; stroke-dasharray: 5 6; }
.sys-flow-fallback-mobile { display: none; }
.sys-flow[data-enhanced="true"] .sys-flow-fallback { display: none; }
.sys-flow-sources, .sys-flow-tools { position: absolute; list-style: none; margin: 0; padding: 0; z-index: 1; }
.sys-flow-sources > li + li, .sys-flow-tools > li + li { margin-top: 0; }
.sys-flow-sources { top: 12px; left: 0; width: 24%; display: grid; grid-template-rows: repeat(4, 52px); gap: 16px; }
.sys-flow-source { display: flex; align-items: center; position: relative; gap: 11px; padding: 4px 16px 4px 0; border-bottom: 1px solid #1111113d; background: var(--sys-flow-cream); font-size: 14px; line-height: 1.3; font-weight: 500; }
.sys-flow-source > svg { width: 19px; height: 19px; flex: 0 0 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; }
.sys-flow-source > i { position: absolute; right: -3px; top: calc(50% - 3px); width: 6px; height: 6px; background: var(--sys-flow-amber); border-radius: 50%; transition: background .25s ease; }
.sys-flow-tools { left: 43%; top: 24px; width: 24%; display: grid; grid-template-rows: repeat(3, 64px); gap: 20px; opacity: 0; visibility: hidden; transform: translateY(5px); transition: opacity .28s ease, transform .28s ease, visibility .28s; }
.sys-flow-tool { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--sys-flow-accent); background: var(--sys-flow-blue); }
.sys-flow-tool-number { align-self: flex-start; margin-top: 2px; font-size: 9px; letter-spacing: .04em; opacity: .7; }
.sys-flow-tool strong { display: block; font-family: "Manrope", sans-serif; font-size: 13px; line-height: 1.25; letter-spacing: -.025em; font-weight: 700; }
.sys-flow-tool div > span { display: block; margin-top: 4px; font-size: 10px; line-height: 1.25; }
.sys-flow-port { position: absolute; top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--sys-flow-accent); }
.sys-flow-port-in { left: -3px; }
.sys-flow-port-out { right: -3px; }
.sys-flow-founder { position: absolute; top: 72px; right: 0; width: 18%; height: 136px; border: 1.5px solid var(--sys-flow-ink); border-radius: 100%; background: var(--sys-flow-apricot); display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 1; transition: background .28s ease; }
.sys-flow-founder > svg { width: 29px; height: 29px; margin-bottom: 7px; fill: none; stroke: var(--sys-flow-ink); stroke-width: 1.5; stroke-linecap: round; }
.sys-flow-founder > strong { font-family: "Manrope", sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -.035em; }
.sys-flow-founder-detail { margin-top: 4px; font-size: 10px; line-height: 1.4; }
.sys-flow-founder-port { position: absolute; top: calc(50% - 4px); left: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--sys-flow-ink); }
.sys-flow-summary-label { position: absolute; display: block; max-width: 110px; padding: 3px 5px; color: var(--sys-flow-accent); background: var(--sys-flow-cream); font-size: 10px; line-height: 1.25; font-weight: 600; text-align: center; transform: translate(-50%, -100%); opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s; white-space: nowrap; z-index: 2; }
.sys-flow-caption { display: flex; align-items: flex-start; gap: 11px; min-height: 32px; padding-top: 12px; margin-top: 4px; border-top: 1px solid #11111120; }
.sys-flow-caption-mark { display: block; flex: 0 0 16px; height: 2px; margin-top: 8px; background: var(--sys-flow-amber); transition: background .28s ease; }
.sys-flow-status { margin: 0; max-width: 790px; font-size: 12px; line-height: 1.55; }
.sys-flow-footnote { margin: 6px 0 0 27px; color: #4f6858; font-size: 10px; line-height: 1.5; }
.sys-flow-route { fill: none; stroke: var(--sys-flow-amber); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 7; animation: sys-flow-travel 1.4s linear infinite; transition: stroke .3s ease; }
.sys-flow-operating-line { fill: none; stroke: var(--sys-flow-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .28s ease; }
.sys-flow-collector { stroke-width: 1.2; }
.sys-flow-summary-path { stroke-width: 2; stroke-dasharray: 4 7; animation: sys-flow-travel 1.4s linear infinite; }
.sys-flow[data-state="after"] .sys-flow-route { stroke: var(--sys-flow-accent); }
.sys-flow[data-state="after"] .sys-flow-tools { opacity: 1; visibility: visible; transform: translateY(0); }
.sys-flow[data-state="after"] .sys-flow-founder { background: var(--sys-flow-cream); }
.sys-flow[data-state="after"] .sys-flow-source > i, .sys-flow[data-state="after"] .sys-flow-caption-mark { background: var(--sys-flow-accent); }
.sys-flow[data-state="after"] .sys-flow-summary-label { opacity: 1; visibility: visible; }
.sys-flow[data-state="after"] .sys-flow-operating-line { opacity: 1; }
.sys-flow[data-in-view="false"] .sys-flow-route, .sys-flow[data-in-view="false"] .sys-flow-summary-path { animation-play-state: paused; }
@keyframes sys-flow-travel { to { stroke-dashoffset: -22; } }
html.motion-off .sys-flow *, .sys-flow[data-motion="off"] *, html.motion-off .sys-flow *::before, html.motion-off .sys-flow *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .sys-flow *, .sys-flow *::before, .sys-flow *::after { animation: none !important; transition: none !important; } }

@container sys-flow (max-width: 680px) {
  .sys-flow-inner { padding: 22px 18px 20px; }
  .sys-flow-heading { align-items: flex-start; gap: 18px; flex-direction: column; }
  .sys-flow h2 { max-width: 390px; font-size: 26px; }
  .sys-flow-toggle { align-self: flex-start; }
  .sys-flow-stage-labels { margin-top: 25px; }
  .sys-flow-stage-labels > :first-child { width: 43%; }
  .sys-flow-route-label { display: none; }
  .sys-flow-role-label { width: 37%; }
  .sys-flow-diagram { --sys-flow-mobile: 1; }
  .sys-flow-sources { width: 43%; }
  .sys-flow-source { gap: 8px; padding-right: 8px; font-size: 13px; }
  .sys-flow-source > svg { flex-basis: 17px; width: 17px; height: 17px; }
  .sys-flow-founder { width: 37%; }
  .sys-flow-fallback-desktop { display: none; }
  .sys-flow-fallback-mobile { display: block; }
  .sys-flow-tools { left: 56%; width: calc(44% - 20px); }
  .sys-flow-tool { gap: 0; padding: 8px; }
  .sys-flow-tool-number { display: none; }
  .sys-flow-tool strong { font-size: 13px; line-height: 1.2; }
  .sys-flow-tool div > span { font-size: 10px; }
  .sys-flow[data-state="after"] .sys-flow-diagram { height: 436px; }
  .sys-flow[data-state="after"] .sys-flow-founder { top: auto; bottom: 0; left: 50%; right: auto; transform: translateX(-50%); width: 160px; max-width: 70%; height: 108px; }
  .sys-flow[data-state="after"] .sys-flow-founder > svg { width: 23px; height: 23px; margin-bottom: 3px; }
  .sys-flow[data-state="after"] .sys-flow-founder-port { top: -4px; left: calc(50% - 4px); }
  .sys-flow[data-state="after"] .sys-flow-role-label { width: 44%; text-align: left; padding-right: 20px; }
  .sys-flow-caption { min-height: 0; }
}
/* The media fallback also supports older browsers without container queries. */
@media (max-width: 700px) {
  .sys-flow-inner { padding: 22px 18px 20px; }
  .sys-flow-heading { align-items: flex-start; gap: 18px; flex-direction: column; }
  .sys-flow h2 { max-width: 390px; font-size: 26px; }
  .sys-flow-toggle { align-self: flex-start; }
  .sys-flow-stage-labels { margin-top: 25px; }
  .sys-flow-stage-labels > :first-child { width: 43%; }
  .sys-flow-route-label { display: none; }
  .sys-flow-role-label { width: 37%; }
  .sys-flow-diagram { --sys-flow-mobile: 1; }
  .sys-flow-sources { width: 43%; }
  .sys-flow-source { gap: 8px; padding-right: 8px; font-size: 13px; }
  .sys-flow-source > svg { flex-basis: 17px; width: 17px; height: 17px; }
  .sys-flow-founder { width: 37%; }
  .sys-flow-fallback-desktop { display: none; }
  .sys-flow-fallback-mobile { display: block; }
  .sys-flow-tools { left: 56%; width: calc(44% - 20px); }
  .sys-flow-tool { gap: 0; padding: 8px; }
  .sys-flow-tool-number { display: none; }
  .sys-flow-tool strong { font-size: 13px; line-height: 1.2; }
  .sys-flow-tool div > span { font-size: 10px; }
  .sys-flow[data-state="after"] .sys-flow-diagram { height: 436px; }
  .sys-flow[data-state="after"] .sys-flow-founder { top: auto; bottom: 0; left: 50%; right: auto; transform: translateX(-50%); width: 160px; max-width: 70%; height: 108px; }
  .sys-flow[data-state="after"] .sys-flow-founder > svg { width: 23px; height: 23px; margin-bottom: 3px; }
  .sys-flow[data-state="after"] .sys-flow-founder-port { top: -4px; left: calc(50% - 4px); }
  .sys-flow[data-state="after"] .sys-flow-role-label { width: 44%; text-align: left; padding-right: 20px; }
  .sys-flow-caption { min-height: 0; }
}

.sys-flow-route,.sys-flow-summary-path{marker-end:url(#sys-flow-arrow)}
.sys-flow-arrowhead{fill:var(--sys-flow-amber)}
.sys-flow[data-state="after"] .sys-flow-arrowhead{fill:var(--sys-flow-accent)}
.sys-flow-summary-path{animation-duration:5s}
.sys-flow-eyebrow{font-size:.75rem}.sys-flow-stage-labels{font-size:.68rem}.sys-flow-status{font-size:.82rem}.sys-flow-footnote{font-size:.73rem}