:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #221b35;
  background: #f7f5fb;
}

* { box-sizing: border-box; }

body { margin: 0; line-height: 1.65; }

main {
  width: min(900px, calc(100% - 32px));
  margin: 40px auto;
  padding: clamp(24px, 5vw, 56px);
  background: #fff;
  border: 1px solid #e8e2f2;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(74, 44, 118, .08);
}

h1, h2 { line-height: 1.2; color: #4f2b85; }
h1 { font-size: clamp(2rem, 7vw, 3.2rem); margin: 0 0 8px; }
h2 { margin-top: 36px; }
a { color: #6539a4; }
.muted { color: #6d6577; }
.notice { padding: 16px 18px; border-radius: 12px; background: #f1eafa; }
.danger { background: #fff4f2; border: 1px solid #f1c1b9; }

label { display: block; margin-top: 18px; font-weight: 650; }
input {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 13px 14px;
  font: inherit;
  border: 1px solid #cfc4dd;
  border-radius: 10px;
}

button {
  margin-top: 18px;
  padding: 13px 18px;
  border: 0;
  border-radius: 10px;
  background: #5d3294;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

button[disabled] { cursor: wait; opacity: .65; }
.delete-button { background: #a62e24; }
#result { min-height: 28px; margin-top: 16px; font-weight: 650; }
footer { margin-top: 44px; padding-top: 20px; border-top: 1px solid #eee8f4; }