.flow-visual{background:#f5f7ff;border:1px solid #dbe4f8;border-radius:18px;padding:22px;box-shadow:0 18px 50px #1837740b;min-width:0;background-image:none}
.demo-heading,.demo-results-label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;font-weight:700;letter-spacing:1.25px;color:#60749d}
.demo-heading>span{display:flex;align-items:center;gap:8px}.demo-heading i{width:7px;height:7px;border-radius:50%;background:#0d4dff;display:inline-block;box-shadow:0 0 0 4px #e3ebff}
.demo-pause{border:0;background:transparent;color:#546989;font-size:11px;letter-spacing:0;font-weight:600;padding:3px 0}.demo-pause:hover{text-decoration:underline}
.demo-scene{min-width:0}.demo-input{background:#fff;border:1px solid #dbe4f4;border-radius:12px;padding:17px 18px;margin-top:18px;box-shadow:0 9px 25px #1d3a7809}
.demo-input-title{display:flex;align-items:center;gap:11px}.demo-input-mark{display:grid;place-items:center;background:#eaf0ff;color:#0d4dff;width:34px;height:34px;border-radius:8px;font-size:20px;flex:0 0 auto}.demo-input-title>div{min-width:0}.demo-input-title small{display:block;font-size:9px;letter-spacing:1.2px;color:#7584a3;font-weight:700}.demo-input-title strong{display:block;font-family:Manrope,sans-serif;font-size:15px;line-height:1.3}.demo-input-count{margin-left:auto;color:#8c9abc;font-size:10px;white-space:nowrap}
.demo-fields{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:9px;margin-top:16px}.demo-field{background:#f8faff;border:1px solid #e6ecf9;border-radius:7px;padding:8px 9px;min-width:0;overflow:hidden}.demo-field small{display:block;color:#7181a0;font-size:9px;white-space:nowrap}.demo-value{display:block;color:#17345c;font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;max-width:0;opacity:0;transition:max-width .7s ease,opacity .25s ease}.demo-field.is-filled{border-color:#c5d5ff;background:#f1f5ff}.demo-field.is-filled .demo-value{max-width:150px;opacity:1}
.demo-transfer{height:61px;display:flex;align-items:center;justify-content:center;gap:6px;color:#496081;font-size:11px}.demo-transfer strong{font-family:Manrope,sans-serif;color:#fff;background:#0d4dff;padding:6px 10px;border-radius:7px;font-size:14px;letter-spacing:-.4px;box-shadow:0 5px 15px #0d4dff22}.demo-transfer-spark{color:#0d4dff;font-size:18px;opacity:.4;transform:rotate(-30deg);transition:opacity .35s,transform .55s}.is-transferring .demo-transfer-spark{opacity:1;transform:rotate(90deg)}.demo-transfer-arrow{font-size:17px;color:#0d4dff;opacity:.35;transform:translate(-6px,-5px);transition:opacity .35s,transform .55s}.is-transferring .demo-transfer-arrow{opacity:1;transform:translate(0,0)}
.demo-results-label{margin-bottom:11px;font-size:9px}.demo-progress{display:flex;gap:4px}.demo-progress i{width:6px;height:6px;border-radius:50%;background:#d4dff3;transition:background .3s,transform .3s}.demo-progress i.is-filled{background:#0d4dff;transform:scale(1.2)}
.demo-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.demo-document{background:#fff;border:1px solid #e0e7f5;border-radius:9px;padding:12px 13px;min-width:0;min-height:95px;transform:translateY(5px);opacity:.72;transition:border-color .45s,box-shadow .45s,transform .45s,opacity .45s}.demo-document.is-filled{border-color:#a9c0ff;box-shadow:0 7px 18px #0d4dff0d;transform:translateY(0);opacity:1}.demo-document-head{display:flex;align-items:center;gap:7px;border-bottom:1px solid #edf0f7;padding-bottom:7px;margin-bottom:6px}.demo-doc-icon{color:#0d4dff;font-size:17px;line-height:1}.demo-document-head strong{font-size:11px;font-weight:700}.demo-check{margin-left:auto;color:#fff;background:#0d4dff;border-radius:50%;width:16px;height:16px;text-align:center;line-height:16px;font-size:10px;opacity:0;transform:scale(.5);transition:opacity .3s,transform .3s}.demo-document.is-filled .demo-check{opacity:1;transform:scale(1)}.demo-doc-row{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0;line-height:1.4;margin-top:3px}.demo-doc-row small{font-size:9px;color:#8a97ae;white-space:nowrap}.demo-doc-row b{font-size:9px;color:#25436d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0;opacity:0;transition:max-width .6s ease,opacity .25s}.demo-document.is-filled .demo-doc-row b{max-width:110px;opacity:1}.demo-doc-row:after{content:'';height:5px;width:45px;border-radius:5px;background:#e8edf8;flex:0 0 auto}.demo-document.is-filled .demo-doc-row:after{display:none}
.demo-caption{text-align:center;font-size:12px;color:#52698d;font-weight:600;margin:14px 0 0}.flow-visual .diagram-note{border-top:1px solid #dce5f6;margin-top:14px;padding-top:9px;color:#8290aa;text-align:center;font-size:9px}
@media(max-width:1050px){.flow-visual{padding:16px}.demo-input{padding:13px}.demo-fields{gap:5px}.demo-field{padding:7px 6px}.demo-value{font-size:10px}.demo-document{padding:10px}.demo-doc-row b{font-size:8px}}
@media(max-width:760px){.flow-visual{padding:17px}.demo-input{padding:14px}.demo-fields{gap:7px}.demo-field{padding:7px}.demo-value{font-size:11px}.demo-document{padding:11px}.demo-doc-row b{font-size:9px}}
@media(max-width:390px){.demo-field small{font-size:8px}.demo-value{font-size:9px}.demo-input-count{display:none}.demo-document{padding:9px}.demo-doc-row small,.demo-doc-row b{font-size:8px}}
@media(prefers-reduced-motion:reduce){.demo-pause{display:none}.demo-value,.demo-document,.demo-doc-row b,.demo-check,.demo-transfer-spark,.demo-transfer-arrow,.demo-progress i{transition:none}}
.demo-doc-row b{display:block}
.demo-results{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1050px){.demo-results{grid-template-columns:repeat(2,minmax(0,1fr))}}