.tool-inputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:16px;margin:8px 0 6px}.tool-inputs label{display:grid;gap:8px;font-weight:600}.tool-inputs input[type=number],.tool-inputs input[type=text],.tool-inputs select{width:100%;max-width:100%;padding:11px;border:1px solid #b9cabb;border-radius:8px;background:white;color:var(--ink)}.tool-inputs input[aria-invalid=true]{border-color:#a02f2f}.tool-inputs input[type=range]{width:100%;accent-color:var(--green)}
.tool-figure{margin:18px 0}.tool-figure svg{display:block;width:100%;height:auto;background:#f4faf6;border:1px solid var(--line);border-radius:12px}.tool-figure .ground{stroke:#6d7f72;stroke-width:2}.tool-figure .path{fill:none;stroke:var(--green);stroke-width:3;stroke-dasharray:6 5}.tool-figure .guide{stroke:#c5953a;stroke-width:1.5;stroke-dasharray:3 4}.tool-figure .ball{fill:#c5523a;stroke:white;stroke-width:2}.tool-figure text{font-size:13px;fill:var(--ink)}.tool-figure figcaption{margin-top:10px;line-height:1.8;color:#41653c}
.tool-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px;margin:20px 0}.tool-stats div{padding:14px;border-radius:12px;background:#eef6ec}.tool-stats dt{font-size:13px;color:#496442}.tool-stats dd{margin:6px 0 0;font-size:21px;font-weight:700;overflow-wrap:anywhere}.tool-stats dd small{font-size:13px;font-weight:500;line-height:1.7;display:block}
.tool-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.tool-tabs button{min-height:44px;padding:10px 18px;border:1px solid #b9cabb;border-radius:999px;background:white}.tool-tabs button[aria-selected=true]{background:var(--green);border-color:var(--green);color:white;font-weight:600}
.punnett{border-collapse:collapse;margin:16px 0;min-width:100%}.punnett caption{text-align:left;font-weight:650;margin-bottom:10px}.punnett th,.punnett td{border:1px solid var(--line);padding:10px 8px;text-align:center}.punnett th{background:#f4faf6}.punnett td b{display:block;font-size:17px}.punnett td small{display:block;font-size:12px;color:#496442}.punnett .dominant{background:#e7f4df}.punnett .recessive{background:#fff7df}
.gate-board{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:18px;padding:20px 0}.gate-inputs{display:grid;gap:10px}.bit{display:inline-block;min-width:92px;min-height:44px;padding:10px 14px;border:2px solid #9aab9c;border-radius:10px;background:white;font-weight:700;text-align:center}.bit[aria-pressed=true],.bit.on{background:#e7f4df;border-color:var(--green);color:#146044}.current-row td{background:#edf5df;font-weight:700}.mismatch-row td{background:#fbe3e0;color:#8f2a22;font-weight:700}
.subject-cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}.subject-card{margin:0;display:flex;flex-direction:column}.subject-card h2{margin:8px 0}.subject-card p{line-height:1.85}.subject-card .balance-actions{margin-top:auto;padding-top:12px}.subject-card a{text-decoration:none}.subject-icon{font-size:34px}.subject-progress{font-weight:600;color:#41653c}.subject-card progress{width:100%;accent-color:var(--green)}#subjectsStorage:empty,#physicsNote:empty,#numberNote:empty{display:none}
@media(max-width:520px){.gate-board{flex-direction:column}.tool-stats dd{font-size:19px}.punnett th,.punnett td{padding:8px 5px}}
.subject-cards>li{display:flex}.subject-cards .subject-card{width:100%;color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s}.subject-cards .subject-card:hover,.subject-cards .subject-card:focus-visible{border-color:var(--green);box-shadow:0 6px 18px rgba(24,118,92,.12)}.subject-enter{margin-top:auto;padding-top:14px;font-weight:700;color:var(--green)}.last-badge{align-self:flex-start;margin-top:8px;padding:3px 10px;border-radius:999px;background:#fff7df;font-size:12px;font-weight:600}.feature-chips{list-style:none;padding:0;margin:4px 0 10px;display:flex;flex-wrap:wrap;gap:6px}.feature-chips li{padding:4px 10px;border-radius:999px;background:#eef6ec;font-size:12px}
.subject-hero{display:flex;align-items:center;justify-content:space-between;gap:16px}.subject-hero .subject-icon{font-size:clamp(44px,8vw,72px)}.feature-heading{font-size:21px;margin:28px 0 14px}.feature-grid{list-style:none;padding:0;margin:0 0 24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:14px}.feature-grid li{display:flex}.feature-card{width:100%;display:grid;align-content:start;gap:8px;padding:20px;background:white;border:1px solid var(--line);border-radius:16px;text-decoration:none;color:inherit;min-height:150px}.feature-card:hover,.feature-card:focus-visible{border-color:var(--green);box-shadow:0 6px 18px rgba(24,118,92,.12)}.feature-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#edf5df;font-size:20px;color:var(--green)}.feature-card strong{font-size:18px}.feature-card small{line-height:1.8;color:#496442;font-size:13px}.feature-card em{justify-self:start;font-style:normal;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;background:#fff0e5;color:#913c18}
.lesson-groups h3{margin:18px 0 6px}.lesson-groups ol{margin:0;padding-left:22px;line-height:2}.lesson-groups .done{color:#146044;font-weight:700}#subjectStorage:empty{display:none}.subject-switch{font-weight:600}.quiz-result a,.quiz-result button{display:inline-block;margin:6px 4px 0 0;text-decoration:none}
.gate-inputs .bit[hidden]{display:none}.gate-heading{display:grid;gap:6px;text-align:center}.gate-heading strong{font-size:24px}.gate-figure{margin:18px 0}.gate-figure svg{display:block;width:100%;max-width:660px;margin:auto;background:#f4faf6;border:1px solid var(--line);border-radius:14px}.gate-wire{fill:none;stroke-width:4}.gate-wire.signal-low{stroke:#7a8580}.gate-wire.signal-high{stroke:#18765c}.gate-symbol{fill:#fff;stroke:#203c36;stroke-width:3}.gate-extra{fill:none;stroke:#203c36;stroke-width:3}.gate-lamp{stroke:#203c36;stroke-width:2}.gate-lamp.signal-high{fill:#82db9a}.gate-lamp.signal-low{fill:#d7ded9}.gate-figure text{fill:#203c36;font-size:14px}.gate-figure .gate-label{font-weight:bold;font-size:17px}#truthTable button{min-height:44px;padding:6px 10px;border:1px solid #b9cabb;background:white;border-radius:8px;color:var(--ink)}#truthTable button[aria-pressed=true]{background:#e7f4df}
.circuit-figure svg{max-width:720px}.circuit-figure figcaption{margin-bottom:10px;line-height:1.8}.circuit-figure p{line-height:1.85;margin:10px 0 0}.circuit-formula{display:inline-block;padding:2px 10px;border-radius:999px;background:#edf5df;font-weight:600}.gate-figure .gate-mini-label{font-size:10px;font-weight:700}.gate-figure .signal-label{font-size:11px;fill:#41653c}.junction{stroke:none}.junction.signal-high{fill:#18765c}.junction.signal-low{fill:#7a8580}.gate-build{margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}.gate-build h3{margin-top:0}#gateInputCount:disabled{opacity:.6}
.flow-inputs{display:flex;flex-wrap:wrap;gap:12px}.flow-inputs label{display:grid;gap:6px;flex:1;min-width:90px}.flow-inputs input{padding:10px;border:1px solid var(--line);border-radius:8px;min-height:44px;width:100%}.flow-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0}.flow-controls button{min-height:44px}#flowCounter{color:var(--muted);font-size:13px}.flow-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:start}.flow-figure{margin:0}.flow-figure svg{max-width:520px;background:#fbfcf8}.flow-figure:focus-visible{outline:3px solid #dcaa3a;outline-offset:4px;border-radius:14px}.flow-node>:first-child{fill:#fff;stroke:#203c36;stroke-width:2;transition:fill .2s}.flow-node text{text-anchor:middle;font-size:13px}.flow-node.visited>:first-child{fill:#e7f4df}.flow-node.active>:first-child{fill:#ffe39a;stroke:#9a6a00;stroke-width:3.5}.flow-edge{fill:none;stroke:#8a958f;stroke-width:2}.flow-edge.walked{stroke:#18765c;stroke-width:3}.flow-arrow{fill:#8a958f}.flow-arrow.walked{fill:#18765c}.gate-figure .flow-branch{font-size:12px;font-weight:700;fill:#7a4b00}.flow-side h3{margin:16px 0 6px}.flow-step{margin:0;padding:12px 14px;background:#fff7df;border-left:4px solid #ad7c1a;border-radius:6px;min-height:3.6em}.flow-changed td{background:#fff3c8;font-weight:700}#flowVars{margin:0}#flowVars td,#flowVars th{padding:6px 8px;font-family:Consolas,"Nirmala UI",monospace}.flow-output,.flow-code{margin:0;padding:12px;border-radius:10px;font:13px/1.7 Consolas,"Nirmala UI",monospace;overflow:auto;white-space:pre}.flow-output{background:#16261f;color:#bff3cf;min-height:3em;max-height:220px}.flow-code{background:#f4f6f1;border:1px solid var(--line)}.flow-code .current{background:#ffe39a;display:inline-block;min-width:100%;font-weight:700}.flow-legend{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:10px}.flow-legend li{display:flex;align-items:center;gap:10px}.flow-legend svg{width:70px;flex:0 0 70px}.flow-legend svg>*{fill:#fff;stroke:#203c36;stroke-width:2}.flow-legend svg>path:last-child{fill:#203c36}.flow-legend .flow-legend-line{fill:none}
@media(max-width:800px){.flow-layout{grid-template-columns:1fr}}
.chapter-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;margin:18px 0}.chapter-card{display:grid;gap:8px;height:100%;padding:20px;background:#fff;border:1px solid var(--line);border-radius:16px;color:var(--ink);text-decoration:none}.chapter-card:hover{border-color:#8bb390;box-shadow:0 4px 14px #18765c14}.chapter-no{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--green);font-weight:700}.chapter-no b{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#eaf3ed;font-size:18px}.chapter-card strong{font-size:17px;line-height:1.5}.chapter-card small{color:#536960;line-height:1.7}.chapter-meter{height:6px;border-radius:6px;background:#eaf0e9;overflow:hidden}.chapter-meter i{display:block;height:100%;background:var(--green)}.chapter-tags{display:flex;flex-wrap:wrap;gap:6px}.chapter-tags span{font-size:11px;padding:3px 9px;border-radius:999px;background:#f0f4ef}.chapter-tags .lab{background:#fff3c8}.chapter-lessons{list-style:none;padding:0;display:grid;gap:12px}.chapter-lessons li{padding:16px;border:1px solid var(--line);border-radius:12px;background:#fbfcf8}.chapter-lessons a{font-weight:700;font-size:16px}.chapter-lessons p{margin:6px 0 0;color:#536960;font-size:13px}.chapter-nav{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:22px 0}.chapter-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.chapter-actions a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.chapter-lessons .done{color:#146044;font-weight:700}#chapterStorage:empty{display:none}
/* One row of links between the ICT labs, shown on every ICT lab page. */
.lab-switch{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:8px;border:1px solid var(--line);border-radius:14px;background:#fff}.lab-switch a{flex:1 1 auto;text-align:center;padding:9px 14px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:600}.lab-switch a:hover{background:#eaf3e6}.lab-switch a[aria-current=page]{background:var(--ink);color:#fff}
/* Network simulator */
.net-figure{margin:16px 0}.net-figure figcaption{margin-top:8px;color:var(--muted);font-size:14px;line-height:1.7}.net-figure svg{max-height:380px}
.net-toggle{cursor:pointer}.net-toggle:focus{outline:none}.net-toggle:focus-visible rect,.net-toggle:focus-visible .anim-link{stroke:#dcaa3a;stroke-width:5}.net-hit{stroke:transparent;stroke-width:18}.net-toggle:hover .anim-link{stroke-width:5}.net-cut{text-anchor:middle;font-size:16px;fill:#c0392b}
.anim-node.sender rect{fill:#d9f0e2;stroke:var(--green);stroke-width:3}.anim-node.receiver rect{fill:#e3ecfb;stroke:#3a6fc4;stroke-width:3}
.net-result{min-height:2em;padding:10px 14px;border-radius:10px;background:#f2f7f0;line-height:1.8;font-weight:500}.net-result.ok{background:#dff2e6;color:#11553f}.net-result.fail{background:#fde3e3;color:#8d2219}
#netCompare .active-row td{background:#fff4c2;font-weight:600}
.mode-picks{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0}.mode-group{flex-basis:100%;font-size:14px;color:var(--muted);margin-top:4px}.mode-picks button[aria-pressed=true]{background:var(--green);color:#fff;border-color:var(--green)}
.anim-badge{display:inline-block;font-size:12px;padding:2px 8px;border-radius:999px;background:#eaf3e6;color:var(--green);font-weight:600;margin-left:6px}
/* Code lab */
.code-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:14px}.code-editor{display:grid;gap:6px;font-weight:600}.code-editor textarea{width:100%;min-height:320px;resize:vertical;font:14px/1.6 ui-monospace,Consolas,monospace;background:#1f2b28;color:#e3efe8;border:1px solid #1f2b28;border-radius:10px;padding:12px;tab-size:2;white-space:pre;overflow:auto}.code-editor textarea:focus-visible{outline:3px solid #dcaa3a;outline-offset:2px}
.code-output{display:grid;gap:8px;align-content:start;min-width:0}.code-output>span{font-weight:600}.code-output label{display:grid;gap:6px}.code-output input{font:14px ui-monospace,Consolas,monospace;padding:9px;border:1px solid #b9cabb;border-radius:8px}.code-output iframe{width:100%;min-height:320px;border:1px solid var(--line);border-radius:10px;background:#fff}
.code-console{margin:0;min-height:200px;background:#f2f7f0;border:1px solid var(--line);border-radius:10px;padding:12px;font:14px/1.7 ui-monospace,Consolas,monospace;white-space:pre-wrap;word-break:break-word}.code-console.error,.code-status.error{background:#fde3e3;color:#8d2219;border-color:#f3b9b2}.code-status{margin:0;padding:8px 12px;border-radius:8px;background:#f2f7f0;line-height:1.7}
@media (max-width:760px){.code-grid{grid-template-columns:1fr}.code-editor textarea{min-height:240px}}

/* ICT toolkit */
.wide-field{grid-column:1/-1}.strength-meter{height:14px;border-radius:7px;background:#e5ece8;overflow:hidden;margin:16px 0 8px}.strength-meter i{display:block;height:100%;width:calc(var(--level,0)*100%);background:var(--meter,#c0392b);transition:width .3s}
.balance-table tr.probe td{background:#fff4d6}.balance-table tr.found td{background:#d6f2e2;font-weight:700}.balance-table td.key-col{background:#f1f7f3;font-weight:600}
/* Network lab: bit strips for transmission methods and their colour key. */
.method-stage{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px;min-height:0}
.method-stage svg{display:block;width:100%;height:auto}
.method-legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;color:#4f625b}
.method-legend span::before{content:"";display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--c);margin-right:6px;vertical-align:-1px}
#methodPresets small{opacity:.75}
.anim-stage.method-stage{min-height:0;height:auto;display:block;padding:8px}
/* Subject and chapter heroes: the icon or chapter number is a tidy badge; phones drop it to save space. */
.subject-hero .subject-icon{flex-shrink:0;display:grid;place-items:center;width:clamp(72px,9vw,104px);height:clamp(72px,9vw,104px);border-radius:24px;background:#eaf3ed;color:var(--green);font-size:clamp(34px,4.5vw,52px);line-height:1;font-weight:700}
@media(max-width:600px){.subject-hero .subject-icon{display:none}}
/* Chapter lesson lists read as cards; the lesson number sits above the title. */
.chapter-lessons .chapter-no{display:block;margin:0 0 4px;font-size:12px;font-weight:700;color:var(--green);letter-spacing:.3px}
.chapter-lessons a{text-decoration:none}.chapter-lessons a:hover{text-decoration:underline}
.chapter-lessons li{transition:border-color .15s}.chapter-lessons li:hover{border-color:#b9d6c4}
.chapter-nav a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:10px}
/* Phones: the "what you can do" cards in two compact columns instead of one tall stack. */
@media(max-width:600px){
 .feature-grid{grid-template-columns:1fr 1fr;gap:10px}
 .feature-card{min-height:0;padding:14px;gap:6px}
 .feature-card strong{font-size:15px}
 .feature-card small{font-size:12px;line-height:1.6}
}
/* Long subject descriptions shrink instead of pushing the badge onto its own line. */
.subject-hero{flex-wrap:nowrap}.subject-hero>div{flex:1 1 0;min-width:0}

.paper-block{margin:22px 0 0}.paper-block:first-child{margin-top:12px}
.paper-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:0 0 10px;margin:0 0 14px;border-bottom:2px solid var(--line)}
.paper-head h3{margin:2px 0 0;font-size:19px;line-height:1.5}
.paper-label{display:inline-block;padding:2px 10px;border-radius:999px;background:#e6f2ea;color:var(--green);font-size:12.5px;font-weight:700}
.paper-count{flex:none;font-size:13px;font-weight:600;color:#55665c;white-space:nowrap}
.paper-lessons{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:12px}
.paper-lesson{display:flex;align-items:flex-start;gap:12px;height:100%;box-sizing:border-box;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:14px;color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.paper-lesson:hover,.paper-lesson:focus-visible{border-color:#8bb390;box-shadow:0 4px 14px #18765c14;transform:translateY(-1px)}
.paper-no{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#e6f2ea;color:var(--green);font-weight:700;font-size:15px}
.paper-lesson.is-done .paper-no{background:var(--green);color:#fff}
.paper-text{display:grid;gap:4px;min-width:0}
.paper-text strong{font-size:16px;line-height:1.45}
.paper-text small{font-size:13px;line-height:1.55;color:#55665c;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:600px){.paper-head{flex-direction:column;align-items:flex-start;gap:4px}.paper-lesson{padding:12px 14px}}
.paper-lesson .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}