/* 设计系统 — generated from tokens.json by build-tokens.py. Do not edit. */

:root {
  --ds-bg: #F5F5F3;
  --ds-bg-low: #E9E9E6;
  --ds-surface: #FDFDFC;
  --ds-inset: #E9E7E3;
  --ds-ink: #121315;
  --ds-ink-secondary: #4B4E53;
  --ds-ink-caption: #5E636A;
  --ds-rule: rgba(22,24,28,0.14);
  --ds-groove: rgba(22,24,28,0.13);
  --ds-groove-edge: rgba(22,24,28,0.20);
  --ds-solid: #16171A;
  --ds-on-solid: #FFFFFF;
  --ds-danger: #9E3B2C;
  --ds-coat-edge: #FFFFFF;
  --ds-coat-inner: rgba(255,255,255,0.45);
  --ds-coat-define: rgba(22,24,28,0.035);
  --ds-lens-fill: rgba(255,255,255,0.34);
  --ds-scrim: rgba(0,0,0,0);
  --ds-en-rouge: #B8456A;
  --ds-on-en-rouge: #FFFFFF;
  --ds-en-coral: #BC4F33;
  --ds-on-en-coral: #FFFFFF;
  --ds-en-turquoise: #2A7B70;
  --ds-on-en-turquoise: #FFFFFF;
  --ds-en-jilan: #2E4F8C;
  --ds-on-en-jilan: #FFFFFF;
  --ds-en-lemon: #E3C850;
  --ds-on-en-lemon: #3A2E05;
  --ds-en-celadon: #9CC3B4;
  --ds-on-en-celadon: #17302A;
  --ds-space-in-4: 4px;
  --ds-space-in-8: 8px;
  --ds-space-group-10: 10px;
  --ds-space-group-12: 12px;
  --ds-space-section-24: 24px;
  --ds-space-section-28: 28px;
  --ds-space-page-20: 20px;
  --ds-space-page-24: 24px;
  --ds-dock-bottom: 34px;
  --ds-hand-side: 14px;
  --ds-column: 640px;
  --ds-hit-min: 44px;
  --ds-size-control: 44px;
  --ds-size-segment: 48px;
  --ds-size-segment-min: 64px;
  --ds-size-cta: 56px;
  --ds-size-rim: 2px;
  --ds-size-text-btn: 40px;
  --ds-size-chip: 34px;
  --ds-size-option: 36px;
  --ds-size-undo: 52px;
  --ds-size-switch-w: 56px;
  --ds-size-switch-h: 34px;
  --ds-size-switch-dot: 8px;
  --ds-size-check: 22px;
  --ds-size-grab: 33px;
  --ds-size-grab-bar-w: 36px;
  --ds-size-grab-bar-h: 5px;
  --ds-size-track: 4px;
  --ds-size-progress: 2px;
  --ds-size-thumb: 22px;
  --ds-size-span-bead: 8px;
  --ds-size-knob-min: 120px;
  --ds-size-record: 64px;
  --ds-size-record-stop: 40px;
  --ds-size-record-hit: 72px;
  --ds-size-index: 32px;
  --ds-size-icon-hand: 20px;
  --ds-size-icon-row: 24px;
  --ds-size-textarea-min: 88px;
  --ds-pad-input: 14px;
  --ds-pad-textarea-y: 12px;
  --ds-pad-card: 20px;
  --ds-pad-page: 28px;
  --ds-pad-text-btn: 16px;
  --ds-pad-chip: 14px;
  --ds-pad-segment: 18px;
  --ds-pad-option: 18px;
  --ds-pad-cta: 26px;
  --ds-pad-switch: 3px;
  --ds-gap-cta: 10px;
  --ds-fade-gap: 24px;
  --ds-fade-gradient: 140px;
  --ds-fade-top-gap: 12px;
  --ds-fade-top-gradient: 72px;
  --ds-radius-input: 16px;
  --ds-radius-card: 22px;
  --ds-radius-thumb: 12px;
  --ds-radius-page: 26px;
  --ds-radius-sheet: 32px;
  --ds-radius-tray: 24px;
  --ds-radius-tray-segment: 20px;
  --ds-radius-pill: 28px;
  --ds-radius-switch: 12px;
  --ds-radius-switch-knob: 9px;
  --ds-radius-scene: 10px;
  --ds-radius-scene-ratio: 5%;
  --ds-radius-record-stop: 12px;
  --ds-radius-check: 7px;
  --ds-shadow-coat: inset 0 0 0 var(--ds-hairline) #FFFFFF, inset 0 0 0 calc(var(--ds-hairline) + 1px) rgba(255,255,255,0.45), inset 0 1px 0 #FFFFFF, inset 0 0 0 calc(var(--ds-hairline) + 1.5px) rgba(22,24,28,0.035);
  --ds-shadow-raised: inset 0 0 0 var(--ds-hairline) #FFFFFF, inset 0 0 0 calc(var(--ds-hairline) + 1px) rgba(255,255,255,0.45), inset 0 1px 0 #FFFFFF, inset 0 0 0 calc(var(--ds-hairline) + 1.5px) rgba(22,24,28,0.035), 0 1px 1px rgba(22,24,28,0.05), 0 3px 6px -2px rgba(22,24,28,0.06), 0 16px 30px -16px rgba(22,24,28,0.22);
  --ds-shadow-page: inset 0 0 0 var(--ds-hairline) #FFFFFF, inset 0 0 0 calc(var(--ds-hairline) + 1px) rgba(255,255,255,0.45), inset 0 1px 0 #FFFFFF, inset 0 0 0 calc(var(--ds-hairline) + 1.5px) rgba(22,24,28,0.035), 0 2px 4px rgba(22,24,28,0.05), 0 24px 48px -24px rgba(22,24,28,0.26);
  --ds-shadow-scene: 0 2px 4px rgba(22,24,28,0.05), 0 24px 48px -24px rgba(22,24,28,0.26);
  --ds-shadow-scene-pressed: 0 0.5px 1px rgba(22,24,28,0.07);
  --ds-shadow-lifted: inset 0 0 0 var(--ds-hairline) #FFFFFF, inset 0 0 0 calc(var(--ds-hairline) + 1px) rgba(255,255,255,0.45), inset 0 1px 0 #FFFFFF, inset 0 0 0 calc(var(--ds-hairline) + 1.5px) rgba(22,24,28,0.035), 0 4px 8px rgba(22,24,28,0.06), 0 30px 56px -24px rgba(22,24,28,0.30), 0 60px 110px -56px rgba(22,24,28,0.24);
  --ds-shadow-overlay: inset 0 0 0 var(--ds-hairline) #FFFFFF, inset 0 0 0 calc(var(--ds-hairline) + 1px) rgba(255,255,255,0.45), inset 0 1px 0 #FFFFFF, inset 0 0 0 calc(var(--ds-hairline) + 1.5px) rgba(22,24,28,0.035), 0 -1px 2px rgba(22,24,28,0.04), 0 -24px 64px -28px rgba(22,24,28,0.28);
  --ds-shadow-segment: inset 0 0 0 var(--ds-hairline) #FFFFFF, inset 0 0 0 calc(var(--ds-hairline) + 1px) rgba(255,255,255,0.45), inset 0 1px 0 #FFFFFF, inset 0 0 0 calc(var(--ds-hairline) + 1.5px) rgba(22,24,28,0.035), 0 1px 2px rgba(22,24,28,0.10), 0 8px 18px -10px rgba(22,24,28,0.30);
  --ds-shadow-lens: 0 1px 1px rgba(22,24,28,0.05), 0 3px 6px -2px rgba(22,24,28,0.06), 0 16px 30px -16px rgba(22,24,28,0.22);
  --ds-shadow-glaze: inset 0 0 0 var(--ds-hairline) rgba(255,255,255,0.5), inset 0 0 0 calc(var(--ds-hairline) + 1px) rgba(255,255,255,0.16), inset 0 1px 0 rgba(255,255,255,0.42);
  --ds-shadow-glaze-drop: 0 1px 2px rgba(22,24,28,0.10), 0 3px 6px -2px rgba(22,24,28,0.06), 0 16px 30px -16px rgba(22,24,28,0.22);
  --ds-shadow-glaze-pressed: 0 0.5px 1px rgba(22,24,28,0.10);
  --ds-shadow-pressed: inset 0 0 0 var(--ds-hairline) #FFFFFF, inset 0 0 0 calc(var(--ds-hairline) + 1px) rgba(255,255,255,0.45), inset 0 1px 0 #FFFFFF, inset 0 0 0 calc(var(--ds-hairline) + 1.5px) rgba(22,24,28,0.035), 0 0.5px 1px rgba(22,24,28,0.07);
  --ds-shadow-inset: inset 0 1px 2px rgba(22,24,28,0.10), inset 0 0 0 1px rgba(22,24,28,0.035), 0 1px 0 rgba(255,255,255,0.6);
  --ds-hairline: 1px;
  --ds-lens-magnify: 1.07;
  --ds-lens-air: 14px;
  --ds-lens-unscale: 0.9346;
  --ds-weight-500-dark: 465;
  --ds-weight-600-dark: 560;
  --ds-weight-700-dark: 660;
  --ds-lift-offset: -3px;
  --ds-press-offset: 1px;
  --ds-press-tilt: 4deg;
  --ds-press-perspective: 600px;
  --ds-press-slop: 10px;
  --ds-lens-drag-min: 6px;
  --ds-lift-delay: 500ms;
  --ds-ease: cubic-bezier(0.2, 0, 0, 1);
  --ds-duration: 200ms;
  --ds-release-response: 320ms;
  --ds-release-damping: 1;
  --ds-undo-timeout: 5s;
  --ds-hand-top: max(14px, env(safe-area-inset-top));
  --ds-span-inlay: 28%;
  --ds-inset-depth: 0.04;
  --ds-span-zoom-margin: 10%;
  --ds-knob-top-ratio: 0.64;
  --ds-z-fade: 3;
  --ds-z-dock: 4;
  --ds-z-hand: 5;
  --ds-z-scrim: 19;
  --ds-z-panel: 20;
  --font-ds-content: "Geist", -apple-system, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", system-ui, sans-serif;
  --font-ds-ui: "Geist", -apple-system, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ds-bg: #1A1C1F;
    --ds-bg-low: #0F1012;
    --ds-surface: #26292E;
    --ds-inset: #16181B;
    --ds-ink: #EEF0F2;
    --ds-ink-secondary: #C0C4CA;
    --ds-ink-caption: #979DA5;
    --ds-rule: rgba(255,255,255,0.14);
    --ds-groove: rgba(0,0,0,0.55);
    --ds-groove-edge: rgba(0,0,0,0.7);
    --ds-solid: #E9E7E2;
    --ds-on-solid: #16181B;
    --ds-danger: #E07A68;
    --ds-coat-edge: rgba(255,255,255,0.22);
    --ds-coat-inner: rgba(255,255,255,0.10);
    --ds-coat-define: rgba(0,0,0,0.2);
    --ds-lens-fill: rgba(255,255,255,0.08);
    --ds-en-rouge: #D9819E;
    --ds-on-en-rouge: #16181B;
    --ds-en-coral: #E08A6E;
    --ds-on-en-coral: #16181B;
    --ds-en-turquoise: #62B3A5;
    --ds-on-en-turquoise: #16181B;
    --ds-en-jilan: #8AA4D8;
    --ds-on-en-jilan: #16181B;
    --ds-on-en-lemon: #16181B;
    --ds-on-en-celadon: #16181B;
    --ds-shadow-coat: inset 0 0 0 var(--ds-hairline) rgba(255,255,255,0.22), inset 0 0 0 calc(var(--ds-hairline) + 1px) rgba(255,255,255,0.10), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 0 calc(var(--ds-hairline) + 1.5px) rgba(0,0,0,0.2);
    --ds-shadow-raised: inset 0 0 0 var(--ds-hairline) rgba(255,255,255,0.22), inset 0 0 0 calc(var(--ds-hairline) + 1px) rgba(255,255,255,0.10), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 0 calc(var(--ds-hairline) + 1.5px) rgba(0,0,0,0.2), 0 1px 1px rgba(0,0,0,0.30), 0 3px 6px -2px rgba(0,0,0,0.30), 0 16px 30px -16px rgba(0,0,0,0.55);
    --ds-shadow-page: inset 0 0 0 var(--ds-hairline) rgba(255,255,255,0.22), inset 0 0 0 calc(var(--ds-hairline) + 1px) rgba(255,255,255,0.10), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 0 calc(var(--ds-hairline) + 1.5px) rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.30), 0 24px 48px -24px rgba(0,0,0,0.60);
    --ds-shadow-scene: 0 2px 4px rgba(0,0,0,0.30), 0 24px 48px -24px rgba(0,0,0,0.60);
    --ds-shadow-scene-pressed: 0 0.5px 1px rgba(0,0,0,0.22);
    --ds-shadow-lifted: inset 0 0 0 var(--ds-hairline) rgba(255,255,255,0.22), inset 0 0 0 calc(var(--ds-hairline) + 1px) rgba(255,255,255,0.10), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 0 calc(var(--ds-hairline) + 1.5px) rgba(0,0,0,0.2), 0 4px 8px rgba(0,0,0,0.35), 0 30px 56px -24px rgba(0,0,0,0.60), 0 60px 110px -56px rgba(0,0,0,0.50);
    --ds-shadow-overlay: inset 0 0 0 var(--ds-hairline) rgba(255,255,255,0.22), inset 0 0 0 calc(var(--ds-hairline) + 1px) rgba(255,255,255,0.10), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 0 calc(var(--ds-hairline) + 1.5px) rgba(0,0,0,0.2), 0 -1px 2px rgba(0,0,0,0.30), 0 -24px 64px -28px rgba(0,0,0,0.60);
    --ds-shadow-segment: inset 0 0 0 var(--ds-hairline) rgba(255,255,255,0.22), inset 0 0 0 calc(var(--ds-hairline) + 1px) rgba(255,255,255,0.10), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 0 calc(var(--ds-hairline) + 1.5px) rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.35), 0 8px 18px -10px rgba(0,0,0,0.60);
    --ds-shadow-lens: 0 1px 1px rgba(0,0,0,0.30), 0 3px 6px -2px rgba(0,0,0,0.30), 0 16px 30px -16px rgba(0,0,0,0.55);
    --ds-shadow-glaze-drop: 0 1px 2px rgba(0,0,0,0.40), 0 3px 6px -2px rgba(0,0,0,0.30), 0 16px 30px -16px rgba(0,0,0,0.55);
    --ds-shadow-glaze-pressed: 0 0.5px 1px rgba(0,0,0,0.40);
    --ds-shadow-pressed: inset 0 0 0 var(--ds-hairline) rgba(255,255,255,0.22), inset 0 0 0 calc(var(--ds-hairline) + 1px) rgba(255,255,255,0.10), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 0 calc(var(--ds-hairline) + 1.5px) rgba(0,0,0,0.2), 0 0.5px 1px rgba(0,0,0,0.22);
    --ds-shadow-inset: inset 0 1px 3px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.04);
  }
}

[data-theme="dark"] {
  --ds-bg: #1A1C1F;
  --ds-bg-low: #0F1012;
  --ds-surface: #26292E;
  --ds-inset: #16181B;
  --ds-ink: #EEF0F2;
  --ds-ink-secondary: #C0C4CA;
  --ds-ink-caption: #979DA5;
  --ds-rule: rgba(255,255,255,0.14);
  --ds-groove: rgba(0,0,0,0.55);
  --ds-groove-edge: rgba(0,0,0,0.7);
  --ds-solid: #E9E7E2;
  --ds-on-solid: #16181B;
  --ds-danger: #E07A68;
  --ds-coat-edge: rgba(255,255,255,0.22);
  --ds-coat-inner: rgba(255,255,255,0.10);
  --ds-coat-define: rgba(0,0,0,0.2);
  --ds-lens-fill: rgba(255,255,255,0.08);
  --ds-en-rouge: #D9819E;
  --ds-on-en-rouge: #16181B;
  --ds-en-coral: #E08A6E;
  --ds-on-en-coral: #16181B;
  --ds-en-turquoise: #62B3A5;
  --ds-on-en-turquoise: #16181B;
  --ds-en-jilan: #8AA4D8;
  --ds-on-en-jilan: #16181B;
  --ds-on-en-lemon: #16181B;
  --ds-on-en-celadon: #16181B;
  --ds-shadow-coat: inset 0 0 0 var(--ds-hairline) rgba(255,255,255,0.22), inset 0 0 0 calc(var(--ds-hairline) + 1px) rgba(255,255,255,0.10), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 0 calc(var(--ds-hairline) + 1.5px) rgba(0,0,0,0.2);
  --ds-shadow-raised: inset 0 0 0 var(--ds-hairline) rgba(255,255,255,0.22), inset 0 0 0 calc(var(--ds-hairline) + 1px) rgba(255,255,255,0.10), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 0 calc(var(--ds-hairline) + 1.5px) rgba(0,0,0,0.2), 0 1px 1px rgba(0,0,0,0.30), 0 3px 6px -2px rgba(0,0,0,0.30), 0 16px 30px -16px rgba(0,0,0,0.55);
  --ds-shadow-page: inset 0 0 0 var(--ds-hairline) rgba(255,255,255,0.22), inset 0 0 0 calc(var(--ds-hairline) + 1px) rgba(255,255,255,0.10), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 0 calc(var(--ds-hairline) + 1.5px) rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.30), 0 24px 48px -24px rgba(0,0,0,0.60);
  --ds-shadow-scene: 0 2px 4px rgba(0,0,0,0.30), 0 24px 48px -24px rgba(0,0,0,0.60);
  --ds-shadow-scene-pressed: 0 0.5px 1px rgba(0,0,0,0.22);
  --ds-shadow-lifted: inset 0 0 0 var(--ds-hairline) rgba(255,255,255,0.22), inset 0 0 0 calc(var(--ds-hairline) + 1px) rgba(255,255,255,0.10), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 0 calc(var(--ds-hairline) + 1.5px) rgba(0,0,0,0.2), 0 4px 8px rgba(0,0,0,0.35), 0 30px 56px -24px rgba(0,0,0,0.60), 0 60px 110px -56px rgba(0,0,0,0.50);
  --ds-shadow-overlay: inset 0 0 0 var(--ds-hairline) rgba(255,255,255,0.22), inset 0 0 0 calc(var(--ds-hairline) + 1px) rgba(255,255,255,0.10), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 0 calc(var(--ds-hairline) + 1.5px) rgba(0,0,0,0.2), 0 -1px 2px rgba(0,0,0,0.30), 0 -24px 64px -28px rgba(0,0,0,0.60);
  --ds-shadow-segment: inset 0 0 0 var(--ds-hairline) rgba(255,255,255,0.22), inset 0 0 0 calc(var(--ds-hairline) + 1px) rgba(255,255,255,0.10), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 0 calc(var(--ds-hairline) + 1.5px) rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.35), 0 8px 18px -10px rgba(0,0,0,0.60);
  --ds-shadow-lens: 0 1px 1px rgba(0,0,0,0.30), 0 3px 6px -2px rgba(0,0,0,0.30), 0 16px 30px -16px rgba(0,0,0,0.55);
  --ds-shadow-glaze-drop: 0 1px 2px rgba(0,0,0,0.40), 0 3px 6px -2px rgba(0,0,0,0.30), 0 16px 30px -16px rgba(0,0,0,0.55);
  --ds-shadow-glaze-pressed: 0 0.5px 1px rgba(0,0,0,0.40);
  --ds-shadow-pressed: inset 0 0 0 var(--ds-hairline) rgba(255,255,255,0.22), inset 0 0 0 calc(var(--ds-hairline) + 1px) rgba(255,255,255,0.10), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 0 calc(var(--ds-hairline) + 1.5px) rgba(0,0,0,0.2), 0 0.5px 1px rgba(0,0,0,0.22);
  --ds-shadow-inset: inset 0 1px 3px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.04);
}

.ds-title-page { font-family: var(--font-ds-content); font-size: 34px; line-height: 1.12; font-weight: 600; letter-spacing: -0.025em; }
.ds-title-content { font-family: var(--font-ds-content); font-size: 22px; line-height: 1.25; font-weight: 600; }
.ds-body { font-family: var(--font-ds-content); font-size: 17px; line-height: 1.6; font-weight: 400; }
.ds-list-item { font-family: var(--font-ds-content); font-size: 17px; font-weight: 400; }
.ds-content-caption { font-family: var(--font-ds-content); font-size: 13px; line-height: 1.6; font-weight: 400; }
.ds-content-note { font-family: var(--font-ds-content); font-size: 12px; line-height: 1.4; font-weight: 400; }
.ds-text-cta { font-family: var(--font-ds-ui); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.ds-ui { font-family: var(--font-ds-ui); font-size: 15px; font-weight: 500; }
.ds-ui-small { font-family: var(--font-ds-ui); font-size: 14px; font-weight: 400; }
.ds-caption { font-family: var(--font-ds-ui); font-size: 13px; line-height: 1.45; font-weight: 400; }
.ds-note { font-family: var(--font-ds-ui); font-size: 12px; line-height: 1.4; font-weight: 400; }