/* Hand-drawn SVG diagram system: one palette (layer tokens from base.css), light + dark via CSS variables */
:root{--dg-grid:#e3e7ee;--dg-card:#fbfcfe;--dg-card-top:#ffffff;--dg-card-stroke:#dde2ea;--dg-edge:#97a1b2;--dg-edge-2:#c3cad6;
  --dg-shadow:rgba(15,23,42,.10);--dg-shadow2:rgba(15,23,42,.07);--dg-step-text:#ffffff;--dg-label:#ffffff;--dg-band:#f6f7f9;--dg-fx:rgba(255,255,255,.95);--accent-c:#6b4cf6}
:root[data-theme=dark]{--dg-grid:#1b1f29;--dg-card:#131720;--dg-card-top:#181d28;--dg-card-stroke:#2a3141;--dg-edge:#5f6a7e;--dg-edge-2:#3a4252;
  --dg-shadow:rgba(0,0,0,.55);--dg-shadow2:rgba(0,0,0,.35);--dg-step-text:#0b0d12;--dg-label:#0f1218;--dg-band:#10131a;--dg-fx:rgba(255,255,255,.75);--accent-c:#a78bfa}
.dg{line-height:1}
.dg svg.pd{display:block;margin:0 auto;height:auto;max-width:100%}
.pd{font-family:var(--font);user-select:none;-webkit-user-select:none}
.pd text{fill:var(--text)}
.pd .mono{font-family:var(--mono);font-feature-settings:normal}
.pd .c-modes{--c:var(--modes);--cb:var(--modes-bg);--cf:var(--modes-fg)}
.pd .c-coding{--c:var(--coding);--cb:var(--coding-bg);--cf:var(--coding-fg)}
.pd .c-ext{--c:var(--ext);--cb:var(--ext-bg);--cf:var(--ext-fg)}
.pd .c-agent{--c:var(--agent);--cb:var(--agent-bg);--cf:var(--agent-fg)}
.pd .c-ai{--c:var(--ai);--cb:var(--ai-bg);--cf:var(--ai-fg)}
.pd .c-tui{--c:var(--tui);--cb:var(--tui-bg);--cf:var(--tui-fg)}
.pd .c-infra{--c:#8b95a7;--cb:var(--infra-bg);--cf:var(--infra-fg)}
:root[data-theme=dark] .pd .c-infra{--c:#7d889c}
.pd .c-err{--c:var(--err);--cb:color-mix(in srgb,var(--err) 10%,var(--surface));--cf:var(--err)}
.pd .c-accent{--c:var(--accent-c);--cb:var(--accent-soft);--cf:var(--accent)}
.pd .c-term{--c:var(--text);--cb:var(--text);--cf:var(--bg)}
/* containers */
.pd .grp-bg{fill:color-mix(in srgb,var(--c) 5.5%,var(--surface));stroke:color-mix(in srgb,var(--c) 34%,transparent);stroke-width:1}
.pd .grp.dash .grp-bg{stroke-dasharray:5 4;fill:color-mix(in srgb,var(--c) 3%,var(--surface))}
.pd .grp .tile{fill:color-mix(in srgb,var(--c) 16%,transparent)}
.pd .grp-t{fill:var(--cf)}
.pd .grp-s{fill:var(--text-3)}
.pd .band{fill:var(--dg-band);stroke:var(--border);stroke-dasharray:3 4}
.pd .band-s{fill:color-mix(in srgb,var(--c) 6%,transparent);stroke:none}
/* nodes */
.pd .card{fill:url(#pd-card);stroke:var(--dg-card-stroke);stroke-width:1}
.pd .nd.strong .card{stroke:color-mix(in srgb,var(--c) 60%,var(--dg-card-stroke));stroke-width:1.25}
.pd .nd .topbar{fill:var(--c)}
.pd .nd .tile{fill:color-mix(in srgb,var(--c) 15%,transparent)}
.pd .ico{fill:none;stroke:var(--c);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pd .n-t{fill:var(--text)}
.pd .n-s{fill:var(--text-2)}
.pd .nd .tag{fill:color-mix(in srgb,var(--c) 14%,transparent)}
.pd .tag-t{fill:var(--cf)}
.pd .k-tint .card{fill:color-mix(in srgb,var(--c) 9%,var(--surface));stroke:color-mix(in srgb,var(--c) 45%,transparent)}
.pd .k-term .card{fill:var(--c);stroke:none}
.pd .k-term .n-t,.pd .k-term .n-s{fill:var(--bg)}
.pd .k-term .tile{fill:color-mix(in srgb,var(--bg) 18%,transparent)}
.pd .k-term .ico{stroke:var(--bg)}
.pd .k-pill .card{fill:color-mix(in srgb,var(--c) 10%,var(--surface));stroke:color-mix(in srgb,var(--c) 50%,transparent)}
.pd .k-pill .n-t{fill:var(--cf)}
.pd .k-dec .card{fill:var(--surface);stroke:color-mix(in srgb,var(--c) 55%,var(--dg-card-stroke));stroke-dasharray:4 3}
.pd .decg{fill:color-mix(in srgb,var(--c) 22%,transparent);stroke:var(--c);stroke-width:1.3}
.pd .k-err .card{fill:color-mix(in srgb,var(--err) 7%,var(--surface));stroke:color-mix(in srgb,var(--err) 55%,transparent)}
.pd .k-err .n-t{fill:color-mix(in srgb,var(--err) 80%,var(--text))}
.pd .k-ghost .card{fill:transparent;stroke:var(--dg-card-stroke);stroke-dasharray:4 3;filter:none}
.pd .k-ghost .n-t{fill:var(--text-3)}
.pd .k-ghost .n-s{fill:var(--text-3)}
/* chips */
.pd .chipg rect{fill:color-mix(in srgb,var(--c) 10%,var(--surface));stroke:color-mix(in srgb,var(--c) 32%,transparent)}
.pd .chipg .chip-t{fill:var(--cf)}
.pd .chipg .dot{fill:var(--c)}
.pd .chipg.plain rect{fill:var(--surface);stroke:var(--dg-card-stroke)}
.pd .chipg.plain .chip-t{fill:var(--text-2)}
.pd .chipg.solid rect{fill:var(--c);stroke:none}
.pd .chipg.solid .chip-t{fill:var(--dg-step-text)}
/* edges */
.pd .ed .ln{fill:none;stroke:var(--dg-edge);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pd .ed .ah{fill:var(--dg-edge);stroke:var(--dg-edge);stroke-width:.8;stroke-linejoin:round}
.pd .ed.k-main .ln,.pd .ed[class*=" c-"] .ln{stroke:var(--c)}
.pd .ed.k-main .ln{stroke-width:2}
.pd .ed.k-main .ah,.pd .ed[class*=" c-"] .ah{fill:var(--c);stroke:var(--c)}
.pd .ed.k-event .ln,.pd .ed.k-dev .ln{stroke-dasharray:5 4}
.pd .ed.k-ref .ln{stroke-dasharray:1.5 4;stroke-width:1.6}
.pd .ed.k-err .ln{stroke:var(--err);stroke-dasharray:5 4}
.pd .ed.k-err .ah{fill:var(--err);stroke:var(--err)}
.pd .ed.k-faint .ln{stroke:var(--dg-edge-2)}
.pd .ed.k-faint .ah{fill:var(--dg-edge-2);stroke:var(--dg-edge-2)}
.pd .ed .fx{fill:none;stroke:var(--dg-fx);stroke-width:1.2;stroke-dasharray:2 14;stroke-linecap:round;animation:pd-flow 1.6s linear infinite;opacity:.9}
@keyframes pd-flow{to{stroke-dashoffset:-32}}
.pd .el rect{fill:var(--dg-label);stroke:var(--dg-card-stroke)}
.pd .el .el-t{fill:var(--text-2)}
.pd .el[class*=" c-"] rect{fill:color-mix(in srgb,var(--c) 8%,var(--dg-label));stroke:color-mix(in srgb,var(--c) 40%,transparent)}
.pd .el[class*=" c-"] .el-t{fill:var(--cf)}
.pd .el.err rect{fill:color-mix(in srgb,var(--err) 7%,var(--dg-label));stroke:color-mix(in srgb,var(--err) 45%,transparent)}
.pd .el.err .el-t{fill:color-mix(in srgb,var(--err) 85%,var(--text))}
.pd .ed .mk{stroke:var(--dg-edge);stroke-width:1.3;stroke-linejoin:round}
.pd .ed .mk.diamond{fill:var(--dg-edge)}
.pd .ed .mk.odiamond,.pd .ed .mk.tri{fill:var(--surface)}
.pd .ed[class*=" c-"] .mk{stroke:var(--c)}
.pd .ed[class*=" c-"] .mk.diamond{fill:var(--c)}
.pd .stp circle{fill:var(--c);stroke:var(--surface);stroke-width:2}
.pd .stp text{fill:var(--dg-step-text);font-family:var(--font)}
.pd .faint{fill:var(--text-3)}
.pd .muted{fill:var(--text-2)}
.pd .strongt{fill:var(--text)}
.pd .cf{fill:var(--cf)}
.pd .lg-t{fill:var(--text-2)}
.pd .lg-sw{fill:color-mix(in srgb,var(--c) 18%,var(--surface));stroke:var(--c)}
.pd .rule{stroke:var(--border);stroke-width:1}
.pd .rule-d{stroke:var(--border-2);stroke-width:1;stroke-dasharray:3 4}
.pd .life{stroke:var(--dg-edge-2);stroke-width:1.2;stroke-dasharray:3 4}
.pd .act{fill:color-mix(in srgb,var(--c) 22%,var(--surface));stroke:color-mix(in srgb,var(--c) 70%,transparent);stroke-width:1}
.pd .fillc{fill:var(--c)}
.pd .fillcb{fill:color-mix(in srgb,var(--c) 14%,var(--surface));stroke:color-mix(in srgb,var(--c) 45%,transparent)}
.pd .codebg{fill:var(--code-bg);stroke:var(--border)}
.pd .hl-row{fill:color-mix(in srgb,var(--accent-c) 9%,transparent)}
/* hover focus */
.pd .nd,.pd .ed,.pd .el,.pd .chipg{transition:opacity .18s ease}
.pd .nd{cursor:default}
.pd.focus .nd:not(.on),.pd.focus .ed:not(.on){opacity:.18}
.pd.focus .nd.on .card{stroke:var(--c);stroke-width:1.6}
.pd.focus .ed.on .ln{stroke-width:2.2}
@media (prefers-reduced-motion:reduce){.pd .ed .fx{display:none}}

.pd .uml-h{fill:var(--cb)}
.pd .k-uml .card{fill:var(--dg-card)}