#flow-demo{scroll-margin-top:24px;border:1px solid #d9e1e9;background:#f7fafc;padding:28px;margin:32px 0}#flow-demo [hidden]{display:none}
#flow-demo h2{margin-bottom:12px}#flow-demo .demo-intro{font-size:15px}#flow-demo fieldset{border:0;padding:0;margin:22px 0;min-width:0}#flow-demo legend{font-weight:500;font-size:14px;margin-bottom:12px;color:#2d3748}#flow-demo .demo-control-row{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}#flow-demo label{font-size:14px;color:#2d3748}#flow-demo output{font-family:ui-monospace,monospace;color:#2d3748;font-size:15px}#flow-demo input[type=range]{width:100%;accent-color:#6c4b83;cursor:pointer;min-height:38px;margin:4px 0}#flow-demo input[type=checkbox]{width:18px;height:18px;accent-color:#6c4b83;vertical-align:middle;margin:0 8px 0 0}#flow-demo select{font:inherit;font-size:14px;color:#2d3748;background:white;border:1px solid #b9c4d2;padding:8px;max-width:100%}#flow-demo .demo-presets{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0 20px}#flow-demo button{font:inherit;font-size:12px;padding:8px 12px;background:white;border:1px solid #b9c4d2;color:#2d3748;cursor:pointer}#flow-demo button:hover{background:#eaf0f6}#flow-demo button:focus-visible,#flow-demo input:focus-visible,#flow-demo select:focus-visible{outline:3px solid #8a6938;outline-offset:3px}#flow-demo button:disabled{opacity:.55;cursor:wait}#flow-demo .demo-hint{font-size:12px;color:#596779;margin:8px 0 0}#flow-demo .demo-status{font-size:13px;min-height:24px;color:#4b365b;margin:10px 0}#flow-demo .demo-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:20px 0}#flow-demo .demo-metric{padding:16px;background:white;border:1px solid #dce3eb}#flow-demo .demo-metric span{display:block;font-size:12px;line-height:1.5}#flow-demo .demo-metric strong{display:block;font:500 25px/1.4 ui-monospace,monospace;color:#2d3748;margin:8px 0}#flow-demo .demo-chart-wrap{background:white;border:1px solid #dce3eb;padding:12px 4px 4px}#flow-demo .demo-chart{width:100%;height:340px;display:block}#flow-demo .demo-legend{display:flex;flex-wrap:wrap;gap:10px 20px;font-size:12px;margin:14px 0}#flow-demo .demo-legend span{display:flex;align-items:center;gap:7px}#flow-demo .demo-swatch{width:24px;height:0;border-top:3px solid;display:inline-block}#flow-demo .demo-export{display:inline-block;padding:10px 14px;background:white;border:1px solid #b9c4d2;font-size:12px;margin-top:14px;text-decoration:none}#flow-demo details{background:white;margin-bottom:12px}#flow-demo .demo-cost{font-size:13px;margin:18px 0 0}#flow-demo .demo-error{color:#993525}#flow-demo table{min-width:360px;font-size:12px}#flow-demo .demo-table{overflow-x:auto}#flow-demo .demo-table th,#flow-demo .demo-table td{padding:9px}#flow-demo .demo-caption{font-size:12px;margin:12px 0 0;color:#596779}
@media(max-width:640px){#flow-demo{padding:18px 12px;margin:26px -6px}#flow-demo .demo-metric{padding:12px}#flow-demo .demo-metric strong{font-size:21px}#flow-demo .demo-control-row{align-items:flex-start}#flow-demo .demo-chart-wrap{padding:8px 0 0}#flow-demo .demo-chart{height:310px}#flow-demo .demo-legend{font-size:11px;gap:8px 12px}}