:root{font-family:system-ui,sans-serif;color:#172b37;background:#f3f7f6}*{box-sizing:border-box}main{max-width:1050px;margin:36px auto;padding:0 24px}header,.toolbar{display:flex;align-items:center;gap:20px;flex-wrap:wrap}header{margin-bottom:24px}.brand{background:#172b37;color:white;padding:18px 14px;border-radius:14px;font-weight:750;letter-spacing:2px}h1{font-size:28px;margin:0}h2{font-size:18px;margin:0 0 20px}p{font-size:14px;line-height:1.7;color:#52656f}section,.card{background:#fff;padding:26px;border:1px solid #dce5e7;border-radius:16px;margin:20px 0}.card{background:#f9fbfb}input,textarea{display:block;border:1px solid #becfd0;border-radius:8px;width:100%;padding:11px;font:inherit;margin:8px 0}button{background:#126f66;color:#fff;border:0;border-radius:8px;padding:12px 16px;cursor:pointer;margin:6px 8px 6px 0;font:inherit;font-size:14px}button.secondary{background:#e9f0f0;color:#172b37}button.danger{background:#a42c3d}code,pre{display:block;white-space:pre-wrap;overflow-wrap:anywhere;padding:12px;background:#eaf1ef;border-radius:8px}code:empty{display:none}output{color:#126f66;white-space:pre-wrap}.error{color:#a42c3d}footer{font-size:13px;color:#647880;padding:20px 0}