:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0c0d10;
  color: #f4f5f7;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: radial-gradient(circle at top, #24202f 0, #0c0d10 52%);
}

main {
  width: min(34rem, 100%);
  padding: 2rem;
  border: 1px solid #35313d;
  border-radius: 1rem;
  background: #16171c;
  box-shadow: 0 1.5rem 4rem #0008;
}

.brand {
  width: 3.2rem;
  height: 3.2rem;
  display: grid;
  place-items: center;
  border-radius: .8rem;
  background: #7c3aed;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
}

h1 { margin: 1.2rem 0 .5rem; font-size: 1.65rem; }
p { color: #c8c9d0; line-height: 1.5; }
.note { color: #fff; font-weight: 700; overflow-wrap: anywhere; }
.actions { display: flex; gap: .75rem; margin: 1.5rem 0 1rem; flex-wrap: wrap; }

button {
  border: 0;
  border-radius: .65rem;
  padding: .8rem 1rem;
  background: #7c3aed;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

button.secondary { background: #2a2c34; }
button:disabled { cursor: not-allowed; opacity: .45; }
button:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 3px; }
.error { color: #fca5a5; }
.privacy { margin-top: 1.5rem; color: #8e9099; font-size: .82rem; }