.hero{margin:34px 0 18px}.hero h1{font-size:clamp(2.5rem,6vw,4.5rem);line-height:1.05;letter-spacing:-.04em;margin:0 0 10px}.hero h1 span{color:#587e31}.hero p{color:#52664b;line-height:1.5}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:20px;background:#fff;border:1px solid #d5ddce;border-radius:14px;padding:22px}.panel{min-width:0}.panel h2{font-size:17px;margin:0 0 12px}.panel input{width:100%;padding:18px;border:1px dashed #9db893;border-radius:9px}.panel button{width:100%;margin-top:14px}.panel pre{height:250px;overflow:auto;background:#f7f9f4;border:1px solid #d5ddce;border-radius:8px;white-space:pre-wrap;overflow-wrap:anywhere}.panel .download{margin-top:13px;padding:12px}.panel .disabled{pointer-events:none;opacity:.5}#status{font-size:13px;line-height:1.5}.error{color:#b52c2c!important}.notes{background:#fff;border:1px solid #d5ddce;border-radius:10px;margin:22px 0;padding:20px}.notes h2{font-size:18px;margin:0 0 10px}.notes h3{font-size:14px;margin:18px 0 6px}.notes p{font-size:13px;line-height:1.65;color:#52664b}.notes a{color:#214e39}@media(max-width:700px){.workspace{grid-template-columns:1fr;padding:16px}.panel pre{height:160px}.hero{margin-top:20px}}
.tested-example{margin:20px 0}.tested-example img{display:block;width:min(100%,520px);height:auto}.tested-example figcaption{font-size:12px;line-height:1.5;color:#52664b;margin-top:8px}