*{box-sizing:border-box;touch-action:manipulation}html{scroll-behavior:smooth}body{margin:0;background:#f7f9fc;color:#20344a;font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif}main{max-width:1080px;margin:auto;padding:42px 24px}a{color:#2857cf;text-decoration:none}.intro{padding:10px 0 32px}.eyebrow{color:#247d6a;font-size:13px;letter-spacing:2px;font-weight:700}h1{font-size:48px;margin:12px 0}h1 span{color:#e78d34}h2{font-size:27px;margin:8px 0 12px}p{line-height:1.8;color:#607084}nav{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}nav a{background:#e9f2ee;padding:12px 18px;border-radius:12px;color:#246e5f}section{scroll-margin-top:20px;background:#fff;border:1px solid #e0e7ee;border-radius:24px;padding:28px;margin-bottom:24px;box-shadow:0 8px 30px #22334404}.heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.heading p{margin:5px 0}.readout{display:flex;flex-direction:column;align-items:center;min-width:115px}.readout output{font-size:48px;font-weight:750;color:#bd6016;font-variant-numeric:tabular-nums}.readout span,.badge{padding:6px 14px;border-radius:30px;background:#eff5f1;color:#267965;font-size:14px}.canvas{background:radial-gradient(#cad9d8 1px,transparent 1px) 0 0/20px 20px;border-radius:18px;margin:22px 0 16px;border:1px solid #eaf0ef}svg{display:block;width:100%;max-height:420px;overflow:visible;user-select:none}svg text{font-family:inherit;font-size:17px;fill:#43566c}svg .drag{cursor:grab}svg .drag:active{cursor:grabbing}.controls{max-width:760px;margin:auto}label{display:flex;justify-content:space-between;font-size:15px;font-weight:600}label span{color:#77879a;font-weight:400}input[type=range]{width:100%;height:40px;accent-color:#ce762e;cursor:pointer}#split-range{accent-color:#8058b4}.presets{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:10px 0}.presets button{font:inherit;font-size:14px;min-height:44px;padding:10px 16px;border:1px solid #dbe3e9;border-radius:10px;background:#fff;color:#30465a;cursor:pointer}.presets button[aria-pressed=true]{background:#e9f4ef;border-color:#65a490;color:#21624f}button:hover{background:#f0f5f8}.presets .primary{background:#267963;color:#fff;border-color:#267963}.check{justify-content:flex-start;gap:8px;align-items:center;min-height:44px;font-weight:400}.check input{width:18px;height:18px;accent-color:#247d6a}.note{background:#eff6f2;border-radius:12px;padding:14px 18px;color:#366851;margin:20px 0 0}.facts{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.facts p{margin-bottom:0;font-size:14px}.equation{display:flex;justify-content:center;align-items:center;gap:20px;background:#f7f8fc;border-radius:14px;padding:18px;margin-bottom:20px}.equation span{text-align:center;font-size:13px}.equation b{display:block;font-size:30px;margin-top:6px;font-variant-numeric:tabular-nums}.orange{color:#b25e18}.purple{color:#7950ad}.hint,footer{font-size:14px}#feedback{min-height:28px;font-weight:600;color:#247d6a}footer{display:flex;justify-content:space-between;gap:15px;padding:12px 0 30px;color:#718294}:focus-visible{outline:3px solid #2857ef;outline-offset:3px}@media(max-width:600px){main{padding:25px 16px}h1{font-size:36px}h2{font-size:23px}section{padding:20px 14px;border-radius:18px}.heading{align-items:flex-start}.heading p{font-size:14px}.readout{min-width:80px}.readout output{font-size:36px}.badge{display:none}.equation{gap:12px;padding:14px 8px}.equation b{font-size:25px}.facts{grid-template-columns:1fr;gap:14px}footer{flex-direction:column}nav a{font-size:13px;padding:10px}.canvas{margin-top:18px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Keep the touch target stable while the drawing updates. */
svg *{pointer-events:none}svg{cursor:crosshair}