.df[data-flow-demo] {
  --df-ink: #192536;
  --df-muted: #505b6e;
  --df-line: #dce2eb;
  position: relative;
  width: 100%;
  padding-block: clamp(36px, 4.6vw, 68px);
  border-block: 1px solid var(--df-line);
  scroll-margin-block-start: 86px;
  color: var(--df-ink);
  background: color-mix(in srgb, var(--df-tint) 32%, #f7f8fb);
  line-height: 1.5;
}
.df .df-anchor { position: absolute; inset-block-start: 0; scroll-margin-block-start: 86px; }
.df *, .df *::before, .df *::after { box-sizing: border-box; }
.df [hidden] { display: none !important; }
.df :focus-visible { outline: 2px solid var(--df-color); outline-offset: 3px; }
.df h2, .df h3, .df p, .df ol { margin: 0; }
.df .icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.df .df-layout {
  display: grid;
  grid-template-columns: minmax(0, .73fr) minmax(0, 1.27fr);
  align-items: center;
  gap: clamp(20px, 3.5vw, 58px);
  width: min(1260px, calc(100% - 2 * clamp(16px, 3.7vw, 52px)));
  margin-inline: auto;
}
.df .df-kicker { display: flex; align-items: center; gap: 7px; color: var(--df-color); font-size: .84rem; font-weight: 760; }
.df .df-copy h2 { margin-block: 10px 12px; color: var(--df-ink); font-size: clamp(2rem, 3.1vw, 3.45rem); font-weight: 820; line-height: 1.09; letter-spacing: -.029em; }
.df .df-copy h2 em { display: block; color: var(--df-color); font-style: normal; }
.df .df-intro { max-width: 44ch; color: var(--df-muted); font-size: clamp(.97rem, 1.3vw, 1.11rem); }
.df .df-tabs { display: grid; margin-block-start: clamp(16px, 2.5vw, 31px); }
.df button { color: inherit; font: inherit; cursor: pointer; }
.df .df-tabs button {
  display: grid;
  grid-template-columns: 27px 1fr 8px;
  align-items: center;
  gap: 6px;
  min-height: 49px;
  padding: 6px 9px;
  border: 0;
  border-block-start: 1px solid var(--df-line);
  border-inline-start: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  text-align: start;
}
.df .df-tabs button:last-child { border-block-end: 1px solid var(--df-line); }
.df .df-tabs button > bdi { color: var(--df-muted); font: 650 .7rem ui-monospace, monospace; }
.df .df-tabs button > strong { font-size: .93rem; }
.df .df-tabs button > span { width: 6px; height: 6px; border-radius: 50%; background: #aeb8c9; }
.df .df-tabs button[aria-selected="true"] { border-inline-start-color: var(--df-color); color: var(--df-color); background: var(--df-tint); }
.df .df-tabs button[aria-selected="true"] > span { background: var(--df-color); }
.df .df-tabs button:hover strong { color: var(--df-color); }

.df .df-board { min-width: 0; overflow: clip; border: 1px solid var(--df-line); border-radius: 17px; background: white; box-shadow: 0 14px 36px #1925380e; }
.df .df-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 6px 9px; flex-wrap: wrap; min-height: 48px; padding: 6px 12px; border-block-end: 1px solid var(--df-line); }
.df .df-toolbar > span, .df .df-toolbar button { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 720; }
.df .df-toolbar > span i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--df-color); }
.df .df-toolbar small { color: var(--df-muted); font-size: .65rem; font-weight: 550; }
.df .df-toolbar button { min-height: 33px; padding: 4px 8px; border: 1px solid var(--df-line); border-radius: 6px; background: white; }
.df .df-toolbar button:hover { color: var(--df-color); border-color: var(--df-color); }
.df .df-toolbar button .icon { width: 13px; height: 13px; color: var(--df-color); }
.df .df-canvas {
  position: relative;
  isolation: isolate;
  height: clamp(283px, 25vw, 365px);
  background: radial-gradient(ellipse at center, var(--df-tint), transparent 72%),
    radial-gradient(circle, #d9e1ed 1px, transparent 1.15px) 0 0 / 16px 16px, #fbfcfe;
}
.df .df-lanes { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(2, 1fr); pointer-events: none; }
.df .df-lanes span { padding: 7px 10px; color: var(--df-muted); font-size: .65rem; font-weight: 650; }
.df .df-lanes span + span { border-block-start: 1px dashed #b4bfd1; background: #fff7; }
.df .df-wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.df :is(.df-line,.df-trace,.df-pulse) { fill: none; vector-effect: non-scaling-stroke; }
.df .df-line { stroke: #9facc1; stroke-width: 1.2; stroke-dasharray: 4 5; }
.df .df-trace { opacity: 0; stroke: var(--df-color); stroke-width: 1.75; }
.df .df-pulse { opacity: 0; stroke: var(--df-color); stroke-width: 5; stroke-linecap: round; stroke-dasharray: .10 .90; }
.df .df-arrow-muted { fill: #9facc1; }
.df .df-arrow-active { fill: var(--df-color); }
.df [data-df-active] .df-trace { opacity: .9; }
.df[data-df-playing] [data-df-active] .df-trace { animation: df-draw .57s ease-out var(--df-delay) both; }
.df[data-df-playing] [data-df-active] .df-pulse { animation: df-pulse .62s ease-out var(--df-delay) both; }
@keyframes df-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes df-pulse { 0% { opacity: 0; stroke-dashoffset: 0; } 18%, 75% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -1; } }
.df .df-node-place { position: absolute; top: var(--df-y); left: var(--df-x); z-index: 1; width: 14.8%; transform: translate(-50%,-50%); }
.df .df-node {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 46px;
  padding: 5px;
  border: 1px solid #cdd5e1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 9px #1925380b;
}
.df .df-node > span, .df .df-result-copy > span, .df .df-mini-path li > span { display: grid; place-items: center; flex: none; width: 23px; height: 23px; border-radius: 6px; color: var(--df-color); background: var(--df-tint); }
.df .df-node .icon { width: 13px; height: 13px; }
.df .df-node bdi, .df .df-node small { display: block; overflow-wrap: anywhere; }
.df .df-node bdi { color: var(--df-ink); font-size: clamp(.66rem, .88vw, .79rem); font-weight: 760; line-height: 1.11; }
.df .df-node small { margin-block-start: 3px; color: var(--df-muted); font-size: .62rem; line-height: 1.08; }
.df .df-node[data-node-kind="source"] { border-style: dashed; }
.df .df-node[data-node-kind="gate"] { border-color: #d4b887; }
.df .df-node[data-node-kind="gate"] > span { color: #7a4a17; background: #fbefd9; }
.df .df-node[data-node-kind="hub"] > span { color: white; background: var(--df-color); }
.df .df-node[data-df-active] { border-style: solid; border-color: var(--df-color); box-shadow: 0 4px 11px color-mix(in srgb, var(--df-color) 15%, transparent); }
.df[data-df-playing] .df-node[data-df-active] { animation: df-step .44s ease-out var(--df-delay) both; }
@keyframes df-step { from { transform: translateY(3px); opacity: .65; } to { transform: none; opacity: 1; } }
.df .df-outcomes { border-block-start: 1px solid var(--df-line); }
.df .df-result-copy { display: flex; align-items: flex-start; gap: 9px; min-height: 79px; padding: 12px 14px; }
.df .df-result-copy > span { width: 31px; height: 31px; }
.df .df-result h3 { color: var(--df-ink); font-size: .95rem; font-weight: 790; }
.df .df-result-copy p { color: var(--df-muted); font-size: .81rem; }
.df .df-mobile { display: none; }
.df .df-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@media (max-width: 900px) {
  .df .df-layout { grid-template-columns: minmax(0, 1fr); gap: 17px; }
  .df .df-tabs { margin-block-start: 15px; }
}
@media (max-width: 650px) {
  .df .df-canvas { display: none; }
  .df .df-mobile { display: block; padding: 11px; border-block-end: 1px solid var(--df-line); background: var(--df-tint); }
  .df .df-mini-path { display: grid; gap: 6px; padding: 0; list-style: none; }
  .df .df-mini-path li { position: relative; display: flex; align-items: center; gap: 7px; padding: 5px 7px; border: 1px solid var(--df-line); border-radius: 6px; background: white; font-size: .81rem; font-weight: 690; }
  .df .df-mini-path li + li::before { position: absolute; inset-block-start: -7px; inset-inline-start: 19px; height: 7px; border-inline-start: 1px solid var(--df-color); content: ""; }
  .df .df-mini-title { margin-block: 8px 3px; color: var(--df-muted); font-size: .7rem; font-weight: 680; }
  .df .df-mini-path + .df-mini-path { margin-block-start: 6px; }
  .df .df-outcomes { border-block-start: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .df *, .df *::before { animation: none !important; }
}