.lesson-diagram {
  --figure-line: #a2b7ca;
  margin: 0 0 20px;
  border: 1px solid #d4e0e9;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  container-type: inline-size;
}
.lesson-diagram[hidden] { display: none; }
.lesson-diagram-title {
  display: block; color: #19394e; padding: 12px 16px 4px;
  font-size: 14px; line-height: 1.4; font-weight: 680;
}
.lesson-diagram-canvas {
  background: radial-gradient(circle, #dbe5ed .8px, transparent 1px) 0 0 / 12px 12px;
  padding: 12px 16px;
}
.lesson-diagram-path {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 22px; align-items: center;
}
.lesson-diagram-path + .lesson-diagram-path { margin-top: 10px; }
.lesson-diagram-node {
  position: relative; padding: 10px 7px; min-width: 0; text-align: center;
  border: 1px solid var(--figure-line); border-radius: 6px;
  background: #fff; color: #18394f; font: 600 12px/1.4 var(--mono,monospace); overflow-wrap: anywhere;
}
.lesson-diagram-node:nth-child(2) { border-color: #789eb6; background: #edf5f9; }
.lesson-diagram-node:not(:last-child)::before, .lesson-diagram-node:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; pointer-events: none;
}
.lesson-diagram-node:not(:last-child)::before { left: 100%; width: 21px; border-top: 1px solid #678399; }
.lesson-diagram-node:not(:last-child)::after {
  left: calc(100% + 15px); width: 5px; height: 5px; border: solid #678399; border-width: 1px 1px 0 0;
  transform: translateY(-43%) rotate(45deg);
}
.lesson-diagram-object { display: flex; gap: 2px; justify-content: center; margin: 5px 0 2px; }
.lesson-diagram-object span { font-size: 10px; font-weight: 600; line-height: 16px; height: 18px; min-width: 20px; border: 1px solid #84a4b6; background: #fff; border-radius: 3px; }
.lesson-diagram-object.states span { border-radius: 12px; }
.lesson-diagram-object.lock span { border: 2px solid #7093a9; border-radius: 8px 8px 3px 3px; }
.lesson-diagram-object.notify span { background: #e3f2ec; border-color: #92b9a6; }
.lesson-diagram-descriptor { display: block; color: #395569; font: 550 11px/1.4 var(--sans,sans-serif); }
.lesson-diagram-caption { padding: 10px 16px 12px; border-top: 1px solid #e4edf2; font-size: 13px; line-height: 1.55; color: #334f60; }
@container (max-width: 390px) {
  .lesson-diagram-path { grid-template-columns: 1fr; gap: 14px; }
  .lesson-diagram-path + .lesson-diagram-path { border-top: 1px dashed #9eb5c7; padding-top: 12px; margin-top: 12px; }
  .lesson-diagram-node { padding: 5px 8px; }
  .lesson-diagram-node:not(:last-child)::before { left: 50%; top: 100%; height: 13px; width: 0; border: 0; border-left: 1px solid #678399; }
  .lesson-diagram-node:not(:last-child)::after { top: calc(100% + 7px); left: 50%; transform: translateX(-39%) rotate(135deg); }
}