:root{font:16px/1.5 system-ui;color:#20334b;background:#f2f5f8}body{margin:0}header{background:#132c43;color:#fff;padding:36px max(5vw,24px)}header span{font-size:12px;letter-spacing:.16em;color:#9ed4d3}h1{font-size:32px;margin:8px 0}header p{color:#c3d1dd}main{max-width:1300px;margin:28px auto;padding:0 24px}input,button{font:inherit;padding:10px 14px;border:1px solid #bccbd5;border-radius:7px}button{background:#fff;color:#17354a;cursor:pointer}button:hover{background:#e2eeef}input{margin:8px}form,.layout{background:white;border:1px solid #dce4eb;border-radius:12px;padding:20px}.bar{display:flex;align-items:center;gap:12px}.bar h2{flex:1}.layout{display:grid;grid-template-columns:260px 1fr;gap:26px}nav button{display:block;text-align:left;width:100%;margin-bottom:10px}article{min-width:0}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#f4f7fa;padding:14px;border-radius:8px;font:13px/1.6 ui-monospace,monospace}article button{margin:4px}h4{margin-bottom:4px}#message{color:#40566d}@media(max-width:700px){.layout{grid-template-columns:1fr}header{padding:24px}main{padding:0 12px}}
details{border-top:1px solid #e2e8ed;padding:10px 0;margin-top:10px}summary{cursor:pointer;color:#52677a;font-size:14px}nav button{white-space:pre-line;font-size:14px}article h3{margin-top:30px}article img{display:block;margin:12px 0;border:1px solid #dce4eb;border-radius:8px}a{color:#126470}
#settings {margin:1rem 0;padding:1rem;border:1px solid #64748b;border-radius:8px}#settings fieldset {margin:1rem 0;display:grid;gap:.7rem}#settings label {display:block}#settings input:not([type=checkbox]),#settings textarea {display:block;width:95%;max-width:42rem}#settings button{margin:.5rem .5rem .5rem 0}