*{box-sizing:border-box}body{margin:0;background:#faf9f5;color:#203443;font:18px/1.75 system-ui,sans-serif}nav{padding:18px max(20px,calc((100% - 1100px)/2));border-bottom:1px solid #d6dfdd;display:flex;flex-wrap:wrap;gap:25px;background:white}a{color:#08776f}main{max-width:850px;margin:auto;padding:40px 22px}h1{font-size:clamp(32px,5vw,52px);line-height:1.15;letter-spacing:-.025em}h2{font-size:27px;line-height:1.3;margin-top:38px}.eyebrow{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:#52676e}.intro{font-size:22px}.playground{background:white;border:1px solid #cddcda;border-radius:14px;padding:20px;margin:30px 0}.controls{display:flex;flex-wrap:wrap;gap:20px;align-items:center}label{display:block;font-size:16px}input,select,button{font:inherit}input[type=range]{max-width:210px;width:100%;accent-color:#08776f}button,select{padding:8px 15px;border:1px solid #9cbbb6;border-radius:6px;background:#f5faf9;color:#203443}svg{display:block;width:100%;height:auto}svg text{font:14px system-ui,sans-serif;fill:#203443}.readout{padding:12px;border-left:4px solid #08776f;background:#f1f8f6}footer{margin-top:45px;font-size:14px;border-top:1px solid #d6dfdd;padding-top:20px}.related{display:flex;flex-wrap:wrap;gap:20px}code{background:#edf2f1;padding:2px 5px}details{margin-top:25px}summary{cursor:pointer;color:#08776f}:focus-visible{outline:3px solid #d86836;outline-offset:3px}@media(max-width:480px){main{padding:25px 15px}.playground{padding:12px}}