:root { color-scheme: light dark; }
body { margin: 0; padding: 24px 16px 56px; font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: #f7f8fc; color: #0f1b33; }
main { max-width: 42rem; margin: 0 auto; background: #ffffff; border-radius: 18px; padding: 24px 20px; box-shadow: 0 2px 14px rgba(15, 27, 51, 0.12); }
h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 0.5rem; }
h2 { font-size: 1.15rem; margin: 1.6rem 0 0.5rem; }
h3 { font-size: 1rem; margin: 1rem 0 0.25rem; }
p { margin: 0 0 0.9rem; }
a { color: #2347c5; font-weight: 600; }
.lede { color: #263250; }
.row { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 0 0 14px; }
@media (min-width: 640px) { .row.two { grid-template-columns: 1fr 1fr; } }
label.field { display: block; font-weight: 600; }
label.field input, label.field select { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 12px; font: inherit; border: 1px solid #74777f; border-radius: 10px; background: #ffffff; color: inherit; }
label.field input:focus, label.field select:focus { outline: 3px solid #2347c5; outline-offset: 1px; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.notice { padding: 12px 14px; border-radius: 10px; background: #f3f6fe; font-size: 0.95rem; }
label.check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 0.9rem; }
label.check input { margin-top: 0.35rem; flex: none; width: 1.25rem; height: 1.25rem; }
.optional { color: #4a5672; font-weight: 400; }
.points { margin: 0 0 0.9rem; padding: 12px 14px 12px 14px; border: 1px solid #c9d0de; border-radius: 10px; background: #fbfcff; }
.points b { display: block; margin-bottom: 4px; }
.points ul { margin: 0; padding-left: 1.2rem; }
.points li { margin: 0 0 6px; }
.texts { max-height: 18rem; overflow: auto; padding: 10px 12px; border: 1px solid #c9d0de; border-radius: 10px; font-size: 0.92rem; }
.texts table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.texts td { border: 1px solid #c9d0de; padding: 3px 5px; vertical-align: top; }
#turnstile { margin: 0 0 14px; min-height: 65px; }
button { font: inherit; padding: 14px 16px; border-radius: 12px; border: 0; width: 100%; margin: 0 0 0.75rem; cursor: pointer; }
button.primary { background: #2347c5; color: #ffffff; font-weight: 700; }
button.primary:disabled { background: #a9acc4; cursor: not-allowed; }
button.secondary { background: #ffffff; border: 2px solid #2347c5; color: #2347c5; font-weight: 700; }
input.code { font-size: 1.8rem; letter-spacing: 0.4rem; text-align: center; width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid #74777f; border-radius: 10px; font-family: inherit; }
.small { font-size: 0.9rem; color: #263250; }
.error { color: #b3261e; font-weight: 600; }
.done { text-align: center; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 1rem 0; font-size: 0.9rem; }
.steps span { padding: 8px; border-radius: 10px; background: #f3f6fe; }
.steps span.on { background: #c8edd2; }
@media (prefers-color-scheme: dark) {
  body { background: #0f1b33; color: #ececf1; }
  main { background: #162447; }
  a { color: #9db4ff; }
  .lede, .small { color: #cfd6e8; }
  label.field input, label.field select, input.code { background: #0f1b33; border-color: #8a8fa0; }
  .notice { background: #1c2d5c; }
  .points { background: #1c2d5c; border-color: #3a4a7a; }
  .texts, .texts td { border-color: #3a4a7a; }
  .steps span { background: #1c2d5c; }
  .steps span.on { background: #146c2e; }
  .error { color: #ffb4ab; }
  button.secondary { background: transparent; color: #9db4ff; border-color: #9db4ff; }
}