.docs-diagram{--diagram-paper:var(--stock,#15151a);--diagram-surface:var(--card-2,#26262e);--diagram-ink:var(--text,#eeeaf6);--diagram-muted:var(--text-2,#a7a3b8);--diagram-edge:#4a4a52;--diagram-violet:var(--violet,#8b6cf6);--diagram-face:var(--deep,#6b45e8);--diagram-cream:var(--cream,#f2eadb);--diagram-key:var(--key,#251c3f);--diagram-mint:var(--mint,#6fe3c6);margin:32px 0;container-type:inline-size;color:var(--diagram-ink)}
.docs-diagram svg{display:block;width:100%;height:auto;overflow:visible;max-width:680px;margin-inline:auto}
.docs-diagram .dg-paper{fill:var(--diagram-paper)}
.docs-diagram .dg-node rect{fill:var(--diagram-surface);stroke:var(--diagram-edge);stroke-width:1}
.docs-diagram .dg-node text{fill:var(--diagram-ink)}
.docs-diagram .dg-node .dg-sub{fill:var(--diagram-muted)}
.docs-diagram .dg-you rect{fill:var(--diagram-cream);stroke:none}
.docs-diagram .dg-you text{fill:var(--diagram-key)}
.docs-diagram .dg-you .dg-sub{fill:#4e4566}
.docs-diagram .dg-focal rect{fill:var(--diagram-face);stroke:none}
.docs-diagram .dg-focal text{fill:#fff}
.docs-diagram .dg-focal .dg-sub{fill:#e9e2ff}
.docs-diagram .dg-hub rect{fill:var(--diagram-key);stroke:var(--diagram-violet);stroke-width:2}
.docs-diagram .dg-hub text{fill:var(--diagram-cream)}
.docs-diagram .dg-hub .dg-operator{fill:var(--diagram-mint)}
.docs-diagram .dg-name{font:700 16px var(--f-display,'Bricolage Grotesque',system-ui,sans-serif);letter-spacing:-.01em}
.docs-diagram .dg-sub{font:400 13px var(--f-body,'Figtree',system-ui,sans-serif)}
.docs-diagram .dg-label{font:700 12px var(--f-label,'Barlow Condensed','Arial Narrow',sans-serif);letter-spacing:.1em;fill:var(--diagram-muted)}
.docs-diagram .dg-path{fill:none;stroke:var(--diagram-muted);stroke-width:2}
.docs-diagram .dg-head{fill:var(--diagram-muted);stroke:none}
.docs-diagram .dg-return{stroke:var(--diagram-mint);stroke-dasharray:5 4}
.docs-diagram .dg-return-head,.docs-diagram .dg-return-label{fill:var(--diagram-mint)}
.docs-diagram .dg-spoke{stroke:var(--diagram-muted);stroke-width:1.5;stroke-dasharray:5 4}
.docs-diagram figcaption{font:400 14px/1.6 var(--f-body,'Figtree',system-ui,sans-serif);color:var(--diagram-muted);border-top:1px solid var(--rule,#2b2a33);padding-top:16px;margin-top:16px;max-width:680px;margin-inline:auto}
.docs-diagram .dg-mobile{display:none}
.docs-diagram .dg-mobile ol{list-style:none;counter-reset:diagram-step;margin:0;padding:0;display:grid;gap:12px}
.docs-diagram .dg-mobile li{counter-increment:diagram-step;position:relative;margin:0;padding:16px 16px 16px 52px;border:1px solid var(--diagram-edge);border-radius:8px;background:var(--diagram-surface)}
.docs-diagram .dg-mobile li::before{content:counter(diagram-step,decimal-leading-zero);position:absolute;left:16px;top:17px;font:700 14px var(--f-label,'Barlow Condensed',sans-serif);color:var(--diagram-muted)}
.docs-diagram .dg-mobile strong{display:block;font:700 17px/1.3 var(--f-display,'Bricolage Grotesque',system-ui,sans-serif);letter-spacing:-.01em}
.docs-diagram .dg-mobile span{display:block;font:400 15px/1.5 var(--f-body,'Figtree',system-ui,sans-serif);margin-top:4px;color:var(--diagram-muted)}
.docs-diagram .dg-mobile .dg-mobile-you{background:var(--diagram-cream);color:var(--diagram-key);border-color:transparent}
.docs-diagram .dg-mobile .dg-mobile-you span,.docs-diagram .dg-mobile .dg-mobile-you::before{color:#4e4566}
.docs-diagram .dg-mobile .dg-mobile-focal{background:var(--diagram-face);color:#fff;border-color:transparent}
.docs-diagram .dg-mobile .dg-mobile-focal span,.docs-diagram .dg-mobile .dg-mobile-focal::before{color:#e9e2ff}
.docs-diagram .dg-mobile .dg-mobile-note{margin:16px 0 0;padding:16px 0;border-top:1px solid var(--diagram-edge)}
.docs-diagram .dg-mobile .dg-mobile-return strong{color:var(--diagram-mint)}
.docs-diagram .dg-mobile .dg-mobile-hub{margin:0 0 20px;padding:20px 16px;text-align:center;border:2px solid var(--diagram-violet);border-radius:8px;background:var(--diagram-key);color:var(--diagram-cream)}
.docs-diagram .dg-mobile .dg-mobile-hub span{color:var(--diagram-mint);font-size:18px}
.dg-money-mobile{max-width:420px;margin-inline:auto}
.dg-money-funding{position:relative;padding-right:30px}
.docs-diagram .dg-money-mobile ol{gap:24px}
.docs-diagram .dg-money-mobile li,.dg-money-bankroll{padding:10px 14px}
.docs-diagram .dg-money-mobile li::before{content:none}
.dg-money-mobile li:not(:last-child)::after{
  content:"";position:absolute;left:50%;top:calc(100% + 4px);
  width:7px;height:7px;border:solid var(--diagram-muted);border-width:0 2px 2px 0;
  transform:translateX(-50%) translateY(3px) rotate(45deg);
}
.dg-money-exchange{display:grid;grid-template-columns:1fr 1fr;text-align:center;gap:8px;padding:4px 0;margin-right:30px}
.docs-diagram .dg-money-exchange span{margin:0;font-size:13px}
.dg-money-exchange b{font-size:19px;padding-inline:4px}
.dg-money-bankroll{margin-right:30px;border:1px solid var(--diagram-edge);border-radius:8px;background:var(--diagram-surface)}
.dg-money-return{margin:0 4px 8px;text-align:right}
.docs-diagram .dg-money-return strong{color:var(--diagram-mint);font-size:13px}
.docs-diagram .dg-money-return-path{
  position:absolute;top:32px;right:5px;bottom:32px;width:25px;margin:0;
  border:2px dashed var(--diagram-mint);border-left:0;border-radius:0 8px 8px 0;
}
.dg-money-return-path::before{
  content:"";position:absolute;left:0;top:-5px;width:7px;height:7px;
  border:solid var(--diagram-mint);border-width:0 0 2px 2px;transform:rotate(45deg);
}
.docs-diagram .dg-vault-cycle .dg-sub{font-size:15px;font-weight:500}
.docs-diagram .dg-vault-cycle .dg-short{display:none}
@container (max-width:600px){
  .docs-diagram .dg-wide{display:none}
  .docs-diagram .dg-mobile{display:block}
  .docs-diagram .dg-vault-cycle .dg-node:not(.dg-hub) text:not(.dg-short){display:none}
  .docs-diagram .dg-vault-cycle .dg-short{display:block;font-size:clamp(17px,calc(39.5px - 3.75cqw),29px)}
  .docs-diagram .dg-vault-cycle .dg-hub .dg-name{font-size:clamp(17px,calc(34px - 2.9cqw),26px)}
}
@media(max-width:640px){.docs-diagram .dg-wide{display:none}.docs-diagram .dg-mobile{display:block}}
@media print{.docs-diagram{break-inside:avoid}.docs-diagram svg{max-width:680px}}
@media(forced-colors:active){.docs-diagram .dg-node rect{fill:Canvas;stroke:CanvasText}.docs-diagram .dg-node text,.docs-diagram .dg-node .dg-sub,.docs-diagram .dg-hub .dg-operator,.docs-diagram .dg-label{fill:CanvasText}.docs-diagram .dg-path{stroke:CanvasText}.docs-diagram .dg-head{fill:CanvasText}.docs-diagram .dg-paper{fill:Canvas}}
