/* Auto-extracted from index.html <style> — shared header, footer, badges, theme/lang. Keep in sync when editing homepage. */

        :root {
            --brand: #dc2626;
            --brand-hover: #b91c1c;
            --brand-soft: rgba(220, 38, 38, 0.12);
            --bg-color: #ffffff;
            --bg-elevated: #fafafa;
            /* 浅色主题：正文与标题用中性黑/灰，避免 slate 蓝灰调 */
            --text-color: #1a1a1a;
            --title-color: #0a0a0a;
            --secondary-text-color: #404040;
            --muted-text-color: #737373;
            --border-color: #e8e8e8;
            --link-color: #dc2626;
            --link-hover-color: #b91c1c;
            --card-bg: #ffffff;
            --shadow-color: rgba(0, 0, 0, 0.07);
            --bar-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
            --highlight-bg: #f5f5f5;
            --gradient-start: #dc2626;
            --gradient-mid: #ea580c;
            --gradient-end: #d97706;
            --feature-surface: #f5f5f5;
            --feature-border: #e8e8e8;
            --feature-hover-border: rgba(220, 38, 38, 0.35);
        }

        html.dark-mode {
            --brand: #f87171;
            --brand-hover: #fca5a5;
            --brand-soft: rgba(248, 113, 113, 0.14);
            --bg-color: #161618;
            --bg-elevated: #1b1b1f;
            --text-color: rgba(238, 238, 246, 0.82);
            --title-color: rgba(250, 250, 255, 0.96);
            --secondary-text-color: rgba(200, 200, 220, 0.68);
            --muted-text-color: rgba(165, 165, 190, 0.55);
            --border-color: #2e2e36;
            --link-color: #f87171;
            --link-hover-color: #fca5a5;
            --card-bg: #202027;
            --shadow-color: rgba(0, 0, 0, 0.45);
            --bar-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
            --highlight-bg: #2a2a32;
            --gradient-start: #f87171;
            --gradient-mid: #fb923c;
            --gradient-end: #fbbf24;
            --feature-surface: #1c1c24;
            --feature-border: #34343f;
            --feature-hover-border: rgba(248, 113, 113, 0.45);
        }
        * {
            box-sizing: border-box;
        }

        html {
            overflow-x: hidden;
            width: 100%;
        }
        body {
            font-family:
                'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
                'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
            font-weight: 400;
            font-size: 1.1875rem;
            line-height: 1.65;
            letter-spacing: -0.011em;
            margin: 0;
            padding: 0;
            background-color: var(--bg-color);
            color: var(--text-color);
            transition: background-color 0.3s, color 0.3s;
            overflow-x: hidden;
            width: 100%;
            position: relative;
        }

        /* 首页专用：更克制、偏日式简洁的排印（仅本页内联 CSS，不作用于 tutorial/extension 等） */
        body.home-page {
            font-size: 1.0625rem;
            line-height: 1.78;
            letter-spacing: 0.01em;
            -webkit-font-smoothing: antialiased;
        }
        body.home-page .site-header a.site-brand,
        body.home-page .site-header-nav a {
            font-size: 0.8125rem;
            letter-spacing: 0.06em;
        }
        body.home-page .container {
            margin-top: 2.25rem;
            margin-bottom: 2.5rem;
        }
        body.home-page header.hero {
            margin-bottom: 2.75rem;
            padding-top: 1.25rem;
        }
        body.home-page h1.home-title {
            font-size: clamp(1.4rem, 0.9rem + 1.2vw, 1.7rem);
            font-weight: 600;
            letter-spacing: 0.06em;
            line-height: 1.4;
            margin: 0.4rem 0 0.65rem;
        }
        body.home-page p.tagline {
            font-size: 0.875rem;
            line-height: 1.7;
            letter-spacing: 0.04em;
            color: var(--muted-text-color);
        }
        body.home-page .app-badges {
            margin: 1.35rem 0 0;
        }
        body.home-page .badge.ios-badge {
            font-size: 0.8125rem;
            padding: 0.4rem 0.8rem;
            letter-spacing: 0.04em;
        }
        body.home-page .hero-extension-hint {
            font-size: 0.8125rem;
            line-height: 1.65;
        }
        body.home-page main {
            gap: 2.85rem;
            margin-top: 1rem;
        }
        body.home-page main .home-section h2.section-kicker {
            font-size: 0.6875rem;
            font-weight: 500;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            margin: 0 0 0.9rem;
            color: var(--muted-text-color);
        }
        body.home-page main .home-section > p {
            font-size: 0.9375rem;
            line-height: 1.85;
            margin: 0 0 0.9rem;
        }
        body.home-page .home-update-list li {
            font-size: 0.9375rem;
            line-height: 1.75;
            padding: 0.4rem 0 0.45rem 0;
            margin: 0 0 0.4rem;
        }
        body.home-page .home-blog-list {
            gap: 0.65rem;
            margin-top: 0.4rem;
        }
        body.home-page .home-blog-list .latest-article-item {
            padding: 0.85rem 0.95rem;
            border-radius: 8px;
        }
        body.home-page .home-blog-list .article-title {
            font-size: 0.9375rem;
            font-weight: 500;
            line-height: 1.45;
            white-space: normal;
            overflow-wrap: anywhere;
            word-wrap: break-word;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
        }
        body.home-page .home-blog-list .article-description {
            font-size: 0.8125rem;
            line-height: 1.65;
        }
        body.home-page .home-blog-list .article-meta {
            font-size: 0.75rem;
            margin-top: 0.45rem;
        }
        body.home-page .site-footer-home {
            margin-top: 3.25rem;
        }
        body.home-page .footer-combined {
            font-size: 0.8125rem;
            line-height: 1.65;
            letter-spacing: 0.02em;
        }
        body.home-page .screenshots {
            gap: 1.25rem;
            margin: 2.5rem 0 2.75rem;
        }
        /* CJK 首页略收紧字面距（与 lang 选集一致，仅作微调） */
        html:lang(ja) body.home-page,
        html:lang(zh-CN) body.home-page,
        html:lang(zh-TW) body.home-page {
            font-feature-settings: "palt" 1;
        }

        /* 按 html lang 补足本地字形（与 ?lang= 解析一致） */
        html:lang(zh-CN) body {
            font-family:
                'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei',
                'Noto Sans SC', 'Source Han Sans SC', ui-sans-serif, system-ui, sans-serif,
                'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
        }

        html:lang(zh-TW) body {
            font-family:
                'Inter', 'PingFang TC', 'Hiragino Sans TC', 'Microsoft JhengHei UI', 'Microsoft JhengHei',
                'Noto Sans TC', 'Source Han Sans TC', ui-sans-serif, system-ui, sans-serif,
                'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
        }

        html:lang(ja) body {
            font-family:
                'Inter', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro',
                'Noto Sans JP', 'Yu Gothic UI', YuGothic, Meiryo, ui-sans-serif, system-ui, sans-serif,
                'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
        }

        html:lang(ru) body {
            font-family:
                'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
                Arial, ui-sans-serif, system-ui, sans-serif,
                'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
        }

        html:lang(ko) body,
        html:lang(ko-KR) body {
            font-family:
                'Inter', 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Segoe UI', ui-sans-serif,
                system-ui, sans-serif,
                'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
        }

        html:lang(ar) body,
        html:lang(ar-SA) body {
            font-family:
                'Segoe UI', 'Arabic UI Text', 'Arabic UI Display', 'Geeza Pro', 'Noto Naskh Arabic',
                'Inter', ui-sans-serif, system-ui, sans-serif,
                'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
        }

        html:lang(hi) body,
        html:lang(hi-IN) body {
            font-family:
                'Inter', 'Kohinoor Devanagari', 'Noto Sans Devanagari', Mangal, 'Nirmala UI', 'Segoe UI',
                ui-sans-serif, system-ui, sans-serif,
                'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
        }

        html:lang(th) body,
        html:lang(th-TH) body {
            font-family:
                'Inter', Thonburi, 'Noto Sans Thai', 'Leelawadee UI', 'Segoe UI', ui-sans-serif, system-ui,
                sans-serif,
                'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
        }

        html:lang(kk) body,
        html:lang(kk-KZ) body {
            font-family:
                'Inter', 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, ui-sans-serif,
                system-ui, sans-serif,
                'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
        }

        .container {
            max-width: min(72rem, 97vw);
            margin: 2rem auto;
            padding: 0 1.5rem;
            width: 100%;
            overflow-x: hidden;
        }

        body.home-page {
            padding-top: 3.5rem;
        }
        /* 顶栏：品牌 + 页内锚点 + 主题 / 语言 */
        .site-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1100;
            background-color: var(--bg-color);
            border-bottom: 1px solid var(--border-color);
            box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
        }

        .site-header a.site-brand {
            color: var(--text-color);
            text-decoration: none;
            font-weight: 400;
            font-size: 0.9375rem;
            letter-spacing: -0.02em;
            flex-shrink: 0;
        }

        .site-header a.site-brand:hover {
            color: var(--secondary-text-color);
        }

        .site-header-inner {
            max-width: min(72rem, 97vw);
            margin: 0 auto;
            padding: 0.6rem 1.5rem;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem 1.25rem;
        }

        .site-header-nav {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.5rem 1.1rem;
            flex: 1 1 auto;
            justify-content: center;
        }

        .site-header-nav a {
            color: var(--secondary-text-color);
            text-decoration: none;
            font-weight: 400;
            font-size: 0.9375rem;
        }

        .site-header-nav a:hover {
            color: var(--text-color);
        }

        /* 与 VitePress 外链样式一致：提示顶栏「扩展」跳转到独立介绍页 */
        .site-header-nav a .vp-external-link-icon {
            display: inline-block;
            width: 11px;
            height: 11px;
            margin-left: 0.2em;
            vertical-align: -0.08em;
            flex-shrink: 0;
            opacity: 0.65;
            position: relative;
            top: 0.5px;
            background-color: currentColor;
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h5c.55 0 1-.45 1-1s-.45-1-1-1H5c-1.11 0-2 .89-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6c0-.55-.45-1-1-1s-1 .45-1 1v5c0 .55-.45 1-1 1zM14 4c0 .55.45 1 1 1h2.59l-9.13 9.13a.996.996 0 1 0 1.41 1.41L19 6.41V9c0 .55.45 1 1 1s1-.45 1-1V4c0-.55-.45-1-1-1h-5c-.55 0-1 .45-1 1z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h5c.55 0 1-.45 1-1s-.45-1-1-1H5c-1.11 0-2 .89-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-6c0-.55-.45-1-1-1s-1 .45-1 1v5c0 .55-.45 1-1 1zM14 4c0 .55.45 1 1 1h2.59l-9.13 9.13a.996.996 0 1 0 1.41 1.41L19 6.41V9c0 .55.45 1 1 1s1-.45 1-1V4c0-.55-.45-1-1-1h-5c-.55 0-1 .45-1 1z'/%3E%3C/svg%3E") center / contain no-repeat;
        }
        .site-header-nav a:hover .vp-external-link-icon {
            opacity: 0.9;
        }

        .site-header-tools {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }
        .footer-combined {
            max-width: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            justify-content: flex-start;
            gap: 0.3rem 0.45rem;
            font-size: 0.9375rem;
            line-height: 1.55;
            color: var(--secondary-text-color);
        }

        .footer-combined nav.home-resources {
            display: contents;
        }

        .site-footer-home {
            margin-top: 2.75rem;
            padding: 0 0 0.5rem;
            border-top: none;
            overflow-x: visible;
        }

        .footer-brand-watermark-wrap {
            width: 100%;
            max-width: 100%;
            margin-top: 3rem;
            margin-bottom: 0;
            padding: 0 max(1rem, env(safe-area-inset-left, 0px)) 1.75rem max(1rem, env(safe-area-inset-right, 0px));
            box-sizing: border-box;
            /* 水印故意超宽时不要撑出滚动条（装饰字，裁剪即可） */
            overflow-x: hidden;
            overflow-y: hidden;
        }

        .footer-brand-watermark {
            font-size: min(18vw, 300px);
            font-weight: 300;
            letter-spacing: -0.07em;
            line-height: 1;
            color: var(--title-color);
            opacity: 0.07;
            margin: 0;
            padding: 0;
            user-select: none;
            pointer-events: none;
            white-space: nowrap;
            text-align: center;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            overflow: hidden;
        }

        html.dark-mode .footer-brand-watermark {
            opacity: 0.12;
        }

        .footer-combined a {
            color: var(--secondary-text-color);
            font-weight: 400;
            text-decoration: none;
        }

        .footer-combined a:hover {
            color: var(--text-color);
            text-decoration: underline;
        }

        .footer-combined .home-resources-sep {
            color: var(--muted-text-color);
            user-select: none;
        }

        .footer-copyright-inline {
            color: var(--secondary-text-color);
            font-weight: 400;
        }

        .footer-copyright-inline a {
            color: inherit;
        }

        .footer-copyright-inline a:hover {
            color: var(--text-color);
            text-decoration: underline;
        }

        h3 {
            color: var(--title-color);
            letter-spacing: -0.02em;
        }

        p, ul {
            margin-bottom: 1rem;
            color: var(--text-color);
        }
        a {
            color: var(--link-color);
            text-decoration: none;
            transition: color 0.2s;
        }

        a:hover {
            color: var(--link-hover-color);
            text-decoration: none;
        }
        body.home-page main a:not(.badge):not(.ios-badge),
        body.home-page .screenshots a {
            color: var(--text-color);
        }

        body.home-page main a:not(.badge):not(.ios-badge):hover,
        body.home-page .screenshots a:hover {
            color: var(--secondary-text-color);
        }

        body.home-page .site-header-nav a {
            color: var(--secondary-text-color);
        }

        body.home-page .site-header-nav a:hover {
            color: var(--text-color);
        }
        .badge {
            display: inline-flex;
            align-items: center;
            padding: 0.5rem 1rem;
            border-radius: 8px;
            color: #fff;
            font-weight: 400;
            text-decoration: none;
            font-size: 1em;
            transition: transform 0.2s, opacity 0.2s, filter 0.2s;
        }
        .badge:hover { transform: scale(1.02); opacity: 0.92; }
        
        .tutorial-icon {
            margin-right: 6px;
            flex-shrink: 0;
        }

        .ios-badge {
            background-color: #000;
        }
        .ios-badge:hover {
            background-color: #1a1a1a;
            color: #fff;
        }

        .android-badge {
            background-color: #888;
            cursor: not-allowed;
        }
        .theme-switch-wrapper {
            position: relative;
            z-index: 1;
        }
        .theme-switch {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
            box-shadow: var(--bar-shadow);
        }
        .theme-switch:hover {
            background: var(--highlight-bg);
            border-color: var(--border-color);
        }
        .theme-switch svg {
            width: 20px;
            height: 20px;
            color: var(--text-color);
            transition: color 0.3s;
        }
        .theme-switch .sun-icon,
        .theme-switch .moon-icon,
        .theme-switch .auto-icon {
            display: none;
        }
        .theme-switch[data-theme-pref="light"] .sun-icon { display: block; }
        .theme-switch[data-theme-pref="dark"] .moon-icon { display: block; }
        .theme-switch[data-theme-pref="auto"] .auto-icon { display: block; }

        /* 主题未改变外观时的轻提示：顶栏右下、略低于 header */
        .theme-unchanged-toast {
            position: fixed;
            top: 4.25rem;
            right: 0.75rem;
            left: auto;
            bottom: auto;
            max-width: min(17rem, calc(100vw - 1.5rem));
            padding: 0.45rem 0.7rem;
            font-size: 0.8125rem;
            line-height: 1.35;
            text-align: left;
            color: var(--text-color);
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            box-shadow: 0 6px 22px var(--shadow-color);
            z-index: 1200;
            pointer-events: none;
            opacity: 0;
            transform: translateX(10px);
            transition: opacity 0.2s ease, transform 0.22s ease;
        }
        .theme-unchanged-toast.is-visible {
            opacity: 1;
            transform: translateX(0);
        }

        /* Language Switcher */
        .language-switch-wrapper {
            position: relative;
            z-index: 1101;
        }
        .language-switch {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            height: 40px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 12px;
            transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
            box-shadow: var(--bar-shadow);
            position: relative;
            z-index: 1101;
        }
        .language-switch:hover {
            background: var(--highlight-bg);
            border-color: var(--border-color);
        }
        .language-switch svg {
            width: 20px;
            height: 20px;
            color: var(--text-color);
            transition: color 0.3s;
        }
        .language-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            box-shadow: 0 10px 28px var(--shadow-color);
            min-width: 250px;
            max-height: 400px;
            overflow-y: auto;
            display: none;
            z-index: 1102;
        }
        .language-dropdown.show {
            display: block;
        }
        .language-option {
            padding: 10px 16px;
            cursor: pointer;
            transition: background 0.2s;
            color: var(--text-color);
            font-size: 1em;
            border-bottom: 1px solid var(--border-color);
        }
        .language-option:last-child {
            border-bottom: none;
        }
        .language-option:hover {
            background: var(--highlight-bg);
        }
        .language-option.active {
            background: var(--highlight-bg);
            font-weight: 400;
            color: var(--text-color);
        }
        ::selection {
            background-color: var(--brand-soft);
            color: var(--title-color);
        }

        html.dark-mode ::selection {
            background-color: var(--brand-soft);
            color: var(--title-color);
        }

        /* Disable text selection on specific elements */
        .badge,
        .feature-card,
        .source-icon {
            user-select: none;
            -webkit-user-select: none; /* Safari */
        }

@media (max-width: 600px) {
        .site-header-inner {
                padding-left: 1rem;
                padding-right: 1rem;
            }
}