:root { color-scheme: light dark; font-family: system-ui, sans-serif; line-height: 1.6; }
body { margin: 0; background: #f6f4ef; color: #202724; }
main { max-width: 840px; margin: 36px auto; padding: 28px; background: #fff; border: 1px solid #d9ded8; border-radius: 12px; }
h1 { margin: 8px 0 16px; font-size: 28px; } h2 { font-size: 18px; }
.eyebrow { color: #406252; font-size: 14px; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; padding: 16px; background: #f1f4f1; border: 1px solid #cfd8d1; border-radius: 6px; }
label { display: block; margin-top: 24px; font-weight: 600; }
input { display: block; box-sizing: border-box; width: 100%; max-width: 320px; margin: 8px 0 16px; padding: 12px; font: inherit; border: 1px solid #7e9083; border-radius: 6px; background: #fff; color: #202724; }
button { padding: 12px 20px; border: 0; border-radius: 6px; background: #265b45; color: #fff; font: inherit; cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }
#warning { color: #a32723; white-space: pre-wrap; } #status { white-space: pre-wrap; }
[hidden] { display: none !important; }
@media (max-width: 600px) { main { margin: 0; padding: 20px; border-radius: 0; border: 0; } }
@media (prefers-color-scheme: dark) { body { background: #161d19; color: #eef3ed; } main { background: #202b25; border-color: #46574b; } pre { background: #18231b; border-color: #46574b; } .eyebrow { color: #afd3bb; } #warning { color: #ffb9b1; } }