body { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
.wrap { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 14px; }
.logo img { height: 44px; }
h1 { font-size: clamp(34px, 9vw, 44px); line-height: 1.05; }
.form {
  display: flex; flex-direction: column; gap: 16px; margin-top: 8px; padding: 24px; background: color-mix(in srgb, var(--surface) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--crest-gold) 40%, var(--rule)); border-radius: 20px; box-shadow: var(--sh-1);
}
.who { display: grid; grid-template-columns: 1fr 1fr; }
.who button { padding: 10px; font-size: 15px; }
.err { color: var(--red); font-size: 14px; font-weight: 600; }
.btn.main { padding: 13px 16px; font-size: 16px; }
.hint { font-size: 13px; text-align: center; }
select.in { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }