* { box-sizing: border-box; }
body { margin: 0; background: #f1f5f9; color: #17243a; font: 16px/1.5 system-ui, sans-serif; }
header { background: #152642; color: white; padding: 1rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
nav { display: flex; flex-wrap: wrap; gap: 1rem; flex: 1; }
header a { color: white; }
header form { margin: 0; }
main { max-width: 76rem; margin: auto; padding: 1rem; }
.columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem; }
section { padding: 1rem; background: white; border-radius: .6rem; }
form { margin-bottom: .8rem; }
label { display: block; margin: .5rem 0; }
input, select, textarea { display: block; width: 100%; padding: .45rem; border: 1px solid #64748b; border-radius: .3rem; font: inherit; }
textarea, pre { font-family: monospace; }
button { background: #174885; color: white; padding: .55rem .8rem; border: 0; border-radius: .3rem; cursor: pointer; font: inherit; }
pre { overflow: auto; }
.notice { padding: .7rem; background: #dbeafe; }
#builder { border: 1px solid #bcc9da; padding: .75rem; margin-bottom: 1rem; }
@media (max-width: 700px) { .columns { grid-template-columns: 1fr; } }