:root{font:15px/1.5 system-ui,sans-serif;color:#183344;background:#f1f4f6}*{box-sizing:border-box}body{margin:0}header{display:flex;gap:25px;justify-content:space-between;align-items:center;background:#132f42;color:white;padding:18px 28px}header a{color:#cde9f0}main{max-width:1420px;margin:auto;padding:22px}h1{margin-bottom:5px}h2{font-size:21px}section{background:white;border:1px solid #d4dde3;border-radius:9px;padding:22px;margin:20px 0}label{display:block;font-weight:600;margin:10px 0}input,select,textarea{display:block;width:100%;font:inherit;padding:8px;border:1px solid #a9bac5;border-radius:5px;margin-top:4px}button,a{cursor:pointer}button{font:inherit;border:1px solid #97aebb;border-radius:5px;padding:8px 13px;background:white;margin:6px 8px 6px 0}.primary{background:#087f8c;color:white;border-color:#087f8c}.split{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr);gap:25px}.controls{display:flex;align-items:center;gap:18px}#source{width:100%;background:#f6f6f6;touch-action:none;cursor:crosshair}#message{white-space:pre-wrap;border-left:4px solid #087f8c;padding:9px 14px}#message:empty{display:none}.example{border-top:1px solid #dae2e7;padding:15px 0}.example h3{margin-bottom:4px}.example img{width:100%;height:440px;object-fit:contain;border:1px solid #ddd}.status{font-size:13px;border-radius:12px;padding:3px 9px;background:#e4edf1}p{max-width:1050px}.muted{color:#586c78}button:disabled{opacity:.5;cursor:wait}@media(max-width:900px){.split{display:block}header{flex-wrap:wrap}.example img{height:300px}}