:root {
  --diagram-process: #205cae;
  --diagram-resource: #a24c0d;
  --diagram-task: #005ac5;
  --diagram-result: #81489c;
  --diagram-data: #087451;
  --diagram-muted: #64748b;
}
:root[data-theme=dark] {
  --diagram-process: #a1c9ff;
  --diagram-resource: #ffbe80;
  --diagram-task: #8dbbff;
  --diagram-result: #e2afff;
  --diagram-data: #83dab5;
  --diagram-muted: #a8b9d1;
}
.lesson-with-diagrams { grid-template-columns: minmax(0, 1fr); }
.lesson-with-diagrams > aside { grid-template-columns: repeat(2,minmax(0,1fr)); }
.diagram-frame {
  display: grid; grid-template-columns: minmax(0,1fr); gap: .7rem;
  margin-block: .9rem; padding: .8rem; border: 1px solid var(--line); border-radius: .7rem;
}
.diagram-frame h3 { margin: 0; }
.diagram-toolbar { gap: .45rem; }
.diagram-toolbar select { width: auto; }
.diagram-node-picker { display: none; }
.diagram-toolbar button { font-size: .85rem; }
.diagram-toolbar output { min-width: 3em; font-variant-numeric: tabular-nums; text-align: center; }
.diagram-viewport {
  overflow: auto; border: 1px solid var(--line); border-radius: .5rem;
  background: var(--bg);
}
.diagram-viewport[data-zoomed=true] { max-height: min(65dvh, 48rem); }
.diagram-svg { display: block; height: auto; margin-inline: auto; }
.diagram-background { fill: var(--bg); }
.diagram-group { fill: var(--panel); stroke: var(--line); stroke-width: 2; }
.diagram-group-label { fill: var(--muted); font-size: 13px; font-weight: 650; }
.diagram-node { cursor: pointer; outline: none; }
.diagram-node rect { fill: var(--soft); stroke: var(--diagram-process); stroke-width: 1.4; }
.diagram-node.green rect { fill: var(--success-bg); stroke: var(--diagram-data); }
.diagram-node.orange rect { fill: var(--warn-bg); stroke: var(--diagram-resource); }
.diagram-node.purple rect { fill: var(--purple-bg); stroke: var(--diagram-result); }
.diagram-node:hover rect, .diagram-node:focus rect, .diagram-node[aria-pressed=true] rect { stroke-width: 3; }
.diagram-node:focus-visible rect { stroke: var(--diagram-resource); stroke-dasharray: 5 2; }
.diagram-node text { fill: var(--text); font-size: 14px; font-weight: 650; pointer-events: none; }
.diagram-edge-label {
  font-size: 12px; font-weight: 650; paint-order: stroke fill;
  stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round;
}
.diagram-legend {
  display: flex; flex-wrap: wrap; gap: .3rem .85rem; margin: 0; padding: 0;
  list-style: none; color: var(--muted); font-size: .83rem;
}
.diagram-legend li { display: inline-flex; align-items: center; gap: .35rem; }
.diagram-legend i { width: 1.25em; border-width: 2px 0 0; }
.diagram-info {
  padding: .7rem .85rem; border: 1px solid var(--line); border-left: 3px solid var(--link);
  border-radius: .45rem; background: var(--panel);
}
.diagram-info p { margin: .2rem 0 .35rem; }
.diagram-related { font-size: .87rem; margin-top: .4rem; }
.diagram-note, .diagram-frame summary { margin: 0; font-size: .85rem; color: var(--muted); }
.diagram-dialog {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: .7rem;
  border: none; color: var(--text); background: var(--panel);
}
.diagram-dialog .diagram-frame { margin: 0; }
.diagram-dialog .diagram-viewport { max-height: 72dvh; }
.diagram-dialog::backdrop { background: #0b1224cf; }
@media (max-width: 680px) {
  .lesson-with-diagrams > aside { grid-template-columns: minmax(0,1fr); }
  .diagram-frame { padding: .45rem; }
  .diagram-node-picker { display: block; }
}