.flows *{box-sizing:border-box}.flows{font-family:Arial,sans-serif;color:#182e43;background:#f4f7fa;min-height:100vh}.flows header{height:76px;background:#10203b;color:white;display:flex;align-items:center;padding:0 32px;gap:48px}.flows .brand{font-size:23px;letter-spacing:2px;color:white;text-decoration:none}.flows .brand b{color:#69ddd2}.flows nav{display:flex;gap:26px;font-size:13px}.flows nav a{color:#c5d2e7;text-decoration:none}.flows nav span{color:#79e4d5}.flows .preview{margin-left:auto;border:1px solid #52627c;padding:7px 10px;border-radius:20px;font-size:11px}.flows .intro{padding:32px;display:flex;justify-content:space-between;gap:35px}.flows .intro small,.flows aside>small{font-size:10px;letter-spacing:1.8px;font-weight:700;color:#648092}.flows .intro h1{font-size:32px;line-height:1.16;letter-spacing:-1px;margin:12px 0}.flows .intro em{font-style:normal;color:#138773}.flows .intro p{font-size:13px;color:#607486;line-height:1.7;max-width:610px;margin:0}.flows .disclosure{max-width:340px;padding:18px;border:1px solid #d7e4e4;background:#edf6f4;border-radius:12px;align-self:center}.flows .disclosure strong{font-size:13px}.flows .disclosure p{font-size:12px;margin-top:9px}.flows .disclosure i{display:inline-block;width:7px;height:7px;background:#148d7d;border-radius:50%;margin-right:7px}.flows .toolbar{margin:0 32px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:white;padding:13px;border:1px solid #dce4eb;border-radius:12px 12px 0 0}.flows button,.flows select{font:inherit;font-size:12px;background:white;color:#243f53;border:1px solid #cad7e1;border-radius:7px;padding:9px;cursor:pointer}.flows button:hover{background:#edf6f4}.flows button:disabled{opacity:.45;cursor:default}.flows .toolbar>label:first-child{font-size:11px;display:flex;align-items:center;gap:9px;font-weight:700}.flows .motion{margin-left:auto;font-size:12px;display:flex;align-items:center;gap:6px}.flows .workspace{margin:0 32px;display:grid;grid-template-columns:minmax(0,1fr) 330px;border:1px solid #dce4eb;border-top:0;background:white}.flows .graph{height:580px;position:relative;background:#f8fafc}.flows .module{width:265px;min-height:106px;padding:16px;background:white;border:1px solid #bacbd9;border-radius:12px;box-shadow:0 4px 13px #10203b0a;transition:opacity .2s}.flows .module small{font-size:9px;letter-spacing:1.5px;color:#688297;display:block}.flows .module strong{font-size:17px;display:block;margin:9px 0}.flows .module span{font-size:12px;color:#607486;line-height:1.5;display:block}.flows .module.hub{background:#edf5fa;border-color:#8cb6c9}.flows .module.studio{border-top:4px solid #159a85}.flows .module.future,.flows .module.service{border-style:dashed}.flows .module.output{background:#fff8ec}.flows .module.active{border:3px solid #119581;box-shadow:0 0 0 6px #11958118}.flows .module.dim{opacity:.18}.flows .react-flow__handle{opacity:0}.flows .react-flow__node:focus-visible .module{outline:3px solid #225ed5;outline-offset:4px}.flows .canvas-caption{position:absolute;top:15px;left:18px;font-size:11px;color:#5c788b;pointer-events:none}.flows aside{padding:23px;border-left:1px solid #dce4eb;height:580px;overflow:auto}.flows aside h2{font-size:22px;margin:12px 0}.flows aside p{font-size:12px;line-height:1.65;color:#62788a}.flows .routes h3{font-size:12px;margin-top:24px}.flows .routes article{padding:14px 0;border-bottom:1px solid #e6edf1}.flows .route-direction{font-size:12px;font-weight:700;line-height:1.6}.flows .routes article p{margin:6px 0}.flows .routes article small{font-size:8px;letter-spacing:1px;color:#81919d}.flows footer{padding:18px 32px}.flows .legend{display:flex;gap:20px;flex-wrap:wrap;font-size:11px;color:#5c7284}.flows .legend span{display:flex;gap:7px;align-items:center}.flows .legend i{width:18px;height:3px}.flows .principles{display:grid;grid-template-columns:1fr 1fr;grid-gap:36px;gap:36px;border-top:1px solid #dce4eb;margin-top:18px;padding-top:18px;font-size:12px}.flows .help,.flows .principles p{color:#6a7f8e;line-height:1.6;font-size:11px}.flows .help{margin-top:18px}.flows a:focus-visible,.flows button:focus-visible,.flows input:focus-visible,.flows select:focus-visible{outline:3px solid #2563eb;outline-offset:3px}@media(max-width:900px){.flows .intro{padding:22px;flex-direction:column}.flows .disclosure{max-width:none;align-self:stretch}.flows .workspace{grid-template-columns:1fr;margin:0 16px}.flows aside{border-left:0;border-top:1px solid #dce4eb;height:330px}.flows .toolbar{margin:0 16px}.flows header{padding:16px;height:auto;gap:16px;flex-wrap:wrap}.flows nav{gap:12px}.flows .graph{height:520px}.flows .principles{grid-template-columns:1fr;gap:12px}.flows .motion{margin-left:0}.flows footer{padding:18px}.flows .preview{margin-left:0}}@media(prefers-reduced-motion:reduce){.flows .module{transition:none}}.flows .flow-dot{animation:flow-travel 5s linear infinite;offset-distance:0;offset-rotate:0deg}@keyframes flow-travel{to{offset-distance:100%}}.flows .module:focus-visible{outline:3px solid #2563eb;outline-offset:5px}