* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, sans-serif; background: #f4f6fb; color: #1d2433; }
header { padding: 14px 24px; background: #2b3a67; color: #fff; font-size: 18px; }
main { max-width: 640px; margin: 40px auto; padding: 32px; background: #fff; border-radius: 12px; box-shadow: 0 2px 12px #0001; }
h1 { margin-top: 0; font-size: 26px; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
dt { color: #5b6478; }
dd { margin: 0; overflow-wrap: anywhere; }
code { font-size: 13px; background: #eef1f8; padding: 2px 6px; border-radius: 4px; }
button { font: inherit; padding: 9px 18px; border: 0; border-radius: 8px; background: #3d5af1; color: #fff; cursor: pointer; margin: 8px 8px 8px 0; }
button.ghost { background: #eef1f8; color: #2b3a67; }
ul#notes li { padding: 4px 0; }
.err { color: #c62828; }
details { margin: 16px 0; }
textarea { width: 100%; font: 12px ui-monospace, monospace; }