:root {
  --ground: #f2f3f5; --paper: #ffffff; --text: #15171b; --muted: #636973; --line: #e1e3e7;
  --field: #f2f3f5; --ink: #0a0a0c; --on-ink: #f9f9f9; --danger: #d23b33; --focus: #3b93f0;
  --round: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --ground: #0f1113; --paper: #17191c; --text: #e9eaec; --muted: #9ca1a9; --line: #282b30;
          --field: #202328; --ink: #f1efe9; --on-ink: #0a0a0c; --danger: #ff6b61; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--text); font: 15px/1.5 var(--sans); }
.page { max-width: 440px; margin: 0 auto; padding: 12vh 20px 60px; display: grid; gap: 22px; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.top { display: flex; align-items: center; gap: 12px; }
.mascot { width: 40px; height: 40px; flex: none; }
h1 { font: 800 24px/1.2 var(--round); margin: 0; letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: anywhere; }

.form { background: var(--paper); border-radius: 20px; padding: 20px; display: grid; gap: 16px;
        box-shadow: 0 0 0 1px var(--line), 0 8px 24px rgba(10, 10, 12, 0.05); }
.form[hidden] { display: none; }
.fields { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field span { font: 700 12px/1 var(--round); color: var(--muted); }
.field input, .field textarea { width: 100%; border: 0; background: var(--field); border-radius: 12px; padding: 11px 12px; outline: none; min-width: 0; }
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field textarea:focus { box-shadow: 0 0 0 2px var(--focus); }
.error { margin: -4px 0 0; color: var(--danger); font-size: 13.5px; }
.submit { border: 0; background: var(--ink); color: var(--on-ink); border-radius: 13px; padding: 12px 16px;
          font: 700 15px/1 var(--round); cursor: pointer; }
a.submit { display: block; text-align: center; text-decoration: none; }
.submit:disabled { opacity: 0.55; cursor: default; }

.done { background: var(--paper); border-radius: 20px; padding: 22px 20px; box-shadow: 0 0 0 1px var(--line); }
.done[hidden] { display: none; }
.done-title { margin: 0; font: 800 18px/1.3 var(--round); }
.done-sub { margin: 4px 0 0; color: var(--muted); }
.done-sub a { color: inherit; }
h2 { font: 800 16px/1.3 var(--round); margin: 8px 0 -12px; }
main.page p a { color: inherit; }