:root{--ink:#193b37;--green:#216d58;--paper:#f5f5ed;--muted:#65756f;--line:#d8e1d7}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 -apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif}header{max-width:1040px;margin:auto;padding:25px 28px;display:flex;justify-content:space-between;gap:16px;align-items:center}header a{font-weight:800;font-size:23px;color:var(--ink);text-decoration:none}header span,.muted{color:var(--muted);font-size:13px}main{max-width:900px;margin:25px auto 110px;padding:0 24px}h1{font-size:clamp(28px,5vw,45px);line-height:1.25;letter-spacing:-1px;margin:12px 0 20px}h2{font-size:23px;line-height:1.5}h3{font-size:18px}p{margin:10px 0 18px}.eyebrow{font-size:12px;color:var(--green);font-weight:800;letter-spacing:2px}.panel{background:#fff;border:1px solid var(--line);padding:26px;border-radius:22px;margin:18px 0}.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:center}.hero-art{background:#e6eee0;border-radius:50% 50% 30% 45%;padding:24px;transform:rotate(-4deg)}.hero-art svg{transform:rotate(4deg)}.pill{display:inline-block;background:#e9efe5;padding:5px 10px;border-radius:30px;font-size:12px;color:var(--green);margin:0 7px 7px 0}button{font:inherit;cursor:pointer;border:0;touch-action:manipulation}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #b88429;outline-offset:3px}.primary{background:var(--green);color:white;border-radius:13px;padding:14px 24px;font-weight:700}.secondary{background:#e9efe5;color:var(--ink);border-radius:12px;padding:12px 19px}.quiet{background:transparent;color:var(--muted);padding:10px}.primary:disabled{background:#c5cec8;cursor:default}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.topics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.topic{padding:20px;background:#fff;border:1px solid var(--line);border-radius:18px}.topic label{cursor:pointer;display:block}input{accent-color:var(--green);width:18px;height:18px;vertical-align:middle}.quiz{max-width:650px;margin:auto}.quiz h1{font-size:24px;letter-spacing:0;line-height:1.6}.progress{height:6px;border-radius:20px;background:#dce5da;flex:1}.progress i{display:block;background:var(--green);height:100%;border-radius:20px}.map{background:#f0f4ec;border-radius:18px;margin:20px 0;padding:12px}.map svg{display:block;width:100%;height:auto;max-height:290px}.map svg text{font-family:inherit;fill:var(--ink);font-size:16px}.caption{font-size:12px;text-align:center;color:var(--muted);margin:5px}.options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.option{text-align:left;background:#fff;border:2px solid var(--line);border-radius:14px;padding:15px;min-height:58px;color:var(--ink)}.option.selected{border-color:var(--green);background:#eaf2e8}.option.correct{border-color:var(--green)}.option.wrong{border-color:#b85842;background:#fbefea}.option span{font-size:12px;margin-right:12px;color:var(--muted)}.feedback{background:#eaf2e8;border-left:4px solid var(--green);padding:20px;border-radius:12px;margin:20px 0}.feedback.help{background:#fff2e7;border-color:#b77b39}.concept{color:var(--green);border:0;border-bottom:1px dashed var(--green);background:transparent;padding:0;font:inherit}.actions{margin-top:20px;display:flex;justify-content:space-between;gap:12px;align-items:center}.steps li{margin:12px 0}details{border-top:1px solid var(--line);padding:15px 0}summary{cursor:pointer}nav{position:fixed;bottom:0;left:0;right:0;background:#fbfcf8ee;backdrop-filter:blur(15px);border-top:1px solid var(--line);display:flex;justify-content:center;padding:10px 0 max(12px,env(safe-area-inset-bottom));gap:20px}nav button{background:transparent;color:var(--muted);padding:9px 25px;border-radius:12px}nav button.active{color:var(--green);background:#e8eee3;font-weight:700}dialog{border:1px solid var(--line);border-radius:22px;padding:25px;max-width:480px;width:calc(100% - 32px);max-height:85vh;overflow:auto;color:var(--ink)}dialog::backdrop{background:#142d2866}#close-card{float:right}.notice{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:18px;margin-top:25px}.metric{font-size:30px;font-weight:800}.record{padding:12px 0;border-bottom:1px solid var(--line)}@media(max-width:600px){header{padding:20px}header span{max-width:130px;text-align:right;font-size:11px}main{margin-top:12px;padding:0 18px}.hero{grid-template-columns:1fr;gap:8px}.hero-art{display:none}.topics{grid-template-columns:1fr}.topic{padding:16px}.panel{padding:20px}.option{padding:13px 10px}.quiz h1{font-size:21px}.actions{align-items:stretch;flex-direction:column}.actions button{width:100%}nav{gap:5px}h1{font-size:34px}}
.scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.scope-item{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid var(--line);padding:20px;border-radius:16px;cursor:pointer}.scope-item input{flex-shrink:0;margin-top:5px}.scope-item small{display:block;color:var(--muted);font-size:12px;margin-top:7px}.aux-toggle{display:block;font-size:14px;margin:20px 0;color:var(--muted)}.long-options{grid-template-columns:1fr}.source{font-size:12px;color:var(--muted);margin:16px 0 0;border-top:1px solid #cfdcc9;padding-top:10px}.lesson-record{padding:20px 0}.concept-list{margin:15px 0}.method{margin:15px 0;padding-top:10px;border-top:1px solid #e3d5c4}.metric small{font-size:15px;font-weight:400;margin-left:12px}.quiz .option{font-size:16px;line-height:1.6}.quiz .option.selected{box-shadow:inset 0 0 0 1px var(--green)}.feedback strong{font-weight:750}.feedback .concept{font-weight:600}.lesson-record>.panel{margin:12px 0}button.option:disabled{opacity:1;cursor:default}@media(max-width:600px){.scope-grid{grid-template-columns:1fr}.scope-item{padding:17px}.map{margin:16px 0;padding:8px}.map svg{max-height:270px}.quiz .options{grid-template-columns:1fr}.quiz .option{padding:13px 15px}.hero{padding-bottom:10px}}
.options>div.option{cursor:default}.option .concept{font-size:inherit;text-align:left}.question .concept,h1 .concept{font-weight:inherit;line-height:inherit}.concept{border-radius:2px} .concept:focus-visible{outline-offset:2px}
.quiz .actions{justify-content:flex-end}
.learning-figure{margin:18px 0;padding:12px;background:#f1f5ee;border:1px solid #d5e0d0;border-radius:15px;break-inside:avoid}.visual-content{display:flex;justify-content:center;align-items:center;min-width:0}.visual-content>svg{display:block;width:100%;height:auto;max-height:340px}.visual-content>img{display:block;max-width:100%;width:auto;height:auto;max-height:330px;object-fit:contain;background:white}.learning-figure figcaption{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;margin-top:10px;color:var(--muted);font-size:12px;line-height:1.6}.zoom-button{flex-shrink:0;padding:4px 10px;background:white;border:1px solid #cad9c4;border-radius:8px;color:var(--green);font-size:13px}.answer-visuals{margin-top:18px}.answer-visuals>h3{font-size:16px;margin:0}.reference-images{padding:12px 0}.reference-images summary{font-size:14px}.feedback .learning-figure{background:#f7faf3}.image-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.image-header h2{font-size:18px;margin:0 0 15px}.image-header button{flex-shrink:0}.image-scroll{overflow:auto;max-height:65vh;overscroll-behavior:contain;border-radius:12px;background:#f1f5ee}.image-scroll img,.image-scroll svg{display:block;width:100%;height:auto;max-width:none;max-height:none}.image-toolbar{display:flex;align-items:center;gap:15px;margin-top:16px;font-size:14px}.image-toolbar input{width:auto;flex:1}.image-toolbar output{min-width:45px}#image-viewer{width:calc(100% - 24px);max-width:1000px;padding:22px;max-height:94vh}#image-viewer .quiet{padding-top:0}#image-viewer::backdrop{background:#142d2880}@media(max-width:600px){.learning-figure{padding:8px;margin:15px 0}.visual-content>svg{max-height:300px}.learning-figure figcaption{font-size:12px}.image-scroll{max-height:62vh}#image-viewer{padding:15px}}
.learning-figure svg text,#image-content svg text{font-family:inherit}

.knowledge-link{border:1px solid transparent;text-align:left;min-height:36px}.knowledge-link:hover{border-color:#9bb894;background:#dde9d7}.knowledge-link:active{background:#d1e1ca}