:root {
  
  --bg: #F7F8FA;          
  --surface: #FFFFFF;     
  --fg: #1B2028;          
  --muted: #5B6472;       
  --accent: #B23A2C;      
  --border: #E3E7ED;      

  
  --accent-on: var(--surface);   
  --accent-hover: color-mix(in srgb, var(--accent) 92%, black);
  --accent-active: color-mix(in srgb, var(--accent) 86%, black);
  --success: #2F7A54;
  --warn: #A8701F;
  --danger: #A3272B;
  --info: #3A6E8F;

  
  --surface-quiet: #F1F3F6;                 
  --surface-warm: var(--surface-quiet);     
  --fg-2: #39414E;
  --meta: #68717F;                          
  --border-soft: #EEF1F5;
  --accent-soft: color-mix(in srgb, var(--accent) 10%, var(--surface));

  
  --quiet-bg: #10141A;
  --quiet-surface: #171C24;
  --quiet-surface-2: #212833;
  --quiet-fg: #EDF1F6;
  --quiet-fg-2: #C9D1DC;
  --quiet-muted: #9AA4B2;
  --quiet-border: color-mix(in srgb, var(--quiet-fg) 8%, transparent);
  --quiet-border-soft: color-mix(in srgb, var(--quiet-fg) 5%, transparent);
  --quiet-accent: #D4674F;                 

  
  --font-display: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --font-body: "Inter", "Noto Sans SC", "PingFang SC", "HarmonyOS Sans", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, monospace;

  
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 40px;

  
  --weight-read: 400;
  --weight-emphasize: 510;
  --weight-announce: 590;
  --leading-body: 1.6;
  --leading-tight: 1.2;
  --tracking-caps: 0.08em;    
  --tracking-display: -0.02em;
  --tracking-body: 0;

  
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px;

  
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  
  --elev-flat: none;
  --elev-ring: 0 0 0 1px var(--border);
  --elev-raised:
    0 1px 2px color-mix(in srgb, var(--fg) 4%, transparent),
    0 8px 20px color-mix(in srgb, var(--fg) 6%, transparent);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);

  
  --motion-instant: 80ms;
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --motion-slow: 300ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-standard: var(--ease);   

  
  --container-max: 1120px;
  --gutter-phone: 16px;
  --gutter-tablet: 24px;
  --gutter-desktop: 32px;
  --gutter: var(--gutter-phone);
  --section-y-phone: 32px;
  --section-y-tablet: 48px;
  --section-y-desktop: 80px;
  --section-y: var(--section-y-phone);
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --touch-target-min: 44px;
  --touch-gap-min: 8px;

  
  --tool-stage-max: min(72vw, 420px);
  --sticky-action-h: 64px;

  
  --share-card-w-vertical: 1080px;
  --share-card-h-vertical: 1440px;
  --share-card-w-square: 1080px;
  --share-card-h-square: 1080px;
  --share-og-w: 1200px;
  --share-og-h: 630px;
  --share-og-min-wechat: 300px;
  --share-safe-area: 5%;
  --share-safe-x-vertical: 54px;    
  --share-safe-y-vertical: 72px;    
  --share-safe-y-square: 54px;      
  --share-safe-x-og: 60px;          
  --share-safe-y-og: 32px;          
  --share-qr-size: 120px;           
  --share-divider-w: 1px;

  
  --share-fs-brand: 24px;
  --share-fs-headline: 76px;
  --share-fs-headline-square: 72px;
  --share-fs-headline-og: 48px;
  --share-fs-data: 32px;
  --share-fs-data-og: 28px;
  --share-fs-link: 26px;
  --share-fs-link-og: 22px;
  --share-fs-hint: 24px;
  --share-fs-hint-og: 20px;
  --share-headline-max-chars: 20;   

  
  --contrast-body-min: 4.5;        
  --contrast-large-min: 3;         
}


[data-theme="quiet"] {
  --bg: var(--quiet-bg);
  --surface: var(--quiet-surface);
  --surface-quiet: var(--quiet-surface-2);
  --fg: var(--quiet-fg);
  --fg-2: var(--quiet-fg-2);
  --muted: var(--quiet-muted);
  --border: var(--quiet-border);
  --border-soft: var(--quiet-border-soft);
  --accent: var(--quiet-accent);
  --elev-raised: var(--elev-flat);
}


@media (prefers-contrast: more) {
  :root {
    --border: var(--fg-2);
    --border-soft: var(--muted);
    --meta: var(--muted);
  }
}


@media (min-width: 640px) {
  :root { --gutter: var(--gutter-tablet); }
}
@media (min-width: 768px) {
  :root { --section-y: var(--section-y-tablet); }
}
@media (min-width: 1024px) {
  :root {
    --gutter: var(--gutter-desktop);
    --section-y: var(--section-y-desktop);
  }
}




:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}


@media (pointer: coarse) {
  :where(button, [role="button"], select, summary,
         input[type="checkbox"], input[type="radio"]) {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
  }
}


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


html {
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-read);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
}