/* 候选设计语言的数值事实源；正式采用时复用，第三方展品不套皮。 */
:root {
  --ds-canvas: #f7f8fa;
  --ds-surface: #ffffff;
  --ds-ink: #17212d;
  --ds-muted: #627083;
  --ds-border: #e5eaf0;
  --ds-accent: #2476ee;
  --ds-accent-hover: #175fd0;
  --ds-accent-soft: #eaf2ff;
  --ds-warm: #fff4e9;
  --ds-cool: #edf4ff;
  --ds-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ds-type-body: 16px;
  --ds-type-display: clamp(40px, 4.6vw, 64px);
  --ds-type-title: clamp(25px, 2.8vw, 34px);
  --ds-container: 1160px;
  --ds-gutter: clamp(20px, 4vw, 48px);
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-12: 48px;
  --ds-space-16: 64px;
  --ds-radius-control: 12px;
  --ds-radius-card: 28px;
  --ds-radius-panel: 20px;
  --ds-shadow: 0 16px 48px rgb(30 61 103 / 8%);
  --ds-motion: 180ms;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ds-ink); background: var(--ds-canvas); font: var(--ds-type-body)/1.65 var(--ds-font); }
a { color: inherit; }
button { font: inherit; }
img { max-width: 100%; display: block; }
.ds-container { width: min(var(--ds-container), calc(100% - 2 * var(--ds-gutter))); margin-inline: auto; }
.ds-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-3); padding: var(--ds-space-3) var(--ds-space-6); border: 1px solid transparent; border-radius: var(--ds-radius-control); background: var(--ds-accent); color: white; text-decoration: none; font-weight: 600; transition: background var(--ds-motion), box-shadow var(--ds-motion); }
.ds-button:hover { background: var(--ds-accent-hover); }
.ds-button.secondary { color: var(--ds-ink); background: var(--ds-surface); border-color: var(--ds-border); }
.ds-button.secondary:hover { background: var(--ds-accent-soft); }
.ds-card { border: 1px solid var(--ds-border); border-radius: var(--ds-radius-card); background: var(--ds-surface); }
:where(a, button):focus-visible { outline: 3px solid var(--ds-accent); outline-offset: 4px; }
::selection { background: #cfe2ff; color: var(--ds-ink); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 1000px) { :root { --ds-type-display: 48px; } }
@media (max-width: 760px) { :root { --ds-type-display: clamp(36px, 7.6vw, 56px); } }
@media (max-width: 430px) { :root { --ds-type-display: clamp(31px, 8.7vw, 38px); } }