:root { color-scheme: light dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #202634; background: #f6f8fc; }
body { margin: 0; padding: 24px; }
main { max-width: 650px; margin: min(10vh, 72px) auto; }
h1 { font-size: 34px; font-weight: 500; margin: 0 0 16px; }
h2 { font-size: 20px; font-weight: 500; }
p { line-height: 1.6; }
section { padding: 22px; margin: 28px 0; background: #fff; border: 1px solid #dce2ed; border-radius: 16px; }
label { display: block; margin: 0 0 16px; }
input { display: block; box-sizing: border-box; width: 100%; min-height: 44px; margin-top: 8px; border: 1px solid #b9c4d4; border-radius: 8px; padding: 10px 12px; font: inherit; }
button, .button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; border: 1px solid #acb9d0; border-radius: 10px; padding: 10px 16px; font: inherit; color: inherit; background: #f8faff; text-decoration: none; cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
.detail { color: #586779; font-size: 14px; }
#message[data-error="true"] { color: #a22132; }
li { margin: 10px 0; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root { color: #edf1f8; background: #111722; }
  section { background: #192130; border-color: #354156; }
  button, .button { color: #edf1f8; background: #263249; border-color: #637796; }
  input { background: #101722; border-color: #637796; }
  .detail { color: #b8c5d8; }
  #message[data-error="true"] { color: #ffaeb9; }
}