:root {
  --bg: #ffffff; --bg2: #f6f8fa; --bg3: #f0f3f6;
  --bdr: #d0d7de; --bdr2: #d8dee4;
  --fg: #1f2328; --fg2: #656d76; --fg3: #8b949e;
  --blue: #0969da; --blue-s: #ddf4ff;
  --green: #1a7f37; --green-s: #dafbe1;
  --amber: #9a6700; --amber-s: #fff8c5;
  --red: #cf222e; --red-s: #ffebe9;
  --purple: #8250df; --purple-s: #fbefff;
}
html.dark {
  --bg: #0d1117; --bg2: #161b22; --bg3: #21262d;
  --bdr: #30363d; --bdr2: #21262d;
  --fg: #e6edf3; --fg2: #8b949e; --fg3: #6e7681;
  --blue: #58a6ff; --blue-s: rgba(56,139,253,0.1);
  --green: #3fb950; --green-s: rgba(46,160,67,0.15);
  --amber: #d29922; --amber-s: rgba(187,128,9,0.15);
  --red: #f85149; --red-s: rgba(248,81,73,0.15);
  --purple: #a371f7; --purple-s: rgba(163,113,247,0.15);
}

.flow-line {
  stroke-dasharray: 8 8;
  animation: flow 1s linear infinite;
}
.flow-line-reverse {
  stroke-dasharray: 8 8;
  animation: flowRev 1s linear infinite;
}
@keyframes flow { to { stroke-dashoffset: -16; } }
@keyframes flowRev { to { stroke-dashoffset: 16; } }

canvas { display: block; max-width: 100%; }