/* 表单本身也是本课样例。 */
* { box-sizing: border-box; }
:root { color-scheme: light; }
body { margin: 0; padding: 20px; font: 20px/1.6 system-ui, sans-serif; color: #19344a; background: #f3f6fa; }
main { max-width: 720px; margin: auto; padding: 26px; background: white; border-radius: 12px; }
h1 { font-size: 30px; margin: 8px 0; }
h2 { font-size: 24px; }
a { color: #1e589a; }
.notice { padding: 12px; background: #edf5ff; border-left: 4px solid #285fa1; }
label { display: block; margin-top: 16px; }
input:not([type="radio"]):not([type="checkbox"]), select, textarea {
  display: block;
  width: 100%;
  font: inherit;
  color: #19344a;
  background: #fff;
  padding: 8px 10px;
  border: 1px solid #60758b;
  border-radius: 5px;
}
fieldset { margin: 20px 0; border: 1px solid #a8bdcc; border-radius: 8px; }
legend { padding: 0 6px; font-weight: 700; }
.choice { margin: 6px 0; padding: 5px; }
.choice input { width: 20px; height: 20px; }
.help { font-size: 20px; color: #334b60; margin: 6px 0; }
input::placeholder, textarea::placeholder { color: #526477; opacity: 1; }
option { color: #19344a; background: #fff; }
button { margin-top: 20px; padding: 12px 20px; border: 0; border-radius: 6px; background: #215c99; color: white; font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid #d27817; outline-offset: 3px; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 20px/1.6 Consolas, monospace; color: #19344a; background: #edf3f8; }
@media (max-width: 500px) { body { padding: 8px; } main { padding: 16px; } }