#main-content .dw-flow {
  --flow-ink: #191c30;
  --flow-muted: #494e64;
  --flow-accent: #8b3053;
  padding-block: clamp(34px, 5.2vw, 70px);
  background: #f0eef7;
  color: var(--flow-ink);
  scroll-margin-top: 96px;
}
#main-content .dw-strategy-flow { background: #f7f0f4; }
.dw-flow-intro { max-width: 750px; margin-bottom: 18px; }
.dw-flow-intro h2 { margin: 0; font-size: clamp(1.85rem, 3.9vw, 3.55rem); font-weight: 800; line-height: 1.13; }
.dw-flow-intro p { margin: 8px 0 0; color: var(--flow-muted); }
.dw-flow-board { margin: 0; border: 1px solid #dad4e6; border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 16px 42px #3426530f; }
.dw-flow-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 10px clamp(12px,2.5vw,25px); border-bottom: 1px solid #e3ddeb; }
.dw-flow-bar figcaption { font-weight: 800; }
.dw-flow-bar small { margin-inline-start: 7px; color: var(--flow-muted); font-weight: 500; white-space: nowrap; }
.dw-flow-controls { display: flex; flex-wrap: wrap; gap: 6px; }
.dw-flow [hidden] { display: none !important; }
.dw-flow button { cursor: pointer; font: inherit; color: var(--flow-ink); }
.dw-flow-controls button { min-height: 42px; padding: 6px 11px; border: 1px solid #c6bad2; border-radius: 7px; background: #fbf9fe; font-weight: 700; font-size: .86rem; }
.dw-flow-controls button:hover { background: #f0e7f4; }
.dw-flow-controls button[aria-pressed=true] { background: #30243e; color: #fff; }
.dw-flow button:focus-visible { outline: 3px solid #943b64; outline-offset: 3px; }
.dw-flow-content { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); grid-template-areas: 'summary map'; }
.dw-flow-map-wrap {
  grid-area: map;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: clamp(5px,1.8vw,22px);
  background: radial-gradient(circle at center, #ede5f8 0%, transparent 65%), radial-gradient(circle, #d7cde7 1px, transparent 1.5px) #f9f7fc;
  background-size: auto, 17px 17px;
}
.dw-flow-map { position: relative; width: min(100%, 530px); aspect-ratio: 1; }
.dw-flow-map::before { content: ''; position: absolute; inset: 14%; border: 1px solid #d7c9e4; border-radius: 50%; }
.dw-strategy-flow .dw-flow-map::before { inset: 15.6%; }
.dw-flow-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dw-flow-map .dw-flow-path { fill: none; stroke: #a99ab9; stroke-width: 1.8; stroke-dasharray: 1.1 1.5; vector-effect: non-scaling-stroke; }
.dw-flow-map .dw-flow-path.is-active { stroke: #9a4166; stroke-width: 2.5; stroke-dasharray: 100; }
.dw-flow.is-running .dw-flow-path.is-active { animation: dw-flow-draw .58s ease-out var(--flow-delay,0ms) both; }
@keyframes dw-flow-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.dw-flow-map :is(ul,ol) { margin: 0; padding: 0; list-style: none; }
.dw-flow-map li, .dw-flow-hub { position: absolute; left: var(--flow-x,50%); top: var(--flow-y,50%); translate: -50% -50%; }
.dw-flow-map li { width: 25%; }
.dw-strategy-flow .dw-flow-map li { width: 27%; }
.dw-flow-node { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 100%; min-height: 54px; padding: 6px; border: 1px solid #cfc6df; border-radius: 9px; background: #fff; text-align: center; box-shadow: 0 4px 14px #2918420d; }
.dw-flow-node strong { font-size: clamp(.81rem,1.32vw,1.05rem); line-height: 1.18; }
.dw-flow-node small { color: var(--flow-muted); font-size: .7rem; line-height: 1.2; }
.dw-flow-node:hover, .dw-flow-node[aria-pressed=true] { border-color: #a65579; background: #fff2f8; }
.dw-flow-node[aria-pressed=true] strong { color: var(--flow-accent); }
.dw-flow-node .dw-flow-label-short { display: none; }
.dw-flow-hub {
  display: grid; place-content: center; gap: 4px; width: 31%; aspect-ratio: 1; padding: 6px;
  border: 1px solid #694e7a; border-radius: 50%; background: #2a203d; color: #fff; text-align: center;
  box-shadow: 0 0 0 6px #dcd0ea, 0 9px 25px #3a284944;
}
.dw-flow-hub strong { font-size: clamp(.95rem,2vw,1.42rem); line-height: 1.15; }
.dw-flow-hub small { font-size: .72rem; color: #f0e7f6; line-height: 1.2; }
.dw-flow.is-running .dw-flow-hub { animation: dw-flow-pulse .65s ease-out .54s both; }
.dw-strategy-flow.is-running .dw-flow-hub { animation-delay: 1.8s; }
@keyframes dw-flow-pulse { 0%,100% { box-shadow: 0 0 0 6px #dcd0ea, 0 9px 25px #3a284944; } 55% { box-shadow: 0 0 0 13px #b879a17d, 0 9px 25px #3a284944; } }
.dw-flow-summary { grid-area: summary; align-self: center; min-width: 0; padding: clamp(17px,4vw,48px); }
.dw-flow-summary h3 { margin: 0 0 7px; color: var(--flow-accent); font-size: clamp(1.18rem,2.5vw,1.7rem); }
.dw-flow-summary p, .dw-flow-lifecycle span, .dw-flow-return span { color: var(--flow-muted); margin: 0; }
.dw-flow-lifecycle { display: grid; gap: 9px; list-style: none; padding: 0; margin: 17px 0 0; }
.dw-flow-lifecycle li, .dw-flow-return { display: grid; gap: 2px; padding: 8px 10px; border-inline-start: 3px solid #ae5b81; background: #f8f4fb; }
.dw-flow-lifecycle span, .dw-flow-return span { font-size: .88rem; line-height: 1.4; }
.dw-flow-summary .dw-flow-return { margin-top: 17px; }
.dw-flow-return strong { color: var(--flow-ink); }
@media (max-width: 850px) {
  .dw-flow-content { grid-template-columns: minmax(0,1fr); grid-template-areas: 'map' 'summary'; }
  .dw-flow-map { width: min(100%,465px); }
  .dw-flow-summary { border-top: 1px solid #e3ddeb; }
}
@media (max-width: 530px) {
  .dw-flow-node { min-height: 42px; padding: 4px; }
  .dw-flow-node small, .dw-flow-hub small, .dw-flow-node .dw-flow-label-full { display: none; }
  .dw-flow-node .dw-flow-label-short { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .dw-flow.is-running :is(.dw-flow-path,.dw-flow-hub) { animation: none; }
}