:root{font-family:system-ui,sans-serif;color:#203e4a;background:#fff;font-size:15px}*{box-sizing:border-box}body{margin:0}main{max-width:1100px;margin:auto;padding:18px}h1{font:600 clamp(21px,3vw,30px)/1.2 Georgia,serif;margin:0 0 8px}.notice{color:#496b78;margin:6px 0 14px}.controls{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-bottom:12px}label{display:flex;flex-wrap:wrap;gap:7px;align-items:center}select{max-width:100%;width:min(360px,100%)}button,select{font:inherit;padding:7px;border:1px solid #9bb5c0;border-radius:5px;background:white;color:inherit}button{cursor:pointer}input{accent-color:#216d88}canvas{display:block;width:100%;height:clamp(280px,55vw,520px);background:#f5f9fa;border:1px solid #d1e1e7;border-radius:8px}p{line-height:1.5}#note{margin-bottom:7px}#help{font-size:13px;color:#526e79}output{font-variant-numeric:tabular-nums;font-size:14px}a{color:#146787}[hidden]{display:none!important}@media(max-width:500px){main{padding:12px}.controls>label:first-child{width:100%}select{width:100%}input[type=range]{max-width:175px}canvas{height:330px}}