:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --line: rgba(0, 0, 0, 0.1);
  --soft-line: rgba(0, 0, 0, 0.06);
  --blue: #0071e3;
  --blue-2: #2997ff;
  --cyan: #64d2ff;
  --violet: #8e7dff;
  --green: #30d158;
  --amber: #ff9f0a;
  --red: #ff453a;
  --shadow: 0 20px 70px rgba(0, 0, 0, 0.1);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --max: 1180px;
  --reading: 900px;
  --reading-wide: 1040px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(1100px 620px at 85% -8%, rgba(41, 151, 255, 0.13), transparent 70%),
    radial-gradient(900px 560px at 8% 16%, rgba(142, 125, 255, 0.075), transparent 72%),
    var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.78;
  letter-spacing: 0.018em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

img,
svg {
  max-width: 100%;
}

p,
li,
td,
th,
summary {
  letter-spacing: 0.022em;
  text-wrap: pretty;
}

p {
  margin: 1.25em 0;
  font-size: 17.5px;
  line-height: 1.92;
}

code {
  letter-spacing: 0;
}

.shell {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-right: 32px;
  padding-left: 32px;
}

@media (max-width: 980px) {
  .shell {
    padding-right: 24px;
    padding-left: 24px;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  p {
    font-size: 16.5px;
  }

  .shell {
    padding-right: 18px;
    padding-left: 18px;
  }
}

@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;
  }
}