/* Learning Paths & Technical Playbooks */
.lp-hero {
  padding: 32px 0 36px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.lp-badge {
  display: inline-block;
  font: 600 11px/1.6 ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.lp-hero h1 {
  font-size: clamp(32px, 5vw, 44px);
  margin-bottom: 16px;
  line-height: 1.15;
}
.lp-hero .sub {
  font-size: 16px;
  color: var(--text-body);
  max-width: 780px;
  line-height: 1.7;
}
.lp-meta-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.lp-meta-bar span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lp-content {
  padding: 48px 0 64px;
}
.lp-content h2 {
  font-size: 24px;
  margin: 40px 0 16px;
  color: var(--text);
  letter-spacing: -0.02em;
}
.lp-content h2:first-child {
  margin-top: 0;
}
.lp-content p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-body);
  margin-bottom: 20px;
}
.lp-content ul,
.lp-content ol {
  margin: 0 0 24px 20px;
  padding: 0;
  color: var(--text-body);
  line-height: 1.75;
  font-size: 15px;
}
.lp-content li {
  margin-bottom: 8px;
}
.lp-content pre {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 22px;
  overflow-x: auto;
  font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--text);
  margin: 24px 0;
}
.lp-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9em;
}
/* Shrinking inline code is right in prose, but inside a block it compounded
   to 11.7px, below the 12px mobile legibility floor. */
.lp-content pre code {
  font-size: inherit;
}
.lp-content p code,
.lp-content li code {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--accent);
}

/* Chapter Navigation Footer */
.lp-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.lp-nav-link {
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.lp-nav-link:hover {
  border-color: var(--accent);
}
.lp-nav-link.next {
  text-align: right;
}
.lp-nav-label {
  font: 10.5px ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.lp-nav-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

/* Syllabus on Track Overview */
/* Learning-paths hub cards. ".lp-content p" would otherwise make the stack
   line 15.5px, larger than the description above it. */
.lp-content .case-stack {
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 18px 0 0;
}
.track-progress {
  display: block;
  margin-top: 12px;
  font: 600 12px/1.4 ui-monospace, monospace;
  color: var(--accent);
}
.track-progress[hidden] {
  display: none;
}
/* .lp-content prefix: outranks the indented ".lp-content ul" list style. */
.lp-content .lp-syllabus {
  list-style: none;
  margin: 32px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lp-module-card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 20px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 24px;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.lp-module-card:hover {
  border-color: var(--accent);
}
.lp-module-num {
  font: 18px ui-monospace, monospace;
  font-weight: 600;
  color: var(--accent);
}
.lp-module-body h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.lp-module-body p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}
.lp-module-action {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

@media (max-width: 640px) {
  .lp-nav {
    grid-template-columns: 1fr;
  }
  .lp-module-card {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .lp-module-num {
    display: none;
  }
}

/* Track Card Button in case-bottom */
.case-bottom a.button {
  background: var(--accent);
  color: var(--bg) !important;
  font-size: 12.5px;
  font-weight: 650;
  padding: 8px 18px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.2s ease, transform 0.15s ease;
}

.case-bottom a.button:hover {
  opacity: 0.9;
  text-decoration: none;
  transform: translateY(-1px);
}


/* ---------------------------------- Module sidebar (render.mjs moduleToc)
   Wide screens: a sticky list of every module beside the article, so readers
   can jump anywhere without going back to the track page. The page shell
   widens to make room, keeping the article at its usual reading width.
   Narrow screens: the same list as a collapsible "All modules" menu. */
.lp-sidebar {
  display: none;
}
.lp-toc-mobile {
  margin: 0 0 32px;
  padding: 0 32px;
}
.lp-toc-mobile summary {
  cursor: pointer;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-raised);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.lp-toc-mobile[open] summary {
  margin-bottom: 12px;
}
.lp-toc {
  font-size: 13.5px;
  line-height: 1.4;
}
.lp-toc-track {
  display: block;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  margin-bottom: 14px;
}
.lp-toc-track:hover {
  color: var(--accent);
}
.lp-content .lp-toc-part {
  font: 600 10.5px/1.4 ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 18px 0 8px;
}
.lp-content .lp-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lp-content .lp-toc li {
  margin: 0;
}
.lp-toc-list > li > a {
  display: flex;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  border-left: 2px solid transparent;
  color: var(--text-body);
  text-decoration: none;
}
.lp-toc-list > li > a:hover {
  background: var(--bg-raised);
  color: var(--text);
}
.lp-toc-list > li > a[aria-current="page"] {
  background: var(--accent-soft);
  border-left-color: var(--accent);
  color: var(--text);
  font-weight: 600;
}
.lp-toc-num {
  font: 12px/1.6 ui-monospace, monospace;
  color: var(--text-muted);
  flex-shrink: 0;
}
.lp-content .lp-toc-sections {
  margin: 4px 0 8px 30px;
  border-left: 1px solid var(--border);
}
.lp-toc-sections a {
  display: block;
  padding: 4px 0 4px 12px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 12.5px;
  color: var(--text-muted);
  text-decoration: none;
}
.lp-toc-sections a:hover,
.lp-toc-sections a.is-active {
  color: var(--accent);
  border-left-color: var(--accent);
}

@media (min-width: 1100px) {
  /* Same width as the nav bar (--site-maxw), so the logo, breadcrumb, title,
     and sidebar all line up. The article fills the rest of the row; running
     text inside it keeps the reading width set by --measure. */
  .lp-with-sidebar .breadcrumb-bar .wrap,
  .lp-with-sidebar .lp-hero .wrap {
    max-width: var(--site-maxw);
  }
  .lp-main {
    min-width: 0;
  }
  .lp-layout {
    max-width: var(--site-maxw);
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }
  .lp-sidebar {
    display: block;
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding-right: 8px;
  }
  .lp-toc-mobile {
    display: none;
  }
}

/* ------------------------------------------- Pop quiz (```quiz, assets/quiz.js)
   Without JavaScript: a numbered list of questions, each answer behind a
   "Show answer" toggle. With it: .is-enhanced hides that list and quiz.js
   renders one shuffled question at a time in .lp-quiz-app, which can also
   move into a dialog opened from the slide-in .lp-quiz-nudge card. */
.lp-quiz-list {
  padding-left: 22px;
}
.lp-quiz-q {
  margin-bottom: 22px;
}
.lp-quiz-prompt {
  color: var(--text);
  font-weight: 600;
  margin-bottom: 8px;
}
.lp-quiz-options {
  margin: 0 0 8px 22px;
  font-size: 14.5px;
}
.lp-quiz-answer summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 14px;
  padding: 6px 0;
}
.lp-quiz-answer p {
  font-size: 14.5px;
  margin: 8px 0 0;
}
.lp-quiz.is-enhanced .lp-quiz-intro,
.lp-quiz.is-enhanced .lp-quiz-list {
  display: none;
}
.lp-quiz-app {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-raised);
  padding: 22px 24px;
}
.lp-quiz-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lp-quiz-head p {
  margin: 0;
}
.lp-quiz-progress {
  display: block;
  width: 100%;
  height: 6px;
  margin: 10px 0 18px;
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.lp-quiz-progress::-webkit-progress-bar {
  background: var(--border);
}
.lp-quiz-progress::-webkit-progress-value {
  background: var(--accent);
  transition: width 0.3s ease;
}
.lp-quiz-progress::-moz-progress-bar {
  background: var(--accent);
}
.lp-quiz-qtext {
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  margin: 0 0 16px;
}
.lp-quiz-qtext:focus,
.lp-quiz-result:focus {
  outline: none;
}
.lp-quiz-choices {
  display: grid;
  gap: 10px;
}
.lp-quiz-choice {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-body);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.lp-quiz-choice:hover:not(:disabled) {
  border-color: var(--accent);
}
.lp-quiz-choice:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.lp-quiz-choice:disabled {
  cursor: default;
}
.lp-quiz-letter {
  font: 600 12.5px ui-monospace, monospace;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 5px;
  padding: 1px 6px;
  margin-top: 1px;
}
.lp-quiz-choice-text code {
  overflow-wrap: anywhere;
}
.lp-quiz-mark {
  grid-column: 2;
  font-size: 12.5px;
  font-weight: 650;
  margin-top: 6px;
}
.lp-quiz-mark:empty {
  display: none;
}
.lp-quiz-choice.is-right {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.lp-quiz-choice.is-right .lp-quiz-mark {
  color: var(--accent);
}
.lp-quiz-choice.is-wrong {
  border-color: var(--danger);
}
.lp-quiz-choice.is-wrong .lp-quiz-mark {
  color: var(--danger);
}
.lp-quiz-feedback:not(:empty) {
  margin-top: 16px;
  padding: 12px 16px;
  border-left: 3px solid var(--border);
  background: var(--bg);
  font-size: 14.5px;
}
.lp-quiz-feedback.is-right {
  border-left-color: var(--accent);
}
.lp-quiz-feedback.is-wrong {
  border-left-color: var(--danger);
}
.lp-quiz-feedback strong {
  color: var(--text);
}
.lp-quiz-feedback p {
  margin: 4px 0 0;
}
.deepdive .lp-quiz-next,
.deepdive .lp-quiz-again {
  margin-top: 16px;
}
.lp-quiz-result {
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
}
.lp-quiz-message {
  margin: 0 0 12px;
}
.lp-quiz-review {
  margin: 0 0 4px;
  padding-left: 20px;
  font-size: 14.5px;
}
.lp-quiz-review li {
  margin-bottom: 12px;
}
.lp-quiz-review p {
  margin: 0;
}
.lp-quiz-review-q {
  color: var(--text);
}

/* The slide-in card. Bottom left, clear of the chat button (bottom right). */
.lp-quiz-nudge {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 65;
  width: min(360px, calc(100vw - 44px));
  padding: 18px 20px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--bg-raised);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.lp-quiz-nudge.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.lp-quiz-nudge p {
  margin: 0;
}
.lp-quiz-nudge-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.lp-quiz-nudge .lp-quiz-nudge-title {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 650;
  color: var(--text);
}
.lp-quiz-nudge .lp-quiz-nudge-body {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--text-body);
}
.lp-quiz-nudge-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* The quiz, taken in a dialog. */
.lp-quiz-dialog {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text-body);
}
.lp-quiz-dialog::backdrop {
  background: rgba(4, 10, 14, 0.62);
}
.lp-quiz-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.deepdive .lp-quiz-dialog-head h2 {
  margin: 0;
  font-size: 18px;
}
.lp-quiz-dialog .lp-quiz-app {
  border: 0;
  border-radius: 0;
}

@media (max-width: 640px) {
  .lp-quiz-app {
    padding: 18px 16px;
  }
  .lp-quiz-nudge {
    left: 14px;
    right: 14px;
    bottom: 72px;
    width: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp-quiz-nudge,
  .lp-quiz-choice,
  .lp-quiz-progress::-webkit-progress-value {
    transition: none;
  }
}
.motion-paused .lp-quiz-nudge {
  transition: none;
}
@media print {
  .lp-quiz-nudge,
  .lp-quiz-dialog {
    display: none;
  }
}

/* Question kind: a label in the no-script list, a chip in the live quiz. */
.lp-quiz-kind {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lp-quiz.is-enhanced .lp-quiz-kind {
  display: none;
}
.lp-quiz-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.lp-quiz-chip.is-scenario {
  border-color: var(--accent);
  color: var(--accent);
}

/* A pass: a badge that pops in, and confetti across the screen. */
.lp-quiz-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 8px 16px 8px 10px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  animation: lp-quiz-pop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.lp-quiz-badge-icon {
  font-size: 22px;
  line-height: 1;
}
@keyframes lp-quiz-pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.lp-confetti {
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow: hidden;
  pointer-events: none;
}
.lp-confetti-piece {
  position: absolute;
  top: -16px;
  left: var(--x);
  width: 9px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: lp-confetti-fall var(--fall) cubic-bezier(0.25, 0.6, 0.45, 1) var(--delay) forwards;
}
/* Site palette only, so the celebration matches both themes. */
.lp-confetti-piece.c0 { background: var(--accent-bright); }
.lp-confetti-piece.c1 { background: var(--accent2); }
.lp-confetti-piece.c2 { background: var(--accent); }
.lp-confetti-piece.c3 { background: var(--danger); }
.lp-confetti-piece.c4 {
  background: var(--text-muted);
  border-radius: 50%;
  width: 8px;
  height: 8px;
}
@keyframes lp-confetti-fall {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0);
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--drift), 105vh, 0) rotate(var(--spin));
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp-quiz-badge {
    animation: none;
  }
  .lp-confetti {
    display: none;
  }
}
.motion-paused .lp-quiz-badge {
  animation: none;
}
.motion-paused .lp-confetti {
  display: none;
}

/* ---------------------------------------------------------------------------
   Reading progress (reading-progress.js): a thin bar across the top, a ring
   above the chat button with the percentage read and the track's count of
   finished modules, and a short message at each milestone. It never takes
   clicks, and it doesn't animate when motion is reduced or paused. */
.lp-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  height: 3px;
  pointer-events: none;
}
.lp-progress-bar-fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
}
/* The "running" dot at the leading edge glows only while the reader scrolls. */
.lp-progress-bar-dot {
  position: absolute;
  top: -3px;
  left: calc(var(--p, 0) * 100%);
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lp-progress-bar.is-moving .lp-progress-bar-dot {
  opacity: 1;
  animation: lp-progress-glow 0.9s ease-in-out infinite alternate;
}
@keyframes lp-progress-glow {
  from {
    box-shadow: 0 0 0 0 var(--accent);
  }
  to {
    box-shadow: 0 0 10px 3px var(--accent);
  }
}

.lp-progress {
  position: fixed;
  right: 22px;
  bottom: 82px;
  z-index: 60;
  display: grid;
  grid-template-columns: 44px;
  align-items: center;
  column-gap: 10px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--text);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.lp-progress.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.lp-progress-ring {
  grid-column: 1;
  grid-row: 1;
  width: 44px;
  height: 44px;
  transform: rotate(-90deg);
}
.lp-progress-ring circle {
  fill: none;
  stroke-width: 4;
}
.lp-progress-track {
  stroke: var(--border);
}
.lp-progress-fill {
  stroke: var(--accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.25s ease-out;
}
.lp-progress-pct {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Compact by default: only the ring stays on screen, clear of the content.
   The module label and count appear alongside a milestone message. */
.lp-progress-text {
  display: none;
  flex-direction: column;
  font-size: 12px;
  line-height: 1.3;
}
.lp-progress.is-showing {
  grid-template-columns: 44px auto;
  padding-right: 14px;
}
.lp-progress.is-showing .lp-progress-text {
  display: flex;
}
.lp-progress-text span {
  color: var(--text-muted);
}
.lp-progress.is-complete .lp-progress-fill {
  stroke: var(--accent);
}
.lp-progress.is-complete .lp-progress-text b::after {
  content: " \2713";
  color: var(--accent);
}
/* The milestone message slides out above the ring for a few seconds. */
.lp-progress-msg {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: max-content;
  max-width: min(280px, calc(100vw - 44px));
  padding: 9px 13px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--bg-raised);
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.lp-progress-msg:empty {
  display: none;
}
.lp-progress.is-showing .lp-progress-msg {
  opacity: 1;
  transform: none;
}
.lp-progress.is-celebrating .lp-progress-ring {
  animation: lp-progress-pop 0.5s ease-out;
}
@keyframes lp-progress-pop {
  0% {
    transform: rotate(-90deg) scale(1);
  }
  45% {
    transform: rotate(-90deg) scale(1.15);
  }
  100% {
    transform: rotate(-90deg) scale(1);
  }
}

/* Finished modules in the overview cards and the sidebar list. */
.lp-done-mark {
  margin-left: 8px;
  color: var(--accent);
  font-weight: 700;
}
.lp-module-card.is-done {
  border-color: var(--accent);
}

@media (max-width: 640px) {
  .lp-progress,
  .lp-progress.is-showing {
    right: 14px;
    bottom: 70px;
    grid-template-columns: 40px;
    padding: 6px;
  }
  .lp-progress-ring {
    width: 40px;
    height: 40px;
  }
  .lp-progress.is-showing .lp-progress-text {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp-progress,
  .lp-progress-msg,
  .lp-progress-fill,
  .lp-progress-bar-dot {
    transition: none;
  }
  .lp-progress-bar.is-moving .lp-progress-bar-dot,
  .lp-progress.is-celebrating .lp-progress-ring {
    animation: none;
  }
}
.motion-paused .lp-progress-bar.is-moving .lp-progress-bar-dot,
.motion-paused .lp-progress.is-celebrating .lp-progress-ring {
  animation: none;
}
@media print {
  .lp-progress,
  .lp-progress-bar {
    display: none;
  }
}