*{box-sizing:border-box}body{margin:0;background:white;color:#172030;font:15px/1.7 Arial}#examples{max-width:800px;padding:24px;margin:auto;border:1px solid #dce3ed;border-radius:12px}h2{display:table;font-size:13px;text-transform:uppercase;color:#536681;background:#edf1f6;border-radius:5px;padding:5px 10px;margin:0 0 20px}h3{display:table;margin:0 auto 12px;padding:3px 10px;border-radius:5px;background:#edf1f6;font:600 15px/1.5 monospace;overflow-wrap:anywhere;color:#536681}section{min-height:180px;background:#f5f7fa;padding:16px;border-radius:8px;margin:16px 0}section strong{color:#172030!important}button{font:inherit;border:1px solid #dce3ed;background:white;border-radius:6px;padding:5px 14px;color:#536681;cursor:pointer}button[aria-pressed=true]{background:#536681;color:white}.tabs,nav{display:flex;gap:8px;justify-content:center}.tabs{justify-content:flex-start}nav{margin-top:12px;gap:0}nav button{font-size:0;padding:0;width:28px;height:28px;background:transparent!important;border:0}nav button::after{content:"";display:block;width:8px;height:8px;margin:auto;border-radius:50%;background:#ccd5e3}nav button[aria-pressed=true]::after{background:#7891c1}code{color:#ff5252;background:#eee;padding:2px 4px} @media(max-width:400px){#examples{padding:14px}button{font-size:12px;padding:5px 10px}section{min-height:220px;font-size:14px}}