/* ==========================================================================
   Catppuccin Ghost Theme - Material 3 Design
   配色方案：Catppuccin | 设计规范：Material Design 3
   支持简体中文
   ========================================================================== */

/* ==========================================================================
   1. Catppuccin 色彩变量 - 4 种风味
   ========================================================================== */

:root {
    /* Latte (亮色主题) */
    --ctp-latte-rosewater: #dc8a78;
    --ctp-latte-flamingo: #dd7878;
    --ctp-latte-pink: #ea76cb;
    --ctp-latte-mauve: #8839ef;
    --ctp-latte-red: #d20f39;
    --ctp-latte-maroon: #e64553;
    --ctp-latte-peach: #fe640b;
    --ctp-latte-yellow: #df8e1d;
    --ctp-latte-green: #40a02b;
    --ctp-latte-teal: #179299;
    --ctp-latte-sky: #04a5e5;
    --ctp-latte-sapphire: #209fb5;
    --ctp-latte-blue: #1e66f5;
    --ctp-latte-lavender: #7287fd;
    --ctp-latte-text: #4c4f69;
    --ctp-latte-subtext1: #5c5f77;
    --ctp-latte-subtext0: #6c6f85;
    --ctp-latte-overlay2: #7c7f93;
    --ctp-latte-overlay1: #8c8fa1;
    --ctp-latte-overlay0: #9ca0b0;
    --ctp-latte-surface2: #acb0be;
    --ctp-latte-surface1: #bcc0cc;
    --ctp-latte-surface0: #ccd0da;
    --ctp-latte-base: #eff1f5;
    --ctp-latte-mantle: #e6e9ef;
    --ctp-latte-crust: #dce0e8;

    /* Frappé (暗色主题 - 柔和) */
    --ctp-frappe-rosewater: #f2d5cf;
    --ctp-frappe-flamingo: #eebebe;
    --ctp-frappe-pink: #f4b8e4;
    --ctp-frappe-mauve: #ca9ee6;
    --ctp-frappe-red: #e78284;
    --ctp-frappe-maroon: #ea999c;
    --ctp-frappe-peach: #ef9f76;
    --ctp-frappe-yellow: #e5c890;
    --ctp-frappe-green: #a6d189;
    --ctp-frappe-teal: #81c8be;
    --ctp-frappe-sky: #99d1db;
    --ctp-frappe-sapphire: #85c1dc;
    --ctp-frappe-blue: #8caaee;
    --ctp-frappe-lavender: #babbf1;
    --ctp-frappe-text: #c6d0f5;
    --ctp-frappe-subtext1: #b5bfe2;
    --ctp-frappe-subtext0: #a5adce;
    --ctp-frappe-overlay2: #949cbb;
    --ctp-frappe-overlay1: #838ba7;
    --ctp-frappe-overlay0: #737994;
    --ctp-frappe-surface2: #626880;
    --ctp-frappe-surface1: #51576d;
    --ctp-frappe-surface0: #414559;
    --ctp-frappe-base: #303446;
    --ctp-frappe-mantle: #292c3c;
    --ctp-frappe-crust: #232634;

    /* Macchiato (暗色主题 - 中等对比) */
    --ctp-macchiato-rosewater: #f4dbd6;
    --ctp-macchiato-flamingo: #f0c6c6;
    --ctp-macchiato-pink: #f5bde6;
    --ctp-macchiato-mauve: #c6a0f6;
    --ctp-macchiato-red: #ed8796;
    --ctp-macchiato-maroon: #ee99a0;
    --ctp-macchiato-peach: #f5a97f;
    --ctp-macchiato-yellow: #eed49f;
    --ctp-macchiato-green: #a6da95;
    --ctp-macchiato-teal: #8bd5ca;
    --ctp-macchiato-sky: #91d7e3;
    --ctp-macchiato-sapphire: #7dc4e4;
    --ctp-macchiato-blue: #8aadf4;
    --ctp-macchiato-lavender: #b7bdf8;
    --ctp-macchiato-text: #cad3f5;
    --ctp-macchiato-subtext1: #b8c0e0;
    --ctp-macchiato-subtext0: #a5adcb;
    --ctp-macchiato-overlay2: #939ab7;
    --ctp-macchiato-overlay1: #8087a2;
    --ctp-macchiato-overlay0: #6e738d;
    --ctp-macchiato-surface2: #5b6078;
    --ctp-macchiato-surface1: #494d64;
    --ctp-macchiato-surface0: #363a4f;
    --ctp-macchiato-base: #24273a;
    --ctp-macchiato-mantle: #1e2030;
    --ctp-macchiato-crust: #181926;

    /* Mocha (暗色主题 - 最高对比，默认) */
    --ctp-mocha-rosewater: #f5e0dc;
    --ctp-mocha-flamingo: #f2cdcd;
    --ctp-mocha-pink: #f5c2e7;
    --ctp-mocha-mauve: #cba6f7;
    --ctp-mocha-red: #f38ba8;
    --ctp-mocha-maroon: #eba0ac;
    --ctp-mocha-peach: #fab387;
    --ctp-mocha-yellow: #f9e2af;
    --ctp-mocha-green: #a6e3a1;
    --ctp-mocha-teal: #94e2d5;
    --ctp-mocha-sky: #89dceb;
    --ctp-mocha-sapphire: #74c7ec;
    --ctp-mocha-blue: #89b4fa;
    --ctp-mocha-lavender: #b4befe;
    --ctp-mocha-text: #cdd6f4;
    --ctp-mocha-subtext1: #bac2de;
    --ctp-mocha-subtext0: #a6adc8;
    --ctp-mocha-overlay2: #9399b2;
    --ctp-mocha-overlay1: #7f849c;
    --ctp-mocha-overlay0: #6c7086;
    --ctp-mocha-surface2: #585b70;
    --ctp-mocha-surface1: #45475a;
    --ctp-mocha-surface0: #313244;
    --ctp-mocha-base: #1e1e2e;
    --ctp-mocha-mantle: #181825;
    --ctp-mocha-crust: #11111b;

    /* 默认使用 Mocha */
    --ctp-rosewater: var(--ctp-mocha-rosewater);
    --ctp-flamingo: var(--ctp-mocha-flamingo);
    --ctp-pink: var(--ctp-mocha-pink);
    --ctp-mauve: var(--ctp-mocha-mauve);
    --ctp-red: var(--ctp-mocha-red);
    --ctp-maroon: var(--ctp-mocha-maroon);
    --ctp-peach: var(--ctp-mocha-peach);
    --ctp-yellow: var(--ctp-mocha-yellow);
    --ctp-green: var(--ctp-mocha-green);
    --ctp-teal: var(--ctp-mocha-teal);
    --ctp-sky: var(--ctp-mocha-sky);
    --ctp-sapphire: var(--ctp-mocha-sapphire);
    --ctp-blue: var(--ctp-mocha-blue);
    --ctp-lavender: var(--ctp-mocha-lavender);
    --ctp-text: var(--ctp-mocha-text);
    --ctp-subtext1: var(--ctp-mocha-subtext1);
    --ctp-subtext0: var(--ctp-mocha-subtext0);
    --ctp-overlay2: var(--ctp-mocha-overlay2);
    --ctp-overlay1: var(--ctp-mocha-overlay1);
    --ctp-overlay0: var(--ctp-mocha-overlay0);
    --ctp-surface2: var(--ctp-mocha-surface2);
    --ctp-surface1: var(--ctp-mocha-surface1);
    --ctp-surface0: var(--ctp-mocha-surface0);
    --ctp-base: var(--ctp-mocha-base);
    --ctp-mantle: var(--ctp-mocha-mantle);
    --ctp-crust: var(--ctp-mocha-crust);
}

/* ==========================================================================
   2. Material 3 设计 Token 映射
   ========================================================================== */

:root {
    /* M3 色彩角色 - 默认使用 Mauve 作为主色 */
    --md-primary: var(--ctp-mauve);
    --md-on-primary: var(--ctp-base);
    --md-primary-container: color-mix(in srgb, var(--ctp-mauve) 30%, var(--ctp-surface0));
    --md-on-primary-container: var(--ctp-text);
    
    --md-secondary: var(--ctp-blue);
    --md-on-secondary: var(--ctp-base);
    --md-secondary-container: color-mix(in srgb, var(--ctp-blue) 20%, var(--ctp-surface0));
    --md-on-secondary-container: var(--ctp-text);
    
    --md-tertiary: var(--ctp-teal);
    --md-on-tertiary: var(--ctp-base);
    --md-tertiary-container: color-mix(in srgb, var(--ctp-teal) 20%, var(--ctp-surface0));
    --md-on-tertiary-container: var(--ctp-text);
    
    --md-error: var(--ctp-red);
    --md-on-error: var(--ctp-base);
    --md-error-container: color-mix(in srgb, var(--ctp-red) 20%, var(--ctp-surface0));
    --md-on-error-container: var(--ctp-text);
    
    --md-surface: var(--ctp-base);
    --md-on-surface: var(--ctp-text);
    --md-surface-variant: var(--ctp-surface0);
    --md-on-surface-variant: var(--ctp-subtext1);
    --md-surface-container-lowest: var(--ctp-crust);
    --md-surface-container-low: var(--ctp-mantle);
    --md-surface-container: var(--ctp-surface0);
    --md-surface-container-high: var(--ctp-surface1);
    --md-surface-container-highest: var(--ctp-surface2);
    
    --md-outline: var(--ctp-overlay0);
    --md-outline-variant: var(--ctp-surface2);
    
    --md-inverse-surface: var(--ctp-text);
    --md-inverse-on-surface: var(--ctp-base);
    --md-inverse-primary: color-mix(in srgb, var(--ctp-mauve) 60%, var(--ctp-base));

    /* M3 形状 (Shape) */
    --md-shape-corner-none: 0;
    --md-shape-corner-extra-small: 4px;
    --md-shape-corner-small: 8px;
    --md-shape-corner-medium: 12px;
    --md-shape-corner-large: 16px;
    --md-shape-corner-extra-large: 28px;
    --md-shape-corner-full: 9999px;

    /* M3 海拔 (Elevation) */
    --md-elevation-0: none;
    --md-elevation-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    --md-elevation-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
    --md-elevation-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
    --md-elevation-4: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.3);
    --md-elevation-5: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.3);

    /* M3 动效 (Motion) */
    --md-motion-duration-short1: 50ms;
    --md-motion-duration-short2: 100ms;
    --md-motion-duration-short3: 150ms;
    --md-motion-duration-short4: 200ms;
    --md-motion-duration-medium1: 250ms;
    --md-motion-duration-medium2: 300ms;
    --md-motion-duration-medium3: 350ms;
    --md-motion-duration-medium4: 400ms;
    --md-motion-duration-long1: 450ms;
    --md-motion-duration-long2: 500ms;
    --md-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --md-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
    --md-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
    --md-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --md-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
    --md-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);

    /* 间距系统 (8dp 网格) */
    --md-spacing-xs: 4px;
    --md-spacing-sm: 8px;
    --md-spacing-md: 16px;
    --md-spacing-lg: 24px;
    --md-spacing-xl: 32px;
    --md-spacing-xxl: 48px;
}

/* ==========================================================================
   3. M3 字体排印 (Typography)
   ========================================================================== */

:root {
    /* 字体栈 - 优化中文显示 */
    --font-family-base: var(--gh-font-body, 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
    --font-family-heading: var(--gh-font-heading, 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
    --font-family-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, Consolas, monospace;

    /* M3 Type Scale */
    /* Display - 用于大型标题 */
    --md-display-large-size: 57px;
    --md-display-large-line-height: 64px;
    --md-display-large-weight: 400;
    --md-display-large-tracking: -0.25px;

    --md-display-medium-size: 45px;
    --md-display-medium-line-height: 52px;
    --md-display-medium-weight: 400;
    --md-display-medium-tracking: 0;

    --md-display-small-size: 36px;
    --md-display-small-line-height: 44px;
    --md-display-small-weight: 400;
    --md-display-small-tracking: 0;

    /* Headline - 用于页面标题 */
    --md-headline-large-size: 32px;
    --md-headline-large-line-height: 40px;
    --md-headline-large-weight: 400;
    --md-headline-large-tracking: 0;

    --md-headline-medium-size: 28px;
    --md-headline-medium-line-height: 36px;
    --md-headline-medium-weight: 400;
    --md-headline-medium-tracking: 0;

    --md-headline-small-size: 24px;
    --md-headline-small-line-height: 32px;
    --md-headline-small-weight: 400;
    --md-headline-small-tracking: 0;

    /* Title - 用于卡片标题 */
    --md-title-large-size: 22px;
    --md-title-large-line-height: 28px;
    --md-title-large-weight: 500;
    --md-title-large-tracking: 0;

    --md-title-medium-size: 16px;
    --md-title-medium-line-height: 24px;
    --md-title-medium-weight: 500;
    --md-title-medium-tracking: 0.15px;

    --md-title-small-size: 14px;
    --md-title-small-line-height: 20px;
    --md-title-small-weight: 500;
    --md-title-small-tracking: 0.1px;

    /* Body - 用于正文内容 */
    --md-body-large-size: 16px;
    --md-body-large-line-height: 24px;
    --md-body-large-weight: 400;
    --md-body-large-tracking: 0.5px;

    --md-body-medium-size: 14px;
    --md-body-medium-line-height: 20px;
    --md-body-medium-weight: 400;
    --md-body-medium-tracking: 0.25px;

    --md-body-small-size: 12px;
    --md-body-small-line-height: 16px;
    --md-body-small-weight: 400;
    --md-body-small-tracking: 0.4px;

    /* Label - 用于按钮、标签 */
    --md-label-large-size: 14px;
    --md-label-large-line-height: 20px;
    --md-label-large-weight: 500;
    --md-label-large-tracking: 0.1px;

    --md-label-medium-size: 12px;
    --md-label-medium-line-height: 16px;
    --md-label-medium-weight: 500;
    --md-label-medium-tracking: 0.5px;

    --md-label-small-size: 11px;
    --md-label-small-line-height: 16px;
    --md-label-small-weight: 500;
    --md-label-small-tracking: 0.5px;
}

/* ==========================================================================
   4. 风味切换 (通过 body class)
   ========================================================================== */

body.theme-latte {
    --ctp-rosewater: var(--ctp-latte-rosewater);
    --ctp-flamingo: var(--ctp-latte-flamingo);
    --ctp-pink: var(--ctp-latte-pink);
    --ctp-mauve: var(--ctp-latte-mauve);
    --ctp-red: var(--ctp-latte-red);
    --ctp-maroon: var(--ctp-latte-maroon);
    --ctp-peach: var(--ctp-latte-peach);
    --ctp-yellow: var(--ctp-latte-yellow);
    --ctp-green: var(--ctp-latte-green);
    --ctp-teal: var(--ctp-latte-teal);
    --ctp-sky: var(--ctp-latte-sky);
    --ctp-sapphire: var(--ctp-latte-sapphire);
    --ctp-blue: var(--ctp-latte-blue);
    --ctp-lavender: var(--ctp-latte-lavender);
    --ctp-text: var(--ctp-latte-text);
    --ctp-subtext1: var(--ctp-latte-subtext1);
    --ctp-subtext0: var(--ctp-latte-subtext0);
    --ctp-overlay2: var(--ctp-latte-overlay2);
    --ctp-overlay1: var(--ctp-latte-overlay1);
    --ctp-overlay0: var(--ctp-latte-overlay0);
    --ctp-surface2: var(--ctp-latte-surface2);
    --ctp-surface1: var(--ctp-latte-surface1);
    --ctp-surface0: var(--ctp-latte-surface0);
    --ctp-base: var(--ctp-latte-base);
    --ctp-mantle: var(--ctp-latte-mantle);
    --ctp-crust: var(--ctp-latte-crust);
}

body.theme-frappe {
    --ctp-rosewater: var(--ctp-frappe-rosewater);
    --ctp-flamingo: var(--ctp-frappe-flamingo);
    --ctp-pink: var(--ctp-frappe-pink);
    --ctp-mauve: var(--ctp-frappe-mauve);
    --ctp-red: var(--ctp-frappe-red);
    --ctp-maroon: var(--ctp-frappe-maroon);
    --ctp-peach: var(--ctp-frappe-peach);
    --ctp-yellow: var(--ctp-frappe-yellow);
    --ctp-green: var(--ctp-frappe-green);
    --ctp-teal: var(--ctp-frappe-teal);
    --ctp-sky: var(--ctp-frappe-sky);
    --ctp-sapphire: var(--ctp-frappe-sapphire);
    --ctp-blue: var(--ctp-frappe-blue);
    --ctp-lavender: var(--ctp-frappe-lavender);
    --ctp-text: var(--ctp-frappe-text);
    --ctp-subtext1: var(--ctp-frappe-subtext1);
    --ctp-subtext0: var(--ctp-frappe-subtext0);
    --ctp-overlay2: var(--ctp-frappe-overlay2);
    --ctp-overlay1: var(--ctp-frappe-overlay1);
    --ctp-overlay0: var(--ctp-frappe-overlay0);
    --ctp-surface2: var(--ctp-frappe-surface2);
    --ctp-surface1: var(--ctp-frappe-surface1);
    --ctp-surface0: var(--ctp-frappe-surface0);
    --ctp-base: var(--ctp-frappe-base);
    --ctp-mantle: var(--ctp-frappe-mantle);
    --ctp-crust: var(--ctp-frappe-crust);
}

body.theme-macchiato {
    --ctp-rosewater: var(--ctp-macchiato-rosewater);
    --ctp-flamingo: var(--ctp-macchiato-flamingo);
    --ctp-pink: var(--ctp-macchiato-pink);
    --ctp-mauve: var(--ctp-macchiato-mauve);
    --ctp-red: var(--ctp-macchiato-red);
    --ctp-maroon: var(--ctp-macchiato-maroon);
    --ctp-peach: var(--ctp-macchiato-peach);
    --ctp-yellow: var(--ctp-macchiato-yellow);
    --ctp-green: var(--ctp-macchiato-green);
    --ctp-teal: var(--ctp-macchiato-teal);
    --ctp-sky: var(--ctp-macchiato-sky);
    --ctp-sapphire: var(--ctp-macchiato-sapphire);
    --ctp-blue: var(--ctp-macchiato-blue);
    --ctp-lavender: var(--ctp-macchiato-lavender);
    --ctp-text: var(--ctp-macchiato-text);
    --ctp-subtext1: var(--ctp-macchiato-subtext1);
    --ctp-subtext0: var(--ctp-macchiato-subtext0);
    --ctp-overlay2: var(--ctp-macchiato-overlay2);
    --ctp-overlay1: var(--ctp-macchiato-overlay1);
    --ctp-overlay0: var(--ctp-macchiato-overlay0);
    --ctp-surface2: var(--ctp-macchiato-surface2);
    --ctp-surface1: var(--ctp-macchiato-surface1);
    --ctp-surface0: var(--ctp-macchiato-surface0);
    --ctp-base: var(--ctp-macchiato-base);
    --ctp-mantle: var(--ctp-macchiato-mantle);
    --ctp-crust: var(--ctp-macchiato-crust);
}

/* ==========================================================================
   5. 强调色切换 (通过 body class)
   ========================================================================== */

body.accent-rosewater { --md-primary: var(--ctp-rosewater); }
body.accent-flamingo { --md-primary: var(--ctp-flamingo); }
body.accent-pink { --md-primary: var(--ctp-pink); }
body.accent-mauve { --md-primary: var(--ctp-mauve); }
body.accent-red { --md-primary: var(--ctp-red); }
body.accent-maroon { --md-primary: var(--ctp-maroon); }
body.accent-peach { --md-primary: var(--ctp-peach); }
body.accent-yellow { --md-primary: var(--ctp-yellow); }
body.accent-green { --md-primary: var(--ctp-green); }
body.accent-teal { --md-primary: var(--ctp-teal); }
body.accent-sky { --md-primary: var(--ctp-sky); }
body.accent-sapphire { --md-primary: var(--ctp-sapphire); }
body.accent-blue { --md-primary: var(--ctp-blue); }
body.accent-lavender { --md-primary: var(--ctp-lavender); }

/* ==========================================================================
   6. 基础样式重置
   ========================================================================== */

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

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

body {
    font-family: var(--font-family-base);
    font-size: var(--md-body-large-size);
    line-height: 1.8; /* 优化中文行高 */
    color: var(--md-on-surface);
    background-color: var(--md-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 中文排版优化 */
:lang(zh-CN) body,
:lang(zh) body {
    text-align: justify;
    word-break: break-all;
    overflow-wrap: break-word;
}

/* ==========================================================================
   7. 排版样式
   ========================================================================== */

/* M3 Typography Classes */
.md-display-large {
    font-family: var(--font-family-heading);
    font-size: var(--md-display-large-size);
    line-height: var(--md-display-large-line-height);
    font-weight: var(--md-display-large-weight);
    letter-spacing: var(--md-display-large-tracking);
}

.md-display-medium {
    font-family: var(--font-family-heading);
    font-size: var(--md-display-medium-size);
    line-height: var(--md-display-medium-line-height);
    font-weight: var(--md-display-medium-weight);
    letter-spacing: var(--md-display-medium-tracking);
}

.md-display-small {
    font-family: var(--font-family-heading);
    font-size: var(--md-display-small-size);
    line-height: var(--md-display-small-line-height);
    font-weight: var(--md-display-small-weight);
    letter-spacing: var(--md-display-small-tracking);
}

.md-headline-large {
    font-family: var(--font-family-heading);
    font-size: var(--md-headline-large-size);
    line-height: var(--md-headline-large-line-height);
    font-weight: var(--md-headline-large-weight);
    letter-spacing: var(--md-headline-large-tracking);
}

.md-headline-medium {
    font-family: var(--font-family-heading);
    font-size: var(--md-headline-medium-size);
    line-height: var(--md-headline-medium-line-height);
    font-weight: var(--md-headline-medium-weight);
    letter-spacing: var(--md-headline-medium-tracking);
}

.md-headline-small {
    font-family: var(--font-family-heading);
    font-size: var(--md-headline-small-size);
    line-height: var(--md-headline-small-line-height);
    font-weight: var(--md-headline-small-weight);
    letter-spacing: var(--md-headline-small-tracking);
}

.md-title-large {
    font-family: var(--font-family-heading);
    font-size: var(--md-title-large-size);
    line-height: var(--md-title-large-line-height);
    font-weight: var(--md-title-large-weight);
    letter-spacing: var(--md-title-large-tracking);
}

.md-title-medium {
    font-family: var(--font-family-heading);
    font-size: var(--md-title-medium-size);
    line-height: var(--md-title-medium-line-height);
    font-weight: var(--md-title-medium-weight);
    letter-spacing: var(--md-title-medium-tracking);
}

.md-title-small {
    font-family: var(--font-family-heading);
    font-size: var(--md-title-small-size);
    line-height: var(--md-title-small-line-height);
    font-weight: var(--md-title-small-weight);
    letter-spacing: var(--md-title-small-tracking);
}

.md-body-large {
    font-size: var(--md-body-large-size);
    line-height: var(--md-body-large-line-height);
    font-weight: var(--md-body-large-weight);
    letter-spacing: var(--md-body-large-tracking);
}

.md-body-medium {
    font-size: var(--md-body-medium-size);
    line-height: var(--md-body-medium-line-height);
    font-weight: var(--md-body-medium-weight);
    letter-spacing: var(--md-body-medium-tracking);
}

.md-body-small {
    font-size: var(--md-body-small-size);
    line-height: var(--md-body-small-line-height);
    font-weight: var(--md-body-small-weight);
    letter-spacing: var(--md-body-small-tracking);
}

.md-label-large {
    font-size: var(--md-label-large-size);
    line-height: var(--md-label-large-line-height);
    font-weight: var(--md-label-large-weight);
    letter-spacing: var(--md-label-large-tracking);
}

.md-label-medium {
    font-size: var(--md-label-medium-size);
    line-height: var(--md-label-medium-line-height);
    font-weight: var(--md-label-medium-weight);
    letter-spacing: var(--md-label-medium-tracking);
}

.md-label-small {
    font-size: var(--md-label-small-size);
    line-height: var(--md-label-small-line-height);
    font-weight: var(--md-label-small-weight);
    letter-spacing: var(--md-label-small-tracking);
}

/* 标题元素样式 */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    color: var(--md-on-surface);
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

h1 {
    font-size: var(--md-headline-large-size);
    line-height: var(--md-headline-large-line-height);
    font-weight: var(--md-headline-large-weight);
}

h2 {
    font-size: var(--md-headline-medium-size);
    line-height: var(--md-headline-medium-line-height);
    font-weight: var(--md-headline-medium-weight);
}

h3 {
    font-size: var(--md-headline-small-size);
    line-height: var(--md-headline-small-line-height);
    font-weight: var(--md-headline-small-weight);
}

h4 {
    font-size: var(--md-title-large-size);
    line-height: var(--md-title-large-line-height);
    font-weight: var(--md-title-large-weight);
}

h5 {
    font-size: var(--md-title-medium-size);
    line-height: var(--md-title-medium-line-height);
    font-weight: var(--md-title-medium-weight);
}

h6 {
    font-size: var(--md-title-small-size);
    line-height: var(--md-title-small-line-height);
    font-weight: var(--md-title-small-weight);
}

p {
    margin-bottom: 1em;
}

a {
    color: var(--md-primary);
    text-decoration: none;
    transition: color var(--md-motion-duration-short3) var(--md-motion-easing-standard);
}

a:hover {
    color: color-mix(in srgb, var(--md-primary) 80%, var(--md-on-surface));
    text-decoration: underline;
}

/* ==========================================================================
   8. 布局容器
   ========================================================================== */

.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--md-spacing-md);
}

.container--narrow {
    max-width: 800px;
}

.container--wide {
    max-width: 1400px;
}

/* ==========================================================================
   9. M3 导航栏 (Navigation Bar)
   ========================================================================== */

.gh-head {
    background-color: var(--md-surface-container);
    padding: var(--md-spacing-md) 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--md-elevation-2);
}

.gh-head-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--md-spacing-lg);
}

.gh-head-brand {
    display: flex;
    align-items: center;
    gap: var(--md-spacing-sm);
}

.gh-head-logo {
    height: 40px;
    width: auto;
}

.gh-head-brand-name {
    font-family: var(--font-family-heading);
    font-size: var(--md-title-large-size);
    font-weight: var(--md-title-large-weight);
    color: var(--md-on-surface);
    text-decoration: none;
}

.gh-head-brand-name:hover {
    color: var(--md-primary);
    text-decoration: none;
}

.gh-head-menu {
    display: flex;
    align-items: center;
    gap: var(--md-spacing-xs);
    list-style: none;
}

.gh-head-menu a {
    display: inline-flex;
    align-items: center;
    padding: var(--md-spacing-sm) var(--md-spacing-md);
    border-radius: var(--md-shape-corner-full);
    font-size: var(--md-label-large-size);
    font-weight: var(--md-label-large-weight);
    color: var(--md-on-surface-variant);
    text-decoration: none;
    transition: all var(--md-motion-duration-short3) var(--md-motion-easing-standard);
}

.gh-head-menu a:hover {
    background-color: var(--md-surface-container-high);
    color: var(--md-on-surface);
    text-decoration: none;
}

.gh-head-actions {
    display: flex;
    align-items: center;
    gap: var(--md-spacing-sm);
}

/* 汉堡菜单按钮 (移动端) */
.gh-burger {
    display: none;
    width: 48px;
    height: 48px;
    border: none;
    background: transparent;
    border-radius: var(--md-shape-corner-full);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--md-on-surface);
}

.gh-burger:hover {
    background-color: var(--md-surface-container-high);
}

/* ==========================================================================
   10. M3 按钮 (Buttons)
   ========================================================================== */

/* Filled Button */
.btn,
.md-btn-filled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--md-spacing-sm);
    padding: 10px 24px;
    min-height: 40px;
    border: none;
    border-radius: var(--md-shape-corner-full);
    background-color: var(--md-primary);
    color: var(--md-on-primary);
    font-family: var(--font-family-base);
    font-size: var(--md-label-large-size);
    font-weight: var(--md-label-large-weight);
    letter-spacing: var(--md-label-large-tracking);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--md-motion-duration-short3) var(--md-motion-easing-standard);
    box-shadow: var(--md-elevation-0);
}

.btn:hover,
.md-btn-filled:hover {
    box-shadow: var(--md-elevation-1);
    text-decoration: none;
}

/* Tonal Button */
.md-btn-tonal {
    background-color: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
}

/* Outlined Button */
.md-btn-outlined {
    background-color: transparent;
    color: var(--md-primary);
    border: 1px solid var(--md-outline);
}

.md-btn-outlined:hover {
    background-color: color-mix(in srgb, var(--md-primary) 8%, transparent);
}

/* Text Button */
.md-btn-text {
    background-color: transparent;
    color: var(--md-primary);
    padding: 10px 12px;
}

.md-btn-text:hover {
    background-color: color-mix(in srgb, var(--md-primary) 8%, transparent);
}

/* Icon Button */
.md-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 8px;
    border: none;
    border-radius: var(--md-shape-corner-full);
    background-color: transparent;
    color: var(--md-on-surface-variant);
    cursor: pointer;
    transition: background-color var(--md-motion-duration-short3) var(--md-motion-easing-standard);
}

.md-icon-btn:hover {
    background-color: var(--md-surface-container-high);
}

/* ==========================================================================
   11. M3 卡片 (Cards)
   ========================================================================== */

.post-card {
    display: flex;
    flex-direction: column;
    background-color: var(--md-surface-container-low);
    border-radius: var(--md-shape-corner-large);
    overflow: hidden;
    transition: all var(--md-motion-duration-medium2) var(--md-motion-easing-emphasized);
    box-shadow: var(--md-elevation-1);
}

.post-card:hover {
    box-shadow: var(--md-elevation-3);
    transform: translateY(-2px);
}

.post-card-image-link {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.post-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--md-motion-duration-medium2) var(--md-motion-easing-emphasized);
}

.post-card:hover .post-card-image {
    transform: scale(1.03);
}

.post-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--md-spacing-md);
}

.post-card-tag {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: var(--md-spacing-sm);
    font-size: var(--md-label-small-size);
    font-weight: var(--md-label-small-weight);
    color: var(--md-primary);
    background-color: color-mix(in srgb, var(--md-primary) 12%, transparent);
    border-radius: var(--md-shape-corner-small);
    text-decoration: none;
    align-self: flex-start;
}

.post-card-tag:hover {
    background-color: color-mix(in srgb, var(--md-primary) 20%, transparent);
    text-decoration: none;
}

.post-card-title {
    font-size: var(--md-title-large-size);
    line-height: var(--md-title-large-line-height);
    font-weight: var(--md-title-large-weight);
    color: var(--md-on-surface);
    margin: 0 0 var(--md-spacing-sm);
}

.post-card-title a {
    color: inherit;
    text-decoration: none;
}

.post-card-title a:hover {
    color: var(--md-primary);
}

.post-card-excerpt {
    font-size: var(--md-body-medium-size);
    line-height: var(--md-body-medium-line-height);
    color: var(--md-on-surface-variant);
    margin-bottom: var(--md-spacing-md);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-card-meta {
    display: flex;
    align-items: center;
    gap: var(--md-spacing-sm);
    margin-top: auto;
    font-size: var(--md-body-small-size);
    color: var(--md-on-surface-variant);
}

.post-card-author-image {
    width: 24px;
    height: 24px;
    border-radius: var(--md-shape-corner-full);
    object-fit: cover;
}

.post-card-date {
    color: var(--md-on-surface-variant);
}

/* 卡片网格布局 */
.post-feed {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--md-spacing-lg);
    padding: var(--md-spacing-xl) 0;
}

/* ==========================================================================
   12. M3 芯片 (Chips) - 用于标签
   ========================================================================== */

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--md-spacing-xs);
    padding: 6px 16px;
    height: 32px;
    border-radius: var(--md-shape-corner-small);
    font-size: var(--md-label-medium-size);
    font-weight: var(--md-label-medium-weight);
    text-decoration: none;
    transition: all var(--md-motion-duration-short3) var(--md-motion-easing-standard);
}

.chip--outlined {
    border: 1px solid var(--md-outline);
    color: var(--md-on-surface-variant);
    background-color: transparent;
}

.chip--outlined:hover {
    background-color: var(--md-surface-container-high);
    text-decoration: none;
}

.chip--filled {
    background-color: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
    border: none;
}

.chip--filled:hover {
    box-shadow: var(--md-elevation-1);
    text-decoration: none;
}

/* ==========================================================================
   13. 首页头部 (Hero/Landing)
   ========================================================================== */

.site-header {
    background: linear-gradient(
        135deg,
        var(--md-surface-container-low) 0%,
        color-mix(in srgb, var(--md-primary) 15%, var(--md-surface-container)) 100%
    );
    padding: var(--md-spacing-xxl) 0;
    text-align: center;
}

.site-header-inner {
    max-width: 800px;
    margin: 0 auto;
}

.site-title {
    font-size: var(--md-display-small-size);
    line-height: var(--md-display-small-line-height);
    font-weight: var(--md-display-small-weight);
    color: var(--md-on-surface);
    margin-bottom: var(--md-spacing-md);
}

.site-description {
    font-size: var(--md-body-large-size);
    line-height: var(--md-body-large-line-height);
    color: var(--md-on-surface-variant);
    margin-bottom: var(--md-spacing-lg);
}

/* Compact 头部样式 */
.site-header--compact {
    padding: var(--md-spacing-lg) 0;
}

.site-header--compact .site-title {
    font-size: var(--md-headline-small-size);
}

/* ==========================================================================
   14. 文章详情页
   ========================================================================== */

.post-header {
    padding: var(--md-spacing-xl) 0;
    text-align: center;
}

.post-title {
    font-size: var(--md-display-small-size);
    line-height: var(--md-display-small-line-height);
    font-weight: var(--md-display-small-weight);
    color: var(--md-on-surface);
    margin-bottom: var(--md-spacing-md);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.post-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--md-spacing-md);
    flex-wrap: wrap;
    font-size: var(--md-body-medium-size);
    color: var(--md-on-surface-variant);
}

.post-meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--md-spacing-xs);
}

.post-author-image {
    width: 32px;
    height: 32px;
    border-radius: var(--md-shape-corner-full);
    object-fit: cover;
}

.post-feature-image {
    width: 100%;
    max-width: 1200px;
    margin: var(--md-spacing-lg) auto;
    border-radius: var(--md-shape-corner-large);
    overflow: hidden;
}

.post-feature-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* 文章内容 */
.post-content {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--md-spacing-xl) var(--md-spacing-md);
}

.post-content > *:first-child {
    margin-top: 0;
}

.post-content p {
    margin-bottom: 1.5em;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--md-shape-corner-medium);
    margin: var(--md-spacing-lg) 0;
}

.post-content blockquote {
    border-left: 4px solid var(--md-primary);
    padding-left: var(--md-spacing-md);
    margin: var(--md-spacing-lg) 0;
    font-style: italic;
    color: var(--md-on-surface-variant);
}

.post-content code {
    font-family: var(--font-family-mono);
    font-size: 0.9em;
    padding: 2px 6px;
    background-color: var(--md-surface-container);
    border-radius: var(--md-shape-corner-extra-small);
    color: var(--md-primary);
}

.post-content pre {
    background-color: var(--md-surface-container-lowest);
    padding: var(--md-spacing-md);
    border-radius: var(--md-shape-corner-medium);
    overflow-x: auto;
    margin: var(--md-spacing-lg) 0;
}

.post-content pre code {
    background-color: transparent;
    padding: 0;
    color: var(--md-on-surface);
}

.post-content ul,
.post-content ol {
    padding-left: var(--md-spacing-lg);
    margin-bottom: 1.5em;
}

.post-content li {
    margin-bottom: 0.5em;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--md-spacing-lg) 0;
    border-radius: var(--md-shape-corner-medium);
    overflow: hidden;
}

.post-content th,
.post-content td {
    padding: var(--md-spacing-sm) var(--md-spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--md-outline-variant);
}

.post-content th {
    background-color: var(--md-surface-container);
    font-weight: var(--md-title-medium-weight);
}

.post-content tr:hover {
    background-color: var(--md-surface-container-low);
}

/* 标签列表 */
.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--md-spacing-sm);
    margin-top: var(--md-spacing-xl);
    padding-top: var(--md-spacing-lg);
    border-top: 1px solid var(--md-outline-variant);
}

/* ==========================================================================
   15. 目录 (Table of Contents)
   ========================================================================== */

.toc {
    position: sticky;
    top: 100px;
    background-color: var(--md-surface-container-low);
    border-radius: var(--md-shape-corner-large);
    padding: var(--md-spacing-md);
    margin-bottom: var(--md-spacing-lg);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.toc-title {
    font-size: var(--md-title-medium-size);
    font-weight: var(--md-title-medium-weight);
    color: var(--md-on-surface);
    margin-bottom: var(--md-spacing-md);
    padding-bottom: var(--md-spacing-sm);
    border-bottom: 1px solid var(--md-outline-variant);
}

.toc-list {
    list-style: none;
    padding-left: 0;
}

.toc-list li {
    margin-bottom: var(--md-spacing-xs);
}

.toc-list a {
    display: block;
    padding: var(--md-spacing-xs) var(--md-spacing-sm);
    border-radius: var(--md-shape-corner-small);
    font-size: var(--md-body-medium-size);
    color: var(--md-on-surface-variant);
    text-decoration: none;
    transition: all var(--md-motion-duration-short3) var(--md-motion-easing-standard);
}

.toc-list a:hover {
    background-color: var(--md-surface-container-high);
    color: var(--md-primary);
    text-decoration: none;
}

.toc-list .toc-h2 {
    padding-left: var(--md-spacing-md);
}

.toc-list .toc-h3 {
    padding-left: var(--md-spacing-lg);
    font-size: var(--md-body-small-size);
}

/* ==========================================================================
   16. 分页 (Pagination)
   ========================================================================== */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--md-spacing-sm);
    padding: var(--md-spacing-xl) 0;
}

.pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--md-spacing-sm);
    border-radius: var(--md-shape-corner-full);
    font-size: var(--md-label-large-size);
    font-weight: var(--md-label-large-weight);
    color: var(--md-on-surface-variant);
    text-decoration: none;
    transition: all var(--md-motion-duration-short3) var(--md-motion-easing-standard);
}

.pagination a:hover {
    background-color: var(--md-surface-container-high);
    color: var(--md-on-surface);
    text-decoration: none;
}

.pagination .active {
    background-color: var(--md-primary);
    color: var(--md-on-primary);
}

.pagination .disabled {
    opacity: 0.38;
    pointer-events: none;
}

/* ==========================================================================
   17. 页脚 (Footer)
   ========================================================================== */

.gh-foot {
    background-color: var(--md-surface-container-lowest);
    padding: var(--md-spacing-xxl) 0 var(--md-spacing-lg);
    margin-top: auto;
}

.gh-foot-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--md-spacing-xl);
    margin-bottom: var(--md-spacing-xl);
}

.gh-foot-section h4 {
    font-size: var(--md-title-medium-size);
    font-weight: var(--md-title-medium-weight);
    color: var(--md-on-surface);
    margin-bottom: var(--md-spacing-md);
}

.gh-foot-menu {
    list-style: none;
}

.gh-foot-menu li {
    margin-bottom: var(--md-spacing-sm);
}

.gh-foot-menu a {
    font-size: var(--md-body-medium-size);
    color: var(--md-on-surface-variant);
}

.gh-foot-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--md-spacing-md);
    padding-top: var(--md-spacing-lg);
    border-top: 1px solid var(--md-outline-variant);
    font-size: var(--md-body-small-size);
    color: var(--md-on-surface-variant);
}

/* ==========================================================================
   18. 搜索 (Search)
   ========================================================================== */

.search-input-wrapper {
    position: relative;
    max-width: 400px;
}

.search-input {
    width: 100%;
    padding: 12px 16px 12px 48px;
    border: 1px solid var(--md-outline);
    border-radius: var(--md-shape-corner-full);
    background-color: var(--md-surface-container);
    color: var(--md-on-surface);
    font-family: var(--font-family-base);
    font-size: var(--md-body-large-size);
    transition: all var(--md-motion-duration-short3) var(--md-motion-easing-standard);
}

.search-input:focus {
    outline: none;
    border-color: var(--md-primary);
    box-shadow: 0 0 0 1px var(--md-primary);
}

.search-input::placeholder {
    color: var(--md-on-surface-variant);
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--md-on-surface-variant);
    pointer-events: none;
}

/* ==========================================================================
   19. 错误页面
   ========================================================================== */

.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: var(--md-spacing-xl);
}

.error-code {
    font-size: 120px;
    font-weight: 700;
    color: var(--md-primary);
    line-height: 1;
    margin-bottom: var(--md-spacing-md);
}

.error-message {
    font-size: var(--md-headline-small-size);
    color: var(--md-on-surface);
    margin-bottom: var(--md-spacing-lg);
}

.error-description {
    font-size: var(--md-body-large-size);
    color: var(--md-on-surface-variant);
    max-width: 500px;
    margin-bottom: var(--md-spacing-xl);
}

/* ==========================================================================
   20. FAB (Floating Action Button)
   ========================================================================== */

.fab {
    position: fixed;
    bottom: var(--md-spacing-lg);
    right: var(--md-spacing-lg);
    width: 56px;
    height: 56px;
    border-radius: var(--md-shape-corner-large);
    background-color: var(--md-primary-container);
    color: var(--md-on-primary-container);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--md-elevation-3);
    transition: all var(--md-motion-duration-medium2) var(--md-motion-easing-emphasized);
    z-index: 1000;
}

.fab:hover {
    box-shadow: var(--md-elevation-4);
}

.fab:active {
    box-shadow: var(--md-elevation-1);
}

/* 回到顶部 FAB */
.fab--scroll-top {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

.fab--scroll-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ==========================================================================
   21. Snackbar (消息提示)
   ========================================================================== */

.snackbar {
    position: fixed;
    bottom: var(--md-spacing-lg);
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background-color: var(--md-inverse-surface);
    color: var(--md-inverse-on-surface);
    padding: var(--md-spacing-sm) var(--md-spacing-md);
    border-radius: var(--md-shape-corner-extra-small);
    font-size: var(--md-body-medium-size);
    box-shadow: var(--md-elevation-3);
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transition: all var(--md-motion-duration-medium2) var(--md-motion-easing-emphasized);
}

.snackbar.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   22. 响应式设计
   ========================================================================== */

@media (max-width: 1024px) {
    .toc {
        position: static;
        max-height: none;
    }
}

@media (max-width: 768px) {
    /* 导航栏移动端 */
    .gh-head-menu {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        background-color: var(--md-surface);
        padding: var(--md-spacing-xl);
        gap: var(--md-spacing-sm);
        transform: translateX(100%);
        transition: transform var(--md-motion-duration-medium2) var(--md-motion-easing-emphasized);
        z-index: 200;
    }

    .gh-head-menu.open {
        transform: translateX(0);
    }

    .gh-head-menu a {
        font-size: var(--md-title-medium-size);
        padding: var(--md-spacing-md);
    }

    .gh-burger {
        display: flex;
    }

    /* 卡片网格移动端 */
    .post-feed {
        grid-template-columns: 1fr;
        gap: var(--md-spacing-md);
    }

    /* 头部移动端 */
    .site-header {
        padding: var(--md-spacing-xl) 0;
    }

    .site-title {
        font-size: var(--md-headline-medium-size);
    }

    .post-title {
        font-size: var(--md-headline-medium-size);
    }

    /* 页脚移动端 */
    .gh-foot-inner {
        grid-template-columns: 1fr;
    }

    .gh-foot-bottom {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 var(--md-spacing-sm);
    }

    .post-content {
        padding: var(--md-spacing-md) var(--md-spacing-sm);
    }

    .error-code {
        font-size: 80px;
    }
}

/* ==========================================================================
   23. 打印样式
   ========================================================================== */

@media print {
    .gh-head,
    .gh-foot,
    .fab,
    .toc,
    .pagination {
        display: none;
    }

    body {
        color: #000;
        background: #fff;
    }

    .post-content {
        max-width: 100%;
    }

    a {
        color: #000;
        text-decoration: underline;
    }
}

/* ==========================================================================
   24. 动画
   ========================================================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn var(--md-motion-duration-medium2) var(--md-motion-easing-emphasized) forwards;
}

/* 交错动画 */
.post-card:nth-child(1) { animation-delay: 0ms; }
.post-card:nth-child(2) { animation-delay: 50ms; }
.post-card:nth-child(3) { animation-delay: 100ms; }
.post-card:nth-child(4) { animation-delay: 150ms; }
.post-card:nth-child(5) { animation-delay: 200ms; }
.post-card:nth-child(6) { animation-delay: 250ms; }

/* ==========================================================================
   25. Ghost 编辑器卡片样式 (Editor Cards)
   ========================================================================== */

/* 图片宽度控制 */
.kg-width-wide {
    width: 100vw;
    max-width: 1200px;
    margin-left: 50%;
    transform: translateX(-50%);
}

.kg-width-full {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

/* 图库卡片 */
.kg-gallery-container {
    display: flex;
    flex-direction: column;
    gap: var(--md-spacing-sm);
    margin: var(--md-spacing-lg) 0;
    width: 100%;
}

.kg-gallery-row {
    display: flex;
    flex-direction: row;
    gap: var(--md-spacing-sm);
    justify-content: center;
}

.kg-gallery-image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kg-gallery-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--md-shape-corner-medium);
}

/* 书签卡片 */
.kg-bookmark-card {
    margin: var(--md-spacing-lg) 0;
    border-radius: var(--md-shape-corner-medium);
    overflow: hidden;
    background-color: var(--md-surface-container-low);
    box-shadow: var(--md-elevation-1);
    transition: box-shadow var(--md-motion-duration-short3) var(--md-motion-easing-standard);
}

.kg-bookmark-card:hover {
    box-shadow: var(--md-elevation-2);
}

.kg-bookmark-container {
    display: flex;
    text-decoration: none;
    color: inherit;
}

.kg-bookmark-content {
    flex: 1;
    padding: var(--md-spacing-md);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.kg-bookmark-title {
    font-size: var(--md-title-medium-size);
    font-weight: var(--md-title-medium-weight);
    color: var(--md-on-surface);
    margin-bottom: var(--md-spacing-xs);
    line-height: var(--md-title-medium-line-height);
}

.kg-bookmark-description {
    font-size: var(--md-body-medium-size);
    color: var(--md-on-surface-variant);
    line-height: var(--md-body-medium-line-height);
    margin-bottom: var(--md-spacing-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kg-bookmark-metadata {
    display: flex;
    align-items: center;
    gap: var(--md-spacing-xs);
    font-size: var(--md-body-small-size);
    color: var(--md-on-surface-variant);
}

.kg-bookmark-icon {
    width: 16px;
    height: 16px;
    border-radius: var(--md-shape-corner-extra-small);
}

.kg-bookmark-author {
    font-weight: var(--md-label-medium-weight);
}

.kg-bookmark-publisher {
    color: var(--md-on-surface-variant);
}

.kg-bookmark-thumbnail {
    width: 200px;
    min-height: 120px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .kg-width-wide,
    .kg-width-full {
        width: 100%;
        margin-left: 0;
        transform: none;
    }

    .kg-gallery-row {
        flex-direction: column;
    }

    .kg-bookmark-container {
        flex-direction: column;
    }

    .kg-bookmark-thumbnail {
        width: 100%;
        height: 160px;
        min-height: auto;
    }
}