:root { color-scheme: light dark; font-family: system-ui, sans-serif; }
body { margin: 0; background: #f6f6f4; color: #161616; }
main { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { font-size: 1.6rem; margin: 0 0 8px; }
h2 { font-size: 1.1rem; margin: 20px 0 8px; }
.lede { line-height: 1.5; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 16px; }
label { display: flex; flex-direction: column; font-size: 0.9rem; gap: 4px; }
input, select, textarea { font: inherit; padding: 8px; border: 1px solid #888; border-radius: 6px; background: #fff; color: #161616; }
textarea { width: 100%; box-sizing: border-box; font-family: ui-monospace, monospace; font-size: 0.9rem; }
.actions { margin-top: 16px; display: flex; gap: 8px; }
button { font: inherit; padding: 8px 14px; border-radius: 6px; border: 1px solid #161616; background: #161616; color: #fff; cursor: pointer; }
button.secondary { background: #fff; color: #161616; }
.status { min-height: 1.4em; margin: 12px 0 0; }
.status.error { color: #a40000; font-weight: 600; }
.hint { font-size: 0.85rem; color: #555; }
.rules { margin-top: 28px; border-top: 1px solid #ccc; padding-top: 4px; }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }
@media (prefers-color-scheme: dark) {
  body { background: #161616; color: #f2f2f2; }
  input, select, textarea { background: #222; color: #f2f2f2; border-color: #666; }
  button { background: #f2f2f2; color: #161616; border-color: #f2f2f2; }
  button.secondary { background: #222; color: #f2f2f2; border-color: #888; }
  .hint { color: #aaa; }
}