*{box-sizing:border-box}body{margin:0;background:#f8fcf9;color:#244237;font:14px/1.6 'Microsoft YaHei',sans-serif}main{padding:18px}button,input{font:inherit}button{cursor:pointer;border:1px solid #ceddd4;background:white;color:#315b4b;border-radius:7px;padding:7px 13px;min-height:38px}button:focus-visible,input:focus-visible{outline:3px solid #d7a845;outline-offset:2px}.topics{display:flex;gap:6px;border-bottom:1px solid #e1eae4;padding-bottom:12px}.topics button{flex:1;padding:6px}.topics button[aria-pressed=true],button.active{color:white;background:#245b48;border-color:#245b48}.heading{display:flex;align-items:center;justify-content:space-between;color:#59816e;font-size:11px;letter-spacing:1px;margin-top:12px}.heading button{font-size:12px;min-height:30px;padding:2px 9px}h1{font-size:22px;margin:6px 0}.hint{margin:0;color:#698074;font-size:12px}canvas{display:block;width:100%;aspect-ratio:720/380;background:white;border:1px solid #e0eae3;border-radius:10px;margin:12px 0;touch-action:none}.controls{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.controls button{flex:1;white-space:nowrap}.controls label{width:100%;display:flex;align-items:center;gap:10px}.controls input[type=range]{flex:1;min-width:60px;accent-color:#245b48}.feedback{padding:10px 12px;background:#eaf2eb;border-radius:8px;margin:12px 0 0;font-size:13px;min-height:62px}.note{font-size:11px;color:#708476;margin:8px 0 0}@media(max-width:420px){main{padding:12px}h1{font-size:19px}.controls button{font-size:12px;padding:7px}.feedback{font-size:12px}.topics{gap:4px}}