:root{--accent:#087e75}body{background:#f3f5f4}header{background:linear-gradient(125deg,#062d39,#126b67);color:white}header nav a{color:white}.notice{background:#fff2d8!important;color:#473912!important;border-left:4px solid #db9d29}#chapters a{display:block;padding:.35rem .6rem}#chapters details{margin-bottom:.7rem}#chapters summary{cursor:pointer;font-weight:700}article{min-width:0}.panel{margin-bottom:1.2rem}button,.button{min-height:44px;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #db9d29;outline-offset:3px}.actions{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}.source{font-size:.85rem;color:#526269}.badge{display:inline-block;background:#d9eee9;color:#124e49;border-radius:1rem;padding:.2rem .7rem}.pending{color:#687578}.scratch{width:100%;height:230px;touch-action:none;border:1px solid #899b9b;background:white;border-radius:.5rem}.notes{width:100%;min-height:95px}.visual svg{width:100%;max-height:280px;background:#f3faf8;border-radius:.7rem}.visual text{font:16px system-ui;fill:#153e44}.visual label{display:block;margin:.5rem 0}.visual input[type=range]{width:min(100%,360px)}.visual-explanation{min-height:4rem}.visual .moving{transition:cx .35s linear,width .35s linear}.visual .controls{display:flex;flex-wrap:wrap;gap:.7rem}.book-diagram svg{width:180px;height:220px}dialog{width:min(850px,94vw);max-height:92vh;overflow:auto;box-sizing:border-box}dialog::backdrop{background:#102630aa}input,textarea{box-sizing:border-box;max-width:100%;font:inherit}input.answer{width:230px;padding:.6rem}#overview{display:flex;gap:1rem;flex-wrap:wrap}.test-item{border-bottom:1px solid #ddd;padding:1rem 0}.step{padding:.8rem;background:#f2f6f4;margin:.5rem 0}.katex-display{overflow-x:auto;overflow-y:hidden}a{overflow-wrap:anywhere}#content h2{line-height:1.2}canvas{display:block}#storage-status{color:#884815}@media(max-width:650px){main{display:block!important}aside{max-height:200px;overflow:auto}header{padding:1rem}article{padding:.5rem!important}.panel{padding:1rem!important}h1{font-size:2rem}dialog{padding:1rem}.actions button{flex:1}}
body{font-family:system-ui,sans-serif}header .lead{color:#d8efea}.book-diagram svg{width:min(100%,370px);height:auto}
.katex{display:inline-block;max-width:100%;overflow-x:auto;overflow-y:hidden;vertical-align:middle}
.visual select{min-height:44px;max-width:100%}
.panel, #question { overflow-wrap: anywhere; }

.visual .prediction{padding:.8rem;background:#fff8e8;border-left:3px solid #b18b35;margin:.8rem 0}.visual .prediction input{width:100%;min-height:44px}.visual .prediction button{margin-top:.6rem}.visual input[type=number],.visual input[type=text]{min-height:44px}
@media(prefers-reduced-motion:reduce){.visual .moving{transition:none!important}}