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

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

.tr-panel { min-width: 0; }
.tr-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; margin-block: 24px; }
.tr-overview-panel { min-width: 0; border-bottom: 1px solid #d5dce0; padding-bottom: 12px; }
.tr-overview-panel h4 { margin: 0; color: #34464d; font-size: 17px; line-height: 1.5; }
.tr-overview-panel .tr-figure { margin: 18px auto; }
.tr-solution-part { margin-block: 22px; border-top: 1px solid #d5dce0; padding-top: 18px; }
.tr-solution-part h4, .tr-plain-note h4 { color: #34464d; margin: 0 0 12px; font-size: 17px; line-height: 1.5; }
.tr-plain-note { margin-block: 24px; }
.tr-section-jumps { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-block: 20px 28px; }
.tr-section-jumps a { font-size: 14px; line-height: 1.6; }
.tr-solution-part > .rm-solution-label:first-child { margin-top: 0; }
.tr-subheading, [id^="example-"], [id^="answer-"] { scroll-margin-top: 24px; }
.tr-wide-figure { max-width: 720px; }
@media(max-width:600px) { .tr-overview-grid { grid-template-columns: 1fr; gap: 20px; } }
.tr-intro-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.tr-expression-panel { grid-column: 1 / -1; }
.tr-expression-panel .tr-wide-figure { max-width: 650px; }
@media(max-width:600px) { .tr-intro-grid { grid-template-columns: minmax(0,1fr); } }