:root{font-family:"Microsoft YaHei","Noto Sans CJK SC",sans-serif;color:#17394c;background:#fff;font-size:15px;line-height:1.65;--blue:#187caa;--orange:#b95c20;--green:#187b67;--red:#b5333f}*{box-sizing:border-box}body{margin:0}main{padding:20px 22px;border:1px solid #cddbe3;border-radius:6px}h1{font-size:22px;margin:0 0 5px;font-weight:700}p{margin:5px 0 12px}.lede{color:#506775}.controls{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid #dce5eb}.controls label{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.controls input[type=range]{accent-color:var(--blue);width:180px}.controls output{min-width:70px;font-variant-numeric:tabular-nums;font-weight:700}button{font:inherit;background:#eef4f7;color:#17394c;border:1px solid #bacdd8;border-radius:4px;padding:5px 13px;cursor:pointer}button[aria-pressed=true]{background:#17394c;color:white}button:focus-visible,input:focus-visible{outline:3px solid #dc8b35;outline-offset:3px}svg{display:block;width:100%;height:auto;overflow:visible}svg text{font-family:"Microsoft YaHei","Noto Sans CJK SC",sans-serif;font-size:17px;fill:#17394c}svg .small{font-size:15px;fill:#526a79}svg .big{font-size:23px;font-weight:700}svg .blue{fill:var(--blue)}svg .orange{fill:var(--orange)}svg .green{fill:var(--green)}svg .red{fill:var(--red)}.result{font-size:17px;background:#edf5f8;border-left:4px solid var(--blue);padding:11px 14px;margin:12px 0}.note{font-size:13px;color:#56707c;margin:10px 0 0}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:18px}.twocol label{display:grid;grid-template-columns:1fr 84px;gap:7px;align-items:center}.twocol input{grid-column:1/-1;width:100%!important}.controls-group{margin:11px 0}.controls-group strong{display:block;margin-bottom:6px;color:#344f60}.numeric{font-variant-numeric:tabular-nums;font-family:Consolas,"Microsoft YaHei",monospace}.legend{display:flex;gap:20px;margin-top:9px;font-size:13px;color:#526a79}.legend span::before{display:inline-block;content:"";width:18px;height:3px;background:#187caa;vertical-align:middle;margin-right:5px}.legend span:last-child::before{background:#8b9ca6}.formula{padding-top:10px;border-top:1px solid #dce5eb;color:#465e6d;font-size:14px}.caption{color:#526a79;font-size:14px;margin-top:0}@media(max-width:600px){main{padding:14px}.controls{gap:10px}.twocol{gap:12px}h1{font-size:20px}}