:root{font:16px/1.65 'Microsoft YaHei',sans-serif;color:#213f4b;background:#fff}*{box-sizing:border-box}body{margin:0}main{max-width:1150px;margin:auto;padding:22px}header p{margin:0;color:#617984}h1{font-size:25px;margin:4px 0 6px}#kicker{font-size:13px;letter-spacing:.07em}#controls{display:flex;align-items:center;gap:12px;margin:20px 0 8px;min-height:42px;flex-wrap:wrap}button{font:inherit;padding:7px 18px;border:1px solid #b3c9cd;border-radius:5px;background:white;color:#315665;cursor:pointer}button[aria-pressed=true]{color:#006f76;background:#e4f1f0;border-color:#138d93}label{display:flex;align-items:center;gap:20px;width:100%}input[type=range]{accent-color:#00868c;flex:1;max-width:640px}output{font-weight:700;min-width:68px}#figure svg{width:100%;height:auto;display:block}#result{border-top:1px solid #dce6e6;padding-top:12px;color:#3b616b}#note{font-size:13px;color:#647b85;margin-bottom:0}button:focus-visible{outline:3px solid #b995d1;outline-offset:3px}