* { box-sizing: border-box; }
body { font: 15px/1.5 -apple-system, system-ui, sans-serif; background:#f6f7f9; color:#1e2330; margin:0; }
.wrap { max-width: 880px; margin: 2rem auto; padding: 0 1rem; }
h1 { margin: 0 0 1rem; font-size: 1.4rem; }
h2 { margin: 0 0 .8rem; font-size: 1.1rem; }
.card { background:#fff; border:1px solid #e3e6ec; border-radius:8px; padding:1rem; margin:1rem 0; }
label { display:block; margin: .5rem 0; }
input { display:block; width:100%; padding:.5rem; border:1px solid #c8ccd4; border-radius:6px; font:inherit; margin-top:.25rem; }
button { background:#22324b; color:#fff; border:0; border-radius:6px; padding:.55rem 1rem; cursor:pointer; font:inherit; }
button.link { background:none; color:#22324b; padding:0; text-decoration:underline; }
.muted { color:#6a7387; font-size:.9em; }
.error { color:#a01a1a; background:#fdecec; border:1px solid #f3c6c6; padding:.5rem .75rem; border-radius:6px; }
.info  { color:#0b5a2f; background:#e7f6ed; border:1px solid #b6e0c5; padding:.5rem .75rem; border-radius:6px; }
pre.magic { background:#f0f2f6; padding:.6rem; border-radius:6px; overflow-x:auto; user-select:all; }
table { width:100%; border-collapse: collapse; }
th, td { text-align:left; padding:.35rem .5rem; border-bottom:1px solid #eef0f4; font-size:.9em; }
th { color:#6a7387; font-weight:600; }