/* ── 设计变量：浅色为默认，深色跟随系统 ───────────────────────── */
:root {
    color-scheme: light dark;

    --bg:            #f5f5f5;   /* 页面底色，沿用原有灰 */
    --surface:       #ffffff;   /* 正文容器 */
    --fg:            #1a1a1a;
    --fg-strong:     #000000;
    --muted:         #6b7076;
    --link:          #2979ff;   /* 沿用原有蓝 */
    --link-hover:    #1857c8;
    --border:        #d9e1ec;
    --divider:       #e8e8e8;
    --code-bg:       #f7f7f7;
    --code-border:   #e6e6e6;
    --code-fg:       #24292f;
    --code-inline-bg:#eef1f5;
    --code-inline-fg:#2a5bd7;
    --selection-bg:  #7eccfa;
    --sketch-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .06);

    --font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC",
                 "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC",
                 "WenQuanYi Micro Hei", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas,
                 "Andale Mono", "DejaVu Sans Mono", monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:            #121417;
        --surface:       #181b1f;
        --fg:            #e6e8eb;
        --fg-strong:     #f5f7f9;
        --muted:         #9aa1a9;
        --link:          #6ea8ff;
        --link-hover:    #9cc4ff;
        --border:        #2a2f36;
        --divider:       #262b31;
        --code-bg:       #0d1117;
        --code-border:   #262b31;
        --code-fg:       #e6edf3;
        --code-inline-bg:#21262d;
        --code-inline-fg:#8ab4ff;
        --selection-bg:  #2f5d8a;
        --sketch-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 28px rgba(0, 0, 0, .4);
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 1.85;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100%;
}

@media (min-width: 768px) {
    body { font-size: 19px; }
}

::selection {
    background: var(--selection-bg);
    color: #fff;
}

*, *::before, *::after {
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    color: var(--fg-strong);
    line-height: 1.35;              /* 原为 0.5，多行标题会重叠 */
    letter-spacing: -.01em;
    text-wrap: balance;
    margin-top: 1.6em;
    margin-bottom: .7em;
}

h1 { font-size: 1.75em; }
h2 { font-size: 1.4em; margin-top: 1.8em; }
h3 { font-size: 1.15em; }
h4 { font-size: 1.02em; }

h3, h4 {
    border-bottom: 1px solid var(--divider);
    padding-bottom: .35em;
}

*:first-child { margin-top: 0; }

a {
    color: var(--link);
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease;
}

a:hover { color: var(--link-hover); }

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

hr {
    border: 0;
    border-top: 1px solid var(--divider);
    margin: 2.2em 0;
}