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

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at 15% 10%, #fff 0, transparent 34%), #f3f4f1;
}

.card {
  width: min(760px, 100%);
  padding: clamp(28px, 6vw, 64px);
  border: 1px solid #d9dcd5;
  border-radius: 28px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 24px 80px rgba(25, 31, 27, .08);
}

.compact { width: min(560px, 100%); }
.eyebrow { color: #35795a; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 14px 0 18px; font-size: clamp(34px, 6vw, 58px); line-height: 1.04; letter-spacing: -.045em; }
.compact h1 { font-size: clamp(32px, 5vw, 46px); }
p { color: #626862; font-size: 17px; line-height: 1.7; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
a, button { border: 1px solid #c9cdc6; border-radius: 12px; padding: 13px 18px; color: #17191c; background: #fff; text-decoration: none; font: inherit; cursor: pointer; }
.primary { color: #fff; background: #1e6b49; border-color: #1e6b49; }
pre { margin: 28px 0 0; padding: 18px; overflow: auto; white-space: pre-wrap; border-radius: 14px; color: #dcece3; background: #16231c; font: 14px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.code-box { margin-top: 24px; padding: 18px; border-radius: 16px; background: #edf6f0; text-align: center; }
.code-box span { display: block; color: #626862; font-size: 13px; }
.code-box strong { display: block; margin-top: 6px; font: 700 30px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }
.note { margin-top: 24px; font-size: 14px; }

@media (max-width: 540px) {
  body { padding: 14px; }
  .card { padding: 28px 22px; border-radius: 22px; }
  .actions > * { width: 100%; text-align: center; }
}