/* Lesson internals only. All site layout and navigation use shared styles. */
.ci-section { scroll-margin-top: 24px; }
.ci-section p { line-height: 1.7; }
.ci-key, .ci-warning, .ci-parent-card, .ci-hl {
  margin: 22px 0; padding: 20px; border: 1px solid #d7dfe2;
  border-radius: 14px; background: #f7f8f9;
}
.ci-key { border-left: 5px solid #657b84; }
.ci-warning { border-left: 5px solid #a37c55; background: #fbf7f2; }
.ci-hl { border-left: 5px solid #756a76; }
.ci-key h3, .ci-warning h3, .ci-parent-card h3, .ci-hl h3, .ci-section .rm-example h3 {
  color: #34464d; margin: 0 0 14px; line-height: 1.4;
}
.ci-section .rm-example { margin-block: 24px; }
.ci-section .rm-solution-label {
  color: #34464d; font-weight: 800; border-top: 1px solid #cbd5dc;
  padding-top: 16px; margin-top: 20px;
}
.ci-section .ci-part + .ci-part { border-top: 1px solid #e0e4e8; padding-top: 14px; }
.ci-parts { list-style-type: lower-alpha; }
.ci-parts li { padding-left: 4px; margin: 8px 0; }
.ci-divider { border: 0; border-top: 1px solid #d5dce0; margin: 28px 0; }
.ci-figure { width: min(100%, 460px); margin: 24px auto; }
.ci-figure img { display: block; width: 100%; height: auto; object-fit: contain; }
.ci-figure figcaption { margin-top: 8px; color: #53636d; font-size: 14px; }
.ci-parent-card { background: white; display: flow-root; }
.ci-parent-card .ci-figure { float: left; width: min(42%, 360px); margin: 6px 24px 12px 0; }
.ci-subheading { color: #34464d; margin-top: 32px; }
.ci-math { display: block; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding-block: 5px; }
.ci-table-scroll { max-width: 100%; overflow-x: auto; margin-block: 16px; }
.ci-table-scroll table { width: 100%; border-collapse: collapse; background: white; }
.ci-table-scroll th, .ci-table-scroll td { text-align: left; vertical-align: top; padding: 12px; border-bottom: 1px solid #dce3e8; }
.ci-table-scroll th { background: #f1f4f6; color: #34464d; }
.ci-answer { margin: 16px 0; border: 1px solid #d5cfd9; border-radius: 14px; background: white; }
.ci-answer summary { cursor: pointer; padding: 18px 20px; color: #615566; font-weight: 800; }
.ci-answer[open] summary { border-bottom: 1px solid #e6e1e8; }
.ci-answer-body { padding: 6px 20px 18px; }
.ci-practice > li { margin-bottom: 24px; padding-left: 6px; }
.ci-section a { color: #1745b5; }
.ci-section :focus-visible { outline: 3px solid #2563eb; outline-offset: 4px; }
@media (max-width: 600px) {
  .ci-parent-card .ci-figure { float: none; width: min(100%, 360px); margin: 18px auto; }
  .ci-key, .ci-warning, .ci-hl, .ci-parent-card { padding: 16px 12px; }
  .ci-answer-body { padding-inline: 12px; }
  .ci-section .rm-example { padding: 16px 12px; }
  .ci-table-scroll th, .ci-table-scroll td { padding: 9px; }
}

.ci-panel { min-width: 0; }
.ci-figure-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 24px; align-items: start; margin-block: 24px; }
.ci-figure-grid .ci-figure { margin: 16px auto; }
.ci-figure { max-width: 400px; }
.ci-wide-figure { width: 100%; max-width: 720px; }
.ci-figure-title { font-weight: 700; text-align: center; }
.ci-video { margin: 28px 0; padding: 22px; border: 1px solid #ccd6dc; border-radius: 14px; background: #f7f9fa; }
.ci-video h3 { margin-top: 0; color: #34464d; }
.ci-video-frame { position: relative; aspect-ratio: 16/9; width: 100%; overflow: hidden; border-radius: 10px; background: #e6ecef; }
.ci-video-frame iframe { position: absolute; width: 100%; height: 100%; inset: 0; border: 0; }
.ci-tutorial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; margin-block: 24px; }
.ci-tutorial-link { border: 1px solid #d7dfe2; border-radius: 12px; padding: 18px; }
.ci-tutorial-link h3 { margin: 0; font-size: 18px; }
.ci-tutorial-link p { margin-bottom: 0; }
.ci-answer-link a { font-size: 14px; font-weight: 700; }
.ci-answer { scroll-margin-top: 24px; }
.ci-practice li { line-height: 1.7; }
@media (max-width: 600px) {
 .ci-video { padding: 14px 12px; }
 .ci-figure-grid { gap: 12px; }
 .ci-section .math.inline { overflow-wrap: normal; }
}