.product-flow{max-width:1560px;margin:0 auto;padding:36px 28px 50px}.product-flow__heading{justify-content:space-between;align-items:end;gap:24px;margin-bottom:30px;display:flex}.product-flow h1{letter-spacing:-.035em;margin-bottom:10px;font-size:clamp(28px,3vw,40px);font-weight:500}.product-flow__heading p:last-child{color:var(--muted);font-size:16px}.product-flow__mode{font:11px var(--mono);color:var(--muted);max-width:200px;line-height:1.7}.product-flow__layout{grid-template-columns:290px minmax(0,1fr);align-items:start;gap:28px;display:grid}.product-flow__sidebar{position:sticky;top:20px}.product-flow [role=tablist]{border-top:1px solid var(--line-strong);display:grid}.product-flow [role=tab]{text-align:left;border:0;border-bottom:1px solid var(--line-strong);cursor:pointer;background:0 0;border-left:3px solid #0000;gap:14px;padding:18px 12px;display:flex}.product-flow [role=tab] span{font-family:var(--mono);color:var(--muted)}.product-flow [role=tab][aria-selected=true]{background:var(--accent-soft);border-left-color:var(--accent);color:var(--accent-ink)}.product-flow__detail{padding:28px 12px}.product-flow__detail h2{margin-bottom:12px;font-size:23px;font-weight:500}.product-flow__detail p{color:var(--muted);line-height:1.65}.product-flow__detail dl{margin:24px 0 0}.product-flow__detail dt{font:10px var(--mono);text-transform:uppercase;color:var(--muted);letter-spacing:.07em;margin:20px 0 7px}.product-flow__detail dd{overflow-wrap:anywhere;margin:0;line-height:1.6}.product-flow__panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}.product-flow__intro{padding:24px 24px 18px}.product-flow__intro h2{margin-bottom:8px;font-size:21px;font-weight:500}.product-flow__intro p{color:var(--muted);max-width:720px;line-height:1.6}.product-flow__controls{flex-wrap:wrap;align-items:center;gap:8px;padding:0 24px 12px;display:flex}.product-flow__controls button:not(.btn-primary),.product-flow__controls select{border:1px solid var(--line-strong);background:var(--surface);cursor:pointer;border-radius:7px;min-height:42px;padding:9px 12px}.product-flow__controls button:disabled{opacity:.4;cursor:default}.product-flow__controls label{color:var(--muted);margin-left:auto;font-size:12px}.product-flow__controls>span{font:11px var(--mono);text-align:right;min-width:50px;color:var(--muted)}.product-flow__scrub{padding:0 24px 6px;display:block}.product-flow__scrub input{width:100%;accent-color:var(--accent);cursor:pointer}.product-flow__diagram{border-top:1px solid var(--line-soft);overflow-x:auto}.product-flow__diagram svg{width:100%;min-width:850px;display:block}.product-flow__actor{font:600 15px var(--sans);fill:var(--ink)}.product-flow__role{font:11px var(--mono);fill:var(--muted)}.product-flow__lifeline{stroke:var(--line-strong);stroke-dasharray:4 6}.product-flow__row{fill:#0000}.product-flow__message{cursor:pointer}.product-flow__message .product-flow__arrow{stroke:#a2afad;stroke-width:1.5px}.product-flow__message.internal .product-flow__arrow{stroke-dasharray:3 4}.product-flow__message.simulated .product-flow__arrow{stroke:var(--cost);stroke-dasharray:7 4}.product-flow__label{fill:var(--muted);font:13px var(--sans);paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round}.product-flow__number{fill:var(--muted);font:11px var(--mono)}.product-flow__message.is-complete .product-flow__arrow{stroke:var(--accent)}.product-flow__message.is-active .product-flow__row{fill:var(--accent-soft)}.product-flow__message.is-active .product-flow__arrow{stroke:var(--accent);stroke-width:2.5px}.product-flow__message.is-active .product-flow__label{fill:var(--accent-ink);stroke:var(--accent-soft);font-weight:600}.product-flow__message:focus-visible{outline:none}.product-flow__message:focus-visible .product-flow__row{stroke:var(--accent);stroke-width:2px}.product-flow__packet{fill:var(--accent);animation:linear infinite flow-packet}@keyframes flow-packet{0%{transform:translate(0)}to{transform:translateX(var(--travel))}}.product-flow__legend{border-top:1px solid var(--line-soft);color:var(--muted);flex-wrap:wrap;gap:20px;padding:14px 24px;font-size:12px;display:flex}.product-flow__legend span{align-items:center;gap:8px;display:flex}.product-flow__legend i{border-top:2px solid var(--accent);width:22px}.product-flow__legend i.internal{border-top-style:dotted}.product-flow__legend i.simulated{border-top:2px dashed var(--cost)}.product-flow__footnote{color:var(--muted);padding:0 24px 20px;font-size:12px;line-height:1.6}@media (prefers-reduced-motion:reduce){.product-flow__packet{animation:none}}@media (max-width:900px){.product-flow{padding:24px 16px}.product-flow__heading{flex-direction:column;align-items:start}.product-flow__mode{max-width:none}.product-flow__layout{grid-template-columns:1fr}.product-flow__sidebar{position:static}.product-flow [role=tablist]{grid-template-columns:repeat(3,1fr)}.product-flow [role=tab]{flex-direction:column;gap:6px}.product-flow__detail{padding:20px 4px 0}.product-flow__detail dl{grid-template-columns:135px 1fr;gap:10px;margin-top:16px;display:grid}.product-flow__detail dt{margin:0;padding-top:4px}}.core-flow{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow-x:auto}.core-flow svg{width:100%;min-width:780px;display:block}.core-flow__edges{fill:none;stroke:var(--accent);stroke-width:2px;color:var(--accent)}.core-flow__node rect{fill:var(--surface);stroke:var(--line-strong)}.core-flow__node text{fill:var(--ink);font:600 17px var(--sans);text-anchor:middle}.core-flow__node .core-flow__sub{font:12px var(--sans);fill:var(--muted)}.core-flow__primary rect{fill:var(--accent-soft);stroke:#b4d1cb}.core-flow__bid rect{fill:#fbf7ef;stroke:#e4d7bb}.core-flow__caption{color:var(--muted);justify-content:space-between;gap:20px;margin:16px 0 32px;font-size:13px;line-height:1.6;display:flex}.core-flow__caption span{white-space:nowrap}.core-flow__details-toggle{border:0;border-top:1px solid var(--line-strong);width:100%;color:var(--accent-ink);cursor:pointer;text-align:left;background:0 0;justify-content:space-between;align-items:center;padding:20px 0;font-weight:600;display:flex}.core-flow__details-toggle span{font-size:24px;font-weight:400}@media (max-width:650px){.core-flow__caption{flex-direction:column;gap:6px}}.core-flow svg.core-flow__compact{min-width:0;display:none}@media (max-width:800px){.core-flow svg.core-flow__wide{display:none}.core-flow svg.core-flow__compact{max-height:500px;display:block}}