/* An explanatory diagram, not a background effect. */
.file-flow{display:flex;align-items:center;justify-content:center;gap:28px;padding:24px;border-bottom:1px solid var(--border);background:linear-gradient(110deg,#202124,#20242d 75%,#202124)}
.flow-files{display:flex;gap:10px;order:1}
.flow-file{display:flex;flex-direction:column;align-items:center;gap:7px;color:#aeb6c6;font-size:11px}
.flow-sheet{display:grid;place-items:center;width:43px;height:48px;border:1px solid #454b58;background:#262a33;box-shadow:0 3px 0 #171a20}
.flow-file:nth-child(1) .flow-sheet{transform:rotate(-5deg)}
.flow-file:nth-child(3) .flow-sheet{transform:rotate(5deg)}
.flow-sheet svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.flow-bridge{order:2;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:160px}
.flow-bridge span{font-size:11px;color:var(--muted)}
.flow-bridge svg{width:100%;height:12px;stroke:#657a9e;fill:none;stroke-width:1.2}
.flow-vault{order:3;display:flex;align-items:center;gap:13px;min-height:70px;padding:13px 18px;border:1px solid #49628c;background:#26334a;text-decoration:none;color:#dbe7ff;transition:background-color 120ms,border-color 120ms}
.flow-vault:hover{background:#2b3d5a;border-color:#7ba6f5}
.flow-vault>svg{width:32px;height:38px;fill:none;stroke:#a9c7ff;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.flow-vault strong{display:block;font-size:14px;font-weight:550;letter-spacing:-.2px}
.flow-vault small{display:block;font-size:11px;color:#aebfdc;margin-top:4px}
.file-flow[data-mode=decrypt] .flow-vault{order:1}
.file-flow[data-mode=decrypt] .flow-files{order:3}
@media(max-width:700px){.file-flow{gap:13px;padding:20px 12px;flex-wrap:wrap}.flow-files{gap:7px}.flow-file{font-size:10px}.flow-sheet{width:34px;height:40px}.flow-bridge{min-width:40px;flex:1;max-width:110px}.flow-bridge span{font-size:10px;text-align:center;line-height:1.5}.flow-vault{padding:10px;gap:8px;min-height:62px}.flow-vault>svg{width:24px;height:30px}.flow-vault strong{font-size:12px}.flow-vault small{font-size:10px}}
@media(max-width:380px){.file-flow{gap:8px;padding-inline:8px;flex-wrap:nowrap}.flow-files{gap:5px}.flow-file{font-size:9px}.flow-sheet{width:29px;height:35px}.flow-bridge{max-width:58px;min-width:24px}.flow-bridge span{font-size:9px}.flow-vault{padding:8px 6px;gap:5px}.flow-vault>svg{width:18px}.flow-vault strong{font-size:11px}.flow-vault small{font-size:9px}}