/* ========== 全局重置 & 变量 ========== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --bg: #f8fafc;
            --surface: #ffffff;
            --primary: #3b82f6;
            --primary-dark: #1e4b8a;
            --text: #0f172a;
            --text-secondary: #475569;
            --border: #e2e8f0;
            --radius: 20px;
            --shadow: 0 20px 60px -12px rgba(0, 0, 0, 0.08);
            --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 80px;
        }

        body {
            font-family: var(--font);
            background: var(--bg);
            color: var(--text);
            line-height: 1.6;
            padding-top: 70px;
        }

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

        img {
            max-width: 100%;
            display: block;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 24px;
        }

        /* ========== 导航栏 ========== */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 999;
            background: rgba(255, 255, 255, 0.72);
            backdrop-filter: blur(16px) saturate(180%);
            -webkit-backdrop-filter: blur(16px) saturate(180%);
            border-bottom: 1px solid var(--border);
            transition: var(--transition);
            height: 70px;
            display: flex;
            align-items: center;
        }

        .navbar .container {
            display: flex;
            align-items: center;
            width: 100%;
        }

        .logo {
            font-weight: 700;
            font-size: 1.5rem;
            letter-spacing: -0.5px;
            background: linear-gradient(135deg, var(--primary), #8b5cf6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .nav-links {
            display: flex;
            gap: 8px;
            list-style: none;
        }

        .nav-links a {
            padding: 8px 18px;
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--text-secondary);
            transition: var(--transition);
        }

        .nav-links a:hover,
        .nav-links a:focus {
            background: var(--primary);
            color: #fff;
        }

        /* 移动端汉堡菜单 */
        .hamburger {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            background: none;
            border: none;
            padding: 4px;
        }

        .hamburger span {
            display: block;
            width: 26px;
            height: 2.5px;
            background: var(--text);
            border-radius: 4px;
            transition: var(--transition);
        }

        /* ========== Hero 区域 ========== */


        .hero-avatar {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3.2rem;
            color: #fff;
            box-shadow: 0 12px 40px -8px rgba(59, 130, 246, 0.3);
            transition: var(--transition);
        }

        .hero-avatar:hover {
            transform: scale(1.03);
        }

        .hero h1 {
            font-size: 3rem;
            font-weight: 700;
            letter-spacing: -1px;
            margin-bottom: 12px;
        }

        .hero p {
            font-size: 1.2rem;
            color: var(--text-secondary);
            max-width: 560px;
            margin: 0 auto 32px;
        }

        .hero-actions {
            display: flex;
            gap: 12px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 28px;
            border-radius: 100px;
            font-weight: 600;
            font-size: 0.95rem;
            border: none;
            cursor: pointer;
            transition: var(--transition);
        }

        .btn-primary {
            background: var(--primary);
            color: #fff;
            box-shadow: 0 8px 24px -6px rgba(59, 130, 246, 0.25);
        }

        .btn-primary:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 12px 32px -8px rgba(59, 130, 246, 0.35);
        }

        .btn-outline {
            background: transparent;
            color: var(--text);
            border: 1.5px solid var(--border);
        }

        .btn-outline:hover {
            border-color: var(--primary);
            color: var(--primary);
            transform: translateY(-2px);
        }

        /* ========== 通用 Section ========== */
        section {
            padding: 70px 0;
        }

        .section-title {
            font-size: 2rem;
            font-weight: 700;
            letter-spacing: -0.5px;
            margin-bottom: 8px;
        }

        .section-subtitle {
            color: var(--text-secondary);
            font-size: 1.05rem;
            margin-bottom: 40px;
        }

        .section-header {
            margin-bottom: 16px;
        }

        /* ========== 社交卡片网格 ========== */
        .social-grid {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            grid-auto-flow: dense;
            gap: 16px;
        }

        .social-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 24px 16px;
            text-align: center;
            transition: var(--transition);
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            color: var(--text);
        }

        .social-card i {
            font-size: 2rem;
            transition: var(--transition);
        }

        .social-card span {
            font-weight: 600;
            font-size: 0.95rem;
        }

        .social-card:hover {
            transform: translateY(-6px);
            border-color: var(--primary);
            box-shadow: 0 24px 48px -12px rgba(59, 130, 246, 0.15);
        }

        .social-card:hover i {
            color: var(--primary);
            transform: scale(1.1);
        }

        .social-card[data-platform-span="2"] { grid-column: span 2; }
        .social-card[data-platform-span="3"] { grid-column: span 3; }
        .social-card[hidden] { display: none !important; }
        .platform-account-id { position: absolute; left: 16px; bottom: 15px; display: block; max-width: calc(100% - 82px); overflow: hidden; color: var(--text-secondary); font-size: .72rem; line-height: 1.25; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
        .platform-account-id:empty { display: none; }
        .social-card.has-platform-id { padding-top: 24px; gap: 10px; }
        @media (max-width: 900px) { .social-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
        @media (max-width: 600px) { .social-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .social-card[data-platform-span] { grid-column: span 1; } }
        @media (max-width: 380px) { .social-grid { grid-template-columns: 1fr; } }

        /* ========== 作品集卡片 ========== */
        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 24px;
        }

        .portfolio-card {
            background: var(--surface);
            border-radius: var(--radius);
            border: 1px solid var(--border);
            overflow: hidden;
            transition: var(--transition);
            box-shadow: var(--shadow);
            cursor: pointer;
        }

        .portfolio-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 28px 56px -12px rgba(0, 0, 0, 0.12);
        }

        .portfolio-thumb {
            height: 200px;
            background: linear-gradient(145deg, #e2e8f0, #f1f5f9);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            color: var(--text-secondary);
            position: relative;
            overflow: hidden;
        }

        .portfolio-thumb .placeholder-icon {
            opacity: 0.5;
        }

        .portfolio-body {
            padding: 20px 24px 24px;
        }

        .portfolio-body h3 {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 6px;
        }

        .portfolio-body p {
            color: var(--text-secondary);
            font-size: 0.92rem;
            margin-bottom: 14px;
        }

        .tag {
            display: inline-block;
            padding: 4px 12px;
            background: #f1f5f9;
            border-radius: 100px;
            font-size: 0.75rem;
            font-weight: 500;
            color: var(--text-secondary);
        }

        .tag-group {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        /* ========== 经验分享 / 文章 ========== */
        .article-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 24px;
        }

        .article-card {
            background: var(--surface);
            border-radius: var(--radius);
            border: 1px solid var(--border);
            padding: 28px 28px 32px;
            transition: var(--transition);
            box-shadow: var(--shadow);
        }

        .article-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.08);
        }

        .article-card .date {
            font-size: 0.8rem;
            color: var(--text-secondary);
            font-weight: 500;
            letter-spacing: 0.3px;
            margin-bottom: 8px;
        }

        .article-card h3 {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .article-card p {
            color: var(--text-secondary);
            font-size: 0.95rem;
            margin-bottom: 16px;
        }

        .article-card .read-more {
            font-weight: 600;
            color: var(--primary);
            font-size: 0.9rem;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .article-card .read-more i {
            transition: var(--transition);
        }

        .article-card .read-more:hover i {
            transform: translateX(4px);
        }

        /* ========== 联系方式 ========== */
        #contact {
            padding: 70px 0 40px;
        }

        .contact-actions {
            display: flex;
            justify-content: center;
            gap: 16px;
            flex-wrap: wrap;
            margin-top: 16px;
        }

        /* ========== 页脚 ========== */
        footer {
            background: var(--surface);
            border-top: 1px solid var(--border);
            padding: 40px 0 32px;
            text-align: center;
            color: var(--text-secondary);
        }

        footer .footer-links {
            display: flex;
            justify-content: center;
            gap: 24px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }

        footer .footer-links a {
            font-size: 0.9rem;
            font-weight: 500;
            transition: var(--transition);
        }

        footer .footer-links a:hover {
            color: var(--primary);
        }

        footer p {
            font-size: 0.85rem;
        }

        /* ========== 响应式 ========== */
        @media (max-width: 768px) {
            .nav-links {
                position: fixed;
                top: 70px;
                left: 0;
                width: 100%;
                background: rgba(255, 255, 255, 0.96);
                backdrop-filter: blur(20px);
                flex-direction: column;
                padding: 24px 32px;
                gap: 12px;
                border-bottom: 1px solid var(--border);
                transform: translateY(-120%);
                opacity: 0;
                pointer-events: none;
                transition: var(--transition);
                box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.05);
            }

            .nav-links.active {
                transform: translateY(0);
                opacity: 1;
                pointer-events: auto;
            }

            .nav-links a {
                padding: 12px 20px;
                font-size: 1rem;
                width: 100%;
                text-align: center;
            }

            .hamburger {
                display: flex;
            }

            .hero h1 {
                font-size: 2.2rem;
            }

            .hero p {
                font-size: 1rem;
            }

            section {
                padding: 50px 0;
            }

            .section-title {
                font-size: 1.6rem;
            }

            .social-grid {
                grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
            }
        }

        @media (max-width: 480px) {
            .hero-avatar {
                width: 90px;
                height: 90px;
                font-size: 2.4rem;
            }

            .hero h1 {
                font-size: 1.8rem;
            }

            .btn {
                padding: 10px 22px;
                font-size: 0.85rem;
            }

            .portfolio-grid,
            .article-list {
                grid-template-columns: 1fr;
            }
        }

        /* ========== 辅助 ========== */
        .text-gradient {
            background: linear-gradient(135deg, var(--primary), #8b5cf6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Logic additions: counters and recommendations */

        

        

        

        

        

        

        

        

        

        

        /* Logic additions: counters, recommendations and public board */
        .click-count { display: inline-flex; align-items: center; color: var(--text-secondary); font-size: 0.78rem; }
        .click-count i { color: var(--primary); font-size: 0.7rem; }

        .platform-group-title { font-size: 1.05rem; color: var(--text); }
        .goodies-section { background: linear-gradient(180deg, #fff 0%, #f8fbff 100%); }
        .goodies-section .portfolio-thumb { background: linear-gradient(145deg, #dbeafe, #ede9fe); }
        .email-address { display: inline-block; margin-top: 18px; color: var(--primary); font-size: 1.1rem; font-weight: 600; border-bottom: 1px solid currentColor; }
        .site-counter { display: inline-flex; gap: 7px; align-items: center; margin-top: 12px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: .78rem; color: var(--text-secondary); }
        .site-counter b { color: var(--text); }
        /* ========== v5 统一样式规则 ========== */
        .dock { justify-content: flex-start; gap: 16px; }
        .dock .dock-links { margin-left: auto; }

        

        
        .hero-profile { text-align: center; }
        .hero-profile p { margin-left: auto; margin-right: auto; }

        

        

        

        .click-count { gap: 5px; }
        .click-count b { color: var(--text); font-weight: 600; }

        
        @media (max-width: 768px) { .hero { text-align: center; }  .hero-profile { text-align: center; } .dock { gap: 8px; } }

        .navbar .container { gap: 16px; }

        .dock-counter { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: .85rem; }
        .dock-counter i, .click-count i { color: var(--primary); }
        .portfolio-body { position: relative; padding-bottom: 52px; }
        .portfolio-body .click-count { position: absolute; right: 24px; bottom: 24px; }
        .article-card { position: relative; min-height: 320px; padding-bottom: 62px; }
        .article-card .read-more { position: absolute; left: 28px; bottom: 28px; }
        .article-card .click-count { position: absolute; right: 28px; bottom: 28px; }
        .social-card { position: relative; padding-bottom: 45px; }

        @media (max-width: 768px) { .navbar .container { gap: 8px; } .navbar .nav-links { margin-left: 0; } }

        .navbar .container { justify-content: flex-start; }
        .navbar nav { margin-left: auto; }
        .navbar .nav-links { margin-left: 0; justify-content: flex-end; }
        .hero-motto { justify-self: end; padding-right: 34px; }
        .platform-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: #eef2ff; color: var(--primary); font-size: .78rem; font-weight: 800; letter-spacing: -.02em; }
        .social-card:hover .platform-icon { background: var(--primary); color: #fff; }
        #articles { padding-top: 38px; padding-bottom: 38px; }
        #articles .section-header { margin-bottom: 24px; }

        #articles .article-card { min-height: 218px; padding: 18px 20px 50px; }
        #articles .article-card h3 { font-size: 1.08rem; margin-bottom: 5px; }
        #articles .article-card p { margin-bottom: 6px; font-size: .88rem; }
        #articles .article-card .read-more { left: 20px; bottom: 18px; }

        
        @media (max-width: 768px) { .hero-motto { justify-self: center; text-align: center; padding-right: 0; } .navbar nav { margin-left: 0; } }

        .hero { max-width: 1440px; margin: 0 auto; padding: 95px 88px 62px; min-height: 690px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; text-align: left; }
        .hero-copy { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-start; }
        .hero-kicker { margin-top: 14px; color: var(--primary); font-size: .88rem; font-weight: 700; letter-spacing: .12em; }
        .hero-motto { margin-top: 30px; font-size: clamp(5rem, 8vw, 8rem); line-height: .96; letter-spacing: -.11em; font-weight: 700; text-align: left; padding: 0; transform: translateX(1em); }
        .hero-motto span { color: var(--text); letter-spacing: .035em; }
        .hero-profile { display: flex; flex-direction: column; align-items: center; justify-content: center; }
        .hero-avatar { width: 170px; height: 170px; min-width: 170px; border-radius: 50%; margin: 0 auto 28px; }
        .hero-initial { font-size: 3.7rem; }
        .hero-intro { max-width: 560px; margin: 0 auto; color: var(--text-secondary); font-size: 1.08rem; line-height: 1.8; text-align: center; }
        .hero-intro strong { display: block; margin-bottom: 8px; color: var(--text); font-size: clamp(1.65rem, 2.4vw, 2.25rem); line-height: 1.25; }
        .hero-intro span { display: block; }
        .section-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; text-align: left; }
        .section-header .section-subtitle { margin: 0; max-width: 430px; text-align: right; }
        .platform-group-title { margin: 28px 0 14px; }
        .social-card .click-count { position: absolute; right: 16px; bottom: 15px; }
        #contact .contact-heading { display: flex; justify-content: space-between; align-items: flex-end; text-align: left; }
        #contact .contact-heading .section-subtitle { margin: 0; text-align: right; }
        .contact-panels { display: grid; grid-template-columns: 1fr 1.3fr; gap: 24px; align-items: stretch; margin-top: 32px; }
        .contact-email-card { margin-top: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
        .contact-email-card { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }
        .contact-email-card h3 { margin-bottom: 8px; font-size: 1.3rem; }
        .contact-email-card p { color: var(--text-secondary); margin-bottom: 18px; }
        .contact-email-card .email-address { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff; text-decoration: none; }
        .app-icon { width: auto; height: 32px; border-radius: 0; display: grid; place-items: center; color: var(--text); background: transparent; box-shadow: none; transition: var(--transition); overflow: visible; }
        .app-icon svg { width: 32px; height: 32px; display: block; fill: currentColor; }
        .social-card .app-icon--x { font: 700 29px/1 var(--font); }
        .social-card .app-icon--pixiv { font: 800 31px/1 Arial, sans-serif; text-transform: lowercase; }
        .app-icon--instagram { background: transparent; }
        .social-card .app-icon--zhihu { font: 800 27px/1 "Microsoft YaHei", sans-serif; }
        .app-icon--douyin { background: transparent; }
        .app-icon--douyin svg path { filter: none !important; }
        .social-card .app-icon--xhs { font: 800 13px/1.05 "Microsoft YaHei", sans-serif; letter-spacing: -.08em; }
        .app-icon--weibo { background: transparent; }
        .app-icon--weibo svg path { fill: currentColor; }
        .social-card:hover .app-icon { color: var(--primary); transform: scale(1.1); }
        .hero-avatar { overflow: hidden; background: #fff; }
        .hero-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
        .section-more-row { display: flex; justify-content: flex-end; margin-top: 22px; }
        .section-more { display: inline-flex; align-items: center; gap: 8px; padding: 9px 17px; border: 1px solid var(--border); border-radius: 11px; color: var(--text); background: var(--surface); font-weight: 600; font-size: .9rem; transition: var(--transition); }
        .section-more:hover { color: var(--primary); border-color: var(--primary); transform: translateX(3px); }
        .contact-stat { margin: 10px 0 16px; color: var(--text-secondary); font-size: .88rem; }
        .contact-stat b { color: var(--primary); font-size: 1rem; }
        .footer-inner { position: relative; }
        .footer-credit { position: absolute; right: 24px; bottom: 0; color: var(--text-secondary); font-size: .78rem; letter-spacing: .03em; }
        @media (min-width: 769px) { .navbar .container { max-width: 1440px; padding-left: calc(88px + clamp(5rem, 8vw, 8rem)); padding-right: 88px; } }
        @media (max-width: 768px) { .hero { padding: 85px 28px 50px; min-height: auto; grid-template-columns: 1fr; gap: 42px; } .hero-copy { align-self: auto; } .hero-motto { font-size: 4.8rem; transform: translateX(.5em); } .hero-avatar { width: 140px; height: 140px; min-width: 140px; } .hero-initial { font-size: 3rem; } .section-header, #contact .contact-heading { display: block; } .section-header .section-subtitle, #contact .contact-heading .section-subtitle { margin-top: 12px; text-align: left; } .contact-panels { grid-template-columns: 1fr; } }
        @media (max-width: 680px) { .footer-credit { position: static; display: block; margin-top: 10px; text-align: right; } }

        /* 主页卡片：更新时间统一放在左下，点击量放在右下 */

        #portfolio .portfolio-thumb, #goodies .portfolio-thumb { height: 145px; }
        #portfolio .portfolio-body, #goodies .portfolio-body { min-height: 118px; padding: 14px 18px 42px; }
        #portfolio .portfolio-body h3, #goodies .portfolio-body h3 { font-size: 1.05rem; margin-bottom: 4px; }
        #portfolio .portfolio-body p, #goodies .portfolio-body p { font-size: .84rem; margin-bottom: 0; line-height: 1.5; }
        .card-updated { position: absolute; left: 18px; bottom: 16px; color: var(--text-secondary); font-size: .75rem; }
        #portfolio .portfolio-body .click-count, #goodies .portfolio-body .click-count { right: 18px; bottom: 16px; }
        #articles .article-card { cursor: pointer; }
        #articles .article-card .date { position: absolute; left: 20px; bottom: 18px; margin: 0; }
        #articles .article-card .read-more { display: none; }
        #articles .article-card .click-count { right: 20px; bottom: 18px; }
        .portfolio-card[role="link"], .article-card[role="link"] { outline: none; }
        .portfolio-card[role="link"]:focus-visible, .article-card[role="link"]:focus-visible { box-shadow: 0 0 0 3px rgba(59,130,246,.25), var(--shadow); }

        /* 内置列表页与详情页 */
        .subpage { display: none; min-height: 100vh; padding: 28px 0 64px; background: var(--bg); }
        .subpage.active { display: block; }
        body.subpage-active { padding-top: 0; }
        body.subpage-active > .navbar, body.subpage-active > section, body.subpage-active > footer { display: none; }
        .subpage-shell { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
        .subpage-back { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--border); border-radius: 11px; background: #fff; color: var(--text); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; transition: var(--transition); }
        .subpage-back:hover { color: var(--primary); border-color: var(--primary); transform: translateX(-3px); }
        .subpage-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin: 24px 0 18px; }
        .subpage-heading h1 { font-size: clamp(2rem,4vw,3.4rem); letter-spacing: -.05em; }
        .subpage-heading p { max-width: 460px; color: var(--text-secondary); text-align: right; }
        .catalog-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
        .catalog-card { min-width: 0; display: grid; grid-template-columns: 112px 1fr; min-height: 164px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface); box-shadow: 0 12px 34px -18px rgba(15,23,42,.22); cursor: pointer; transition: var(--transition); }
        .catalog-card:hover { transform: translateY(-3px); border-color: #bfdbfe; box-shadow: 0 18px 38px -18px rgba(15,23,42,.28); }
        .catalog-thumb { display: grid; place-items: center; background: linear-gradient(145deg,#e2e8f0,#f8fafc); color: var(--primary); font-size: 1.8rem; }
        .catalog-body { position: relative; min-width: 0; padding: 14px 14px 38px; }
        .catalog-body h2 { margin: 0 0 5px; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .catalog-body p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--text-secondary); font-size: .8rem; line-height: 1.5; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
        .catalog-body time { position: absolute; left: 14px; bottom: 12px; color: var(--text-secondary); font-size: .7rem; }
        .catalog-body .click-count { position: absolute; right: 14px; bottom: 12px; font-size: .72rem; }
        .catalog-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 18px; }
        .catalog-pagination button { min-width: 38px; height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--text); cursor: pointer; }
        .catalog-pagination button.active { background: var(--primary); border-color: var(--primary); color: #fff; }
        .catalog-pagination button:disabled { opacity: .42; cursor: not-allowed; }

        .detail-page { max-width: 1120px; margin: 0 auto; }
        .detail-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; margin: 16px 0; }
        .detail-title h1 { margin: 0 0 14px; font-size: clamp(2.5rem,5vw,4.8rem); line-height: 1.05; letter-spacing: -.065em; }
        .detail-title p { color: var(--text-secondary); font-size: 1.06rem; }
        .detail-cover { height: 310px; border-radius: 24px; background: linear-gradient(140deg,#dbeafe,#c7d2fe 52%,#ede9fe); display: grid; place-items: center; box-shadow: 0 24px 60px -24px rgba(37,99,235,.4); overflow: hidden; }
        .detail-cover i { font-size: 4rem; color: var(--primary); }
        .detail-cover img, .catalog-grid .portfolio-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .software-gallery { display: flex; gap: 12px; overflow-x: auto; padding: 3px 2px 12px; scroll-snap-type: x proximity; }
        .software-shot-item { flex: 0 0 270px; scroll-snap-align: start; }
        .software-shot { width: 100%; height: 165px; border: 1px solid #bfdbfe; border-radius: 15px; background: linear-gradient(135deg,#dbeafe,#c7d2fe); color: #1d4ed8; font: inherit; font-weight: 700; cursor: zoom-in; }
        .software-shot img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; background: #f8fafc; display: block; }
        .software-shot-caption { margin: 7px 4px 0; color: var(--text-secondary); font-size: .78rem; line-height: 1.5; }
        .software-shot-item:nth-child(2) .software-shot{background:linear-gradient(135deg,#ede9fe,#ddd6fe);color:#6d28d9}.software-shot-item:nth-child(3) .software-shot{background:linear-gradient(135deg,#cffafe,#bae6fd);color:#0e7490}.software-shot-item:nth-child(4) .software-shot{background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#15803d}
        .software-shot:nth-child(2){background:linear-gradient(135deg,#ede9fe,#ddd6fe);color:#6d28d9}.software-shot:nth-child(3){background:linear-gradient(135deg,#cffafe,#bae6fd);color:#0e7490}.software-shot:nth-child(4){background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#15803d}
        .detail-notices { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 16px; }
        .detail-notice { min-height: 166px; padding: 20px; border: 1px solid var(--border); border-radius: 16px; background: #fff; }
        .detail-notice h3 { margin: 0 0 9px; }.detail-notice ul{margin:0;padding-left:20px;color:var(--text-secondary)}
        .detail-notice.condition{border-top:4px solid #f6c453}.detail-notice.condition h3{color:#b7791f}.detail-notice.feature{border-top:4px solid #68d391}.detail-notice.feature h3{color:#25855a}.detail-notice.warning{border-top:4px solid #fc8181}.detail-notice.warning h3{color:#c53030}
        .detail-download { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 16px; padding: 22px 24px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
        .detail-download p { margin: 3px 0 0; color: var(--text-secondary); font-size: .88rem; }
        .detail-download-action { display: flex; align-items: center; gap: 10px; }
        .detail-copyright { color: #dc2626; font-size: .83rem; white-space: nowrap; }
        .detail-download .btn { padding: 12px 24px; color: #fff; }
        .detail-download .click-count { color: var(--text-secondary); font-size: .82rem; white-space: nowrap; }
        .photo-detail-intro { max-width: 780px; margin: 16px 0; }.photo-detail-intro h1{font-size:clamp(2.5rem,5vw,4.8rem);line-height:1.05;letter-spacing:-.065em;margin:0 0 14px}.photo-detail-intro p{color:var(--text-secondary);font-size:1.06rem}
        .detail-photo-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 11px; }
        .detail-photo { aspect-ratio: 1; border: 0; border-radius: 15px; cursor: zoom-in; background: linear-gradient(145deg,#d6d3d1,#a8a29e); }
        .detail-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
        .detail-photo:nth-child(2){background:linear-gradient(145deg,#fed7aa,#fb923c)}.detail-photo:nth-child(3){background:linear-gradient(145deg,#bae6fd,#60a5fa)}.detail-photo:nth-child(4){background:linear-gradient(145deg,#ddd6fe,#a78bfa)}.detail-photo:nth-child(5){background:linear-gradient(145deg,#bbf7d0,#4ade80)}.detail-photo:nth-child(6){background:linear-gradient(145deg,#fecdd3,#fb7185)}.detail-photo:nth-child(7){background:linear-gradient(145deg,#fde68a,#f59e0b)}.detail-photo:nth-child(8){background:linear-gradient(145deg,#e7e5e4,#78716c)}.detail-photo:nth-child(9){background:linear-gradient(145deg,#cffafe,#22d3ee)}
        .detail-caption { margin-top: 16px; padding: 34px; border: 1px solid var(--border); border-radius: 18px; background: #fff; color: var(--text-secondary); text-align: left; }
        .text-detail { max-width: 880px; margin: 28px auto 0; }.text-detail h1{font-size:clamp(2.4rem,5vw,4.4rem);line-height:1.08;letter-spacing:-.06em}.text-detail .detail-meta{margin:14px 0 32px;color:var(--text-secondary)}.text-detail article{padding:34px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}.text-detail article p{margin:0 0 18px;color:var(--text-secondary);font-size:1.02rem;line-height:1.9}.text-detail article h2{margin:30px 0 10px}
        .text-detail figure { margin: 24px 0; }.text-detail figure img { width: 100%; max-height: 72vh; object-fit: contain; border-radius: 18px; background: #f8fafc; display: block; }.text-detail figcaption { margin-top: 9px; color: var(--text-secondary); font-size: .82rem; text-align: center; }
        .image-lightbox { position: fixed; inset: 0; z-index: 2000; display: none; background: #0f172a; }
        .image-lightbox.open { display: block; }
        .image-lightbox-track { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; }
        .image-lightbox-slide { width: 100%; height: 100vh; display: grid; place-items: center; overflow: hidden; scroll-snap-align: start; }
        .image-lightbox-media { display: grid; place-items: center; max-width: 100vw; max-height: 100vh; color: #1d4ed8; font-size: 1.25rem; font-weight: 700; object-fit: contain; }
        .image-lightbox.software .image-lightbox-media { width: 100vw; height: 100vh; background: linear-gradient(135deg,#dbeafe,#c7d2fe); }
        .image-lightbox.photo .image-lightbox-slide:nth-child(3n+1) .image-lightbox-media { width:100vw;height:min(100vh,66.6667vw);background:linear-gradient(145deg,#d6d3d1,#78716c) }
        .image-lightbox.photo .image-lightbox-slide:nth-child(3n+2) .image-lightbox-media { height:100vh;width:min(100vw,66.6667vh);background:linear-gradient(145deg,#fed7aa,#fb923c) }
        .image-lightbox.photo .image-lightbox-slide:nth-child(3n) .image-lightbox-media { width:100vmin;height:100vmin;background:linear-gradient(145deg,#bae6fd,#60a5fa) }
        .image-lightbox.photo img.image-lightbox-media { width: 100vw !important; height: 100vh !important; object-fit: contain; background: transparent !important; }
        .image-lightbox-close { position: fixed; right: 24px; top: 18px; z-index: 2; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; font-size: 1.5rem; cursor: pointer; }
        .image-lightbox-hint { position: fixed; left: 50%; bottom: 18px; z-index: 2; transform: translateX(-50%); padding: 7px 12px; border-radius: 9px; background: rgba(0,0,0,.45); color: #fff; font-size: .8rem; }
        @media (max-width: 820px) { .catalog-grid{grid-template-columns:1fr;grid-template-rows:none;min-height:0}.catalog-card{min-height:145px}.subpage-heading{align-items:flex-start;flex-direction:column}.subpage-heading p{text-align:left}.detail-hero{grid-template-columns:1fr}.detail-notices{grid-template-columns:1fr}.detail-download,.detail-download-action{align-items:flex-start;flex-direction:column}.detail-copyright{white-space:normal} }

        /* 本轮交互与版式统一 */
        .nav-links a { border-radius: 11px; }
        .hero-profile { position: relative; }
        .hero-intro strong { letter-spacing: -.025em; white-space: nowrap; }
        .hero-intro strong .hero-period { display: inline-block; margin-left: .03em; font-size: .72em; transform: translateY(-.04em); }
        .hero-avatar { cursor: pointer; user-select: none; }
        .hero-avatar:focus-visible { outline: 3px solid rgba(59,130,246,.32); outline-offset: 5px; }
        @keyframes avatar-pat-bounce { 0%{transform:scale(1)} 38%{transform:scale(.9)} 72%{transform:scale(1.08)} 100%{transform:scale(1)} }
        .hero-avatar.patted { animation: avatar-pat-bounce .46s cubic-bezier(.22,.8,.3,1); }
        .avatar-easter-egg { position: absolute; left: 50%; top: calc(50% - 230px); z-index: 3; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 20px); padding: 9px 13px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.96); color: var(--text); box-shadow: var(--shadow); font-size: .83rem; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%,8px) scale(.96); transition: .22s ease; }
        .avatar-easter-egg.show { opacity: 1; transform: translate(-50%,0) scale(1); }
        .avatar-easter-egg .click-count { color: var(--text-secondary); font-size: .76rem; }
        .contact-email-card { min-height: 320px; }
        .contact-email-card .email-address { margin-bottom: 16px; }
        .contact-email-card > p { color: var(--text-secondary); font-size: .9rem; line-height: 1.6; }
        .contact-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; }
        .contact-card-footer .contact-stat { margin: 0; }
        .catalog-grid { min-height: 0; height: auto; max-height: none; padding: 0; grid-template-rows: repeat(3,auto); }
        .catalog-grid[data-catalog-kind="articles"] { gap: 14px; }
        .catalog-grid[data-catalog-kind="works"], .catalog-grid[data-catalog-kind="goodies"] { gap: 16px; }
        .catalog-grid .catalog-card.portfolio-card { display: block; min-height: 0; height: auto; border-radius: var(--radius); }
        .catalog-grid .catalog-card.portfolio-card:hover { transform: translateY(-6px); }
        .catalog-grid .portfolio-card .portfolio-thumb { height: 145px; font-size: 3rem; }
        .catalog-grid .portfolio-card .portfolio-body { height: auto; min-height: 118px; padding: 14px 18px 42px; }
        .catalog-grid .portfolio-card .portfolio-body h3 { margin-bottom: 4px; font-size: 1.05rem; white-space: normal; overflow: visible; }
        .catalog-grid .portfolio-card .portfolio-body p { margin-bottom: 0; font-size: .84rem; line-height: 1.5; white-space: normal; overflow: visible; }
        .catalog-grid .portfolio-card .card-updated { left: 18px; bottom: 16px; font-size: .75rem; }
        .catalog-grid .portfolio-card .click-count { right: 18px; bottom: 16px; font-size: inherit; }
        .catalog-grid .catalog-card.article-card { display: block; min-height: 218px; height: auto; padding: 18px 20px 50px; border-radius: var(--radius); }
        .catalog-grid .catalog-card.article-card:hover { transform: translateY(-4px); }
        .catalog-grid .article-card h3 { margin-bottom: 5px; font-size: 1.08rem; }
        .catalog-grid .article-card p { margin-bottom: 6px; color: var(--text-secondary); font-size: .88rem; line-height: 1.6; display: block; overflow: visible; }
        .catalog-grid .article-card .date { position: absolute; left: 20px; bottom: 18px; margin: 0; color: var(--text-secondary); font-size: .8rem; }
        .catalog-grid .article-card .click-count { position: absolute; right: 20px; bottom: 20px; font-size: inherit; }
        .detail-download .btn { border-radius: 11px; }
        /* 详情页统一内容区间距：原截图约 98px，缩小为三分之一约 33px */
        .detail-page { --detail-content-gap: 33px; }
        .detail-page > * { margin-top: 0 !important; margin-bottom: 0 !important; }
        .detail-page > * + * { margin-top: var(--detail-content-gap) !important; }
        .detail-page > section { padding-top: 0; padding-bottom: 0; }
        .detail-page > .software-gallery { padding: 0 2px; }
        .detail-page > .detail-download { padding: 22px 24px; }
        @media (max-width: 768px) { .avatar-easter-egg { top: calc(50% - 205px); } .contact-card-footer { align-items: flex-start; flex-direction: column; } .catalog-grid{height:auto;max-height:none} }

        /* v3：保持原卡片宽度和纵向排版，仅将顶部封面高度增加四分之一 */
        #portfolio .portfolio-grid, #goodies .portfolio-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
        #articles .article-list { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
        #portfolio .portfolio-card, #goodies .portfolio-card, #articles .article-card,
        .catalog-grid .catalog-card.portfolio-card, .catalog-grid .catalog-card.article-card {
            display: block; min-width: 0; min-height: 0; padding: 0; overflow: hidden;
        }
        #portfolio .portfolio-thumb, #goodies .portfolio-thumb,
        .catalog-grid .portfolio-card .portfolio-thumb, .article-thumb {
            width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 9; display: grid; place-items: center;
            background: linear-gradient(145deg,#dbeafe,#ede9fe); color: var(--primary); font-size: 3rem; overflow: hidden;
        }
        #portfolio .portfolio-thumb img, #goodies .portfolio-thumb img,
        .catalog-grid .portfolio-thumb img, .article-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
        #portfolio .portfolio-body, #goodies .portfolio-body,
        .catalog-grid .portfolio-card .portfolio-body, .article-content {
            position: relative; min-width: 0; min-height: 118px; padding: 14px 18px 42px;
        }
        #articles .article-card, .catalog-grid .catalog-card.article-card { position: relative; }
        #articles .article-content h3, .catalog-grid .article-content h3 { margin: 0 0 5px; font-size: 1.08rem; }
        #articles .article-content p, .catalog-grid .article-content p { margin: 0; color: var(--text-secondary); font-size: .88rem; line-height: 1.6; }
        #articles .article-content .date, .catalog-grid .article-content .date { position: absolute; left: 18px; bottom: 16px; margin: 0; }
        #articles .article-content .click-count, .catalog-grid .article-content .click-count { position: absolute; right: 18px; bottom: 16px; }
        /* v10：统一主页与更多列表中三类预览卡片的文字层级 */
        #portfolio .portfolio-body h3, #goodies .portfolio-body h3,
        #articles .article-content h3,
        .catalog-grid .portfolio-body h3, .catalog-grid .article-content h3 {
            margin: 0 0 4px;
            font-size: 1.05rem;
            line-height: 1.45;
            font-weight: 600;
        }
        #portfolio .portfolio-body p, #goodies .portfolio-body p,
        #articles .article-content p,
        .catalog-grid .portfolio-body p, .catalog-grid .article-content p {
            margin: 0;
            color: var(--text-secondary);
            font-size: .84rem;
            line-height: 1.5;
        }
        #portfolio .card-updated, #goodies .card-updated,
        #articles .article-content .date,
        .catalog-grid .card-updated, .catalog-grid .article-content .date {
            left: 18px;
            bottom: 16px;
            margin: 0;
            color: var(--text-secondary);
            font-size: .75rem;
            line-height: 1.4;
            font-weight: 500;
            letter-spacing: .3px;
        }
        .contact-email-card .email-address { transition: var(--transition); }
        .contact-email-card .email-address:hover { transform: translateY(-4px); border-color: var(--primary); color: var(--primary); box-shadow: 0 14px 28px -16px rgba(59,130,246,.5); }
        .detail-photo-grid[data-photo-count="0"] { display: block; }
        .detail-photo-grid[data-photo-count="1"] { grid-template-columns: minmax(0,560px); justify-content: center; }
        .detail-photo-grid[data-photo-count="2"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
        .detail-photo-empty { padding: 54px 20px; border: 1px dashed var(--border); border-radius: 15px; color: var(--text-secondary); text-align: center; background: #fff; }
        @media (max-width: 900px) {
            #portfolio .portfolio-grid, #articles .article-list, #goodies .portfolio-grid, .catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
        }
        @media (max-width: 600px) {
            #portfolio .portfolio-grid, #articles .article-list, #goodies .portfolio-grid, .catalog-grid { grid-template-columns: 1fr; }
            .detail-photo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
            .detail-photo-grid[data-photo-count="1"] { grid-template-columns: minmax(0,1fr); }
        }
        @media (max-width: 460px) { .detail-photo-grid, .detail-photo-grid[data-photo-count="2"] { grid-template-columns: 1fr; } }


        /* ========== v7 统一动效系统 ========== */
        :root {
            --motion-fast: 160ms;
            --motion-normal: 300ms;
            --motion-page: 480ms;
            --motion-ease: cubic-bezier(.22,.8,.3,1);
            --motion-soft: cubic-bezier(.16,1,.3,1);
        }
        html.motion-v7 { scroll-behavior: smooth; }

        @keyframes v7-reveal-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes v7-subpage-item { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
        @keyframes v7-pig-wiggle { 0%,100% { transform: rotate(0deg); } 20% { transform: rotate(-11deg); } 40% { transform: rotate(9deg); } 60% { transform: rotate(-7deg); } 80% { transform: rotate(5deg); } }
        @keyframes v7-skeleton { from { transform: translateX(-120%); } to { transform: translateX(120%); } }

        .motion-v7 .navbar {
            transition: height var(--motion-normal) var(--motion-ease), background var(--motion-normal) ease, box-shadow var(--motion-normal) ease, border-color var(--motion-normal) ease;
        }
        .motion-v7 .navbar.scrolled {
            height: 58px;
            background: rgba(255,255,255,.9);
            border-color: rgba(203,213,225,.72);
            box-shadow: 0 12px 34px -24px rgba(15,23,42,.5);
        }
        .motion-v7 .navbar .logo { transition: transform var(--motion-normal) var(--motion-ease); }
        .motion-v7 .navbar.scrolled .logo { transform: scale(.94); transform-origin: left center; }
        .motion-v7 .nav-links a { position: relative; overflow: hidden; transition: color var(--motion-fast) ease, background var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease); }
        .motion-v7 .nav-links a:hover { transform: translateY(-2px); }
        .motion-v7 .nav-links a.active { background: var(--primary); color: #fff; box-shadow: 0 8px 20px -12px rgba(37,99,235,.8); }

        .motion-reveal { opacity: 0; transform: translateY(24px); }
        .motion-reveal.motion-visible { animation: v7-reveal-up var(--motion-page) var(--motion-soft) both; animation-delay: var(--motion-delay,0ms); }

        .motion-v7 .portfolio-card,
        .motion-v7 .article-card,
        .motion-v7 .social-card,
        .motion-v7 .contact-email-card {
            will-change: transform;
            transition: transform var(--motion-normal) var(--motion-ease), box-shadow var(--motion-normal) ease, border-color var(--motion-normal) ease;
        }
        .motion-v7 .portfolio-card,
        .motion-v7 .article-card { position: relative; isolation: isolate; }
        .motion-v7 .portfolio-card::after,
        .motion-v7 .article-card::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 3;
            border-radius: inherit;
            pointer-events: none;
            background: linear-gradient(115deg,transparent 28%,rgba(255,255,255,.5) 48%,transparent 68%);
            transform: translateX(-135%);
            transition: transform 620ms var(--motion-soft);
        }
        .motion-v7 .portfolio-card:hover::after,
        .motion-v7 .article-card:hover::after { transform: translateX(135%); }
        .motion-v7 .portfolio-thumb img,
        .motion-v7 .article-thumb img { transition: transform 520ms var(--motion-soft), filter var(--motion-normal) ease; }
        .motion-v7 .portfolio-card:hover .portfolio-thumb img,
        .motion-v7 .article-card:hover .article-thumb img { transform: scale(1.045); filter: saturate(1.04) contrast(1.02); }
        .motion-v7 .section-more i { transition: transform var(--motion-fast) var(--motion-ease); }
        .motion-v7 .section-more:hover i { transform: translateX(4px); }

        /* v9：取消卡片复制覆盖层，避免封面进入详情后残留 */

        .motion-v7 .subpage { display: block; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 220ms ease, visibility 0s linear 220ms; }
        .motion-v7 .subpage.active { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 220ms ease; }
        .motion-v7 .subpage.active .subpage-shell { opacity: 0; transform: translateY(18px) scale(.992); transition: opacity var(--motion-page) ease, transform var(--motion-page) var(--motion-soft); }
        .motion-v7 .subpage.active.view-ready .subpage-shell { opacity: 1; transform: translateY(0) scale(1); }
        .motion-v7 .subpage.leaving { opacity: 0; }
        .motion-v7 .subpage .catalog-card,
        .motion-v7 .subpage .detail-page > * { opacity: 0; }
        .motion-v7 .subpage.view-ready .catalog-card,
        .motion-v7 .subpage.view-ready .detail-page > * { animation: v7-subpage-item 420ms var(--motion-soft) both; animation-delay: var(--motion-item-delay,40ms); }

        /* v8：图片全屏浏览恢复原始显示逻辑 */

        .motion-v7 .motion-media-loading { position: relative; overflow: hidden; background: #eef2f7; }
        .motion-v7 .motion-media-loading::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            background: linear-gradient(100deg,transparent 20%,rgba(255,255,255,.72) 48%,transparent 76%);
            animation: v7-skeleton 1.2s ease-in-out infinite;
        }
        .motion-v7 img.motion-image-pending { opacity: .18; filter: blur(12px); transform: scale(1.025); }
        .motion-v7 img.motion-image-loaded { opacity: 1; filter: blur(0); transform: scale(1); transition: opacity 420ms ease, filter 520ms ease, transform 520ms var(--motion-soft); }

        .motion-v7 .avatar-pig { display: inline-block; transform-origin: 50% 70%; }
        .motion-v7 .avatar-easter-egg.show .avatar-pig { animation: v7-pig-wiggle 680ms var(--motion-ease); }

        @media (hover: none) {
            .motion-v7 .portfolio-card::after,
            .motion-v7 .article-card::after { display: none; }
            .motion-v7 .portfolio-card:hover .portfolio-thumb img,
            .motion-v7 .article-card:hover .article-thumb img { transform: none; }
        }

        /* v11：统一后半部分背景、六页翻页控件与文字详情封面标题区 */
        #goodies.goodies-section, #social, #contact, footer { background: var(--bg); }
        .hero, #portfolio, #articles, #goodies, #social, #contact { scroll-margin-top: 78px; }
        .page-down-control {
            position: fixed; left: 50%; bottom: 18px; z-index: 1200;
            display: inline-flex; align-items: center; gap: 10px;
            min-height: 46px; padding: 8px 14px 8px 9px;
            border: 1px solid rgba(148,163,184,.34); border-radius: 14px;
            background: rgba(255,255,255,.9); color: var(--text);
            box-shadow: 0 16px 42px -18px rgba(15,23,42,.42);
            backdrop-filter: blur(16px) saturate(150%);
            font: inherit; font-size: .82rem; font-weight: 650;
            transform: translateX(-50%); transition: var(--transition); cursor: pointer;
        }
        .page-down-control:hover:not(:disabled) { transform: translate(-50%,-4px); border-color: var(--primary); color: var(--primary); }
        .page-down-control:disabled { cursor: default; opacity: .62; }
        .page-down-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: var(--primary); color: #fff; }
        .page-down-count { min-width: 34px; color: var(--text-secondary); font-size: .72rem; font-variant-numeric: tabular-nums; text-align: right; }
        body.subpage-active .page-down-control { display: none; }
        .text-detail-hero {
            position: relative; isolation: isolate; min-height: 280px; overflow: hidden;
            display: flex; align-items: flex-end; margin-bottom: 18px; padding: 34px;
            border: 1px solid var(--border); border-radius: 24px;
            background: linear-gradient(135deg,#eff6ff,#eef2ff 54%,#faf5ff);
            box-shadow: var(--shadow);
        }
        .text-detail-hero-cover { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
        .text-detail-hero.has-cover::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg,rgba(15,23,42,.16),rgba(15,23,42,.82)); }
        .text-detail-hero-content { position: relative; width: min(100%,720px); }
        .text-detail-hero h1 { margin: 10px 0 12px; font-size: clamp(2.35rem,5vw,4.4rem); line-height: 1.08; letter-spacing: -.055em; }
        .text-detail-summary { max-width: 680px; margin: 0; color: var(--text-secondary); font-size: 1.03rem; line-height: 1.75; }
        .text-detail-hero.has-cover, .text-detail-hero.has-cover .tag, .text-detail-hero.has-cover .text-detail-summary { color: #fff; }
        .text-detail-hero.has-cover .tag { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34); backdrop-filter: blur(10px); }
        .text-detail .detail-meta { margin: 0 0 18px; }
        .detail-content-meta { margin: 0; color: var(--text-secondary); font-size: .84rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
        .photo-detail-intro .detail-content-meta,
        .detail-title .detail-content-meta { margin-top: 8px; }
        .photo-detail-intro + .detail-content-meta,
        .detail-hero + .detail-content-meta { margin-top: -2px; margin-bottom: 0; }
        .music-track-heading .detail-content-meta { margin-top: 2px; }
        @media (max-width: 680px) {
            .page-down-control { bottom: 12px; }
            .page-down-label { display: none; }
            .text-detail-hero { min-height: 235px; padding: 24px; border-radius: 18px; }
        }

        /* v12：精简翻页图标、统一 16:9 详情封面并复用页脚 */
        footer { margin: 0; padding: 28px 0 18px; }
        .footer-credit {
            font-family: "Segoe Script", "Snell Roundhand", "Brush Script MT", cursive;
            font-size: 1.08rem; font-style: italic; font-weight: 500; letter-spacing: .015em;
        }
        .page-down-control {
            width: 46px; height: 46px; min-height: 46px; padding: 0;
            display: grid; place-items: center; gap: 0; border-radius: 50%;
            color: var(--primary); font-size: 1rem;
        }
        .page-down-control:hover:not(:disabled) { color: var(--primary-dark); }
        .page-down-control:disabled { color: #16a34a; }
        .text-detail-hero { width: 100%; min-height: 0; aspect-ratio: 16 / 9; }
        .text-detail-hero h1 { margin-top: 0; }
        .detail-footer {
            width: 100vw; margin: 48px 0 -64px calc(50% - 50vw);
            background: var(--bg); border-top: 1px solid var(--border);
        }
        .detail-footer .footer-inner { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
        @media (max-width: 1024px) {
            .detail-footer {
                width: 100%;
                margin-left: 0;
                margin-right: 0;
            }
        }
        @media (max-width: 680px) {
            .text-detail-hero { min-height: 0; aspect-ratio: 16 / 9; padding: 22px; }
            .text-detail-hero h1 { font-size: clamp(1.8rem,8vw,2.7rem); }
            .text-detail-summary { font-size: .9rem; line-height: 1.55; }
            .detail-footer {
                width: 100%;
                margin: 36px 0 -64px;
            }
        }

        /* v13：移除隐藏子页占位、翻页回顶、导航滑块与分享按钮 */
        .motion-v7 .subpage:not(.active) { display: none; }
        .motion-v7 .subpage.active { display: block; }
        .page-down-control { width: 54px; height: 42px; min-height: 42px; border-radius: 12px; }
        .page-down-control.is-returning i { transform: rotate(180deg); }
        .page-down-control i { transition: transform 360ms cubic-bezier(.22,1,.36,1); }
        .nav-links { position: relative; }
        .nav-links li { position: relative; z-index: 1; }
        .motion-v7 .nav-links a { background: transparent; }
        .motion-v7 .nav-links a:hover { background: rgba(59,130,246,.1); color: var(--primary); }
        .motion-v7 .nav-links a.active { background: transparent; color: #fff; box-shadow: none; }
        .nav-active-indicator { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; border-radius: 11px; background: var(--primary); box-shadow: 0 8px 20px -12px rgba(37,99,235,.8); opacity: 0; transform: translate3d(0,0,0); transition: transform 460ms cubic-bezier(.22,1,.36,1), width 460ms cubic-bezier(.22,1,.36,1), height 360ms ease, opacity 180ms ease; }
        .nav-active-indicator.ready { opacity: 1; }
        .share-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); color: var(--text-secondary); font: inherit; cursor: pointer; box-shadow: 0 8px 24px -18px rgba(15,23,42,.32); transition: var(--transition); }
        .navbar-share { margin-left: 10px; }
        .share-button:hover { color: var(--primary); border-color: var(--primary); transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(37,99,235,.55); }
        .share-button > i { font-size: .9rem; }
        .share-button .click-count { gap: 4px; padding-left: 7px; border-left: 1px solid var(--border); }
        .detail-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
        .share-toast { position: fixed; left: 50%; bottom: 76px; z-index: 2600; padding: 10px 15px; border-radius: 11px; background: rgba(15,23,42,.92); color: #fff; font-size: .84rem; box-shadow: 0 16px 40px -18px rgba(15,23,42,.6); opacity: 0; pointer-events: none; transform: translate(-50%,10px); transition: opacity 180ms ease, transform 260ms cubic-bezier(.22,1,.36,1); }
        .share-toast.show { opacity: 1; transform: translate(-50%,0); }
        @media (max-width: 768px) { .nav-active-indicator { display: none; } .motion-v7 .nav-links a.active { background: var(--primary); color: #fff; } .navbar-share { margin-left: auto; margin-right: 8px; } .navbar-share .click-count { display: none; } }

        /* v14：固定主页页脚、修复导航滑块定位并补充分享描述 */
        body:not(.subpage-active) > footer { display: block !important; visibility: visible !important; opacity: 1 !important; transform: none !important; }
        .footer-credit { font-family: "Segoe Script", "Snell Roundhand", "Brush Script MT", cursive; }
        .share-button-label { white-space: nowrap; font-size: .82rem; font-weight: 600; }
        @media (max-width: 768px) { .navbar-share .share-button-label { display: none; } }
        /* v15 */
        body,.navbar,section,footer,.subpage,.portfolio-card,.article-card,.social-card,.contact-email-card{transition:background-color 280ms ease,border-color 280ms ease,color 280ms ease,box-shadow 280ms ease}
        .theme-toggle,.search-toggle{width:38px;height:38px;flex:0 0 38px;display:inline-grid;place-items:center;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--text-secondary);cursor:pointer;transition:var(--transition)}.theme-toggle{margin-right:10px}.theme-toggle:hover,.search-toggle:hover{color:var(--primary);border-color:var(--primary);transform:translateY(-2px);box-shadow:0 12px 26px -18px rgba(37,99,235,.65)}.nav-search-item{display:flex;align-items:center}
        .content-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}.content-tag,.tag-filter-button{display:inline-flex;align-items:center;min-height:25px;padding:3px 9px;border:1px solid var(--border);border-radius:999px;background:color-mix(in srgb,var(--surface) 88%,var(--primary) 12%);color:var(--text-secondary);font-size:.7rem;line-height:1}.tag-filter-button{min-height:34px;padding:7px 13px;font:inherit;font-size:.78rem;cursor:pointer;transition:var(--transition)}.tag-filter-button:hover,.tag-filter-button.active{border-color:var(--primary);background:var(--primary);color:#fff;transform:translateY(-2px)}.catalog-filter-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-8px 0 22px}.catalog-filter-label{margin-right:4px;color:var(--text-secondary);font-size:.78rem;font-weight:650}
        .empty-content-state{grid-column:1/-1;min-height:150px;display:grid;place-items:center;padding:26px;border:1px dashed var(--border);border-radius:16px;background:color-mix(in srgb,var(--surface) 92%,var(--primary) 8%);color:var(--text-secondary);text-align:center}.image-load-state{position:absolute;inset:0;z-index:3;width:100%;min-height:70px;display:grid;place-items:center;padding:14px;border:0;border-radius:inherit;background:color-mix(in srgb,var(--surface) 94%,var(--primary) 6%);color:var(--text-secondary);font:inherit;font-size:.78rem;cursor:pointer}.image-load-state:hover{color:var(--primary)}.image-load-failed>img{opacity:0!important}
        .search-overlay{position:fixed;inset:0;z-index:2800;display:grid;place-items:start center;padding:9vh 20px 30px;background:rgba(15,23,42,.42);backdrop-filter:blur(12px);opacity:0;visibility:hidden;transition:opacity 220ms ease,visibility 220ms ease}.search-overlay.open{opacity:1;visibility:visible}.search-dialog{width:min(780px,100%);max-height:82vh;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:22px;background:var(--surface);box-shadow:0 32px 90px -30px rgba(15,23,42,.55);transform:translateY(-12px) scale(.985);transition:transform 320ms cubic-bezier(.22,1,.36,1)}.search-overlay.open .search-dialog{transform:none}.search-head{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--border)}.search-head>i{color:var(--primary)}.search-input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:1rem}.search-close{width:34px;height:34px;border:0;border-radius:10px;background:color-mix(in srgb,var(--surface) 82%,var(--border) 18%);color:var(--text-secondary);cursor:pointer}.search-tags{display:flex;gap:7px;padding:12px 18px;overflow-x:auto;border-bottom:1px solid var(--border)}.search-results{overflow:auto;padding:14px 18px 20px}.search-group+.search-group{margin-top:18px}.search-group-title{margin:0 0 8px;color:var(--text-secondary);font-size:.75rem;font-weight:750}.search-result{width:100%;display:grid;grid-template-columns:74px 1fr auto;gap:13px;align-items:center;padding:10px;border:0;border-radius:13px;background:transparent;color:var(--text);text-align:left;cursor:pointer;transition:var(--transition)}.search-result:hover{background:color-mix(in srgb,var(--surface) 83%,var(--primary) 17%);transform:translateX(3px)}.search-result-thumb{width:74px;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;border-radius:9px;background:linear-gradient(145deg,#dbeafe,#ede9fe);color:var(--primary)}.search-result-thumb img{width:100%;height:100%;object-fit:cover}.search-result strong,.search-result span{display:block}.search-result span{margin-top:4px;color:var(--text-secondary);font-size:.76rem;line-height:1.45}.search-result-type{color:var(--primary);font-size:.7rem;font-weight:700}.search-result mark{border-radius:3px;background:rgba(250,204,21,.38);color:inherit}
        .logic-select{position:relative;min-width:148px}.logic-select>select{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none}.logic-select-button{width:100%;min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 13px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--text-secondary);font:inherit;font-size:.82rem;cursor:pointer;transition:var(--transition)}.logic-select-button:hover,.logic-select.open .logic-select-button{border-color:var(--primary);color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.1)}.logic-select-button i{transition:transform 260ms cubic-bezier(.22,1,.36,1)}.logic-select.open .logic-select-button i{transform:rotate(180deg)}.logic-select-menu{position:absolute;top:calc(100% + 7px);left:0;right:0;z-index:30;display:grid;gap:4px;padding:6px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:0 18px 42px -20px rgba(15,23,42,.45);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transition:opacity 180ms ease,transform 260ms cubic-bezier(.22,1,.36,1),visibility 180ms ease}.logic-select.open .logic-select-menu{opacity:1;visibility:visible;transform:none}.logic-select-option{padding:9px 10px;border:0;border-radius:8px;background:transparent;color:var(--text-secondary);font:inherit;font-size:.8rem;text-align:left;cursor:pointer}.logic-select-option:hover,.logic-select-option.active{background:color-mix(in srgb,var(--surface) 78%,var(--primary) 22%);color:var(--primary)}
        html[data-theme="dark"]{color-scheme:dark;--bg:#0b1120;--surface:#111a2c;--text:#e6edf7;--text-secondary:#9cacbf;--border:#27344a;--shadow:0 20px 60px -12px rgba(0,0,0,.42)}html[data-theme="dark"] body,html[data-theme="dark"] .goodies-section,html[data-theme="dark"] #social,html[data-theme="dark"] #contact,html[data-theme="dark"] footer,html[data-theme="dark"] .hero,html[data-theme="dark"] #portfolio,html[data-theme="dark"] #articles{background:var(--bg)}html[data-theme="dark"] .navbar{background:rgba(11,17,32,.88)}html[data-theme="dark"] .portfolio-card,html[data-theme="dark"] .article-card,html[data-theme="dark"] .social-card,html[data-theme="dark"] .contact-email-card,html[data-theme="dark"] .detail-page,html[data-theme="dark"] .subpage,html[data-theme="dark"] .text-detail,html[data-theme="dark"] .detail-notice,html[data-theme="dark"] .detail-download{background-color:var(--surface);border-color:var(--border)}html[data-theme="dark"] .contact-email-card .email-address,html[data-theme="dark"] .catalog-pagination button,html[data-theme="dark"] .subpage-back,html[data-theme="dark"] .detail-caption,html[data-theme="dark"] .text-detail article,html[data-theme="dark"] .detail-photo-empty{background:var(--surface);color:var(--text-secondary);border-color:var(--border)}html[data-theme="dark"] .catalog-pagination button.active{background:var(--primary);color:#fff;border-color:var(--primary)}html[data-theme="dark"] .portfolio-thumb,html[data-theme="dark"] .article-thumb,html[data-theme="dark"] .detail-cover,html[data-theme="dark"] .search-result-thumb{background:linear-gradient(145deg,#172554,#312e81)}
        @media(max-width:768px){.theme-toggle{margin-right:2px}.nav-search-item{justify-content:center;padding:3px 0}.search-toggle{width:calc(100% - 20px)}.search-result{grid-template-columns:64px 1fr}.search-result-type{display:none!important}.search-dialog{max-height:88vh}.catalog-filter-bar{margin-top:0}}

        /* v16：导航对齐、搜索位置、标签完整显示 */
        .navbar .container,.navbar nav,.nav-links,.nav-links li,.nav-links a{align-items:center}
        .navbar nav,.nav-links,.nav-links li,.nav-links a{display:flex}
        .nav-links a{min-height:38px}
        .navbar-search{margin-left:10px}
        .navbar-share{margin-left:8px}
        .theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
        .content-tag,.tag-filter-button{border-radius:9px}
        .search-tags{flex:none;flex-wrap:wrap;align-content:flex-start;overflow-x:hidden;overflow-y:auto;max-height:156px;scrollbar-width:thin}
        .search-result .content-tags{display:flex;margin-top:8px}
        .search-result .content-tag{display:inline-flex;margin-top:0}
        @media(max-width:768px){.navbar-search{margin-left:auto}.navbar-share{margin-left:6px}.search-tags{max-height:190px}.search-toggle.navbar-search{width:38px}}


.footer-credit{font-weight:600}
.icon-svg{width:1em;height:1em;display:inline-block;flex:0 0 auto;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.platform-icon .icon-svg,.placeholder-icon.icon-svg{width:2.1rem;height:2.1rem}.section-more .icon-svg{transition:transform var(--transition)}
.v17-settings-button{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--text-secondary);cursor:pointer;transition:var(--transition)}.v17-settings-button:hover{transform:translateY(-2px);color:var(--primary);border-color:var(--primary)}
.v17-settings{position:fixed;inset:0;z-index:2400;display:grid;place-items:center;padding:24px;background:rgba(15,23,42,.42);backdrop-filter:blur(10px)}.v17-settings[hidden]{display:none}.v17-settings-panel{width:min(680px,100%);max-height:min(760px,92vh);overflow:auto;padding:24px;border:1px solid var(--border);border-radius:22px;background:var(--surface);box-shadow:0 30px 80px rgba(15,23,42,.22)}.v17-settings-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}.v17-settings-head h2{margin:0;font-size:1.35rem}.v17-settings-head p{margin:4px 0 0;color:var(--text-secondary);font-size:.82rem}.v17-settings-close{width:38px;height:38px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font-size:1.2rem}.v17-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.v17-setting{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 14px;border:1px solid var(--border);border-radius:14px}.v17-setting span{font-weight:650;font-size:.88rem}.v17-setting input[type="checkbox"]{width:42px;height:22px;accent-color:var(--primary)}.v17-setting select{padding:7px 9px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text)}.v17-order{grid-column:1/-1;padding:15px;border:1px solid var(--border);border-radius:14px}.v17-order h3{margin:0 0 10px;font-size:.92rem}.v17-order-item{display:grid;grid-template-columns:1fr auto auto;gap:7px;align-items:center;padding:8px 0;border-top:1px solid var(--border)}.v17-order-item:first-of-type{border-top:0}.v17-order-item button{width:34px;height:32px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text)}.v17-settings-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}.v17-settings-actions button{padding:9px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font-weight:650}.v17-settings-actions .primary{border-color:var(--primary);background:var(--primary);color:#fff}
body.v17-no-motion *,body.v17-no-motion *::before,body.v17-no-motion *::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.v17-hide-counters .click-count,.v17-hide-counters .dock-counter,.v17-hide-counters .detail-meta-counter,.v17-hide-tags .content-tags{display:none!important}.v17-easter-off .avatar-easter-egg{display:none!important}
.music-detail{max-width:1180px}.music-detail-main{position:relative;isolation:isolate;overflow:hidden;margin-top:18px;border:1px solid var(--border);border-radius:24px;background:var(--surface);box-shadow:var(--shadow)}.music-ambient{position:absolute;inset:-70px;z-index:-2;background-position:center;background-size:cover;filter:blur(48px) saturate(.85);opacity:.2;transform:scale(1.16)}.music-detail-main:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 78%,transparent),color-mix(in srgb,var(--bg) 92%,transparent))}.music-network-note{margin:18px 22px 0;padding:11px 14px;border:1px solid #f3d38a;border-radius:12px;background:#fff8df;color:#8a5a00}.music-player{background:transparent}.music-player-layout{display:grid;grid-template-columns:minmax(280px,.82fr) minmax(0,1.28fr);gap:54px;align-items:center;padding:42px 52px 30px}.music-cover-column{display:grid;gap:18px;align-content:start}.music-square-cover{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:20px;background:linear-gradient(145deg,#dbeafe,#ede9fe);box-shadow:0 26px 58px -24px rgba(15,23,42,.5)}.music-cover-placeholder{display:grid;place-items:center;color:var(--primary);font-size:3rem}.music-track-heading{display:grid;gap:8px}.music-track-heading h1{margin:0;font-size:clamp(1.6rem,3vw,2.35rem);line-height:1.15;letter-spacing:-.035em}.music-artist{margin:0;color:var(--text);font-weight:700}.music-summary{display:-webkit-box;margin:2px 0 0;overflow:hidden;color:var(--text-secondary);font-size:.9rem;line-height:1.7;-webkit-box-orient:vertical;-webkit-line-clamp:3}.music-track-heading .content-tags{margin-top:2px}.music-lyrics-column{min-width:0}.music-lyrics-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px 12px;border-bottom:1px solid var(--border);font-weight:750}.music-lyrics-heading small{color:var(--text-secondary);font-size:.72rem;font-weight:500}.music-lyrics{height:430px;overflow:auto;padding:54px 16px;text-align:left;scroll-behavior:smooth;scrollbar-width:thin;mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}.music-lyrics p{margin:0 0 19px;color:var(--text-secondary);font-size:1rem;line-height:1.55;transition:.22s;cursor:pointer}.music-lyrics p.active{color:var(--primary);font-size:1.16rem;font-weight:750;transform:translateX(8px)}.music-controller{display:grid;grid-template-columns:minmax(260px,1fr) auto minmax(150px,1fr);gap:22px;align-items:center;padding:16px 30px 18px;border-top:1px solid var(--border);background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(18px)}.music-progress-row{display:grid;grid-template-columns:auto minmax(120px,1fr) auto;gap:10px;align-items:center}.music-current-time,.music-duration{color:var(--text-secondary);font-size:.75rem;font-variant-numeric:tabular-nums}.music-progress,.music-volume{width:100%;margin:0;accent-color:var(--primary);cursor:pointer}.music-transport{display:flex;align-items:center;justify-content:center;gap:12px}.music-play{width:54px;height:54px;border:0;border-radius:50%;background:var(--primary);color:#fff;font-size:1rem;box-shadow:0 13px 28px -16px rgba(37,99,235,.85);transition:var(--transition)}.music-play:hover{transform:translateY(-2px) scale(1.04)}.music-seek{position:relative;width:42px;height:42px;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--text-secondary);font:inherit;cursor:pointer;transition:var(--transition)}.music-seek:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px)}.music-seek span{position:absolute;inset:0;display:grid;place-items:center;padding-top:1px;font-size:.6rem;font-weight:800}.music-seek i{font-size:1.12rem}.music-volume-control{display:grid;grid-template-columns:auto minmax(70px,110px);gap:9px;align-items:center;justify-content:end;color:var(--text-secondary)}.music-detail-note,.music-link-card,.music-embed{margin:0 22px 22px;padding:20px 22px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}.music-detail-note p{margin:0;color:var(--text-secondary);font-size:.92rem;line-height:1.75}.music-embed iframe{width:100%;min-height:190px;border:0;border-radius:14px}.music-link-card{display:grid;gap:16px}
html[data-theme="dark"] .v17-settings-button,html[data-theme="dark"] .v17-settings-panel,html[data-theme="dark"] .v17-setting,html[data-theme="dark"] .v17-order,html[data-theme="dark"] .v17-order-item button,html[data-theme="dark"] .v17-settings-actions button{background:var(--surface);border-color:var(--border);color:var(--text)}html[data-theme="dark"] .music-network-note{background:#32270d;border-color:#6f571d;color:#f7d778}
@media(max-width:760px){.v17-settings-grid{grid-template-columns:1fr}.v17-order{grid-column:auto}.v17-settings{padding:10px}.v17-settings-button{width:38px;height:38px}.music-detail-main{border-radius:18px}.music-player-layout{grid-template-columns:1fr;gap:28px;padding:26px 20px 20px}.music-square-cover{width:min(320px,86%);justify-self:center}.music-track-heading{text-align:center}.music-track-heading .content-tags{justify-content:center}.music-lyrics-heading{padding-left:6px;padding-right:6px}.music-lyrics{height:360px;padding:44px 8px;text-align:center}.music-lyrics p.active{transform:scale(1.03)}.music-controller{grid-template-columns:1fr;gap:14px;padding:16px 20px}.music-transport{grid-row:1}.music-volume-control{display:none}.music-detail-note{margin:0 14px 14px}.music-network-note{margin-left:14px;margin-right:14px}}

/* V18.1.1: detail typography, centered mobile motto and refined music player. */
.rich-text{color:var(--text-secondary);line-height:1.8}
.rich-text> :first-child{margin-top:0}.rich-text> :last-child{margin-bottom:0}
.rich-text p{margin:.7em 0}.rich-text h2,.rich-text h3{margin:1.1em 0 .45em;color:var(--text);line-height:1.35;text-align:left}
.rich-text h2{font-size:1.24rem}.rich-text h3{font-size:1.06rem}
.rich-text ul,.rich-text ol{margin:.7em 0;padding-left:1.6em;text-align:left}.rich-text li{margin:.3em 0}
.rich-text a{color:var(--primary);font-weight:650;text-decoration:underline;text-underline-offset:3px}
.rich-text hr{height:1px;margin:1.2em 0;border:0;background:var(--border)}
.rich-text strong{color:var(--text)}
.music-detail-main{overflow:clip}
.music-player-layout{align-items:start;gap:48px;padding:24px 48px 12px}
.music-player-layout>.music-cover-column,.music-player-layout>.music-lyrics-column{padding:0!important}
.music-lyrics-column{align-self:start;margin-top:-4px}
.music-lyrics{height:400px;padding:calc(50% - .5em) 16px;scroll-padding-block:50%;box-sizing:border-box}
.music-controller{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px 22px;padding:10px 30px 14px}
.music-progress-row{grid-column:1/-1;grid-row:1;width:100%}
.music-transport{grid-column:2;grid-row:2}
.music-volume-control{grid-column:3;grid-row:2}
.music-seek{display:inline-flex;align-items:center;justify-content:center;gap:5px;width:auto;min-width:70px;height:38px;padding:0 11px;border-radius:12px}
.music-seek span{position:static;display:inline;padding:0;font-size:.7rem;font-weight:750;white-space:nowrap}
.music-seek i{font-size:.95rem}
@media(max-width:768px){
  .hero-motto{justify-self:center!important;width:100%;padding-right:0!important;text-align:center!important;transform:none!important}
}
@media(max-width:760px){
  .music-player-layout{gap:18px;padding:18px 18px 8px}
  .music-lyrics-column{margin-top:0}
  .music-lyrics{height:340px;padding:calc(50% - .5em) 8px}
  .music-controller{grid-template-columns:1fr;gap:9px;padding:9px 12px 12px}
  .music-progress-row{grid-column:1;grid-row:1}
  .music-transport{grid-column:1;grid-row:2}
}

:root{--font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif}.footer-credit{font-family:'Segoe Script',cursive}
.music-detail-main{overflow:clip}

/* V18.1.2: centered rich text and a unified immersive music surface. */
.rich-center{text-align:center}
.rich-center h2,.rich-center h3,.rich-center ul,.rich-center ol{text-align:center}
.rich-center ul,.rich-center ol{display:inline-block}
.music-detail-main{background:transparent;border-color:color-mix(in srgb,var(--border) 72%,transparent)}
.music-ambient{inset:-110px;z-index:0;opacity:.56;filter:blur(62px) saturate(1.35) brightness(1.02);transform:scale(1.2)}
.music-detail-main:after{z-index:1;background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 66%,transparent),color-mix(in srgb,var(--bg) 76%,transparent))}
.music-player,.music-network-note,.music-detail-note,.music-link-card,.music-embed{position:relative;z-index:2}
.music-square-cover{border:1px solid color-mix(in srgb,#fff 42%,transparent);box-shadow:0 28px 64px -28px rgba(15,23,42,.72)}
.music-lyrics-column{overflow:hidden;border:1px solid color-mix(in srgb,var(--border) 70%,transparent);border-radius:20px;background:color-mix(in srgb,var(--surface) 48%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 32%,transparent);backdrop-filter:blur(22px) saturate(1.2)}
.music-controller,.music-detail-note,.music-link-card,.music-embed{border:1px solid color-mix(in srgb,var(--border) 74%,transparent);background:color-mix(in srgb,var(--surface) 56%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 28%,transparent),0 18px 44px -34px rgba(15,23,42,.55);backdrop-filter:blur(24px) saturate(1.28)}
.music-controller{margin:0 24px 12px;border-radius:18px;padding:13px 18px 15px}
.music-detail-note,.music-link-card,.music-embed{margin:0 24px 24px;border-radius:18px}
.music-seek{border-color:color-mix(in srgb,var(--border) 72%,transparent);background:color-mix(in srgb,var(--surface) 64%,transparent);color:var(--text)}
.music-play{box-shadow:0 14px 30px -14px color-mix(in srgb,var(--primary) 78%,transparent)}
.music-progress,.music-volume{-webkit-appearance:none;appearance:none;height:5px;border-radius:99px;background:color-mix(in srgb,var(--border) 72%,transparent);outline:none}
.music-progress::-webkit-slider-thumb,.music-volume::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border:3px solid var(--surface);border-radius:50%;background:var(--primary);box-shadow:0 2px 9px rgba(15,23,42,.28)}
.music-progress::-moz-range-thumb,.music-volume::-moz-range-thumb{width:10px;height:10px;border:3px solid var(--surface);border-radius:50%;background:var(--primary);box-shadow:0 2px 9px rgba(15,23,42,.28)}
html[data-theme="dark"] .music-detail-main:after{background:linear-gradient(135deg,rgba(11,17,32,.68),rgba(17,26,44,.78))}
@media(max-width:760px){
  .music-controller{margin:0 12px 10px;padding:11px 12px 13px}
  .music-detail-note,.music-link-card,.music-embed{margin:0 12px 12px}
  .music-lyrics-column{border-radius:17px}
}

/* V18.1.3: borderless player controls, framed article media and compact search. */
.music-lyrics-column{border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}
.music-controller{border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}
.music-progress,.music-volume{background:linear-gradient(to right,var(--primary) 0 var(--range-progress,0%),color-mix(in srgb,var(--border) 72%,transparent) var(--range-progress,0%) 100%)}
.text-detail figure{padding:8px;border:1px solid var(--border);border-radius:20px;background:color-mix(in srgb,var(--surface) 90%,var(--primary) 10%);box-shadow:0 16px 36px -30px rgba(15,23,42,.42)}
.text-detail figure img{border-radius:13px}
.text-detail figcaption{padding:0 8px 3px}
.search-results{padding:8px 18px 16px}
.search-group{padding:0!important}
.search-group+.search-group{margin-top:10px}
.search-group-title{margin:0 0 5px}
.search-result{padding:8px 10px}
@media(max-width:760px){.music-controller{border-radius:0}.search-results{padding:7px 12px 14px}}

/* V18.2: provider downloads, optional download panels and expanded image viewing. */
.music-detail-note,.music-link-card{padding:34px}.music-detail-note{border:0;background:transparent;box-shadow:none;backdrop-filter:none}
.music-transport{gap:0}
.detail-cover[role="button"],.text-detail figure[role="button"]{cursor:zoom-in;transition:var(--transition)}
.detail-cover[role="button"]:hover,.text-detail figure[role="button"]:hover{transform:translateY(-2px);box-shadow:0 20px 44px -30px rgba(15,23,42,.55)}
.download-description{margin-top:16px;padding:34px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
.download-provider{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.download-provider.quark-provider,.download-provider.github-provider{border:1px solid var(--border);background:var(--surface);color:var(--text)!important}
.download-provider.quark-provider:hover,.download-provider.github-provider:hover{border-color:var(--primary);color:var(--primary)!important;transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(37,99,235,.55)}
.download-provider>i{width:1.15em;text-align:center;font-size:1.05em}
.quark-provider-icon{display:block;width:20px;height:20px;flex:0 0 20px;object-fit:contain}

/* V18.3.3.2: content totals, compact subpage top spacing and download hover parity. */
.section-title,.subpage-heading h1{display:flex;align-items:baseline;gap:.24em}
.section-count{display:inline-block;color:color-mix(in srgb,var(--primary) 28%,var(--text-secondary) 72%);font-size:.42em;font-weight:600;letter-spacing:0;line-height:1;font-variant-numeric:tabular-nums;opacity:.78}
.subpage{padding-top:12px!important}
body.subpage-active{padding-top:0!important}
.subpage-heading{margin-top:16px}
@media(max-width:768px){.subpage{padding-top:10px!important}.subpage-shell{padding-left:18px;padding-right:18px}.subpage-heading{margin-top:14px}}

/* V18.3 contact, refined in V18.5.16: email + WeChat + QQ group. */
#contact .contact-panels{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.contact-card{display:flex;min-width:0;min-height:400px;flex-direction:column;align-items:stretch;margin-top:0;padding:24px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
.contact-card>h3{margin:0 0 16px;font-size:1.3rem}
.contact-card>p{margin:16px 0 0;color:var(--text-secondary);font-size:.9rem;line-height:1.65}
.contact-entry-layout{display:flex;height:230px;flex-direction:column;align-items:center;gap:16px}
.contact-direct-entry{width:100%;min-width:0;min-height:58px}
.contact-entry-layout .email-address{margin:0;overflow:hidden;font-size:.92rem}
.contact-entry-layout .email-address,.wechat-copy-entry,.qq-copy-entry{display:flex;align-items:center;gap:9px;width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:12px;background:#fff;color:var(--primary);font:inherit;font-size:.92rem;font-weight:600;text-align:left;cursor:pointer;transition:var(--transition)}
.contact-entry-layout .email-address:hover,.wechat-copy-entry:hover,.qq-copy-entry:hover{transform:translateY(-4px);border-color:var(--primary);color:var(--primary);box-shadow:0 14px 28px -16px rgba(59,130,246,.5)}
.contact-entry-layout .email-address i,.wechat-copy-entry i,.qq-copy-entry i{flex:0 0 auto;width:1em;text-align:center}
.contact-entry-layout .email-address,.wechat-copy-entry span,.qq-copy-entry span{min-width:0;overflow-wrap:anywhere}
.contact-qr-trigger{order:-1;display:grid;place-items:center;width:152px;padding:7px;border:1px solid var(--border);border-radius:16px;background:color-mix(in srgb,var(--surface) 94%,var(--primary) 6%);color:var(--text-secondary);font:inherit;cursor:zoom-in;transition:var(--transition)}.contact-qr-trigger:not(:disabled):hover{transform:translateY(-4px);border-color:var(--primary);box-shadow:0 16px 34px -24px rgba(15,23,42,.5)}.contact-qr-trigger:disabled{cursor:default;opacity:.72}.contact-qr-trigger img,.contact-qr-placeholder{width:136px;height:136px;border-radius:11px}.contact-qr-trigger img{display:block;object-fit:contain;background:#fff}.contact-qr-placeholder{display:grid;place-items:center;align-content:center;gap:6px;background:color-mix(in srgb,var(--surface) 82%,var(--primary) 18%);font-size:.66rem;text-align:center}.contact-qr-placeholder i{font-size:1.8rem;color:var(--primary)}.contact-qr-trigger img[hidden],.contact-qr-placeholder[hidden]{display:none!important}
.wechat-qr-lightbox{position:fixed!important;inset:0;z-index:260;display:grid;place-items:center;padding:32px;background:rgba(8,15,30,.82);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}.wechat-qr-lightbox.open{opacity:1;visibility:visible}.wechat-qr-lightbox img{width:min(560px,86vw);max-height:82vh;object-fit:contain;border-radius:26px;background:#fff;box-shadow:0 36px 90px rgba(0,0,0,.45);transform:scale(.94);transition:transform .28s var(--motion-ease,ease)}.wechat-qr-lightbox.open img{transform:scale(1)}.wechat-qr-close{position:absolute;top:24px;right:28px;width:44px;height:44px;border:1px solid rgba(255,255,255,.32);border-radius:14px;background:rgba(255,255,255,.12);color:#fff;font:300 1.8rem/1 sans-serif;cursor:pointer}
html[data-theme="dark"] .contact-card,html[data-theme="dark"] .contact-entry-layout .email-address,html[data-theme="dark"] .wechat-copy-entry,html[data-theme="dark"] .qq-copy-entry{background:var(--surface);border-color:var(--border)}
@media(max-width:820px){#contact .contact-panels{grid-template-columns:minmax(0,1fr)}.contact-card{min-height:0}.contact-entry-layout{height:230px;gap:16px}.contact-entry-layout .email-address,.wechat-copy-entry,.qq-copy-entry{font-size:.92rem;padding:10px}}

/* V18.5：大数据分页、分批搜索与移动端防溢出。 */
.pagination-ellipsis{display:inline-grid;min-width:28px;height:38px;place-items:center;color:var(--text-secondary);font-size:.9rem}
.search-load-more{display:block;min-width:180px;margin:18px auto 4px;padding:10px 18px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--primary);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;transition:var(--transition)}
.search-load-more:hover{transform:translateY(-2px);border-color:var(--primary);box-shadow:0 12px 28px -20px rgba(59,130,246,.55)}
html[data-theme="dark"] .search-load-more{background:var(--surface);border-color:var(--border)}
@media(max-width:768px){
  html,body{max-width:100%;overflow-x:clip}
  .navbar .container{width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .navbar .container::-webkit-scrollbar{display:none}
  .navbar .logo{min-width:0;flex:0 1 auto;white-space:nowrap}
  .theme-toggle,.navbar-search,.navbar-share,.hamburger{flex:0 0 auto}
  .nav-links{max-width:100vw;max-height:calc(100vh - 70px);overflow-y:auto;overflow-x:hidden}
  #contact .contact-panels{grid-template-columns:minmax(0,1fr)!important}
  .contact-panels,.contact-email-card,.contact-wechat-card,.contact-entry-layout,.contact-direct-entry{min-width:0;max-width:100%}
  .contact-entry-layout{grid-template-columns:minmax(0,1fr) minmax(96px,112px)}
  .contact-email-card .email-address,.wechat-copy-entry{min-width:0;overflow-wrap:anywhere;word-break:break-word}
  .catalog-pagination{max-width:100%;flex-wrap:wrap}
  .search-dialog,.search-head,.search-results,.search-result{min-width:0;max-width:100%}
}
.goodie-download{margin-top:16px}
@media(max-width:820px){.download-provider{width:100%}.detail-caption,.download-description,.text-detail article,.music-detail-note,.music-link-card{padding:22px}.detail-download-action{width:100%}}

/* V18.5.1: 标签默认最多两行，溢出时自动折叠。 */
.tag-lines{position:relative;display:block!important;overflow:visible!important}
.tag-lines-inner{display:flex;align-items:center;align-content:flex-start;flex-wrap:wrap;gap:7px;max-height:75px;overflow:hidden;padding-right:64px}
.tag-lines.tags-expanded .tag-lines-inner{max-height:none}
.tag-lines-toggle{position:absolute;right:0;bottom:0;display:none;align-items:center;justify-content:center;min-height:34px;padding:7px 12px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--primary);font:inherit;font-size:.76rem;font-weight:700;cursor:pointer;box-shadow:-12px 0 18px var(--surface)}
.tag-lines.tags-overflowing .tag-lines-toggle{display:inline-flex}
.search-tags.tag-lines{padding:12px 18px;max-height:none;border-bottom:1px solid var(--border)}
.search-tags .tag-lines-toggle{right:18px;bottom:12px}
.catalog-filter-bar.tag-lines{margin:-8px 0 22px}
html[data-theme="dark"] .tag-lines-toggle{background:var(--surface);border-color:var(--border)}
@media(max-width:768px){.tag-lines-inner{max-height:75px}.catalog-filter-bar.tag-lines{margin-top:0}}
.download-provider.is-disabled{opacity:.58;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.detail-download-action:has(.download-provider.is-disabled):not(:has(a[data-download-id])) .click-count{display:none}
@media (max-width:1320px) and (min-width:769px){.navbar .container{padding-left:36px!important;padding-right:36px!important;gap:10px}.nav-links{gap:3px}.nav-links a{padding-left:10px;padding-right:10px;font-size:.82rem}.navbar-search,.navbar-share{margin-left:4px}.logo{white-space:nowrap}}

/* V18.5.5: 搜索标签安全区、空白初始态、双列结果与页脚左右调整。 */
.tag-lines-inner{box-sizing:border-box;max-height:81px;padding:3px 64px 3px 0}
.tag-lines.tags-expanded .tag-lines-inner{max-height:none}
.tag-lines-toggle{display:none}
.tag-lines.tags-overflowing .tag-lines-toggle{display:inline-flex}
.search-tags.tag-lines{padding-top:9px;padding-bottom:9px}
.search-tags .tag-lines-toggle{bottom:12px}
.search-dialog{width:min(1120px,calc(100vw - 40px))}
.search-results:empty{display:none}
.search-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.search-group+.search-group{margin-top:14px}
.search-group-title{grid-column:1/-1;margin:0 0 2px}
.search-result{position:relative;grid-template-columns:82px minmax(0,1fr);height:100%;min-width:0;padding:10px;border:1px solid transparent;background:color-mix(in srgb,var(--surface) 96%,var(--primary) 4%)}
.search-result:hover{border-color:color-mix(in srgb,var(--border) 62%,var(--primary) 38%)}
.search-result-type{display:none!important}
.footer-inner{display:flex;align-items:flex-end;justify-content:space-between;text-align:left}
.footer-inner>p{margin:0;text-align:left}
.footer-inner>p{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}
.footer-icp{color:var(--text-secondary);font-size:.78rem;text-decoration:none;transition:color var(--transition),transform var(--transition)}
.footer-icp:hover{color:var(--primary);transform:translateY(-1px)}
.footer-credit{position:static;order:0;margin:0;text-align:right}
@media(max-width:760px){.search-dialog{width:min(100%,calc(100vw - 20px))}.search-group{grid-template-columns:1fr}.search-result{grid-template-columns:72px minmax(0,1fr)}.footer-inner{align-items:center;flex-direction:column;gap:8px;text-align:center}.footer-inner>p{margin:0;justify-content:center;text-align:center}.footer-credit{order:0;text-align:center}}

/* V18.5.6: enlarged search covers and fixed left/right result metadata. */
.search-result{grid-template-columns:120px minmax(0,1fr)}
.search-result-thumb{width:120px;align-self:center}
.search-result-copy{position:relative;display:block!important;min-width:0;min-height:72px;padding-bottom:31px}
.search-result-copy>strong,.search-result-copy>strong+span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-result-copy>.content-tags{position:absolute;left:0;right:158px;bottom:0;display:flex!important;flex-wrap:nowrap;max-width:none;margin:0;overflow:hidden}
.search-result-meta{position:absolute;right:0;bottom:0;display:inline-flex!important;align-items:center;justify-content:flex-end;gap:5px;color:var(--text-secondary);font-size:.72rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.search-result-meta time,.search-result-meta .click-count,.search-result-meta .click-count>span{display:inline-flex;align-items:center;margin:0}
.search-result-meta .click-count{gap:4px}
.search-result-meta .click-count b{font-weight:600}
@media(max-width:520px){.search-result{grid-template-columns:104px minmax(0,1fr)}.search-result-thumb{width:104px}.search-result-copy>.content-tags{right:0;bottom:27px}.search-result-copy{padding-bottom:58px}.search-result-meta{left:auto;right:0}}

/* V18.5.8: compact search placement and detail consistency fixes. */
.software-shot-caption{text-align:center}
.search-overlay{padding:clamp(12px,2.5vh,24px) 20px}
.search-dialog{max-height:calc(100vh - 32px)}
@media(max-width:768px){.search-overlay{padding:10px}.search-dialog{max-height:calc(100vh - 20px)}}

/* V18.5.10: the search dialog is a section element; cancel the global section padding. */
.search-dialog{padding:0}
.search-tags{flex-wrap:wrap;overflow-x:visible}

/* V18.5.14: every detail description uses fixed 34px padding and 1.7 line spacing. */
.detail-description-surface{padding:34px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text-secondary);box-shadow:var(--shadow);backdrop-filter:none;line-height:1.7;overflow-wrap:anywhere}
.detail-page > .detail-description-surface{padding:34px}
.detail-description-surface.rich-text p{margin:0;line-height:1.7}
.detail-description-surface.rich-text div,.detail-description-surface.rich-text h2,.detail-description-surface.rich-text h3,.detail-description-surface.rich-text ul,.detail-description-surface.rich-text ol,.detail-description-surface.rich-text li,.detail-description-surface.rich-text br{line-height:1.7}
.software-shot-caption.rich-text,.software-shot-caption.rich-text p{line-height:1.7}
.software-shot-caption.rich-text p{margin:0}

/* V18.5.15: one semantic typography scale for every public page. */
:root{
    --type-page-title:clamp(2.35rem,4.8vw,4.4rem);
    --type-section-title:2rem;
    --type-panel-title:1.3rem;
    --type-component-title:clamp(1.75rem,3vw,2.35rem);
    --type-card-title:1.05rem;
    --type-intro:1rem;
    --type-card-summary:.88rem;
    --type-body:1.02rem;
    --type-meta:.78rem;
    --type-caption:.78rem;
    --type-tag:.7rem;
}
.section-title{font-size:var(--type-section-title)}
.subpage-heading h1,.detail-title h1,.photo-detail-intro h1,.text-detail-hero h1{font-size:var(--type-page-title)}
.music-track-heading h1{font-size:var(--type-component-title)}
.contact-email-card h3,.contact-wechat-card>h3{font-size:var(--type-panel-title)}
#portfolio .portfolio-body h3,#goodies .portfolio-body h3,#articles .article-content h3,
.catalog-grid .portfolio-body h3,.catalog-grid .article-content h3,.catalog-body h2,
.search-result-copy>strong,.social-card>span:not(.platform-account-id){font-size:var(--type-card-title)}
.section-subtitle,.subpage-heading>p,.detail-title>p,.photo-detail-intro>p,.text-detail-summary{font-size:var(--type-intro);line-height:1.7}
#portfolio .portfolio-body p,#goodies .portfolio-body p,#articles .article-content p,
.catalog-grid .portfolio-body p,.catalog-grid .article-content p,.catalog-body p,
.search-result-copy>strong+span,.music-summary,.contact-email-card>p,.wechat-note{font-size:var(--type-card-summary);line-height:1.6}
.detail-description-surface,.detail-description-surface.rich-text p,
.detail-description-surface.rich-text div,.detail-description-surface.rich-text ul,
.detail-description-surface.rich-text ol,.detail-description-surface.rich-text li{font-size:var(--type-body)}
.card-updated,#articles .article-content .date,.catalog-grid .card-updated,
.catalog-grid .article-content .date,.click-count,.detail-content-meta,
.search-result-meta,.platform-account-id{font-size:var(--type-meta)}
.software-shot-caption,.text-detail figcaption{font-size:var(--type-caption)}
.content-tag{font-size:var(--type-tag)}
.music-detail-note.detail-description-surface{
    border-color:color-mix(in srgb,var(--border) 58%,transparent);
    background:color-mix(in srgb,var(--surface) 64%,transparent);
    box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 32%,transparent),0 18px 44px -34px rgba(15,23,42,.55);
    backdrop-filter:blur(22px) saturate(1.2);
}
@media(max-width:768px){
    :root{--type-page-title:clamp(2rem,8vw,2.8rem);--type-section-title:1.6rem}
}

/* V18.5.16: compact counters, three contact cards and detail-only image zoom. */
.contact-card>h3{font-size:var(--type-panel-title)}
.contact-card>p{font-size:var(--type-card-summary);line-height:1.6}
.contact-stat[hidden]{display:none!important}
.detail-hero-zoom{position:absolute;right:16px;top:16px;z-index:3;width:40px;height:40px;display:grid;place-items:center;border:1px solid color-mix(in srgb,#fff 48%,transparent);border-radius:11px;background:rgba(15,23,42,.34);color:#fff;cursor:zoom-in;backdrop-filter:blur(10px);transition:var(--transition)}
.detail-hero-zoom:hover{transform:translateY(-2px);background:rgba(15,23,42,.5)}
.music-square-cover[role="button"]{cursor:zoom-in;transition:var(--transition)}
.music-square-cover[role="button"]:hover{transform:translateY(-3px);box-shadow:0 30px 68px -28px rgba(15,23,42,.72)}
.image-lightbox-media,.wechat-qr-lightbox img{touch-action:none;user-select:none;-webkit-user-drag:none;will-change:transform;transform-origin:center center}
.image-lightbox-media.is-zoomed,.wechat-qr-lightbox img.is-zoomed{cursor:grab}
.image-lightbox-media.is-panning,.wechat-qr-lightbox img.is-panning{cursor:grabbing}
.image-lightbox-slide{touch-action:none}
@media(max-width:820px){
    .detail-hero-zoom{right:12px;top:12px}
}