*{box-sizing:border-box}body{margin:0;background:#f4f5f7;color:#172334;font:15px/1.6 system-ui,sans-serif}header{display:flex;justify-content:space-between;background:#fff;border-bottom:1px solid #d9e0e8;padding:20px 5%}main{max-width:1260px;margin:30px auto;padding:0 4%}h1{font-size:34px;letter-spacing:-1px}h2{font-size:20px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}section{background:#fff;border:1px solid #d9e0e8;border-radius:12px;padding:24px;min-width:0}label{display:block;font-weight:650;font-size:13px;margin:18px 0 8px}textarea,input{width:100%;padding:10px;border:1px solid #b7c3d2;border-radius:5px;color:#172334;background:#fff}textarea,pre{font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace}textarea{resize:vertical}pre{white-space:pre-wrap;overflow-wrap:anywhere;padding:12px;background:#f4f6fa;border-radius:5px}button{cursor:pointer;font:600 13px system-ui;border:1px solid #2356a5;color:#fff;background:#2356a5;padding:10px 14px;border-radius:5px;margin-top:12px}button:disabled{opacity:.5;cursor:wait}.row{display:flex;gap:10px;flex-wrap:wrap}.note{font-size:13px;color:#526478}.error{color:#8b3022;white-space:pre-wrap}footer{padding:20px 5%;color:#526478;font-size:12px}@media(max-width:800px){.grid{grid-template-columns:1fr}}