/* Prototype only: the design system replaces this. */
body { font: 16px/1.5 system-ui, sans-serif; margin: 0; background: #fff; color: #111; }
main { max-width: 960px; margin: 0 auto; padding: 16px; }
label { display: block; margin: 8px 0; }
input, select { font: inherit; padding: 6px; width: 100%; max-width: 360px; box-sizing: border-box; display: block; }
button { font: inherit; padding: 6px 14px; margin: 4px 4px 4px 0; cursor: pointer; }
.secondary { background: none; }
.code { font-family: ui-monospace, monospace; font-size: 1.4em; letter-spacing: 0.1em; }
#msg:empty { display: none; }
#msg { padding: 8px 12px; background: #fff3cd; border-radius: 4px; }
table { border-collapse: collapse; width: 100%; margin: 8px 0 24px; font-size: 14px; }
th, td { text-align: left; padding: 4px 8px; border-bottom: 1px solid #ddd; vertical-align: top; }
section { margin: 24px 0; }
@media (prefers-color-scheme: dark) {
  body { background: #161616; color: #eee; }
  #msg { background: #4a3d10; }
  th, td { border-color: #333; }
}