:root {
  color-scheme: light dark;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f2f3f5;
  color: #141414;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; padding: 10px; display: grid; place-items: center; }
.card { width: min(100%, 560px); max-height: calc(100dvh - 20px); overflow-y: auto; padding: clamp(16px, 4vw, 22px); border-radius: 24px; background: #fff; box-shadow: 0 14px 45px rgba(0,0,0,.12); overscroll-behavior: contain; }
.logo { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 15px; background: #447bba; color: #fff; font-size: 28px; font-weight: 750; }
h1 { margin: 12px 0 6px; font-size: clamp(22px, 5vw, 30px); line-height: 1.08; }
.lead { margin: 0 0 12px; color: #626d7a; line-height: 1.32; font-size: 15px; }
.notice { margin: 0 0 12px; padding: 12px; border-radius: 15px; background: #edf3fa; color: #31577f; line-height: 1.32; font-size: 14px; }
.progress { min-height: 0; margin: 0 0 10px; padding-left: 22px; color: #3f8a56; font-size: 15px; line-height: 1.28; }
.progress:empty { display: none; }
.status { min-height: 42px; margin: 0 0 10px; padding: 11px 13px; border-radius: 14px; background: #f2f3f5; line-height: 1.32; font-size: 15px; }
.status.error { background: #faebeb; color: #a32727; }
button, .button { width: 100%; min-height: 48px; margin-top: 9px; padding: 11px 14px; border: 0; border-radius: 15px; background: #447bba; color: #fff; font: inherit; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; }
button:disabled { opacity: .62; cursor: wait; }
.secondary { display: block; background: transparent; color: #447bba; border: 1px solid #447bba; }
.hidden { display: none; }
.footnote { margin: 12px 0 0; color: #818c99; font-size: 12px; line-height: 1.32; }
.is-complete .notice { display: none; }
.is-complete #create { display: none; }
.is-complete .lead { margin-bottom: 8px; }
@media (max-height: 760px) {
  body { padding: 6px; place-items: start center; }
  .card { max-height: calc(100dvh - 12px); padding: 14px; border-radius: 20px; }
  .logo { width: 36px; height: 36px; font-size: 23px; }
  h1 { margin-top: 8px; font-size: 23px; }
  .lead, .notice, .status, .progress { font-size: 13px; }
  button, .button { min-height: 44px; margin-top: 7px; }
}
@media (prefers-color-scheme: dark) {
  :root { background: #17181a; color: #f2f3f5; }
  .card { background: #242528; box-shadow: none; }
  .lead, .footnote { color: #aeb7c2; }
  .notice { background: #24384d; color: #c6ddf5; }
  .status { background: #303136; }
  .status.error { background: #512a2a; color: #ffd4d4; }
}