*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:17px/1.75 system-ui,-apple-system,"Noto Sans TC",sans-serif;background:#eef5fa;color:#173149}a{color:#006e96}header{background:#0d2747;color:white;position:sticky;top:0;z-index:5}nav{max-width:1120px;margin:auto;display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;padding:12px 16px}nav strong{margin-right:auto}nav strong span{font-size:.8rem;color:#ffd369}nav a{color:#e6faff;text-decoration:none}main{max-width:1120px;padding:0 16px 50px;margin:auto}.skip{position:absolute;top:-80px}.skip:focus{top:0;background:white}.hero{padding:50px 35px;border-radius:0 0 30px 30px;color:white;background:linear-gradient(120deg,#0d2747,#075f84)}.eyebrow{color:#08799b;letter-spacing:.1em;font-weight:800;font-size:.88rem}.hero .eyebrow{color:#ffdd68}h1{line-height:1.24;font-size:clamp(2rem,5vw,3.4rem);margin:10px 0}h2{font-size:clamp(1.5rem,3vw,2rem);line-height:1.35}h3{font-size:1.35rem;line-height:1.35}h4{margin-bottom:8px}.actions,.btnrow,.sitebar,.jump{display:flex;gap:10px;flex-wrap:wrap}.actions a{background:#fbd66b;color:#173149;border-radius:12px;padding:8px 15px;text-decoration:none;font-weight:800}.sitebar,.summary,.lesson,.tool{padding:20px;background:white;border:1px solid #cadfe9;border-radius:20px;margin:18px 0;box-shadow:0 3px 15px #193e5b10}.sitebar{justify-content:space-between}.summary{background:#e5f6fa}.tools-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.tool{margin:0;min-width:0}.controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}label{display:block;font-weight:650}input[type=range]{display:block;width:100%}input[type=number],select,input[type=text]{max-width:100%;width:100%;padding:9px;border:1px solid #93adbd;border-radius:10px;font:inherit}canvas,svg{display:block;width:100%;height:auto;background:#102e4b;border-radius:14px;margin:15px 0;color:white}button{cursor:pointer;border:0;background:#006f91;color:white;font:inherit;font-weight:750;padding:9px 15px;border-radius:11px}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #ebaa19;outline-offset:2px}button:hover{background:#054e70}.result{padding:9px 12px;background:#e9f8ff;border-radius:10px;font-weight:700}.note{font-size:.9rem;color:#526a77}.lesson{scroll-margin-top:90px;padding:25px}.lesson h3{font-size:1.6rem}.ex{border-left:5px solid #00a4c5;background:#f1f9fc;border-radius:10px;padding:12px 18px;margin:10px 0}.ex p{margin:5px 0}.why{border-left-color:#e3b23c;background:#fffae8}details{margin:12px 0;padding:10px 13px;border-radius:10px;background:#edf3f8}summary{cursor:pointer;font-weight:750}.jump a{display:inline-block;padding:5px 10px;border:1px solid #96c8d7;border-radius:25px;background:white;text-decoration:none}.question{padding:14px;border:1px solid #c7dee5;border-radius:12px;margin:10px 0}.question p{margin:0 0 9px;font-weight:750}.question label{font-weight:400;margin:5px 0}.question input[type=radio]{margin-right:8px}.question button{margin-top:10px}.feedback{border-radius:9px;padding:8px;margin-top:9px;background:#f3f6f9}.feedback.good{background:#dbf7e6}.feedback.bad{background:#ffeadc}.feedback.empty{background:#fff6d5}footer{padding:25px 0;color:#526577}@media(max-width:800px){.tools-grid{grid-template-columns:1fr}}@media(max-width:390px){body{font-size:16px}main{padding:0 9px 30px}nav{gap:7px;font-size:13px}.hero{padding:28px 18px}.controls{grid-template-columns:1fr}.lesson,.tool,.summary{padding:15px}.sitebar{font-size:14px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
figure{margin:18px 0;padding:12px;background:#edf7fc;border-radius:14px}figure img{width:100%;max-height:390px;object-fit:contain;border-radius:10px;background:#eaf0f5}figcaption{color:#35546b;font-size:.9rem}.wave-steps{align-items:center}.wave-steps output{font-weight:800;padding:10px}.compare-tool{margin:20px 0}.question label{display:flex;align-items:flex-start;gap:8px;background:#f3f8fc;padding:8px 10px;border-radius:10px}.question label input{flex:0 0 auto;margin-top:.5em}#questionBankSlot iframe{width:100%;min-height:680px;border:2px solid #c4dfe9;border-radius:12px}img,canvas,svg{max-width:100%}@media(max-width:390px){.btnrow button{max-width:100%;white-space:normal}.wave-steps output{width:100%}figure{margin:12px 0;padding:8px}}

.reasoning{line-height:1.95;margin:1.3rem 0}.reasoning h4{font-size:1.1rem;color:#ffdb78;margin:1.3rem 0 .5rem}.reasoning p{margin:.7rem 0}.cycle-strip{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;padding:1rem;background:#102f44;border-radius:12px}.cycle-strip span{text-align:center}.cycle-strip b{color:#6ee7ec}.lab-links{display:flex;flex-wrap:wrap;gap:.7rem}.lab-links a{padding:.6rem .8rem;border:1px solid #527d92;border-radius:12px}.lesson .tool{margin:1.5rem 0;scroll-margin-top:5rem}canvas{max-width:100%;height:auto}.line-live{background:#0c2637;border:1px solid #476c81;padding:1rem;border-radius:12px;line-height:1.8}input{max-width:100%;box-sizing:border-box}.ka-lesson-affiliate{scroll-margin-top:5rem}

/* Keep cycle labels legible on the dark diagram. */
.cycle-strip{color:#edf8ff}.reasoning h4{color:#075f84}