.study-shell{max-width:1200px}.study-overview{display:flex;align-items:center;flex-wrap:wrap;gap:16px;padding:18px;background:#eaf3e6;border-radius:14px;margin-bottom:24px}.study-overview p{margin:0;flex:1 1 280px;font-weight:600}.study-overview a{text-decoration:none}.study-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px}.study-layout.revision-layout{grid-template-columns:minmax(0,1fr);max-width:820px;margin:auto}#lessonSidebar{align-self:start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}#lessonSidebar ol{list-style:none;padding:0}#lessonSidebar li{margin:9px 0}#lessonSidebar a{display:block;text-decoration:none;padding:12px;border-radius:9px;border:1px solid var(--line)}#lessonSidebar a[aria-current]{background:#edf5df;border-color:#699658}#lessonSidebar small{display:block;margin-top:6px;color:#496442}#lessonSidebar p{font-size:13px;color:#496442}.study-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(18px,3vw,32px);margin-bottom:22px}.study-card h2{font-size:25px;line-height:1.6;margin:6px 0 14px}.study-card h3{font-size:18px;line-height:1.7}.study-card p{line-height:1.95;font-size:16px}.study-goal{color:#41653c;padding-bottom:18px;border-bottom:1px solid var(--line)}.lesson-section{display:flex;gap:14px;margin:25px 0}.lesson-number{display:grid;place-items:center;align-self:start;flex:0 0 32px;height:32px;background:#edf5df;border-radius:50%;font-weight:bold}.lesson-section p{margin:8px 0}.study-example,.study-mistake{padding:18px;border-radius:12px;margin:20px 0;background:#eef6ec}.study-mistake{background:#fff7df}.study-example p,.study-mistake p{margin-bottom:0}.study-explore{display:block;margin:22px 0;font-weight:600}.study-question{padding:24px 0;border-bottom:1px solid var(--line);margin-bottom:18px}.study-choices{display:grid;gap:10px;margin-top:14px}.study-choices button{text-align:left;min-height:48px;padding:14px;background:white;border:1px solid #b9cabb;border-radius:9px;line-height:1.7}.study-choices button:disabled{opacity:1;cursor:default}.study-choices .correct{background:#e7f4df;border-color:#548246}.study-choices .wrong{background:#fff0e5;border-color:#a15e36}.study-feedback{color:#365939}.lesson-navigation{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:30px}.lesson-navigation a,.revision-empty a{text-decoration:none;display:inline-block;line-height:1.8}.revision-empty a{margin:8px 4px}.study-shell .intro h1{font-size:clamp(28px,4vw,36px)}#studyStorage:empty{display:none}@media(max-width:750px){.study-layout{grid-template-columns:minmax(0,1fr)}#lessonSidebar ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#lessonSidebar li{margin:0}.study-card p{font-size:15px}.lesson-section{gap:9px}.study-card h2{font-size:23px}}@media(max-width:380px){#lessonSidebar ol{grid-template-columns:1fr}.study-card h3{font-size:17px}.study-overview{padding:14px}}
#lessonDirectory{margin-top:16px}#lessonDirectory summary{cursor:pointer;line-height:1.7;font-weight:600}#lessonDirectory summary:focus-visible{outline:3px solid #dcaa3a;outline-offset:4px}.lesson-filter{display:grid;gap:8px;margin:16px 0}.lesson-filter input,.lesson-filter select{width:100%;min-width:0;padding:10px;border:1px solid #b9cabb;border-radius:8px;background:#fff;color:var(--ink)}.lesson-outline{display:grid;gap:10px;padding:18px;background:#f2f7ef;border-radius:12px}.lesson-outline a{line-height:1.7;text-decoration:none}.lesson-outline a:hover{text-decoration:underline}.lesson-section,#lessonQuiz{scroll-margin-top:18px}
@media(min-width:751px){#lessonSidebar{position:sticky;top:84px;max-height:calc(100vh - 100px);overflow-y:auto;overscroll-behavior:contain}}

.lesson-points{margin:10px 0 0;padding-left:22px;line-height:1.85}.lesson-points li{margin:3px 0}.lesson-section .table-scroll{margin-top:12px}.lesson-table{width:100%;border-collapse:collapse;font-size:14px;min-width:420px}.lesson-table th,.lesson-table td{padding:8px 10px;border:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.6}.lesson-table th{background:#eaf3e6;font-weight:650}.lesson-table tbody tr:nth-child(even){background:#fafcf8}
.lesson-section>div{min-width:0;flex:1}
/* ICT reading aids: summary box, section reader and the animation player (ict-anim.js). */
.lesson-summary{background:#eaf3e6;border-left:5px solid var(--green);border-radius:12px;padding:14px 18px;margin:18px 0}.lesson-summary strong{display:block;margin-bottom:6px}.lesson-summary ul{margin:0;padding-left:20px;line-height:1.85;font-size:17px}
.study-card .lesson-section p,.study-card .lesson-section li{font-size:17px;line-height:1.95}
.section-reader{margin:18px 0 26px;padding:14px;border:1px dashed var(--line);border-radius:14px;background:#fafcf8}.reader-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.reader-count{font-weight:600;color:var(--muted)}.reader-dots{display:flex;gap:6px;justify-content:center;margin:10px 0}.reader-dots i,.anim-dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}.reader-dots i.on,.anim-dots i.on{background:var(--green)}.reader-all{display:flex;gap:8px;align-items:center;justify-content:center;font-size:14px;color:var(--muted)}
.anim-player{border:2px solid var(--green);border-radius:16px;padding:14px;margin:20px 0;background:#fbfdf9}.anim-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}.anim-count{color:var(--muted);font-size:14px}
.anim-stage{background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px;min-height:180px;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;overflow:hidden}.anim-stage>div{width:100%}.anim-stage:focus-visible{outline:3px solid #dcaa3a;outline-offset:2px}.anim-stage svg{width:100%;height:auto;max-height:340px}
.anim-caption{min-height:3.6em;margin:12px 2px;font-size:17px;line-height:1.8;font-weight:500}.anim-controls{display:flex;flex-wrap:wrap;gap:8px}.anim-controls button{flex:1 1 auto;min-width:80px}.anim-dots{display:flex;gap:6px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.anim-node rect{fill:#f2f7f0;stroke:#9fb8ad;stroke-width:1.5;transition:fill .3s,stroke .3s}.anim-node text{text-anchor:middle;font-size:13px;fill:var(--ink)}.anim-node .anim-icon{font-size:18px}.anim-node.hi rect{fill:#d9f0e2;stroke:var(--green);stroke-width:3}.anim-node.hub rect{fill:#fff4d6;stroke:#c9a13a}.anim-node.broken rect{fill:#fde3e3;stroke:#c0392b;stroke-dasharray:4 3}
.anim-link{stroke:#9fb8ad;stroke-width:2.5}.anim-link.on{stroke:var(--green);stroke-width:4}.anim-link.broken{stroke:#c0392b;stroke-dasharray:6 5}.anim-link.backbone{stroke-width:5}.anim-link.fiber{stroke:#e0a100;stroke-width:16;opacity:.35}.anim-link.ray{stroke:#e0a100;stroke-width:2}
.anim-packet-label{text-anchor:middle;font-size:12px;font-weight:700;fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:3px}.anim-note{text-anchor:middle;font-size:13px;font-weight:600;fill:var(--muted)}.anim-note.ok{fill:var(--green)}.anim-note.fail{fill:#c0392b}
.anim-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;width:100%}.anim-card{border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:4px;background:#fff;transition:border-color .3s,background .3s}.anim-card.hi{border:2px solid var(--green);background:#eaf6ee}.anim-card-icon{font-size:26px}.anim-card small{color:var(--muted);line-height:1.6}
.anim-table-wrap{width:100%;overflow-x:auto}.anim-top{font-family:ui-monospace,Consolas,monospace;background:#203c36;color:#e9f5ee;padding:8px 12px;border-radius:8px;margin:0 0 10px;white-space:pre-wrap;word-break:break-word}.anim-table{border-collapse:collapse;width:100%;font-size:15px}.anim-table th,.anim-table td{border:1px solid var(--line);padding:7px 10px;text-align:center;white-space:pre-line}.anim-table th{background:#f2f7f0}.anim-table .hi{background:#fff4c2;font-weight:700}.anim-table tr.hi td{background:#d9f0e2}.anim-table tr.dim td{opacity:.3;text-decoration:line-through}.anim-result{margin:10px 0 0;font-weight:700;color:var(--green);text-align:center;font-size:17px}
.anim-code,.anim-html{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:10px;width:100%}.anim-code pre,.anim-html pre{margin:0;background:#1f2b28;color:#d8e6df;padding:10px;border-radius:8px;font-size:13px;line-height:1.7;overflow-x:auto}.anim-code pre span,.anim-html pre span{display:block;padding:0 4px;border-radius:4px}.anim-code pre .current,.anim-html pre .current{background:#dcaa3a;color:#1f2b28}.anim-state{display:grid;gap:6px;align-content:start;font-size:14px}.anim-state dl{margin:0;display:grid;gap:4px}.anim-state dl div{display:flex;justify-content:space-between;gap:8px;border:1px solid var(--line);border-radius:6px;padding:3px 8px}.anim-state dl div.changed{background:#fff4c2;border-color:#dcaa3a}.anim-state dt{font-family:ui-monospace,Consolas,monospace}.anim-state dd{margin:0;font-weight:700}.anim-state p{margin:0;color:var(--muted)}.anim-out{background:#f2f7f0!important;color:var(--ink)!important;min-height:2.4em;white-space:pre-wrap}.anim-html iframe{width:100%;min-height:220px;border:1px solid var(--line);border-radius:8px;background:#fff}
.anim-stage .new{animation:anim-in .45s ease-out}@keyframes anim-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:640px){.anim-code,.anim-html{grid-template-columns:1fr}.anim-controls button{min-width:0;padding-inline:8px}}
@media (prefers-reduced-motion:reduce){.anim-stage .new{animation:none}}
.anim-type-circuit svg{background:#f4faf6;border-radius:10px}.anim-stage .gate-wire{fill:none;stroke-width:4}.anim-stage .gate-wire.signal-low{stroke:#7a8580}.anim-stage .gate-wire.signal-high{stroke:#18765c}.anim-stage .gate-symbol{fill:#fff;stroke:#203c36;stroke-width:3}.anim-stage .gate-extra{fill:none;stroke:#203c36;stroke-width:3}.anim-stage .gate-lamp{stroke:#203c36;stroke-width:2}.anim-stage .gate-lamp.signal-high{fill:#82db9a}.anim-stage .gate-lamp.signal-low{fill:#d7ded9}.anim-type-circuit text{fill:#203c36;font-size:14px}.anim-stage .gate-label{font-weight:bold;font-size:17px}.anim-stage .gate-mini-label{font-size:10px;font-weight:700}.anim-stage .signal-label{font-size:11px;fill:#41653c}.anim-stage .junction{stroke:none}.anim-stage .junction.signal-high{fill:#18765c}.anim-stage .junction.signal-low{fill:#7a8580}
/* scene template */
.sc-ring{stroke-width:1.5;stroke-dasharray:4 4}.sc-line{stroke-width:2;stroke-dasharray:5 5}.sc-path{stroke-width:3}.sc-path.dashed{stroke-dasharray:7 6;stroke-width:2.5}.sc-path.thin{stroke-width:1.5}.sc-arrow{stroke-width:3.5}.sc-rect,.sc-circle{stroke:rgba(0,0,0,.15);stroke-width:1}.sc-circle.hi,.sc-rect.hi,.sc-ring.hi{stroke:#dcaa3a;stroke-width:4}.sc-label{text-anchor:middle;font-weight:600;paint-order:stroke;stroke:rgba(255,255,255,.0)}.sc-text.hi,.anim-stage text.hi{font-weight:800}
.sc-move{animation:sc-move .9s ease-in-out both}@keyframes sc-move{from{transform:translate(var(--dx),var(--dy))}to{transform:none}}.sc-fade{animation:anim-in .5s ease-out both}
@media (prefers-reduced-motion:reduce){.sc-move,.sc-fade{animation:none}}
/* A lesson section's own 2D figure (ICT) and its extra detail. */
.section-figure{margin:16px 0 8px}
.section-figure-stage{min-height:0;max-width:560px;margin:0 auto}
.section-figure figcaption{text-align:center;font-size:13px;color:#5d6f69;margin-top:6px;line-height:1.7}
.section-more{background:#f4f8f4;border-left:4px solid #9fcfb3;border-radius:0 10px 10px 0;padding:10px 14px;line-height:1.9}
/* Kids lessons: bigger type, rounder cards, warmer accents */
.kids-mode .study-card{border-radius:24px;border-color:#f1c9a6}.kids-mode .study-card h2{font-size:28px}.kids-mode .study-card p,.kids-mode .lesson-section p{font-size:18px;line-height:2}.kids-mode .lesson-number{background:#ffe2c6}.kids-mode .study-goal{color:#9a4a1c}.kids-mode .study-example{background:#fff4e0}.kids-mode .study-choices button{min-height:56px;font-size:17px;border-radius:16px}.kids-mode .study-choices .correct{background:#e3f6d8}.kids-mode #lessonSidebar a[aria-current]{background:#fff1e3;border-color:#c2602a}
/* Worked solutions (higher math): steps open one at a time */
.study-solution{padding:18px;border-radius:12px;margin:20px 0;background:#eef3fb;border-left:4px solid #2d6fb3}.study-solution .solution-problem{font-weight:600}.solution-steps{padding-left:1.4em;margin:12px 0}.solution-steps li{margin:8px 0;line-height:1.9;font-size:16px}.solution-hint{font-size:14px;color:#41566b}.solution-controls{display:flex;flex-wrap:wrap;gap:10px}