.diagram{--panel:var(--card,var(--background));--line:#7f7f8c2e;--line-strong:#7f7f8c59;--fg:var(--foreground);--fg-soft:color-mix(in srgb, var(--foreground) 80%, transparent);--muted:var(--muted-foreground);--ring:#7f7f8c33;--brand:#2563eb;--brand-soft:#2563eb1a;--bg:var(--background);--bg-soft:var(--muted);--d-person:#8b5cf6;--d-client:#0ea5e9;--d-app:#3b82f6;--d-gateway:#f59e0b;--d-service:#10b981;--d-data:#ec4899;--d-infra:#6366f1;--d-event:#f97316;--d-state:#14b8a6;--d-external:#94a3b8;--d-s1:#3b5bfd;--d-s2:#10b981;--d-s3:#f59e0b;--d-s4:#ec4899;--d-s5:#8b5cf6;--d-s6:#0ea5e9;--ease-out:cubic-bezier(.16, 1, .3, 1);background:var(--panel);box-shadow:inset 0 0 0 1px var(--ring);border-radius:28px;margin:2rem 0;overflow:hidden}.diagram:focus-visible{outline-offset:3px}.diagram-full{z-index:100;flex-direction:column;margin:0;display:flex;position:fixed;inset:16px;box-shadow:0 30px 80px -20px #00000073}.diagram-full .diagram-canvas{flex:1;min-height:0}.diagram-full .diagram-canvas svg{height:100%}.diagram-bar{border-bottom:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;padding:.6rem .75rem .6rem 1rem;display:flex;margin:0!important}.diagram-title{color:var(--fg);font-size:.92rem;font-weight:620}.diagram-tools,.diagram-legend{flex-wrap:wrap;gap:.25rem;display:flex}.diagram-tools button,.diagram-legend button,.diagram-steps button{border:1px solid var(--line);color:var(--fg-soft);background:var(--bg);border-radius:8px;padding:.25rem .6rem;font-size:.78rem}.diagram-tools button:hover,.diagram-legend button:hover,.diagram-steps button:hover:not(:disabled){border-color:var(--line-strong);color:var(--fg)}.diagram button:disabled{opacity:.45;cursor:default}.diagram-legend button{align-items:center;gap:.35rem;display:inline-flex}.diagram-legend button[aria-pressed=false]{opacity:.45;text-decoration:line-through}.diagram-legend i{border-radius:3px;width:10px;height:10px;display:inline-block}.diagram-canvas{background:radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--fg) 9%, transparent) 1px, transparent 0) 0 0 / 18px 18px;position:relative;overflow:hidden}.diagram-canvas svg{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.diagram-canvas svg:active{cursor:grabbing}.diagram-hint{color:var(--muted);pointer-events:none;font-size:.7rem;position:absolute;bottom:6px;right:10px;margin:0!important}.diagram-panel{border-top:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem 1.5rem;padding:.8rem 1rem;font-size:.9rem;display:flex;margin:0!important}.diagram-panel p{margin:0}.diagram-panel>div:first-child{flex:320px}.diagram-panel-title{color:var(--fg);font-weight:620}.diagram-steps{align-items:center;gap:.5rem;display:flex}.diagram-steps .primary{background:var(--brand);color:#fff;border-color:var(--brand)}.diagram-dots{gap:5px;display:flex}.diagram-dots button{background:var(--line-strong);border:0;border-radius:99px;width:8px;height:8px;padding:0;transition:width .3s cubic-bezier(.4,0,.2,1),background .3s}.diagram-dots button.on{background:var(--brand);width:18px}.diagram-fade{animation:.38s cubic-bezier(.4,0,.2,1) diagram-fade}.diagram-steps button{transition:background .2s,border-color .2s,transform .12s}.diagram-steps button:active:not(:disabled){transform:scale(.96)}.diagram-link{color:var(--brand);margin-top:.3rem;font-size:.85rem}.diagram-caption{color:var(--muted);padding:0 1rem .8rem;font-size:.85rem;margin:0!important}.diagram-text{padding:1rem 1.25rem;font-size:.92rem}.diagram-text ul,.diagram-text ol{padding-left:1.2rem;list-style:outside}.diagram-text ol{list-style:decimal}.diagram-text>*+*{margin-top:.9rem}.d-group rect{fill:color-mix(in srgb, var(--fg) 3%, transparent);stroke:var(--line-strong);stroke-dasharray:5 5}.d-group text{fill:var(--muted);letter-spacing:.02em;font-size:12px;font-weight:600}.d-node{cursor:pointer;transition:opacity .45s cubic-bezier(.4,0,.2,1)}.d-node rect:first-child{fill:var(--panel);stroke:color-mix(in srgb, var(--c) 55%, var(--line));stroke-width:1.4px;transition:stroke-width .3s,stroke .3s,fill .45s}.d-node .d-stripe{fill:var(--c)}.d-node text{fill:var(--fg);font-size:14.5px;font-weight:560}.d-node:hover rect:first-child,.d-node.selected rect:first-child,.d-node.on rect:first-child{stroke:var(--c);stroke-width:2.4px}.d-node.on rect:first-child{fill:color-mix(in srgb, var(--c) 9%, var(--panel))}.d-more{fill:var(--c);opacity:.6}.d-edge path{fill:none;stroke:var(--line-strong);stroke-width:1.7px;transition:opacity .45s cubic-bezier(.4,0,.2,1),stroke .45s,stroke-width .3s}.d-edge{transition:opacity .45s cubic-bezier(.4,0,.2,1)}.d-edge.on path{stroke:var(--brand);stroke-width:2.4px}.d-edge rect{fill:var(--panel);stroke:var(--line)}.d-edge text{fill:var(--muted);font-size:12px;transition:fill .45s}.d-edge.on text{fill:var(--brand)}.d-arrow{fill:var(--line-strong)}.d-arrow.on{fill:var(--brand)}.d-actor line{stroke:var(--line-strong);stroke-dasharray:4 5}.d-actor rect{fill:var(--panel);stroke:var(--line-strong)}.d-actor text{fill:var(--fg);font-size:14.5px;font-weight:600}.d-msg path{fill:none;stroke:var(--fg-soft);stroke-width:1.7px}.d-msg{transition:opacity .45s cubic-bezier(.4,0,.2,1)}.d-msg text{fill:var(--fg-soft);font-size:13px}.d-msg.reply path{stroke:var(--muted)}.d-num{fill:var(--brand)}.d-num-t{font-weight:700;fill:#fff!important;font-size:10px!important}.d-grid line{stroke:var(--line)}.d-grid text,.d-axis{fill:var(--muted);font-size:11px}.d-hit{fill:#0000}.d-hit.on{fill:color-mix(in srgb, var(--fg) 5%, transparent)}.d-line{fill:none;stroke-width:2.4px}.d-area{opacity:.16}.d-bar{transition:opacity .15s}.d-tip rect{fill:var(--panel);stroke:var(--line-strong)}.d-tip text{fill:var(--fg-soft);font-size:11.5px}.d-tip .d-tip-h{fill:var(--fg);font-weight:650}.d-slice{stroke:var(--panel);stroke-width:2px;cursor:pointer;transition:transform .15s}.d-pie-l{fill:var(--fg-soft);font-size:13px}.d-pie-l.on{fill:var(--fg);font-weight:650}