* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: #fff; color: #111; -webkit-text-size-adjust: 100%; }
body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
}

.stage {
  flex: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 72px 24px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

h1 { font-size: clamp(34px, 9vw, 52px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
.sub { margin-top: 16px; color: #555; font-size: 18px; }

.ask { margin-top: 36px; }
.ask p { margin-bottom: 12px; }

button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
button:focus-visible, input:focus-visible, .btn:focus-visible { outline: 2px solid #111; outline-offset: 2px; }

.main { width: 100%; background: #111; color: #fff; }
.main:disabled { background: #e8e8e8; color: #111; cursor: default; }

.status { margin-top: 8px; font-size: 14px; color: #777; min-height: 1.5em; }
.status.is-ok { color: #1a7f37; }
.status.is-bad { color: #c62828; }

.notify { margin-top: 28px; }
.notify label { display: block; font-size: 15px; color: #555; margin-bottom: 8px; }
.row { display: flex; gap: 8px; }
.row input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 14px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font: inherit;
  color: #111;
  background: #fff;
}
.row input[aria-invalid="true"] { border-color: #c62828; }
.row button { background: #fff; color: #111; border: 1px solid #111; flex: none; }
.notify.is-done .row { display: none; }

.back { margin-top: 20px; background: #fff; color: #111; border: 1px solid #111; }
.back[hidden] { display: none; }

.hp { position: absolute; left: -9999px; }

footer {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 24px calc(24px + env(safe-area-inset-bottom));
  font-size: 13px;
  color: #888;
}

@media (max-width: 400px) {
  .row { flex-direction: column; }
  .row input { flex: none; width: 100%; }
  .row button { width: 100%; }
}