* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: #f6f4ee;
  color: #202423;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
main {
  width: min(680px, 100%);
  margin: 0 auto;
  padding: 18px;
}
section {
  display: grid;
  gap: 16px;
  border: 1px solid #ded9ce;
  border-radius: 8px;
  background: #fff;
  padding: 18px;
  box-shadow: 0 16px 38px rgba(47,43,35,.10);
}
h1, h2, p { margin: 0; }
h1 { font-size: 28px; }
h2 { font-size: 18px; }
button, a {
  font: inherit;
  font-weight: 900;
}
.notice {
  color: #66706c;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.7;
}
.action-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.button,
.sub-button,
.danger-button {
  display: inline-grid;
  place-items: center;
  min-height: 46px;
  border: 0;
  border-radius: 8px;
  padding: 0 14px;
  cursor: pointer;
  text-decoration: none;
}
.button { background: #0f8f63; color: #fff; }
.sub-button { background: #ebe5d8; color: #25302c; }
.danger-button { background: #f5dddd; color: #9c2c2c; }
.result {
  min-height: 20px;
  color: #66706c;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.6;
}
.result.is-success,
.result.is-error {
  border-radius: 8px;
  padding: 10px 12px;
}
.result.is-success { background: #edf8f3; color: #096645; }
.result.is-error { background: #f8dddd; color: #9c2c2c; }
.steps {
  display: grid;
  gap: 8px;
  border: 1px solid #e1dbcf;
  border-radius: 8px;
  background: #fbfaf6;
  padding: 12px;
}
.steps p { line-height: 1.65; }