.flow-page{--flow-sheet-height:min(82dvh, 720px)}.flow-content{max-width:1800px;margin:0 auto;padding:24px}.flow-intro{margin-bottom:22px}.flow-intro h1{align-items:center;gap:10px;margin-bottom:10px;font-size:22px;font-weight:650;display:flex}.flow-intro p{max-width:1120px;color:var(--text-secondary);line-height:1.9}.flow-intro .flow-intro-hint{margin-top:6px;font-size:12px}.flow-overview{border:1px solid var(--border);background:var(--panel);border-radius:12px;margin-bottom:24px;padding:10px 12px}.flow-overview ol{grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;display:grid}.flow-overview li{min-width:0;position:relative}.flow-overview button{text-align:left;border:1px solid #0000;border-radius:8px;align-items:center;gap:9px;width:100%;min-height:44px;padding:6px 8px;font-size:12px;font-weight:600;display:flex}.flow-overview button:hover,.flow-overview button[aria-current]{background:color-mix(in srgb, var(--flow-color) 8%, var(--panel));border-color:color-mix(in srgb, var(--flow-color) 45%, var(--border))}.flow-step-number{border:1px solid var(--flow-color);background:color-mix(in srgb, var(--flow-color) 10%, var(--panel));font-variant-numeric:tabular-nums;border-radius:50%;flex:0 0 28px;place-items:center;height:28px;font-size:12px;display:grid}.flow-overview-arrow{color:var(--text-muted);position:absolute;top:calc(50% - 7px);right:-20px}.flow-layout{grid-template-columns:minmax(0,1fr) clamp(260px,21vw,310px);align-items:start;gap:20px;display:grid}.flow-map{border:1px solid var(--border);background:var(--panel-2);border-radius:12px;min-width:0}.flow-map-key{border-bottom:1px solid var(--border);min-height:42px;color:var(--text-secondary);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 12px;padding:10px 14px;font-size:11px;display:flex}.flow-map-key>span{align-items:center;gap:8px;display:flex}.flow-key-line{border-top:1px solid var(--text-muted);width:22px;position:relative}.flow-key-line:after{content:"";border-top:1px solid var(--text-muted);border-right:1px solid var(--text-muted);width:5px;height:5px;position:absolute;top:-3px;right:0;transform:rotate(45deg)}.flow-map-key .flow-mobile-hint{display:none}.flow-board{background-image:radial-gradient(var(--border) .7px, transparent .7px);background-size:16px 16px;border-radius:0 0 12px 12px;position:relative}.flow-chart{grid-template-columns:repeat(6,minmax(0,1fr));gap:48px 26px;padding:16px;display:grid}.flow-stage{border-top:2px solid var(--flow-color);min-width:0;position:relative}.flow-stage-heading{z-index:2;background:var(--panel-2);height:116px;padding:10px 3px;scroll-margin-top:20px;position:relative}.flow-stage-top{color:var(--flow-color);justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.flow-stage-number{color:var(--text-secondary);letter-spacing:.08em;font-variant-numeric:tabular-nums;font-size:11px}.flow-stage-heading h2{margin-bottom:5px;font-size:13px;font-weight:650;line-height:1.6}.flow-stage-heading p{color:var(--text-secondary);font-size:11px;line-height:1.7}.flow-stage-active .flow-stage-heading{background:color-mix(in srgb, var(--flow-color) 7%, var(--panel-2))}.flow-stage-nodes{gap:24px;display:grid}.flow-node{z-index:2;border:1px solid var(--border-strong);background:var(--panel);width:100%;height:84px;color:var(--text-primary);text-align:left;border-radius:8px;grid-template-rows:1fr auto;grid-template-columns:minmax(0,1fr) 13px;align-items:start;gap:5px 4px;padding:10px;transition:opacity .12s,border-color .12s,background-color .12s;display:grid;position:relative}.flow-node:before,.flow-node:after{content:"";background:var(--border-strong);border-radius:50%;width:4px;height:4px;position:absolute;top:calc(50% - 2px)}.flow-node:before{left:-3px}.flow-node:after{right:-3px}.flow-node-label{overflow-wrap:anywhere;align-self:center;font-size:12px;font-weight:550;line-height:1.5}.flow-node-jump{color:var(--text-muted);margin-top:2px}.flow-node-summary{color:var(--text-secondary);white-space:nowrap;grid-column:1/-1;font-size:10px;line-height:1.6}.flow-node:hover,.flow-node-connected{border-color:color-mix(in srgb, var(--flow-color) 65%, var(--border))}.flow-node-selected,.flow-node-traced{border-color:var(--flow-color);background:color-mix(in srgb, var(--flow-color) 9%, var(--panel));box-shadow:inset 3px 0 var(--flow-color)}.flow-node-connected:before,.flow-node-connected:after{background:var(--flow-color)}.flow-node-muted{opacity:.32}.flow-page :is(button,a,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:3px}.flow-templates{z-index:2;background:var(--panel-2);color:var(--text-secondary);margin-top:18px;font-size:11px;line-height:1.9;position:relative}.flow-timeline-arrow{display:none}.flow-connections{z-index:1;pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.flow-connection{fill:none;stroke:color-mix(in srgb, var(--text-muted) 55%, var(--border-strong));stroke-width:1.25px;stroke-linecap:round;stroke-linejoin:round}.flow-connections-tracing .flow-connection{opacity:.12}.flow-connections-tracing .flow-connection-active{opacity:1;stroke:var(--flow-color);stroke-width:1.8px}.flow-detail{border:1px solid var(--border);border-top:3px solid var(--flow-color);background:var(--panel);border-radius:12px;outline:none;flex-direction:column;min-width:0;height:max(480px,100dvh - 96px);display:flex;position:sticky;top:20px}.flow-detail-heading{border-bottom:1px solid var(--border);flex-direction:column;flex:0 0 94px;justify-content:center;padding:14px 18px;display:flex;position:relative}.flow-detail-heading>p{color:var(--text-secondary);align-items:center;gap:6px;margin-bottom:6px;font-size:11px;display:flex}.flow-detail-dot{background:var(--flow-color);border-radius:50%;width:6px;height:6px}.flow-detail-heading h2{font-size:15px;font-weight:650;line-height:1.5}.flow-detail-body{overscroll-behavior:contain;overflow-wrap:anywhere;flex:1;min-height:0;padding:18px;font-size:12px;line-height:1.9;overflow-y:auto}.flow-detail-footer{border-top:1px solid var(--border);flex-direction:column;flex:0 0 86px;justify-content:center;gap:8px;padding:12px 18px;font-size:11px;display:flex}.flow-detail-close,.flow-return{display:none}@media (width>=768px) and (width<=1279px){.flow-chart{grid-template-columns:repeat(3,minmax(0,1fr))}.flow-overview{padding:8px}.flow-overview ol{gap:18px}.flow-overview button{gap:6px;padding:5px}.flow-overview-arrow{width:12px;right:-16px}.flow-stage-heading{height:110px}}@media (width>=768px) and (width<=1023px){.flow-chart{grid-template-columns:repeat(2,minmax(0,1fr))}.flow-overview button{text-align:center;flex-direction:column;justify-content:start;min-height:78px}}@media (width<=767px){.flow-content{padding:20px 16px 32px}.flow-theme{margin-left:auto}.flow-intro{margin-bottom:18px}.flow-intro h1{font-size:21px}.flow-intro p{font-size:12px;line-height:1.85}.flow-intro .flow-intro-hint{font-size:11px}.flow-overview{margin-bottom:20px;padding:8px}.flow-overview ol{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 14px}.flow-overview button{gap:6px;min-height:56px;padding:4px 3px;font-size:11px}.flow-step-number{flex-basis:22px;height:22px;font-size:11px}.flow-overview-arrow{width:11px;right:-13px}.flow-overview li:nth-child(3) .flow-overview-arrow{display:none}.flow-layout{display:block}.flow-map{background:0 0;border:0}.flow-map-key{min-height:32px;margin-bottom:12px;padding:0 0 10px}.flow-map-key .flow-desktop-hint{display:none}.flow-map-key .flow-mobile-hint{display:inline}.flow-board{background:0 0}.flow-chart{padding:0;display:block}.flow-stage{border:0;padding:0 0 26px 29px}.flow-stage:not(:last-child):before{content:"";border-left:1px solid var(--border-strong);position:absolute;top:24px;bottom:0;left:9px}.flow-stage-heading{background:0 0;height:auto;padding:0 0 12px;scroll-margin-top:16px}.flow-stage-active .flow-stage-heading{background:0 0}.flow-stage-top{margin:0;position:absolute;top:0;left:-29px}.flow-stage-top>svg{display:none}.flow-stage-number{border:1px solid var(--flow-color);background:var(--panel);letter-spacing:0;border-radius:50%;place-items:center;width:20px;height:20px;font-size:10px;display:grid}.flow-stage-active .flow-stage-number{box-shadow:0 0 0 3px color-mix(in srgb, var(--flow-color) 15%, transparent)}.flow-stage-heading h2{margin-bottom:4px;font-size:14px}.flow-stage-heading p{font-size:11px}.flow-stage-nodes{gap:8px}.flow-node{row-gap:3px;height:66px;padding:10px 12px}.flow-node-label{font-size:13px}.flow-node-summary{font-size:11px}.flow-node:before,.flow-node:after{display:none}.flow-node-muted{opacity:1}.flow-templates{background:0 0;margin-top:10px}.flow-timeline-arrow{background:var(--bg);color:var(--text-muted);display:block;position:absolute;bottom:8px;left:3px}.flow-connections{display:none}.flow-detail{z-index:20;width:100%;height:var(--flow-sheet-height);box-shadow:0 -12px 40px color-mix(in srgb, var(--text-primary) 12%, transparent);border-radius:16px 16px 0 0;display:none;position:fixed;inset:auto 0 0}.flow-detail-open{display:flex}.flow-detail-heading{flex-basis:84px;padding:12px 52px 12px 20px}.flow-detail-body{padding:16px 20px}.flow-detail-footer{padding:12px 20px max(12px, env(safe-area-inset-bottom));flex-basis:98px}.flow-detail-close{width:36px;height:36px;color:var(--text-secondary);border-radius:8px;place-items:center;display:grid;position:absolute;top:16px;right:12px}.flow-detail-close:hover{background:var(--panel-2)}.flow-return{min-height:28px;color:var(--text-secondary);align-self:start;align-items:center;gap:4px;display:flex}.flow-sheet-open .flow-main{scroll-padding-bottom:calc(var(--flow-sheet-height) + 16px)}.flow-sheet-open .flow-content{padding-bottom:calc(var(--flow-sheet-height) + 32px)}}@media (prefers-reduced-motion:reduce){.flow-node{transition:none}}
