.challenge-solution {
  margin-top: 24px;
  border: 1px solid var(--line, #343446);
  border-radius: 14px;
  background: linear-gradient(125deg,#1b2332db,#211c30db);
  overflow: hidden;
}
.challenge-solution > summary {
  display: list-item;
  min-height: 44px;
  padding: 18px 22px;
  color: var(--text, #f3f1fa);
  font-weight: 750;
  cursor: pointer;
}
.challenge-solution > summary::marker { color: #a3d7e8; }
.challenge-solution > summary small {
  display: block;
  margin: 5px 0 0 18px;
  color: #b5b2c5;
  font-size: 14px;
  font-weight: 400;
}
.challenge-solution > summary:focus-visible {
  outline: 3px solid #a3d7e8;
  outline-offset: -5px;
  border-radius: 12px;
}
.challenge-solution[open] > summary { border-bottom: 1px solid var(--line, #343446); }
.challenge-solution-body { padding: 22px; background: #121520e6; }
.challenge-solution-body h3 { margin: 26px 0 12px; font-size: 19px; color: var(--text, #f3f1fa); }
.challenge-solution-body li { margin: 10px 0; line-height: 1.8; overflow-wrap: anywhere; }
.challenge-solution-note, .challenge-connection-label { color: #b5b2c5; font-size: 14px; line-height: 1.8; }
.challenge-solution-body .lesson-code-wrap pre {
  padding-right: 20px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
}
.challenge-solution-body .lesson-code-wrap { padding-bottom: 56px; }
.challenge-solution-body .copy-code {
  inset: auto 12px 10px auto;
  min-height: 44px;
  max-width: calc(100% - 24px);
}
#challenge, #challenge-solution { scroll-margin-top: calc(var(--site-header-height, 100px) + 24px); }
@media (max-width: 640px) {
  .challenge-solution > summary { padding: 16px; }
  .challenge-solution-body { padding: 16px; }
  .challenge-solution-body :where(p, li, code) { font-size: 16px; }
  .challenge-solution-body :where(ol, ul) { padding-left: 22px; }
}