@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');
:root{--ink:#273f38;--green:#2c7663;--cream:#faf9f3;--line:#e3e8df;--muted:#819087;--mint:#e9f2e9;--yellow:#ffe39b}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:'Noto Sans SC',sans-serif;font-size:14px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0}button:focus-visible,a:focus-visible,svg [tabindex]:focus-visible{outline:3px solid #e1ad42;outline-offset:4px}header{height:98px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 46px;background:#fffdf8}.brand{display:flex;gap:12px;align-items:center;color:var(--ink);font-size:21px;font-weight:800;text-decoration:none;letter-spacing:1px}.brand-icon{background:var(--green);color:var(--yellow);font-size:40px;width:45px;height:49px;border-radius:15px;display:grid;place-items:center}.brand small{display:block;font-size:9px;letter-spacing:3px;margin-top:3px;color:#87968a}.header-note{font-size:13px;color:#839185}.header-note span{color:#d2ad55;margin-left:15px}.help-button{border:1px solid #d9e3d8;border-radius:24px;padding:10px 18px;color:var(--green);background:transparent;font-size:12px}.layout{display:grid;grid-template-columns:240px 1fr;max-width:1600px;margin:auto}aside{border-right:1px solid var(--line);padding:34px 20px 30px 30px;min-height:calc(100vh - 98px)}.eyebrow{font-size:11px;letter-spacing:1.4px;color:#879487;font-weight:600}nav{display:grid;gap:10px;margin-top:22px}.lesson{display:flex;align-items:center;text-align:left;gap:13px;padding:15px 12px;border-radius:14px;background:transparent;color:#677c70;position:relative}.lesson.active{background:#e6efe3;color:var(--green)}.lesson-icon{font-size:24px;display:grid;place-items:center;width:34px}.lesson strong{font-size:13px;font-weight:600;display:block}.lesson small{font-size:10px;display:block;margin-top:4px;color:#8a998c}.lesson .check{position:absolute;right:10px;font-size:12px}.side-card{background:#f2eee0;border:1px solid #e8e1cd;border-radius:16px;margin-top:34px;padding:19px 16px}.side-card>span{display:block;font-size:25px;margin-bottom:8px}.side-card b{font-size:12px}.side-card p{font-size:11px;line-height:1.9;color:#859080}.stars{color:#cba953;letter-spacing:4px;font-size:24px;margin:15px 0 6px}.side-card small{font-size:10px;color:#8f977f}.safety{color:#7f8e80;font-size:11px;line-height:2;margin:24px 6px}.safety span{display:block;font-size:10px;color:#9ba294;margin-top:4px}main{padding:33px 36px 20px;min-width:0}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}.green{color:var(--green)}h1{font-size:29px;margin:9px 0 8px;letter-spacing:1px;font-weight:800}.intro p{font-size:12px;color:#8c998e;margin:0}.lesson-badge{font-size:10px;color:#8b987d;white-space:nowrap;border:1px solid #e4e6d5;border-radius:30px;padding:8px 12px}.lesson-badge span{color:#c7a55b;margin-left:10px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 248px;gap:21px}.lab{border:1px solid #dae3d5;border-radius:21px;overflow:hidden;background:#fffef9;box-shadow:0 6px 20px #304b3510}.lab-bar{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid #e9eddf;font-size:12px}.lab-bar i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#82a988;margin-right:8px}.lab-bar button{background:transparent;color:#85947e;font-size:11px}.canvas-wrap{background-color:#f6f7ee;background-image:radial-gradient(#dfe5d4 1.2px,transparent 1.2px);background-size:20px 20px;position:relative;min-height:310px}#circuit{width:100%;display:block;max-height:430px}.status{position:absolute;bottom:17px;left:50%;transform:translateX(-50%);background:#ffffffdf;border:1px solid #e5e9db;border-radius:20px;font-size:11px;padding:8px 15px;white-space:nowrap;color:#7e8b72}.status.on{background:#fff4cf;color:#92782b;border-color:#ecd997}.status.danger{background:#ffebe5;color:#a85942}.tools{padding:15px 20px;display:flex;gap:9px;flex-wrap:wrap}.tools button{border:1px solid #e1e6db;background:#fffdf7;border-radius:11px;font-size:11px;padding:9px 12px;color:#6c7f70}.tools button.selected{background:#e9f1e4;border-color:#a9c5a7;color:#36775c}.lab-bottom{display:flex;justify-content:space-between;padding:13px 20px;border-top:1px dashed #e4e8d9;gap:8px;color:#929e8a;font-size:10px}.lab-bottom button{background:transparent;font-size:10px;color:#778d79;white-space:nowrap}.guide{border:1px solid #e3e7d9;border-radius:21px;background:#fffdf6;padding:20px}.guide-label{font-size:10px;color:#97a089}.mascot{height:104px;position:relative;width:120px;margin:2px auto}.mascot-bulb{height:68px;width:64px;border-radius:49% 49% 40% 40%;background:#ffe49a;border:2px solid #e9cc77;position:absolute;left:28px;top:12px;transform:rotate(-8deg);box-shadow:0 0 30px #ffe5a35c}.face{font-size:21px;position:absolute;top:24px;left:9px;white-space:nowrap;color:#836832}.mascot-base{width:30px;height:20px;background:repeating-linear-gradient(#8ba28c 0 4px,#aebc9f 4px 7px);border-radius:3px 3px 10px 10px;position:absolute;left:49px;top:79px;transform:rotate(-8deg)}.spark{position:absolute;color:#d2b767}.s1{top:15px;right:6px;font-size:23px}.s2{top:48px;left:7px;font-size:18px}.guide h2{font-size:16px;text-align:center;margin:4px 0 13px}.speech{background:#f0f4e7;padding:13px 14px;border-radius:12px;font-size:11px;line-height:1.95;color:#71846a;min-height:82px}.guide-divider{border-top:1px dashed #e3e7d6;margin:18px 0}.step-heading{font-size:11px;font-weight:600;display:flex;justify-content:space-between}.step-heading span{color:#99a78d;font-weight:400}ol{list-style:none;padding:0;margin:15px 0 18px;display:grid;gap:13px}ol li{display:flex;align-items:center;gap:9px;font-size:11px;color:#889780}ol li b{border:1px solid #dbe4d0;border-radius:50%;width:21px;height:21px;display:grid;place-items:center;font-size:10px;font-weight:500;flex-shrink:0}ol li.done{color:#398364}ol li.done b{background:#e0edda;border-color:#b8d2aa}.primary{background:var(--green);color:white;border-radius:11px;padding:12px 15px;width:100%;font-size:11px;display:flex;justify-content:space-between;align-items:center}.hint-text{font-size:11px;line-height:1.8;color:#7e846b;margin-top:12px}.discover{margin-top:23px;border:1px solid #e3e6d8;border-radius:19px;background:#f0f2e5;padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:36px}.discover h2{font-size:17px;margin:9px 0 10px}.discover p{font-size:11px;line-height:2;color:#829075;margin:0}.quiz{border-left:1px solid #dce1d0;padding-left:28px}.quiz-label{font-size:10px;color:#899779}.quiz h3{font-size:12px;margin:11px 0}#answers{display:flex;gap:8px}#answers button{background:#fffef7;border:1px solid #dbe2cd;border-radius:9px;padding:8px 14px;color:#7e8f71;font-size:11px}#answers button.correct{background:#d9eaca;border-color:#a7c99b}#answers button.wrong{background:#ffe6d9;border-color:#deb79b}#quiz-feedback{margin-top:7px;font-size:10px;min-height:20px}.footer-note{text-align:center;font-size:10px;color:#a0a790;margin:21px 0 0;letter-spacing:.4px}.footer-note span{margin-left:9px;color:#c1b779}svg text{font-family:'Noto Sans SC',sans-serif}svg .terminal{cursor:pointer}svg .terminal:hover circle{stroke:#2c7663;stroke-width:4}svg .wire{fill:none;stroke:#779983;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}svg .wire.live{stroke:#dfb34e}svg .flow{fill:none;stroke:#fff4b0;stroke-width:3;stroke-dasharray:8 15;animation:travel 1.2s linear infinite;pointer-events:none}@keyframes travel{to{stroke-dashoffset:-46}}dialog{border:1px solid #dce5d6;border-radius:23px;max-width:440px;padding:33px;color:var(--ink);background:#fffdf6;box-shadow:0 20px 100px #1c453033}dialog::backdrop{background:#28423755}dialog h2{font-size:22px}dialog p{font-size:13px;line-height:1.9}.close{position:absolute;top:15px;right:18px;background:none;font-size:24px;color:#8a9988}.help-note{color:#91a087;font-size:11px!important}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#2c7663;color:white;border-radius:15px;padding:15px 24px;z-index:10;box-shadow:0 4px 25px #23432d33}@media(min-width:1400px){main{padding:40px 48px}.workspace{grid-template-columns:minmax(0,1fr) 280px}.guide{padding:23px}.canvas-wrap{min-height:375px}}@media(max-width:1050px){header{padding:0 25px}.layout{grid-template-columns:200px 1fr}aside{padding:28px 14px}main{padding:27px 23px}.workspace{grid-template-columns:1fr}.guide{display:grid;grid-template-columns:130px 1fr;gap:10px 20px}.guide-label,.guide h2,.mascot{grid-column:1}.guide .speech{grid-column:2;grid-row:1/4;margin:0}.guide-divider{display:none}.step-heading,ol,.primary,.hint-text{grid-column:1/-1}.mascot{margin:0}.guide h2{font-size:13px}ol{display:flex;justify-content:space-between}.header-note{display:none}}@media(max-width:680px){header{height:80px;padding:0 17px}.brand{font-size:17px}.brand-icon{width:38px;height:42px;font-size:33px}.brand small{font-size:8px}.help-button{padding:8px 11px}.layout{display:block}aside{border:0;min-height:0;padding:20px 17px 0}aside>.eyebrow,.side-card,.safety{display:none}nav{display:flex;overflow-x:auto;margin:0;gap:6px;padding-bottom:10px}.lesson{flex-shrink:0;padding:10px 12px}.lesson-icon{font-size:19px;width:24px}.lesson strong{font-size:11px}.lesson small{font-size:9px}.lesson .check{display:none}main{padding:18px 17px}h1{font-size:24px}.intro{margin-bottom:20px}.lesson-badge{display:none}.canvas-wrap{min-height:235px}#circuit{min-height:240px}.lab-bar{padding:14px 16px}.tools{padding:12px}.lab-bottom{padding:12px;font-size:9px}.lab-bottom button{font-size:9px}.status{font-size:10px;bottom:10px;padding:7px 10px}.discover{grid-template-columns:1fr;gap:20px;padding:20px}.quiz{padding:17px 0 0;border-left:0;border-top:1px solid #dce1d0}.guide{padding:17px;grid-template-columns:105px 1fr}.mascot{width:105px}.guide h2{font-size:12px}ol{flex-direction:column;gap:9px}.footer-note{font-size:9px}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}

.site-areas{display:flex;gap:12px;margin:0}.site-areas a{font-size:14px;color:#2c7663;text-decoration:none;padding:10px 14px;border-radius:20px}.site-areas a[aria-current]{background:#e9f2e5}.free-lab-link{display:block;margin-top:23px;text-decoration:none;background:#2c7663;color:#fff;border-radius:14px;padding:16px}.free-lab-link b{font-size:14px;display:block}.free-lab-link span{font-size:12px;display:block;margin-top:8px;color:#d0e5c6}@media(max-width:680px){header{height:auto;min-height:90px;flex-wrap:wrap;padding:15px 17px;gap:13px}.site-areas{order:3;width:100%;justify-content:center;flex-direction:row}.site-areas a{font-size:13px;padding:7px 13px}.free-lab-link{display:none}}