.inline-definition { margin: 1rem 0; padding: .7rem 1rem; border-left: 3px solid var(--accent, #58d6c9); background: rgba(88,214,201,.045); border-radius: 0 .45rem .45rem 0; }
.inline-definition summary { cursor: pointer; font-weight: 650; min-height: 28px; }
.inline-definition p { margin: .7rem 0 .2rem; }
.interactive-lesson { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(174,208,203,.25); }
.interactive-lesson .lesson-context { color: var(--muted, #b5c7c3); }
.lesson-drawing { margin: 1.5rem 0; padding: 1rem; border: 1px solid rgba(174,208,203,.25); border-radius: 14px; background: #101d20; }
.lesson-drawing figcaption strong { font-size: 1.15rem; color: #f1f6f4; }
.lesson-drawing figcaption p { margin: .65rem 0 1rem; }
.lesson-drawing-scroll { max-width: 100%; overflow-x: auto; border-radius: 12px; scrollbar-color: #58d6c9 #0a171a; }
.lesson-drawing-svg { display: block; width: 100%; min-width: 580px; height: auto; }
.lesson-drawing-svg text { fill: #eef7f4; font: 17px system-ui, sans-serif; }
.lesson-drawing-svg .drawing-label { font-size: 19px; font-weight: 600; }
.lesson-drawing-svg .drawing-small { font-size: 16px; }
.drawing-paper { fill: #10292f; stroke: #31545b; }
.drawing-grid { fill: none; stroke: #72979d; stroke-width: 1.5; }
.drawing-grid path { stroke-dasharray: 12 7 2 7; }
.drawing-ink { fill: none; stroke: #dcebe7; stroke-width: 2; }
.drawing-ink text { stroke: none; }
.drawing-rule { stroke: #72979d; stroke-width: 1; }
.drawing-cloud { fill: none; stroke: #f1c778; stroke-width: 2; }
.lesson-drawing-svg [data-drawing-link] circle { fill: #62dacb; stroke: #10292f; stroke-width: 2; }
.lesson-drawing-svg [data-drawing-link] text { fill: #0b2427; font-weight: 800; font-size: 18px; }
.lesson-drawing-svg [data-drawing-link]:hover circle, .lesson-drawing-svg [data-drawing-link].is-open circle { fill: #f1c778; stroke: #fff; stroke-width: 3; }
.lesson-drawing-svg [data-drawing-link]:focus-visible circle { stroke: #fff; stroke-width: 5; }
.drawing-keys { display: grid; gap: .6rem; margin-top: 1rem; }
.drawing-keys details { border-top: 1px solid rgba(174,208,203,.22); padding-top: .45rem; }
.drawing-keys summary { min-height: 44px; padding: .5rem 0; cursor: pointer; line-height: 1.5; font-weight: 650; }
.drawing-key-number { display: inline-flex; justify-content: center; align-items: center; width: 1.6rem; height: 1.6rem; margin: 0 .45rem; border-radius: 50%; background: #62dacb; color: #0b2427; font-weight: 800; }
.drawing-keys p { margin: .35rem 0 .75rem; }
.lesson-quiz { padding: 1.15rem; border: 1px solid rgba(174,208,203,.25); border-radius: 14px; background: rgba(88,214,201,.035); }
.lesson-quiz fieldset { min-width: 0; margin: 1rem 0; padding: 0; border: 0; }
.lesson-quiz legend { padding: 0 0 .65rem; font-weight: 650; }
.lesson-quiz label { display: flex; align-items: flex-start; gap: .75rem; margin: .65rem 0; padding: .75rem; border: 1px solid rgba(174,208,203,.25); border-radius: .6rem; cursor: pointer; line-height: 1.6; }
.lesson-quiz input[type="radio"] { appearance: auto; flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin: .2rem 0 0; accent-color: #58d6c9; }
.lesson-quiz label:has(input:checked) { border-color: #58d6c9; background: rgba(88,214,201,.07); }
.lesson-quiz-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.lesson-quiz-actions[hidden] { display: none; }
.lesson-quiz-actions button { min-height: 44px; padding: .65rem 1rem; border: 1px solid #58d6c9; border-radius: .6rem; background: #123b3b; color: #f1f6f4; font: inherit; font-weight: 650; cursor: pointer; }
.lesson-quiz-actions button + button { background: transparent; border-color: #78908a; }
.lesson-feedback:empty { display: none; }
.lesson-feedback { padding: .75rem; border-left: 3px solid #f1c778; }
.lesson-feedback[data-result="correct"] { border-color: #58d6c9; }
.lesson-answer { margin-top: 1rem; }
.lesson-answer summary { min-height: 44px; padding: .55rem 0; cursor: pointer; font-weight: 650; }
.lesson-quiz :focus-visible, .drawing-keys :focus-visible, .lesson-drawing-scroll:focus-visible, .inline-definition :focus-visible { outline: 3px solid #f1c778; outline-offset: 4px; }
.lesson-next { margin-top: 1rem; }
.knowledge-video-preview { display: block; }
.knowledge-video-preview img { display: block; width: 100%; height: auto; border-radius: 14px; }
@media (max-width: 600px) { .lesson-drawing, .lesson-quiz { padding: .8rem; } .lesson-quiz label { padding: .6rem; } }
@media print { .lesson-drawing-scroll { overflow: visible; } .lesson-drawing-svg { min-width: 0; } .lesson-quiz-actions, .lesson-quiz fieldset, .lesson-feedback { display: none; } .lesson-drawing, .lesson-quiz { break-inside: avoid; } }