.basics-content { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 18px; }
.foundation-path-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 0; }
.foundation-path-nav a { display: flex; align-items: baseline; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; height: 100%; }
.foundation-path-nav span { font-weight: 700; }
.foundation-next { margin: 16px 0 0; }
.foundation-lesson { min-width: 0; overflow-wrap: anywhere; }
.foundation-lesson svg { max-width: 100%; height: auto; }
.foundation-lesson img { display: block; width: 100%; max-width: 560px; height: auto; margin: auto; }
.foundation-small-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.foundation-small-choices form { min-width: 0; max-width: 100%; }
.foundation-small-choices .button { margin: 0; text-align: left; }
.foundation-concept, .foundation-checkpoint { border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 20px 0; background: var(--mint); }
.foundation-model-steps { padding-left: 1.5em; }
.foundation-model-steps > li { padding-left: 6px; margin: 10px 0; }
.foundation-model-step { margin: 0; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.foundation-model-step > summary, .foundation-checkpoint summary, .foundation-words summary, .foundation-mistake summary { min-height: 44px; display: list-item; align-content: center; font-size: 16px; font-weight: 600; }
.foundation-words dd { margin-left: 0; margin-bottom: 12px; }
.foundation-checkpoint h3 { margin-top: 0; }
.chemistry-concept-scroll { overflow-x: auto; max-width: 100%; border: 1px solid var(--line); }
.foundation-lesson .chemistry-concept-scroll img { width: 900px; min-width: 900px; max-width: none; height: auto; }
.basics-section { scroll-margin-top: 80px; }
.basics-video { background: #f1f6ed; border: 1px solid #d6e0cf; border-radius: 14px; padding: 20px; }
.basics-video .eyebrow { font-size: 10px; letter-spacing: 1.5px; margin: 0 0 10px; }
.basics-video h2 { margin: 0 0 16px; font-size: 21px; }
.basics-video h3 { font-size: 18px; }
.basics-video p { line-height: 1.65; }
.video-details > summary { cursor: pointer; font-size: 13px; min-height: 36px; }
.video-placeholder { padding: 18px; text-align: center; border: 1px dashed #9aac91; border-radius: 10px; background: #fbfcf8; }
.video-placeholder > span { display: block; font-size: 36px; color: #47745a; line-height: 1; }
.video-placeholder p { margin: 10px 0 0; }
.topic-video-player { width: 100%; min-width: 200px; margin: 16px 0; }
.topic-video-player iframe { display: block; border: 0; width: 100%; min-height: 200px; aspect-ratio: 16 / 9; }
.basics-section { border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.basics-section > summary { cursor: pointer; font-weight: 650; font-size: 18px; min-height: 40px; }
.basics-section[open] > summary { margin-bottom: 14px; }
.basics-section .cards { display: grid; grid-template-columns: 1fr; gap: 12px; }
.basics-section .panel { padding: 14px; margin: 0 0 12px; }
.basics-section h2 { font-size: 19px; }
.basics-section .button { white-space: normal; }
@media(max-width: 450px) { .basics-video { padding: 12px; } .basics-section { padding: 12px; } .foundation-path-nav { grid-template-columns: 1fr; } }