:root {
  color-scheme: light dark;
  --background: #fff;
  --text: #202124;
  --muted: #777b82;
  --border: #d9dce1;
  --button: #22252a;
  --button-text: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; padding: 40px 24px; background: var(--background); color: var(--text); }
main { width: 100%; max-width: 440px; margin: 0 auto; }
form, fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.fields { display: grid; gap: 26px; margin-bottom: 32px; }
.field { min-width: 0; }
label { display: block; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; white-space: pre-wrap; }
.hint { margin: 5px 0 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; white-space: pre-wrap; }
input, textarea, select { display: block; width: 100%; min-height: 46px; margin-top: 10px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--background); color: var(--text); font: inherit; font-size: 16px; }
textarea { min-height: 96px; resize: vertical; }
button { width: 100%; min-height: 46px; padding: 11px 16px; border: 0; border-radius: 6px; background: var(--button); color: var(--button-text); font: inherit; font-size: 15px; cursor: pointer; touch-action: manipulation; }
button:hover:not(:disabled) { opacity: .88; }
:disabled { opacity: .6; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
#status { margin: 0; font-size: 14px; }
#status[data-state="invalid"] { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; color: var(--muted); background: var(--background); }
#status[data-state="invalid"]::before { content: "×"; display: block; font-size: 64px; font-weight: 300; line-height: 1; }
@media (max-width: 420px) { body { padding: 32px 22px; } }
@media (prefers-color-scheme: dark) {
  :root { --background: #161719; --text: #ededef; --muted: #96999f; --border: #3b3e43; --button: #e9e9ec; --button-text: #202124; }
}