:root {
  color-scheme: light;
  font-family:
    "Trebuchet MS", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: #3b2922;
  background: #fff8ee;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --color-ink: #3b2922;
  --color-muted: #806d61;
  --color-soft: #aa9485;
  --color-paper: #fff8ee;
  --color-surface: #fffefd;
  --color-surface-warm: #fff1d1;
  --color-coral: #f47455;
  --color-coral-dark: #db5b3f;
  --color-butter: #ffd770;
  --color-mint: #b7dfbb;
  --color-line: #f0dfcd;
  --color-green: #43875e;
  --shadow-card: 0 12px 32px rgba(97, 64, 40, 0.07);
  --shadow-lift: 0 20px 38px rgba(97, 64, 40, 0.13);
  --radius-card: 22px;
  --radius-small: 13px;
  --page-width: 1180px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

body {
  min-width: 320px;
  margin: 0;
  background-color: var(--color-paper);
  background-image:
    radial-gradient(
      circle at 4% 2%,
      rgba(255, 215, 112, 0.25),
      transparent 23rem
    ),
    radial-gradient(
      circle at 96% 34rem,
      rgba(183, 223, 187, 0.2),
      transparent 22rem
    );
  color: var(--color-ink);
}

button,
input {
  color: inherit;
  font: inherit;
}

button,
a,
input {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid rgba(244, 116, 85, 0.72);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}