.learning-content { width: min(100%, 1120px); }
.learning-header { padding-top: 42px; padding-bottom: 24px; }
.learning-header h1 { font-size: clamp(36px, 5.2vw, 56px); }
.learning-header h1 span { color: var(--teal); }
.learning-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:12px 0 20px; }
.learning-stats > div { display:flex; flex-direction:column; gap:2px; padding:13px 15px; border:1px solid var(--line); border-radius:9px; background:var(--panel); }
.learning-stats strong { color:var(--teal); font-size:19px; line-height:1.3; }
.learning-stats span { color:var(--muted); font-size:10px; }
.learning-callout { display:flex; gap:13px; padding:16px; border:1px solid #28544f; border-radius:10px; background:#10201f; }
.callout-mark { flex:0 0 25px; display:grid; place-items:center; width:25px; height:25px; border:1px solid #367d75; border-radius:50%; color:var(--teal); font-weight:700; }
.learning-callout strong { color:var(--teal); font-size:12px; }
.learning-callout p { margin:4px 0 0; color:var(--muted); font-size:11px; }
.curriculum-section { margin-top:38px; }
.curriculum-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:13px; padding-bottom:13px; border-bottom:1px solid var(--line); }
.curriculum-heading h2 { margin:5px 0 3px; font-size:19px; letter-spacing:-.035em; }
.curriculum-heading p { margin:0; color:var(--muted); font-size:11px; }
.domain-tag { flex:0 0 auto; padding:5px 8px; border:1px solid var(--line); border-radius:6px; color:var(--subtle); font:9px ui-monospace,monospace; }
.module-list { display:grid; gap:8px; }
.module-row { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:13px; min-width:0; padding:13px 15px; border:1px solid var(--line); border-radius:9px; background:var(--panel); }
a.module-row { transition:border-color .15s,background .15s,transform .15s; }
a.module-row:hover { transform:translateY(-1px); border-color:#39766f; background:var(--panel-raised); }
.module-index { align-self:start; padding-top:1px; color:var(--teal); font:12px ui-monospace,monospace; }
.module-main { min-width:0; }
.module-title { color:var(--text); font-size:13px; font-weight:700; }
.module-main p { margin:3px 0 6px; color:var(--muted); font-size:10.5px; line-height:1.6; }
.module-meta { display:flex; flex-wrap:wrap; gap:6px 12px; color:var(--subtle); font:9px ui-monospace,monospace; }
.available .module-meta span:first-child { color:var(--green); }
.module-state { color:var(--subtle); font:10px ui-monospace,monospace; white-space:nowrap; }
.available .module-state { color:var(--teal); }
.planned { opacity:.78; }
.learning-footer-note { margin-top:30px; padding:16px; border:1px solid var(--line); border-radius:9px; background:var(--panel); }
.learning-footer-note strong { font-size:12px; }
.learning-footer-note p { margin:5px 0 0; color:var(--muted); font-size:11px; }
.lesson-content { width:min(100%,1000px); }
.lesson-header { padding:35px 0 22px; }
.lesson-header h1 { margin:9px 0; font-size:clamp(34px,5vw,48px); letter-spacing:-.055em; }
.lesson-header .page-lead { font-size:14px; }
.lesson-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.lesson-meta span { padding:4px 8px; border:1px solid var(--line); border-radius:5px; color:var(--muted); font:10px ui-monospace,monospace; }
.lesson-layout { display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:28px; align-items:start; }
.lesson-main { min-width:0; }
.lesson-aside { position:sticky; top:20px; padding:14px; border:1px solid var(--line); border-radius:9px; background:var(--panel); }
.lesson-aside h2 { margin:0 0 8px; font-size:11px; }
.lesson-aside a { display:block; padding:5px 0; color:var(--muted); font-size:10px; }
.lesson-aside a:hover { color:var(--teal); }
.lesson-section { margin:26px 0; scroll-margin-top:20px; }
.lesson-section h2 { margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid var(--line); font-size:19px; letter-spacing:-.03em; }
.lesson-section h3 { margin:19px 0 6px; font-size:14px; }
.lesson-section p, .lesson-section li { color:#b5c5c8; font-size:12px; line-height:1.85; }
.lesson-section ul, .lesson-section ol { padding-left:20px; }
.lesson-section li { margin:4px 0; }
.lesson-term { color:var(--teal); font-weight:650; }
.lesson-figure { margin:17px 0; padding:14px; border:1px solid var(--line); border-radius:10px; background:#0a1218; }
.lesson-figure svg { display:block; width:100%; height:auto; }
.lesson-figure figcaption { margin-top:10px; color:var(--muted); font-size:10px; text-align:center; }
.diagram-note { margin-top:9px; color:var(--subtle); font-size:10px; }
.definition-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:13px 0; }
.definition { padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.definition strong { display:block; color:var(--teal); font-size:11px; }
.definition p { margin:4px 0 0; font-size:10.5px; }
.lesson-table-wrap { overflow-x:auto; margin:13px 0; border:1px solid var(--line); border-radius:8px; }
.lesson-table { width:100%; border-collapse:collapse; font-size:10.5px; }
.lesson-table th,.lesson-table td { padding:9px 11px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.lesson-table th { background:#132129; color:var(--teal); font-weight:650; }
.lesson-table td { color:var(--muted); }
.lesson-table tr:last-child td { border-bottom:0; }
.command-block { position:relative; }
.command-block pre { margin-top:8px; }
.lesson-aside .progress-track { height:5px; margin:7px 0; overflow:hidden; border-radius:10px; background:#26363c; }
.progress-track span { display:block; width:0; height:100%; background:var(--teal); transition:width .2s; }
.quiz-panel { margin:18px 0; padding:17px; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
.quiz-panel h3 { margin:0 0 5px; font-size:14px; }
.quiz-intro { margin:0 0 13px; color:var(--muted); font-size:10.5px; }
.quiz-question { margin:15px 0 0; padding:14px 0 0; border:0; border-top:1px solid var(--line); }
.quiz-question legend { width:100%; padding:0 0 9px; color:var(--text); font-size:12px; font-weight:650; }
.quiz-question legend span { display:block; margin-bottom:4px; color:var(--teal); font:9px ui-monospace,monospace; text-transform:uppercase; }
.quiz-options { display:grid; gap:7px; }
.quiz-option { display:flex; align-items:flex-start; gap:9px; padding:9px 10px; border:1px solid var(--line); border-radius:7px; background:#0c151b; cursor:pointer; }
.quiz-option:hover { border-color:var(--line-strong); }
.quiz-option input { flex:0 0 auto; margin:3px 0 0; accent-color:var(--teal); }
.quiz-option span { color:var(--muted); font-size:11px; line-height:1.6; }
.quiz-option.correct { border-color:#397c5b; background:#10251d; }
.quiz-option.incorrect { border-color:#754747; background:#261819; }
.option-feedback { display:none; margin:5px 0 0 25px; color:var(--muted); font-size:10px; line-height:1.65; }
.quiz-question.graded .option-feedback { display:block; }
.option-feedback strong { color:var(--text); }
.quiz-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }
.quiz-button { min-height:36px; padding:8px 12px; border:1px solid #348d81; border-radius:7px; background:#17433f; color:#c5fff4; font-size:11px; font-weight:650; cursor:pointer; }
.quiz-button.secondary { border-color:var(--line-strong); background:transparent; color:var(--muted); }
.quiz-button:disabled { opacity:.45; cursor:not-allowed; }
.quiz-result { display:none; margin-top:12px; padding:11px; border:1px solid var(--line); border-radius:7px; color:var(--muted); font-size:11px; }
.quiz-result.visible { display:block; }
.quiz-result strong { color:var(--teal); }
.lesson-complete { display:flex; align-items:center; gap:9px; margin:22px 0; padding:13px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--muted); font-size:11px; }
.lesson-complete input { accent-color:var(--teal); }
.lesson-nav { display:flex; justify-content:space-between; gap:12px; margin-top:25px; padding-top:15px; border-top:1px solid var(--line); }
.lesson-nav a { color:var(--teal); font-size:11px; }
@media(max-width:850px) { .lesson-layout { grid-template-columns:minmax(0,1fr); } .lesson-aside { position:static; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; order:-1; } .lesson-aside h2,.lesson-aside .progress-wrap { grid-column:1/-1; } }
@media(max-width:600px) { .learning-stats { grid-template-columns:repeat(3,minmax(0,1fr)); } .learning-stats > div { padding:10px; } .learning-stats strong { font-size:16px; } .curriculum-heading { align-items:start; flex-direction:column; } .module-row { grid-template-columns:27px minmax(0,1fr); gap:9px; padding:12px; } .module-state { grid-column:2; } .definition-grid { grid-template-columns:1fr; } .lesson-figure { padding:8px; } }

.course-progress { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.course-progress-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.course-progress-top strong { font-size:12px; }
.course-progress-top span { color:var(--teal); font:10px ui-monospace,monospace; }
.course-progress .progress-track { height:6px; margin:10px 0 7px; overflow:hidden; border-radius:10px; background:#26363c; }
.course-progress .progress-track span { display:block; width:0; height:100%; background:var(--teal); transition:width .2s; }
.course-progress p { margin:0; color:var(--subtle); font-size:10px; }


/* Keep lesson media and dense technical content usable at narrow widths. */
.lesson-figure { min-width: 0; overflow: hidden; }
.lesson-figure svg,
.lesson-figure img { display: block; width: 100%; max-width: 100%; height: auto; }
.lesson-content,
.lesson-main,
.lesson-section { min-width: 0; }
.lesson-section { overflow-wrap: break-word; }
.lesson-table-wrap { max-width: 100%; overscroll-behavior-inline: contain; }
.lesson-table { min-width: 520px; }
.lesson-nav { flex-wrap: wrap; }
.lesson-nav a { min-width: 0; }
.quiz-option { min-width: 0; }
.quiz-option > span { min-width: 0; }
@media (max-width: 600px) {
  .lesson-figure { margin-inline: -2px; }
  .lesson-nav { align-items: flex-start; }
  .lesson-nav a { flex: 1 1 45%; }
  .quiz-panel { padding: 13px; }
  .quiz-option { padding: 10px; }
  .option-feedback { margin-left: 0; }
}