:root {
  color-scheme: light dark;
  font: 16px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: #f3f0e8;
  color: #20211f;
}

.card {
  width: min(32rem, 100%);
  padding: 2rem;
  border: 1px solid #d3cdbf;
  border-radius: 1rem;
  background: #fffdf8;
  box-shadow: 0 1rem 3rem #433b2920;
}

.landing { width: min(40rem, 100%); }
h1 { margin: 0 0 1rem; font-size: clamp(1.6rem, 5vw, 2.5rem); line-height: 1.15; }
p, ul { color: #55564f; }
.eyebrow { margin: 0 0 .5rem; color: #1f6250; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

button,
.button {
  appearance: none;
  display: inline-block;
  border: 1px solid #77746b;
  border-radius: .6rem;
  padding: .7rem 1rem;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}

button.primary,
.button { border-color: #1f6250; background: #1f6250; color: white; }
button.danger { border-color: #a23d36; color: #a23d36; }
button:disabled { cursor: wait; opacity: .55; }
.grant { border-top: 1px solid #ded9cd; padding: 1rem 0; }
code { overflow-wrap: anywhere; }
.error { color: #a23d36; }

@media (prefers-color-scheme: dark) {
  body { background: #171816; color: #f2f0e8; }
  .card { background: #22231f; border-color: #44453e; }
  p, ul { color: #bcbbb2; }
}