:root {
  color-scheme: dark;

  --shell: 1180px;
  --header-h: 66px;

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --space-1: 0.35rem;
  --space-2: 0.7rem;
  --space-3: 1.05rem;
  --space-4: 1.5rem;
  --space-5: 2.25rem;
  --space-6: 3.25rem;
  --space-7: 4.75rem;

  --font-sans: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans SC", "Source Han Sans SC", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;

  --bg: #080a0f;
  --bg-soft: #0b0e15;
  --surface: #11141d;
  --surface-2: #161a25;
  --surface-3: #1d2230;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.17);

  --text: #f1f4fb;
  --text-dim: #a9b1c4;
  --text-mute: #798197;

  --gold: #f7b53c;
  --gold-soft: rgba(247, 181, 60, 0.14);
  --gold-line: rgba(247, 181, 60, 0.34);
  --gold-ink: #201404;
  --jade: #3ddc97;
  --jade-soft: rgba(61, 220, 151, 0.14);
  --rose: #ff6b81;
  --rose-soft: rgba(255, 107, 129, 0.15);

  --grad-gold: linear-gradient(120deg, #ffd98a 0%, #f7b53c 44%, #ff8f3c 100%);
  --grad-line: linear-gradient(90deg, #ffd98a, #ff8f3c 55%, transparent);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 20px 44px -24px rgba(0, 0, 0, 0.9);
  --shadow-gold: 0 22px 46px -24px rgba(247, 181, 60, 0.5);

  --ease: cubic-bezier(0.22, 0.68, 0.24, 1);
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f5f6fb;
  --bg-soft: #eceff7;
  --surface: #ffffff;
  --surface-2: #f4f6fc;
  --surface-3: #e8ecf6;
  --line: rgba(15, 22, 40, 0.1);
  --line-strong: rgba(15, 22, 40, 0.2);

  --text: #121722;
  --text-dim: #4a5367;
  --text-mute: #6c7488;

  --gold: #d3860a;
  --gold-soft: rgba(211, 134, 10, 0.12);
  --gold-line: rgba(211, 134, 10, 0.32);
  --gold-ink: #231603;
  --jade: #0f9d63;
  --jade-soft: rgba(15, 157, 99, 0.12);
  --rose: #d43f58;
  --rose-soft: rgba(212, 63, 88, 0.12);

  --grad-gold: linear-gradient(120deg, #f0ac26 0%, #e59a12 44%, #d9700f 100%);
  --grad-line: linear-gradient(90deg, #e59a12, #d9700f 55%, transparent);

  --shadow-1: 0 1px 2px rgba(18, 23, 34, 0.06);
  --shadow-2: 0 20px 44px -26px rgba(18, 23, 34, 0.4);
  --shadow-gold: 0 22px 46px -26px rgba(211, 134, 10, 0.45);
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    color-scheme: light;

    --bg: #f5f6fb;
    --bg-soft: #eceff7;
    --surface: #ffffff;
    --surface-2: #f4f6fc;
    --surface-3: #e8ecf6;
    --line: rgba(15, 22, 40, 0.1);
    --line-strong: rgba(15, 22, 40, 0.2);

    --text: #121722;
    --text-dim: #4a5367;
    --text-mute: #6c7488;

    --gold: #d3860a;
    --gold-soft: rgba(211, 134, 10, 0.12);
    --gold-line: rgba(211, 134, 10, 0.32);
    --gold-ink: #231603;
    --jade: #0f9d63;
    --jade-soft: rgba(15, 157, 99, 0.12);
    --rose: #d43f58;
    --rose-soft: rgba(212, 63, 88, 0.12);

    --grad-gold: linear-gradient(120deg, #f0ac26 0%, #e59a12 44%, #d9700f 100%);
    --grad-line: linear-gradient(90deg, #e59a12, #d9700f 55%, transparent);

    --shadow-1: 0 1px 2px rgba(18, 23, 34, 0.06);
    --shadow-2: 0 20px 44px -26px rgba(18, 23, 34, 0.4);
    --shadow-gold: 0 22px 46px -26px rgba(211, 134, 10, 0.45);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 18px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.72;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol,
dl,
dd {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  line-height: 1.24;
  font-weight: 700;
  letter-spacing: -0.01em;
}

ul,
ol {
  padding-left: 1.15rem;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

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

table {
  width: 100%;
  border-collapse: collapse;
}

code,
pre {
  font-family: var(--font-mono);
  font-size: 0.86rem;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: var(--gold);
  color: var(--gold-ink);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}