/* The route uses ordinary text and vector shapes so it reflows on a phone. */
article ol.lesson-route {
  --route-purple: #7955a1;
  --route-ink: #292332;
  --route-muted: #5e5669;
  --route-line: #ddd0ec;
  --route-card: #faf8fc;
  --route-tint: #f3eef8;
  display: grid;
  grid-auto-rows: 1fr;
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 1.5rem auto 2.5rem;
  max-width: 520px;
}
:root[saved-theme="dark"] article ol.lesson-route {
  --route-purple: #c2a1e9;
  --route-ink: #eef1f4;
  --route-muted: #c4ccd4;
  --route-line: #534260;
  --route-card: #211d28;
  --route-tint: #30263c;
}
article .lesson-route-step { display: flex; position: relative; margin: 0; padding: 0 0 0 52px; }
.lesson-route-step:not(:last-child)::before {
  content: ""; position: absolute; left: 18px; top: 25px; bottom: -40px;
  width: 3px; background: var(--route-line);
}
.lesson-route-number {
  position: absolute; top: 4px; left: 0; z-index: 1;
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; background: var(--route-purple); color: #fff;
  font: 700 15px/1 Arial, sans-serif;
}
.lesson-route-card {
  box-sizing: border-box;
  width: 100%;
  min-height: 312px;
  display: flex; flex-direction: column;
  padding: 18px 20px 22px; border: 1px solid var(--route-line); border-radius: 16px;
  background: var(--route-card); color: var(--route-ink);
}
.lesson-route-step:nth-child(3) .lesson-route-card { background: var(--route-tint); }
article .lesson-route-card h3 { margin: 0; font: 700 21px/1.4 Georgia, serif; overflow-wrap: normal; }
article .lesson-route-card h3 a { color: inherit; background: transparent; text-decoration: none; font-weight: inherit; }
article .lesson-route-card h3 a:hover { text-decoration: underline; text-decoration-color: var(--route-purple); }
article .lesson-route-card h3 a:focus-visible { outline: 2px solid var(--route-purple); outline-offset: 4px; }
.lesson-route-card .external-icon { display: none; }
article .lesson-route-card p { margin: 22px 0 24px; color: var(--route-muted); font: 400 16px/1.55 Arial, sans-serif; }
article .lesson-route-card ul {
  list-style: disc outside; margin: auto 0 0; padding: 17px 0 0 19px;
  border-top: 1px solid var(--route-line);
  font: 400 16px/1.55 Arial, sans-serif;
}
article .lesson-route-card ul li { margin: 0 0 5px; padding: 0; }
article .lesson-route-card ul li:last-child { margin-bottom: 0; }
.lesson-route-card li::marker { color: var(--route-purple); }
@media (max-width: 400px) {
  article .lesson-route-step { padding-left: 43px; }
  .lesson-route-number { width: 32px; height: 32px; font-size: 14px; }
  .lesson-route-step:not(:last-child)::before { left: 15px; }
  .lesson-route-card { padding-left: 14px; padding-right: 14px; }
}