/* Developed with assistance from OpenAI ChatGPT. https://chatgpt.com/ */
:root { font-family: system-ui, sans-serif; color: #172b3a; background: #f1f5f8; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 780px; margin: 40px auto; padding: 0 20px; }
header { margin-bottom: 28px; }
h1 { margin: 8px 0; font-size: 2.2rem; }
h2 { margin-top: 0; font-size: 1.25rem; }
p { line-height: 1.6; }
section { margin: 20px 0; padding: 24px; border: 1px solid #cdd9e1; border-radius: 10px; background: white; }
table { width: 100%; border-collapse: collapse; margin: 20px 0; }
th, td { padding: 10px 6px; text-align: left; border-bottom: 1px solid #dce4e9; }
label { display: block; margin-bottom: 8px; font-weight: 600; }
textarea { display: block; width: 100%; padding: 12px; margin-bottom: 16px; resize: vertical; border: 1px solid #6e8595; border-radius: 5px; font: 1rem monospace; }
button { padding: 11px 18px; border: 0; border-radius: 5px; background: #155b89; color: white; font: inherit; cursor: pointer; }
button:hover { background: #10466b; }
button:disabled { opacity: .6; cursor: wait; }
:focus-visible { outline: 3px solid #be6710; outline-offset: 3px; }
pre { max-height: 420px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .95rem; line-height: 1.5; }
pre:empty { display: none; }
.error { color: #a22020; }
@media (max-width: 480px) { main { margin: 20px auto; padding: 0 12px; } section { padding: 16px; } }