:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#10191b;color:#e8e4cc}*{box-sizing:border-box}body{margin:0}main{max-width:1280px;margin:0 auto;padding:18px 22px}header{display:flex;justify-content:space-between;gap:18px;align-items:center}.eyebrow{font:10px/1.2 ui-monospace,monospace;letter-spacing:.18em;color:#ccaf6d}h1{margin:6px 0 0;font:27px/1.1 Georgia,serif}a{font-size:11px;color:#d9c58c;text-decoration:none;white-space:nowrap}a:hover{text-decoration:underline}.intro{font-size:12px;line-height:1.5;color:#b8c6c5;margin:10px 0 13px}.controls{display:flex;align-items:center;gap:12px 25px;flex-wrap:wrap;margin-bottom:14px;padding:10px 12px;background:#172426;border:1px solid #536051;border-radius:7px;font-size:11px}.controls label{display:flex;align-items:center;gap:8px}input{accent-color:#d7bd7a}input[type=range]{width:100px}output{min-width:26px;font-variant-numeric:tabular-nums;color:#f1dca4}input:focus-visible,a:focus-visible{outline:2px solid #a6e1cf;outline-offset:3px}.steps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}figure{margin:0;min-width:0}figure+figure{border-left:1px solid #344643;padding-left:18px}figcaption b,figcaption small{display:block}figcaption b{font-size:12px;font-weight:600}figcaption b span{color:#cbb377;font:11px ui-monospace,monospace;margin-right:6px}figcaption small{font-size:10px;line-height:1.4;color:#96aeab;margin-top:5px}svg{display:block;width:100%;height:auto;max-height:192px;overflow:visible;margin:2px 0 0}figure p{font-size:11px;line-height:1.5;color:#aebfbc;margin:4px 0 0;min-height:33px}.formula{font-family:ui-monospace,monospace}.formula span{font-size:10px;color:#d9c897}footer{border-top:1px solid #344643;margin-top:12px;padding-top:9px;display:flex;flex-wrap:wrap;gap:5px 20px;font:10px/1.5 ui-monospace,monospace;color:#a7cfc2}footer span+span{color:#93a5a2}.scope{font-size:10px;line-height:1.5;color:#8caaa7;margin:9px 0 0;max-width:115ch}@media(max-width:700px){main{padding:15px}header{align-items:flex-start}h1{font-size:23px}.steps{gap:10px}figure+figure{padding-left:10px}figcaption b{font-size:11px}figcaption small{font-size:9px}figure p{font-size:10px}.controls{gap:8px 14px}input[type=range]{width:85px}a{font-size:10px}}@media(max-width:520px){.steps{grid-template-columns:1fr}figure+figure{border-left:0;border-top:1px solid #344643;padding:12px 0 0}figure{display:grid;grid-template-columns:1fr 1.4fr;gap:4px 10px;align-items:center}figure svg{grid-column:2;grid-row:1/3;max-height:170px}figure p{grid-column:1;margin:0}figcaption small{font-size:10px}figcaption b{font-size:12px}h1{font-size:21px}header a{max-width:75px;white-space:normal;line-height:1.6}.scope{font-size:10px}}