:root {
  --paper: #f1f1eb;
  --surface: #fbfaf5;
  --surface-strong: #ffffff;
  --ink: #171814;
  --ink-soft: #2a2b25;
  --muted: #65665f;
  --meta: #8a8b83;
  --line: #d8d8cf;
  --line-strong: #bdbdb3;
  --accent: #c95d3c;
  --accent-dark: #a9492e;
  --blue: #28657a;
  --green: #26734f;
  --yellow: #936313;
  --red: #a53d38;
  --mono: "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  --sans: "Avenir Next", "Hiragino Sans GB", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; letter-spacing: 0; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { color: inherit; font: inherit; }
button, a { touch-action: manipulation; }
a { color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
input, select, textarea { outline: none; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgb(201 93 60 / .16);
  outline: none;
}
code { font-family: var(--mono); }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 15px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.button.primary { border: 1px solid var(--accent); background: var(--accent); color: #fff; }
.button.primary:hover { border-color: var(--accent-dark); background: var(--accent-dark); }
.button.secondary { border: 1px solid var(--line); background: var(--surface-strong); color: var(--ink-soft); }
.button.secondary:hover { border-color: var(--line-strong); }
.button.text-button { border: 1px solid transparent; background: transparent; color: var(--muted); }