.flow-guide{--guide-blue:var(--blue,#1468e8);--guide-ink:var(--ink,#14253d);--guide-muted:#5f7186;--guide-line:var(--line,#dce5f0);color:var(--guide-ink);background:#fff}.flow-guide-hero{border-bottom:1px solid var(--guide-line);background-color:#f8fbff;background-image:radial-gradient(#c9d9ec 1px,#0000 1px);background-size:22px 22px;position:relative;overflow:hidden}.flow-guide-hero:before{content:"";pointer-events:none;background:linear-gradient(90deg,#f8fbff 4%,#f8fbfff0 38%,#f8fbff17 100%);position:absolute;inset:0}.flow-guide-hero-inner{grid-template-columns:minmax(0,1fr) minmax(330px,.8fr);align-items:center;gap:60px;min-height:282px;padding-top:48px;padding-bottom:48px;display:grid;position:relative}.flow-guide-hero-copy{z-index:1;position:relative}.flow-guide-eyebrow{color:#426eac;font:700 var(--font-caption)/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;letter-spacing:0;align-items:center;gap:9px;margin-bottom:13px;display:flex}.flow-guide-eyebrow span{background:var(--guide-blue);border-radius:50%;width:7px;height:7px}.flow-guide-hero h1{color:var(--guide-ink);letter-spacing:0;margin:0;font-size:48px;line-height:1.18}.flow-guide-tutorial .flow-guide-hero h1{font-size:clamp(32px,4vw,48px)}.flow-guide-intro{color:#52677d;margin-top:16px;font-size:16px;line-height:1.8}.flow-guide-diagram{min-width:0;height:158px;position:relative}.flow-guide-diagram-line{background:linear-gradient(90deg,#99b6d9,#3989e3 55%,#99b6d9);height:2px;position:absolute;top:78px;left:13%;right:10%}.flow-guide-diagram-line:after{content:"";border-top:2px solid #4f8bd0;border-right:2px solid #4f8bd0;width:8px;height:8px;position:absolute;top:-4px;right:0;transform:rotate(45deg)}.flow-guide-diagram-node{white-space:nowrap;background:#fff;border:1px solid #a8c7ed;border-radius:6px;flex-direction:column;justify-content:center;gap:5px;width:126px;height:88px;padding:17px 18px;display:flex;position:absolute;top:35px;box-shadow:0 1px 2px #1b407019,0 10px 22px #1b407013}.flow-guide-diagram-node:before,.flow-guide-diagram-node:after{content:"";background:#fff;border:2px solid #3f8cde;border-radius:50%;width:8px;height:8px;position:absolute;top:38px}.flow-guide-diagram-node:before{left:-5px}.flow-guide-diagram-node:after{right:-5px}.flow-guide-diagram-node--first{left:0}.flow-guide-diagram-node--second{border-color:#3f8cde;left:calc(50% - 63px);box-shadow:0 1px 2px #1b407019,0 12px 26px #2e7fd424}.flow-guide-diagram-node--third{right:0}.flow-guide-diagram-number{color:#4c84c4;font:700 var(--font-caption)/1.2 ui-monospace, SFMono-Regular, Consolas, monospace}.flow-guide-diagram-node strong{color:#1e3b59;font-size:var(--font-small);font-weight:650;line-height:1.4}.flow-guide-shell{min-height:640px;scroll-margin-top:calc(var(--site-header-height) + 16px);grid-template-columns:218px minmax(0,1fr);align-items:start;display:grid}.flow-guide-sidebar{top:calc(var(--site-header-height) + 28px);padding:42px 20px 40px 0;position:sticky}.flow-guide-sidebar-label{color:#77899d;font-size:var(--font-caption);padding:0 13px 14px;font-weight:650;line-height:1.5}.flow-guide-chapters{flex-direction:column;gap:5px;display:flex}.flow-guide-chapters a{color:#4f6074;min-height:44px;font-size:var(--font-small);text-wrap:balance;border-left:2px solid #0000;border-radius:0 5px 5px 0;align-items:center;gap:12px;padding:10px 12px;line-height:1.5;transition:background .18s,color .18s,border-color .18s;display:flex}.flow-guide-chapters a:hover{color:#145eb4;background:#f2f7fd}.flow-guide-chapters a[aria-current]{border-left-color:var(--guide-blue);color:#135cb5;background:#eaf3ff;font-weight:650}.flow-guide-chapter-number{color:#9aacbf;min-width:20px;font:650 var(--font-caption)/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;flex-shrink:0}.flow-guide-chapters a[aria-current] .flow-guide-chapter-number{color:#2d77ce}.flow-guide-supplement{border-top:1px solid var(--guide-line);color:#1769c9;font-size:var(--font-small);justify-content:space-between;align-items:center;gap:10px;margin:20px 0 0 12px;padding:14px 0;font-weight:650;line-height:1.6;display:flex}.flow-guide-supplement:hover{color:#0e4b98}.flow-guide-reading{border-left:1px solid var(--guide-line);min-width:0;min-height:640px;padding:42px 0 88px 58px}.flow-guide-reading-meta{color:#879aaf;font:650 var(--font-caption)/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;letter-spacing:0;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:28px;display:flex}.flow-guide-progress{color:#477dc0;white-space:nowrap;margin-left:auto}.flow-guide-content{color:#41546b;overflow-wrap:break-word;outline:0;max-width:900px;font-size:16px;line-height:1.9}.flow-guide-content:focus-visible{outline:3px solid var(--guide-blue);outline-offset:8px}.flow-guide-content h2{color:var(--guide-ink);letter-spacing:0;margin:0 0 25px;font-size:29px;font-weight:650;line-height:1.35}.flow-guide-tutorial .flow-guide-content h2{scroll-margin-top:calc(var(--site-header-height) + 24px)}.flow-guide-content h3{color:#253e59;letter-spacing:0;margin:36px 0 14px;font-size:20px;font-weight:650;line-height:1.5}.flow-guide-content p{margin:0 0 20px}.flow-guide-content a{color:#1769c9;text-underline-offset:4px;text-decoration:underline}.flow-guide-content a:hover{color:#0e4b98}.flow-guide-content strong{color:#293f57;font-weight:650}.flow-guide-content ul,.flow-guide-content ol{margin:15px 0 22px;padding-left:24px}.flow-guide-content li{margin:0 0 9px;padding-left:3px}.flow-guide-content li::marker{color:#2c7ed5}.flow-guide-content hr{background:var(--guide-line);border:0;height:1px;margin:38px 0}.flow-guide-content code{color:#174f92;font:max(var(--font-caption), .9em)/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;background:#edf4fb;border-radius:3px;padding:.13em .38em}.flow-guide-content pre{color:#263d55;background:#f6f9fd;border:1px solid #d7e3f1;border-radius:6px;max-width:100%;margin:20px 0 24px;padding:22px 24px;line-height:1.7;overflow:auto}.flow-guide-content pre code{color:inherit;font-size:var(--font-caption);background:0 0;padding:0}.flow-guide-content table{border-collapse:collapse;max-width:100%;font-size:var(--font-small);margin:20px 0 26px;line-height:1.6;display:block;overflow-x:auto}.flow-guide-content th,.flow-guide-content td{text-align:left;vertical-align:top;border:1px solid #dce6f1;min-width:180px;padding:12px 16px}.flow-guide-content th{color:#254563;background:#f3f7fc;font-weight:650}.flow-guide-content img{background:#f6f9fd;border:1px solid #dae6f0;border-radius:6px;width:100%;height:auto;display:block}.flow-guide-content .flow-guide-image-link{cursor:zoom-in;border-radius:6px;display:block}.flow-guide-content .flow-guide-image-link:focus-visible{outline:3px solid var(--guide-blue);outline-offset:4px}.flow-guide-content p>em:only-child{color:#75869a;font-size:var(--font-caption);text-align:center;margin-top:-8px;font-style:normal;line-height:1.65;display:block}.flow-guide-content .flow-guide-chapter[hidden],.flow-guide-content .sl-anchor-link{display:none}.flow-guide-pager{border-top:1px solid var(--guide-line);grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:900px;margin-top:52px;padding-top:28px;display:grid}.flow-guide-pager[hidden]{display:none}.flow-guide-pager-link{border:1px solid var(--guide-line);background:#fff;border-radius:6px;flex-direction:column;gap:7px;min-height:84px;padding:16px 18px;transition:border-color .18s,background .18s;display:flex}.flow-guide-pager-link[hidden]{display:none}.flow-guide-pager-link:hover{background:#f8fbff;border-color:#86b6e9}.flow-guide-pager-link--next{text-align:right;grid-column:2}.flow-guide-pager-direction{color:#73869a;font-size:var(--font-caption);line-height:1.5}.flow-guide-pager-link strong{color:#205b9e;font-size:var(--font-ui);font-weight:650;line-height:1.5}@media (width<=950px){.flow-guide-hero-inner{grid-template-columns:1fr 340px;gap:20px}.flow-guide-diagram-node{width:100px;padding-inline:13px}.flow-guide-diagram-node--second{left:calc(50% - 50px)}.flow-guide-shell{grid-template-columns:188px minmax(0,1fr)}.flow-guide-reading{padding-left:35px}}@media (width<=760px){.flow-guide-hero-inner{min-height:0;padding-top:43px;padding-bottom:43px;display:block}.flow-guide-hero h1{font-size:37px}.flow-guide-intro{font-size:15px;line-height:1.75}.flow-guide-diagram{display:none}.flow-guide-shell{min-height:0;display:block}.flow-guide-sidebar{border-bottom:1px solid var(--guide-line);margin-inline:-18px;padding:20px 18px 0;position:static}.flow-guide-sidebar-label{padding:0 0 11px}.flow-guide-chapters{scrollbar-width:thin;flex-direction:row;gap:16px;margin-bottom:-1px;overflow-x:auto}.flow-guide-chapters a{white-space:nowrap;background:0 0;border-bottom:2px solid #0000;border-left:0;border-radius:0;flex:none;min-height:42px;padding:8px 1px 11px}.flow-guide-chapters a:hover{background:0 0}.flow-guide-chapters a[aria-current]{border-bottom-color:var(--guide-blue);background:0 0}.flow-guide-supplement{margin:12px 0 16px;padding-block:10px 0}.flow-guide-reading{border-left:0;min-height:0;padding:28px 0 62px}.flow-guide-reading-meta{margin-bottom:23px}.flow-guide-content{font-size:15px;line-height:1.8}.flow-guide-content h2{font-size:25px}.flow-guide-content h3{margin-top:30px;font-size:19px}.flow-guide-content table{font-size:var(--font-caption)}.flow-guide-content th,.flow-guide-content td{min-width:140px;padding:10px 12px}.flow-guide-content pre{padding:17px}.flow-guide-pager{margin-top:40px}}@media (width<=430px){.flow-guide-hero h1{font-size:34px}.flow-guide-chapters{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid;overflow-x:visible}.flow-guide-chapters a{text-align:center;white-space:normal;overflow-wrap:anywhere;justify-content:center;min-width:0;min-height:44px;padding:10px 6px;line-height:1.5}.flow-guide-chapter-number{display:none}.flow-guide-pager{gap:8px}.flow-guide-pager-link{padding:13px}}@media (prefers-reduced-motion:reduce){.flow-guide-chapters a,.flow-guide-pager-link{transition:none}}
