:root {
            --white: #ffffff;
            --black: #181818;
            --gray-1: #4f4f4f;
            --gray-2: #777777;
            --gray-3: #a5a5a5;
            --gray-4: #dcdcdc;
            --gray-5: #eeeeee;
            --gray-6: #f7f7f7;

            --accent: #8a6f52;
            --accent-strong: #6e573f;
            --accent-soft: #f3ede5;

            --code-bg: #1f242b;
            --code-line: #2d343d;
            --code-text: #c9d3dc;
        }

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

        html {
            scroll-behavior: auto;
        }

        body {
            background: var(--white);
            color: var(--black);

            font-family:
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                "PingFang SC",
                "Hiragino Sans GB",
                "Microsoft YaHei",
                Arial,
                sans-serif;

            font-size: 15px;
            line-height: 1.85;

            -webkit-font-smoothing: antialiased;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        

        .page-head {
            width: min(calc(100% - 48px), 1020px);
            margin: 0 auto;
            padding: 26px 0 6px;
        }

        .layout {
            display: flex;
            align-items: flex-start;
            gap: 44px;

            width: min(calc(100% - 48px), 1020px);
            margin: 0 auto;

            padding: 12px 0 20px;
        }

        .side {
            flex-shrink: 0;

            width: 178px;

            position: sticky;
            top: 32px;
        }

        .side-title {
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.02em;

            margin-bottom: 12px;
        }

        
        #side-nav {
            position: relative;
        }

        .side a {
            display: block;
            position: relative;

            font-size: 13px;
            color: var(--gray-2);

            padding: 5px 0;

            transition: color 0.15s ease;
        }

        .side a:hover {
            color: var(--gray-1);
        }

        .side a.active {
            color: var(--gray-2);
        }

        .content {
            flex: 1;
            min-width: 0;
            max-width: 700px;
        }

        

        .page-head h1 {
            font-size: clamp(26px, 4vw, 34px);
            font-weight: 700;
            letter-spacing: -0.03em;

            margin-bottom: 6px;
        }

        .doc-sub {
            color: var(--gray-2);
            font-size: 13.5px;

            margin-bottom: 28px;
        }

        
        .scope {
            display: flex;
            gap: 12px;

            background: var(--accent-soft);
            border-left: 2px solid var(--accent);
            border-radius: 0 8px 8px 0;

            padding: 13px 18px;
            margin-bottom: 14px;
        }

        .scope p {
            color: var(--gray-1);
            font-size: 13.5px;
        }

        .scope b {
            color: var(--accent-strong);
            font-weight: 600;
        }

        
        .content h2 {
            font-size: 20px;
            font-weight: 600;
            letter-spacing: -0.01em;

            margin: 46px 0 12px;

            scroll-margin-top: 24px;
        }

        .content p {
            color: var(--gray-1);
            font-size: 14px;
        }

        .content p + p {
            margin-top: 8px;
        }

        .ext-link {
            color: var(--accent-strong);
            font-weight: 500;

            border-bottom: 1px solid #d9cdbd;
            transition: border-color 0.15s ease, color 0.15s ease;
        }

        .ext-link:hover {
            color: var(--accent);
            border-bottom-color: var(--accent);
        }

        .inline-code {
            background: var(--gray-6);
            border: 0.5px solid var(--gray-5);
            border-radius: 6px;

            padding: 0.1em 0.45em;

            font-family: "SF Mono", "Cascadia Code", Consolas, "Courier New", monospace;
            font-size: 0.88em;
        }

        
        .tstep {
            display: flex;
            gap: 12px;

            margin: 10px 0;
        }

        .tstep-no {
            flex-shrink: 0;

            color: var(--accent);
            font-size: 13px;
            font-weight: 600;

            position: relative;
            top: 1px;
        }

        .tstep-body {
            flex: 1;
            min-width: 0;
        }

        .tstep-body p {
            font-size: 13.5px;
        }

        

        .ref-figure {
            margin: 18px 0 4px;
        }

        .ref-figure img {
            display: block;
            width: 100%;
            max-width: 260px;
            height: auto;

            border: 1px solid var(--gray-4);
            border-radius: 10px;

            cursor: zoom-in;

            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }

        .ref-figure img:hover,
        .ref-figure img:active {
            transform: translateY(-3px);
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
        }

        .ref-figure figcaption {
            margin-top: 6px;
            font-size: 12px;
            color: var(--gray-3);
        }

        /* 图片点击放大 */
        .lightbox {
            position: fixed;
            inset: 0;
            z-index: 2000;
            background: rgba(0, 0, 0, 0.86);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.24s ease;
        }

        .lightbox.open {
            opacity: 1;
            pointer-events: auto;
        }

        .lightbox img {
            max-width: 95vw;
            max-height: 92vh;
            border-radius: 10px;
            transform: scale(0.94);
            transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.3, 1);
        }

        .lightbox.open img {
            transform: scale(1);
        }

        

        .code-wrap {
            margin: 12px 0 6px;

            max-width: 100%;
        }

        .code-block {
            position: relative;

            display: inline-block;

            min-width: 240px;
            max-width: 100%;

            background: var(--code-bg);
            border: 1px solid var(--code-line);
            border-radius: 8px;

            overflow: hidden;
        }

        .copy-btn {
            position: absolute;
            top: 7px;
            right: 7px;

            width: 28px;
            height: 28px;

            display: flex;
            align-items: center;
            justify-content: center;

            border: 1px solid #39424d;
            border-radius: 7px;

            background: #272d35;
            color: #97a3af;

            cursor: pointer;

            transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
        }

        .copy-btn:hover {
            background: #303841;
            color: #dbe3ea;
        }

        .copy-btn svg {
            width: 14px;
            height: 14px;

            stroke: currentColor;
            fill: none;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        
        .copy-btn .i-check {
            display: none;
        }

        .copy-btn.copied {
            color: #7ec8a4;
            border-color: #3a5c4b;
        }

        .copy-btn.copied .i-copy {
            display: none;
        }

        .copy-btn.copied .i-check {
            display: block;
        }

        .code-block pre {
            padding: 10px 46px 10px 14px;

            overflow-x: auto;
        }

        .code-block code {
            font-family: "SF Mono", "Cascadia Code", Consolas, "Courier New", monospace;
            font-size: 12.5px;
            line-height: 1.65;

            color: var(--code-text);
            white-space: pre;
        }

        


        

        @media (max-width: 860px) {

            html, body {
                overflow-x: hidden;
            }

            .layout {
                flex-direction: column;
                align-items: stretch;
                gap: 26px;

                width: calc(100% - 36px);
                padding-top: 30px;
            }

            .page-head {
                width: calc(100% - 36px);
                padding-top: 20px;
            }

            
            .side {
                position: static;

                width: 100%;
            }

            .side-title {
                margin-bottom: 8px;
            }

            .side a {
                display: inline-block;

                border-bottom: 1.5px solid var(--gray-5);

                padding: 4px 2px;
                margin-right: 16px;
            }

            .side a.active {
                border-bottom-color: var(--gray-5);
            }

            
            .side-indicator {
                display: none;
            }

            .content {
                width: 100%;
                min-width: 0;
                max-width: none;
            }

            .code-block {
                max-width: 100%;
            }
        }
            html.dark {
            --white: #14161a;
            --black: #e9e6df;
            --gray-1: #b9b6ae;
            --gray-2: #8f8c84;
            --gray-3: #6f6d66;
            --gray-4: #2e323a;
            --gray-5: #262a31;
            --gray-6: #1d2127;
            --accent: #a8896a;
            --accent-strong: #c09a76;
            --accent-soft: #26221c;
        }

        .theme-toggle {
            position: fixed;
            right: 18px;
            bottom: 18px;
            z-index: 999;

            width: 42px;
            height: 42px;

            display: flex;
            align-items: center;
            justify-content: center;

            border: 1px solid var(--gray-4);
            border-radius: 50%;

            background: var(--gray-6);
            color: var(--black);

            cursor: pointer;

            transition: background 0.15s ease, border-color 0.15s ease;
        }

        .theme-toggle:hover {
            background: var(--gray-5);
        }

        .theme-toggle svg {
            width: 19px;
            height: 19px;

            stroke: currentColor;
            fill: none;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .theme-toggle .i-sun {
            display: none;
        }

        html.dark .theme-toggle .i-sun {
            display: block;
        }

        html.dark .theme-toggle .i-moon {
            display: none;
        }
        html.dark .ext-link {
            border-bottom-color: #4a4238;
        }