:root { font-family: system-ui, sans-serif; color-scheme: light dark; }
body { margin: 0; background: Canvas; color: CanvasText; }
main { width: min(760px, calc(100% - 32px)); margin: 32px auto; }
h1, h2 { line-height: 1.2; }
form, section { border: 1px solid GrayText; border-radius: 12px; padding: 16px; margin: 16px 0; }
label { display: block; font-weight: 600; margin: 10px 0 6px; }
input, textarea, button { font: inherit; min-height: 44px; box-sizing: border-box; }
input, textarea { width: 100%; padding: 8px 10px; }
button { padding: 8px 14px; cursor: pointer; }
.row, .actions { display: flex; gap: 8px; align-items: stretch; }
.row input { flex: 1; }
.actions { flex-wrap: wrap; margin-top: 12px; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; }
dt { font-weight: 700; } dd { margin: 0; overflow-wrap: anywhere; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 300px; overflow: auto; }
#status { min-height: 1.5em; }
@media (max-width: 420px) {
  main { width: min(100% - 20px, 760px); margin: 12px auto; }
  .row, .actions { flex-direction: column; }
  dl { grid-template-columns: 1fr; gap: 2px; }
  dd { margin-bottom: 8px; }
  button { width: 100%; }
}