/* 视频背景容器承载静帧和视频，避免视频加载慢时顶部区域空白。 */
        .video-hero {
            height: 80vh;
        }

.video-hero .video-bg {
            object-fit: cover;
            object-position: center 45%;
        }

/* 视频背景上的标题容器 */
        .video-title-overlay {
            position: absolute;
            top: 38%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            z-index: 10;
            width: 80%;
            max-width: 800px;
        }

.video-title {
            font-size: 42px;
            font-weight: 700;
            color: #fff;
            text-shadow: 0 2px 8px rgba(0,0,0,0.4);
            margin-bottom: 20px;
            line-height: 1.3;
        }

.video-meta {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            color: rgba(255,255,255,0.9);
            font-size: 14px;
            text-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }

.video-meta-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }

.video-meta-separator {
            color: rgba(255,255,255,0.6);
        }

.video-excerpt {
            margin-top: 16px;
            color: rgba(255,255,255,0.85);
            font-size: 15px;
            line-height: 1.6;
            text-shadow: 0 1px 3px rgba(0,0,0,0.3);
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
            color: #333; line-height: 1.8;
        }

/* 导航栏 */
        .header {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 100;
            background: transparent;
            backdrop-filter: none;
            border-bottom: none;
            padding: 12px 0;
            pointer-events: auto;
        }

.header .container {
            max-width: 90%;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

/* 三栏布局 */
        .page-wrapper {
            max-width: 1800px;
            margin: 40px auto;
            padding: 0 40px;
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 260px 1fr 200px;
            gap: 30px;
        }

/* 左侧：文章目录 */
        .post-toc {
            position: sticky;
            top: 100px;
            height: fit-content;
            max-height: calc(100vh - 120px);
            overflow-y: auto;
        }

.toc-box {
            background: #fff;
            border-radius: 16px;
            padding: 20px;
            border: 2px solid #b085f5;   /* 静态紫色边框，你可以换成喜欢的紫色 */
        }

.toc-title {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

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

.toc-list li {
            margin-bottom: 8px;
        }

.toc-list a {
            color: #333;
            text-decoration: none;
            font-size: 13px;
            display: block;
            padding: 4px 0;
            transition: color 0.2s;
            line-height: 1.4;
        }

.toc-list a:hover {
            color: #667eea;
        }

.toc-h2 {
            padding-left: 12px;
        }

.toc-h3 {
            padding-left: 24px;
            font-size: 12px;
        }

/* 中间：文章内容 */
        .main-content {
            min-width: 0;
        }

.article {
            background: #fff;
            border-radius: 16px;
            padding: 40px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
        }

/* 右侧：专栏文章列表 */
        .right-sidebar {
            position: sticky;
            top: 100px;
            height: fit-content;
            max-height: calc(100vh - 120px);
            overflow-y: auto;
        }

.column-posts-box {
            background: #fff;
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
            border: 1px solid #e5e5e5;
            border-top: 3px solid #667eea;
        }

.column-posts-title {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

.column-post-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

.column-post-item {
            margin-bottom: 12px;
            padding-bottom: 12px;
            border-bottom: 1px solid #f0f0f0;
        }

.column-post-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

.column-post-item a {
            color: #333;
            text-decoration: none;
            font-size: 13px;
            display: block;
            line-height: 1.4;
            transition: color 0.2s;
        }

.column-post-item a:hover {
            color: #667eea;
        }

.column-post-item.current a {
            color: #667eea;
            font-weight: 500;
        }

.column-post-date {
            font-size: 11px;
            color: #999;
            margin-top: 4px;
        }

.empty-toc {
            color: #999;
            font-size: 13px;
            text-align: center;
            padding: 20px 0;
        }

.column-list-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 15px;
            color: #222;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(0,0,0,0.1);
        }

.column-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

.column-item {
            display: block;
            padding: 12px 16px;
            background: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(8px);
            border-radius: 10px;
            text-decoration: none;
            color: #333;
            transition: all 0.3s;
            font-weight: 500;
        }

.column-item:hover {
            background: rgba(255, 255, 255, 0.8);
            transform: translateX(5px);
        }

.column-item.active {
            background: #667eea;
            color: #fff;
        }

.column-item .column-name {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 4px;
        }

.column-item .column-desc {
            font-size: 12px;
            color: #666;
            line-height: 1.4;
        }

.column-item.active .column-desc {
            color: rgba(255, 255, 255, 0.8);
        }

/* 中间：文章内容 */
        .main-content {
            flex: 1;
            min-width: 0;
        }

.article {
            background: #ffffff;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

.article-header { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid rgba(0,0,0,0.1); }

.article-title { font-size: 32px; margin-bottom: 15px; color: #333; }

.article-meta { color: #666; font-size: 14px; }

.article-meta a { color: #667eea; text-decoration: none; }

.article-content { font-size: 16px; line-height: 1.8; }

.article-content h1, .article-content h2, .article-content h3 { margin: 30px 0 15px; color: #333; }

.article-content h1 { font-size: 28px; }

.article-content h2 { font-size: 24px; }

.article-content h3 { font-size: 20px; }

.article-content p { margin-bottom: 20px; }

.article-content code { background: #f5f5f5; padding: 2px 6px; border-radius: 4px; font-family: monospace; }

.article-content pre { background: #f5f5f5; padding: 20px; border-radius: 8px; overflow-x: auto; margin: 20px 0; position: relative; }

.article-content pre code { background: none; padding: 0; }

/* 代码块复制按钮 */
        .code-copy-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            padding: 4px 10px;
            background: #e0e0e0;
            border: none;
            border-radius: 4px;
            font-size: 12px;
            color: #666;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.2s, background 0.2s;
        }

.article-content pre:hover .code-copy-btn { opacity: 1; }

.code-copy-btn:hover { background: #d0d0d0; }

.code-copy-btn.copied { background: #4caf50; color: #fff; }

.article-content blockquote { border-left: 4px solid #667eea; margin: 20px 0; padding: 10px 20px; background: #f8f9fa; }

.article-content ul, .article-content ol { margin: 20px 0; padding-left: 30px; }

.article-content li { margin-bottom: 10px; }

.article-content a { color: #667eea; }

.article-content img { max-width: 100%; border-radius: 8px; margin: 20px 0; }

/* 点赞按钮 */
        .like-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            background: #f0f0f0;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            color: #666;
            transition: all 0.3s;
        }

.like-btn:hover { background: #e0e0e0; }

.like-btn.liked { background: #ff6b6b; color: #fff; }

.like-btn.liked:hover { background: #ff5252; }

/* 文章底部操作栏 */
        .article-actions {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid rgba(0,0,0,0.1);
            display: flex;
            justify-content: center;
            gap: 20px;
        }

/* 评论区域 */
        .comments-section {
            margin-top: 40px;
            padding-top: 30px;
            border-top: 2px solid rgba(0,0,0,0.1);
        }

.comments-section h2 {
            font-size: 20px;
            margin-bottom: 20px;
            color: #333;
        }

.comment-form {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 12px;
            margin-bottom: 30px;
        }

.comment-form textarea {
            width: 100%;
            min-height: 100px;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
            resize: vertical;
        }

.comment-form .btn {
            margin-top: 10px;
            padding: 10px 24px;
            background: #667eea;
            color: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
        }

.comment-list { margin-top: 20px; }

.comment-item {
            padding: 15px 0;
            border-bottom: 1px solid #f0f0f0;
            scroll-margin-top: 120px;
        }

.comment-item:last-child { border-bottom: none; }

.comment-item:target {
            margin-right: -18px;
            margin-left: -18px;
            padding-right: 18px;
            padding-left: 18px;
            border-radius: 14px;
            background: rgba(230, 245, 255, 0.72);
            box-shadow:
                0 0 0 3px rgba(151, 200, 255, 0.24),
                0 10px 28px rgba(132, 172, 255, 0.16);
            animation: commentTargetGlow 1.8s ease-out;
        }

@keyframes commentTargetGlow {
            0% {
                box-shadow:
                    0 0 0 5px rgba(168, 190, 255, 0.42),
                    0 14px 34px rgba(132, 172, 255, 0.22);
            }

            100% {
                box-shadow:
                    0 0 0 3px rgba(151, 200, 255, 0.24),
                    0 10px 28px rgba(132, 172, 255, 0.16);
            }
        }

.comment-header {
            display: flex;
            align-items: center;       /* 垂直居中对齐 */
            gap: 8px;                  /* 元素之间的固定间隔，不用再手动加 margin */
            margin-bottom: 8px;
        }

.comment-author { font-weight: bold; color: #667eea; }

.comment-date { color: #999; font-size: 12px; }

.comment-content { color: #333; line-height: 1.6; }

.comment-actions { margin-top: 8px; }

.comment-actions button { background: none; border: none; color: #667eea; cursor: pointer; font-size: 12px; padding: 0; }

.comment-actions button:hover { text-decoration: underline; }

.comment-reply { margin-left: 30px; padding: 12px; background: #f8f9fa; border-radius: 8px; margin-top: 10px; }

.reply-form { margin-top: 10px; padding: 15px; background: #f8f9fa; border-radius: 8px; display: none; }

.reply-form.show { display: block; }

.reply-form textarea { min-height: 80px; width: 100%; }

.reply-form .btn-group { display: flex; gap: 10px; margin-top: 10px; }

.comment-login-prompt {
            text-align: center;
            padding: 20px;
            color: #666;
            background: #f8f9fa;
            border-radius: 8px;
        }

/* 横向表单 */
        .form-row { display: flex; gap: 15px; margin-bottom: 15px; }

.form-row .form-group { flex: 1; }

.form-group { margin-bottom: 15px; }

.form-group label { display: block; margin-bottom: 8px; font-weight: 500; }

.form-group input {
            width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px;
        }

/* 用户信息栏 */
        .user-info { display: none; align-items: center; gap: 10px; margin-bottom: 15px; padding: 10px; background: #fff; border-radius: 8px; }

.user-info.show { display: flex; }

.avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;   /* 防止被挤压变形 */
        }

.avatar-sm {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 8px;  /* 与昵称保持一点间距 */
            flex-shrink: 0;
        }

/* 内联访客认证栏 */
.visitor-auth-panel {
    display: none;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid rgba(172, 205, 255, 0.52);
    border-radius: 16px;
    background:
        radial-gradient(circle at 8% 12%, rgba(255, 255, 255, 0.92) 0 30px, transparent 36px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(239, 249, 255, 0.68));
    box-shadow: 0 12px 28px rgba(95, 138, 202, 0.08);
}

.visitor-auth-panel.show {
    display: block;
}

.visitor-auth-panel.is-attention {
    box-shadow:
        0 0 0 3px rgba(126, 202, 255, 0.18),
        0 16px 34px rgba(95, 138, 202, 0.12);
}

.visitor-auth-main {
    display: flex;
    align-items: center;
    gap: 14px;
}

.visitor-auth-avatar {
    width: 42px;
    height: 42px;
    margin-right: 0;
    background: #f4fbff;
    border: 1px solid rgba(126, 202, 255, 0.34);
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.64);
}

.visitor-auth-fields {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(260px, 1.55fr) 118px;
    gap: 8px;
    flex: 1;
}

.visitor-auth-input {
    display: flex;
    align-items: center;
    min-width: 0;
    border: 1px solid rgba(190, 202, 218, 0.86);
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.82);
}

.visitor-auth-input span {
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0 13px;
    color: #566070;
    background: rgba(245, 247, 250, 0.92);
    border-right: 1px solid rgba(205, 214, 226, 0.82);
    font-size: 14px;
    white-space: nowrap;
}

.visitor-auth-input input {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 12px;
    border: 0;
    outline: none;
    background: transparent;
    color: #344054;
    font-size: 14px;
}

.visitor-auth-input input::placeholder {
    color: #a9b1c0;
}

.visitor-auth-send,
.visitor-auth-confirm {
    height: 36px;
    border: 0;
    border-radius: 7px;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #8ecbff 0%, #9b8cff 100%);
    box-shadow: 0 8px 18px rgba(114, 146, 235, 0.18);
}

.visitor-auth-send:disabled,
.visitor-auth-confirm:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.visitor-auth-code-row {
    display: none;
    grid-template-columns: minmax(220px, 1fr) 120px;
    gap: 8px;
    margin: 12px 0 0 56px;
}

.visitor-auth-code-row.show {
    display: grid;
}

.visitor-auth-hint {
    margin: 9px 0 0 56px;
    color: #7a8699;
    font-size: 12px;
}

/* 用户信息栏（已登录） */
        .user-info-bar {
            display: none;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
        }

.user-info-bar.show {
            display: flex;
        }

.user-info-bar .user-nickname {
            font-weight: bold;
            color: #667eea;
        }

.user-info-bar .logout-btn {
            margin-left: auto;
            color: #666;
            cursor: pointer;
            font-size: 14px;
        }

.user-info-bar .logout-btn:hover {
            color: #ff385c;
        }

/* 评论输入区域 */
        #commentInputArea {
            display: none;
        }

#commentInputArea.show {
            display: block;
        }

/* 弹窗样式 */
        .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; }

.modal.show { display: flex; align-items: center; justify-content: center; }

.modal-content { background: #fff; padding: 30px; border-radius: 12px; width: 90%; max-width: 500px; }

.error-msg { color: #dc3545; font-size: 14px; margin-top: 5px; display: none; }

.error-msg.show { display: block; }

/* 右侧：文章目录 */
        .right-sidebar {
            width: 200px;
            flex-shrink: 0;
        }

.toc-sticky {
            position: sticky;
            top: 100px;
        }

.toc-box {
            background: #ffffff;
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

.toc-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 15px;
            color: #333;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(0,0,0,0.1);
        }

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

.toc-list li { margin-bottom: 8px; }

.toc-list a { color: #666; text-decoration: none; font-size: 14px; display: block; padding: 4px 0; transition: color 0.2s; }

.toc-list a:hover { color: #667eea; }

.toc-h2 { padding-left: 15px; }

.toc-h3 { padding-left: 30px; font-size: 13px; }

.empty {
            text-align: center;
            padding: 40px;
            color: #666;
        }

/* 浅色星河阅读舱：只做局部玻璃和微光，避免大面积深色背景影响阅读。 */
        body {
            min-height: 100vh;
            overflow-x: hidden;
            background:
                radial-gradient(circle at 8% 68%, rgba(177, 220, 255, 0.20) 0 160px, transparent 168px),
                radial-gradient(circle at 92% 36%, rgba(197, 187, 255, 0.16) 0 150px, transparent 158px),
                radial-gradient(circle at 50% 92%, rgba(255, 255, 255, 0.72) 0 220px, transparent 230px),
                linear-gradient(180deg, #f8fbff 0%, #f4f6fb 48%, #f7f8fc 100%);
        }

.page-wrapper {
            max-width: 1540px;
            padding: 0 24px;
            grid-template-columns: 230px minmax(0, 980px) 230px;
            gap: 26px;
            align-items: start;
        }

.post-toc,
        .right-sidebar {
            width: auto;
            overflow: visible;
            scrollbar-width: thin;
        }

.main-content {
            width: 100%;
        }

.post-toc,
        .main-content,
        .right-sidebar {
            position: relative;
            z-index: 1;
        }

.toc-box,
        .reading-stats-card,
        .column-posts-box,
        .article {
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.78) 0 44px, transparent 50px),
                radial-gradient(circle at 92% 12%, rgba(190, 212, 255, 0.18) 0 72px, transparent 80px),
                linear-gradient(145deg, rgba(255, 255, 255, 0.88) 0%, rgba(243, 249, 255, 0.78) 54%, rgba(248, 247, 255, 0.72) 100%);
            border: 1px solid rgba(186, 214, 255, 0.62);
            box-shadow:
                0 18px 46px rgba(94, 128, 190, 0.10),
                inset 0 1px 0 rgba(255, 255, 255, 0.84);
            backdrop-filter: blur(10px);
        }

.article {
            border-radius: 24px;
            padding: 46px 52px;
            color: #26313f;
            background:
                radial-gradient(circle at 14% 8%, rgba(255, 255, 255, 0.96) 0 58px, transparent 66px),
                radial-gradient(circle at 86% 10%, rgba(136, 211, 255, 0.30) 0 112px, transparent 126px),
                radial-gradient(circle at 94% 58%, rgba(184, 156, 255, 0.24) 0 150px, transparent 168px),
                radial-gradient(circle at 18% 88%, rgba(105, 210, 235, 0.20) 0 138px, transparent 154px),
                linear-gradient(145deg, rgba(255, 255, 255, 0.90) 0%, rgba(237, 249, 255, 0.82) 42%, rgba(247, 244, 255, 0.78) 78%, rgba(255, 255, 255, 0.86) 100%);
            border-color: rgba(178, 210, 255, 0.78);
            box-shadow:
                0 24px 62px rgba(91, 126, 196, 0.14),
                0 0 46px rgba(146, 205, 255, 0.10),
                inset 0 1px 0 rgba(255, 255, 255, 0.92),
                inset 0 -26px 62px rgba(175, 160, 255, 0.08);
        }

.article::before,
        .article::after,
        .toc-box::before,
        .column-posts-box::before {
            content: "";
            position: absolute;
            pointer-events: none;
            z-index: 0;
        }

.article::before {
            top: 18px;
            right: 22px;
            width: 150px;
            height: 120px;
            opacity: 0.68;
            background:
                radial-gradient(circle at 8% 18%, rgba(255, 255, 255, 0.96) 0 2px, transparent 3px),
                radial-gradient(circle at 14% 28%, rgba(134, 207, 255, 0.70) 0 3px, transparent 4px),
                radial-gradient(circle at 30% 52%, rgba(180, 160, 255, 0.54) 0 2px, transparent 3px),
                radial-gradient(circle at 48% 16%, rgba(255, 255, 255, 0.84) 0 4px, transparent 5px),
                radial-gradient(circle at 76% 50%, rgba(176, 164, 255, 0.62) 0 5px, transparent 6px),
                radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.70) 0 2px, transparent 3px),
                radial-gradient(circle at 40% 78%, rgba(150, 218, 255, 0.52) 0 3px, transparent 4px);
        }

.article::after {
            left: -44px;
            bottom: -54px;
            width: 210px;
            height: 180px;
            border-radius: 50%;
            opacity: 0.42;
            background:
                radial-gradient(circle at 50% 50%, rgba(138, 211, 255, 0.44) 0 28%, rgba(176, 164, 255, 0.26) 48%, transparent 70%),
                radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.62) 0 4px, transparent 5px);
        }

.article > * {
            position: relative;
            z-index: 1;
        }

.toc-box,
        .reading-stats-card,
        .column-posts-box {
            border-radius: 18px;
            padding: 20px;
        }

.toc-box::before,
        .column-posts-box::before {
            inset: 0;
            opacity: 0.24;
            background:
                radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.92) 0 3px, transparent 4px),
                radial-gradient(circle at 72% 24%, rgba(154, 214, 255, 0.62) 0 3px, transparent 4px),
                radial-gradient(circle at 84% 78%, rgba(184, 172, 255, 0.48) 0 4px, transparent 5px);
        }

.toc-title,
        .column-posts-title {
            position: relative;
            z-index: 1;
            color: #263650;
            border-bottom: 1px solid rgba(151, 184, 236, 0.34);
        }

.toc-title::before {
            content: "✦";
            margin-right: 8px;
            color: #7d9dff;
            text-shadow: 0 0 10px rgba(125, 157, 255, 0.36);
        }

.toc-list,
        .column-post-list {
            position: relative;
            z-index: 1;
        }

.toc-list a,
        .column-post-item a {
            border-radius: 10px;
            padding: 7px 9px;
            color: #435064;
            transition: color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
        }

.toc-list a:hover,
        .column-post-item a:hover {
            color: #526fe6;
            background: rgba(235, 246, 255, 0.72);
            box-shadow: 0 8px 18px rgba(126, 166, 238, 0.12);
            transform: translateX(2px);
            text-decoration: none;
        }

.reading-stats-card {
            margin-top: 14px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            padding: 14px;
        }

.reading-stat {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            min-height: 42px;
            border-radius: 14px;
            color: #31405a;
            background: rgba(255, 255, 255, 0.58);
            border: 1px solid rgba(196, 225, 255, 0.56);
        }

.reading-stat-icon {
            filter: drop-shadow(0 0 8px rgba(124, 172, 255, 0.28));
        }

.reading-stat-value {
            font-weight: 700;
        }

.column-posts-box {
            border-top: 1px solid rgba(186, 214, 255, 0.62);
        }

.column-post-item {
            border-bottom: 1px solid rgba(151, 184, 236, 0.18);
        }

.column-post-item.current a {
            color: #4f67d8;
            font-weight: 700;
            background: linear-gradient(90deg, rgba(222, 240, 255, 0.88), rgba(244, 241, 255, 0.62));
            box-shadow: inset 3px 0 0 rgba(126, 157, 255, 0.76);
        }

.column-post-date {
            padding-left: 9px;
            color: #8290a6;
        }

.article-content {
            font-size: 17px;
            line-height: 1.92;
            color: #253242;
        }

.article-content h1,
        .article-content h2,
        .article-content h3 {
            position: relative;
            color: #22304a;
            scroll-margin-top: 96px;
        }

.article-content h2::before,
        .article-content h3::before {
            content: "";
            display: inline-block;
            width: 18px;
            height: 8px;
            margin-right: 10px;
            border-radius: 999px;
            vertical-align: 0.12em;
            background: linear-gradient(90deg, #8ad7ff, #a99cff);
            box-shadow: 0 0 14px rgba(139, 176, 255, 0.30);
        }

.article-content a {
            color: #526fe6;
            text-decoration: none;
            background-image: linear-gradient(90deg, rgba(138, 215, 255, 0.64), rgba(169, 156, 255, 0.64));
            background-repeat: no-repeat;
            background-size: 100% 1px;
            background-position: 0 100%;
        }

.article-content a:hover {
            color: #384fd2;
            background-size: 100% 2px;
        }

.article-content blockquote {
            border-left: 4px solid rgba(126, 157, 255, 0.74);
            background:
                radial-gradient(circle at 92% 18%, rgba(255, 255, 255, 0.88) 0 5px, transparent 6px),
                linear-gradient(135deg, rgba(236, 248, 255, 0.82), rgba(247, 244, 255, 0.72));
            border-radius: 14px;
            color: #344158;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.80);
        }

.article-content code {
            color: #25617c;
            background: rgba(226, 246, 255, 0.86);
            border: 1px solid rgba(165, 221, 246, 0.58);
            border-radius: 7px;
        }

.article-content pre {
            color: #dcecff;
            background:
                radial-gradient(circle at 90% 12%, rgba(126, 157, 255, 0.20) 0 72px, transparent 80px),
                linear-gradient(135deg, #172036 0%, #20294a 100%);
            border: 1px solid rgba(159, 190, 255, 0.22);
            box-shadow: 0 16px 36px rgba(37, 54, 95, 0.16);
        }

.article-content pre code {
            color: inherit;
            border: none;
            background: none;
        }

.article-content ul li::marker,
        .article-content ol li::marker {
            color: #7b91ff;
            font-weight: 700;
        }

.article-content img {
            display: block;
            border-radius: 14px;
            border: 1px solid rgba(176, 218, 255, 0.62);
            box-shadow: 0 18px 42px rgba(83, 122, 180, 0.14);
        }

.comment-form,
        .comment-reply,
        .reply-form,
        .user-info-bar,
        .comment-login-prompt {
            background: rgba(247, 251, 255, 0.78);
            border: 1px solid rgba(199, 224, 255, 0.52);
        }

.like-btn {
            background: rgba(238, 247, 255, 0.92);
            border: 1px solid rgba(181, 219, 255, 0.72);
            color: #435064;
        }

.like-btn:hover {
            background: rgba(228, 241, 255, 0.96);
            box-shadow: 0 10px 22px rgba(126, 166, 238, 0.14);
        }

@keyframes solarFloat {
            0%, 100% {
                transform: translate3d(0, 0, 0) rotate(-1deg);
            }

            50% {
                transform: translate3d(8px, -8px, 0) rotate(2deg);
            }
        }

@keyframes planetOrbitOuter {
            to {
                transform: rotate(360deg);
            }
        }

@keyframes planetOrbitMiddle {
            to {
                transform: rotate(360deg);
            }
        }

@keyframes planetOrbitInner {
            to {
                transform: rotate(360deg);
            }
        }

/* 秋景古风文章页覆盖：只作用于文章详情页，避免影响公共导航和其他前台页面。 */
body {
    color: #3f3228;
    background:
        radial-gradient(circle at 10% 74%, rgba(207, 126, 48, 0.12) 0 180px, transparent 198px),
        radial-gradient(circle at 88% 34%, rgba(238, 193, 98, 0.12) 0 190px, transparent 210px),
        radial-gradient(circle at 54% 92%, rgba(255, 250, 232, 0.82) 0 240px, transparent 260px),
        linear-gradient(180deg, #fbf3e5 0%, #f8efe0 44%, #f5ead9 100%);
}

.header .nav {
    gap: 10px;
    padding: 8px 14px;
    border: 1px solid rgba(232, 190, 113, 0.34);
    border-radius: 999px;
    background: rgba(66, 38, 20, 0.20);
    box-shadow:
        0 14px 32px rgba(53, 31, 18, 0.20),
        inset 0 1px 0 rgba(255, 244, 210, 0.18);
    backdrop-filter: blur(8px);
}

.header .nav a {
    color: #fff4d4;
    text-shadow:
        0 2px 8px rgba(38, 20, 9, 0.82),
        0 0 12px rgba(244, 184, 72, 0.20);
}

.header .nav a::after {
    background: linear-gradient(90deg, #f7cf78, #d56f2f);
    box-shadow: 0 0 12px rgba(236, 154, 54, 0.36);
}

.header .nav a:hover {
    color: #ffd27a;
    text-shadow:
        0 2px 8px rgba(38, 20, 9, 0.90),
        0 0 18px rgba(236, 154, 54, 0.38);
}

.header .blog-title {
    padding: 8px 16px;
    border: 1px solid rgba(247, 211, 137, 0.50);
    border-radius: 16px 6px 16px 6px;
    color: #fff0c7;
    background:
        linear-gradient(135deg, rgba(71, 42, 22, 0.34), rgba(255, 238, 192, 0.12));
    box-shadow:
        0 14px 28px rgba(46, 25, 12, 0.22),
        inset 0 1px 0 rgba(255, 248, 218, 0.28);
    text-shadow:
        0 2px 10px rgba(45, 24, 10, 0.88),
        0 0 16px rgba(244, 189, 93, 0.24);
    backdrop-filter: blur(8px);
}

.video-title {
    color: #fff3cf;
    text-shadow:
        0 3px 14px rgba(40, 20, 8, 0.72),
        0 0 22px rgba(213, 115, 38, 0.20);
}

.video-meta,
.video-excerpt {
    color: rgba(255, 241, 207, 0.92);
    text-shadow: 0 2px 9px rgba(37, 20, 8, 0.70);
}

.toc-box,
.reading-stats-card,
.column-posts-box,
.article {
    background:
        radial-gradient(circle at 12% 10%, rgba(255, 252, 239, 0.86) 0 46px, transparent 54px),
        radial-gradient(circle at 92% 14%, rgba(229, 148, 56, 0.10) 0 82px, transparent 96px),
        linear-gradient(145deg, rgba(255, 250, 237, 0.88), rgba(250, 235, 211, 0.76) 58%, rgba(255, 247, 229, 0.82));
    border-color: rgba(218, 164, 82, 0.42);
    box-shadow:
        0 20px 50px rgba(112, 65, 30, 0.12),
        inset 0 1px 0 rgba(255, 251, 236, 0.86);
}

.article {
    color: #3b2d24;
    background:
        radial-gradient(circle at 14% 8%, rgba(255, 253, 244, 0.98) 0 64px, transparent 76px),
        radial-gradient(circle at 88% 12%, rgba(225, 133, 42, 0.13) 0 128px, transparent 148px),
        radial-gradient(circle at 94% 64%, rgba(238, 195, 92, 0.12) 0 160px, transparent 178px),
        linear-gradient(145deg, rgba(255, 251, 239, 0.93), rgba(249, 235, 212, 0.86) 48%, rgba(255, 248, 231, 0.90));
    border-color: rgba(221, 164, 78, 0.54);
    box-shadow:
        0 26px 68px rgba(112, 65, 30, 0.16),
        0 0 42px rgba(226, 151, 55, 0.08),
        inset 0 1px 0 rgba(255, 253, 241, 0.94),
        inset 0 -30px 66px rgba(190, 102, 35, 0.06);
}

.article::before {
    opacity: 0.46;
    background:
        radial-gradient(circle at 8% 18%, rgba(255, 244, 210, 0.90) 0 2px, transparent 3px),
        radial-gradient(circle at 22% 44%, rgba(226, 127, 44, 0.32) 0 7px, transparent 9px),
        radial-gradient(circle at 58% 22%, rgba(241, 191, 91, 0.42) 0 5px, transparent 7px),
        radial-gradient(circle at 78% 64%, rgba(177, 91, 38, 0.24) 0 9px, transparent 12px);
}

.article::after {
    opacity: 0.34;
    background:
        radial-gradient(circle at 50% 50%, rgba(229, 146, 53, 0.28) 0 30%, rgba(238, 193, 98, 0.18) 50%, transparent 72%),
        radial-gradient(circle at 72% 24%, rgba(255, 247, 214, 0.62) 0 4px, transparent 5px);
}

.toc-box::before,
.column-posts-box::before {
    opacity: 0.20;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 245, 214, 0.90) 0 3px, transparent 4px),
        radial-gradient(circle at 74% 25%, rgba(222, 129, 40, 0.32) 0 5px, transparent 7px),
        radial-gradient(circle at 86% 78%, rgba(237, 191, 95, 0.34) 0 6px, transparent 8px);
}

.toc-title,
.column-posts-title {
    color: #5b3d25;
    border-bottom-color: rgba(202, 143, 67, 0.30);
}

.toc-title::before {
    content: "❧";
    color: #c8742c;
    text-shadow: 0 0 10px rgba(221, 135, 47, 0.26);
}

.toc-list a,
.column-post-item a {
    color: #604936;
}

.toc-list a:hover,
.column-post-item a:hover {
    color: #b65d25;
    background: rgba(255, 244, 224, 0.78);
    box-shadow: 0 8px 18px rgba(158, 91, 34, 0.12);
}

.reading-stat {
    color: #5e412c;
    background: rgba(255, 249, 234, 0.68);
    border-color: rgba(222, 165, 85, 0.38);
}

.reading-stat-icon {
    filter: drop-shadow(0 0 8px rgba(218, 133, 50, 0.24));
}

.column-posts-box {
    border-top-color: rgba(221, 164, 78, 0.54);
}

.column-post-item {
    border-bottom-color: rgba(202, 143, 67, 0.18);
}

.column-post-item.current a {
    color: #7a3f16;
    background: linear-gradient(90deg, rgba(255, 225, 160, 0.90), rgba(246, 183, 91, 0.42));
    box-shadow: inset 3px 0 0 rgba(204, 99, 30, 0.78);
}

.column-post-date {
    color: #9b8065;
}

.article-content {
    color: #3c3027;
}

.article-content h1,
.article-content h2,
.article-content h3 {
    color: #4a321f;
}

.article-content h2::before,
.article-content h3::before {
    background: linear-gradient(90deg, #d36c2d, #f0c36b);
    box-shadow: 0 0 14px rgba(222, 136, 45, 0.24);
}

.article-content a {
    color: #a65422;
    background-image: linear-gradient(90deg, rgba(210, 108, 45, 0.62), rgba(240, 195, 107, 0.70));
}

.article-content a:hover {
    color: #783512;
}

.article-content blockquote {
    border-left-color: rgba(197, 100, 36, 0.70);
    color: #574232;
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 245, 216, 0.80) 0 5px, transparent 6px),
        linear-gradient(135deg, rgba(255, 245, 224, 0.84), rgba(251, 229, 198, 0.72));
}

.article-content code {
    color: #814112;
    background: rgba(255, 237, 203, 0.92);
    border-color: rgba(221, 155, 72, 0.48);
}

.article-content pre {
    color: #f8ead6;
    background:
        radial-gradient(circle at 90% 12%, rgba(210, 108, 45, 0.18) 0 72px, transparent 80px),
        linear-gradient(135deg, #2b211b 0%, #46301f 100%);
    border-color: rgba(218, 156, 82, 0.30);
    box-shadow: 0 16px 36px rgba(84, 47, 23, 0.18);
}

.article-content ul li::marker,
.article-content ol li::marker {
    color: #c86a28;
}

.article-content img {
    border-color: rgba(218, 164, 82, 0.52);
    box-shadow: 0 18px 42px rgba(112, 65, 30, 0.14);
}

.comment-form,
.comments-section,
.comment-item,
.comment-reply,
.reply-form,
.user-info-bar,
.comment-login-prompt {
    background: rgba(255, 248, 232, 0.78);
    border-color: rgba(220, 164, 84, 0.40);
}

.comment-author,
.comment-form h3,
.comments-section h3 {
    color: #7a421d;
}

.like-btn {
    color: #684833;
    background: rgba(255, 242, 214, 0.94);
    border-color: rgba(221, 156, 73, 0.58);
}

.like-btn:hover {
    background: rgba(255, 231, 178, 0.96);
    box-shadow: 0 10px 22px rgba(158, 91, 34, 0.14);
}

.back-to-top-ship {
    border-color: rgba(223, 171, 86, 0.62);
    background:
        radial-gradient(circle at 28% 20%, rgba(255, 247, 218, 0.88) 0 16px, transparent 20px),
        linear-gradient(145deg, rgba(255, 249, 232, 0.82), rgba(249, 228, 187, 0.70) 52%, rgba(232, 156, 72, 0.40));
    box-shadow:
        0 16px 34px rgba(128, 72, 31, 0.16),
        inset 0 1px 0 rgba(255, 251, 233, 0.86);
}

/* 秋景细节二次调整：提升导航可读性、评论宽度和高粱返回顶部识别度。 */
.header .nav {
    gap: 24px;
    padding: 9px 20px;
}

.header .nav a {
    padding-left: 10px;
    padding-right: 10px;
}

.header .blog-title {
    color: transparent;
    background:
        linear-gradient(135deg, rgba(42, 23, 12, 0.44), rgba(255, 238, 192, 0.14)),
        linear-gradient(105deg, #fff7d7 0%, #d7dbe2 34%, #ffe49b 58%, #f8f9ff 78%, #c88a31 100%);
    background-clip: padding-box, text;
    -webkit-background-clip: padding-box, text;
    -webkit-text-fill-color: transparent;
    border-color: rgba(255, 226, 156, 0.68);
    box-shadow:
        0 16px 34px rgba(39, 20, 8, 0.30),
        0 0 24px rgba(255, 214, 130, 0.18),
        inset 0 1px 0 rgba(255, 248, 218, 0.36);
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.28),
        0 3px 12px rgba(0, 0, 0, 0.56),
        0 0 18px rgba(255, 213, 126, 0.30);
}

.comments-section {
    width: calc(100% + 36px);
    margin-left: -18px;
    margin-right: -18px;
    padding: 30px 28px;
    border-radius: 22px;
    box-shadow:
        inset 0 1px 0 rgba(255, 252, 240, 0.68),
        0 18px 42px rgba(112, 65, 30, 0.08);
}

.comment-form,
.comment-list {
    width: 100%;
}

.comment-form {
    padding: 24px 26px;
    border-radius: 20px;
}

.comment-list {
    margin-top: 26px;
}

.comment-item {
    padding: 22px 24px;
    border-radius: 18px;
}

.comment-item:target {
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 28px;
    padding-right: 28px;
}

.comment-reply {
    margin-left: 38px;
    padding: 18px 20px;
    border-radius: 16px;
}

.back-to-top-ship svg {
    width: 78%;
    height: 78%;
    margin-top: 6px;
}

.back-to-top-ship .wheat-head {
    filter:
        drop-shadow(0 0 8px rgba(255, 208, 112, 0.30))
        drop-shadow(0 8px 12px rgba(112, 56, 24, 0.12));
    transform-origin: 36px 62px;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.back-to-top-ship:hover .wheat-head,
.back-to-top-ship.is-launching .wheat-head {
    transform: translateY(-3px) rotate(-4deg);
    filter:
        drop-shadow(0 0 12px rgba(255, 215, 128, 0.42))
        drop-shadow(0 10px 16px rgba(112, 56, 24, 0.16));
}

.back-to-top-ship .wheat-awn {
    fill: none;
    stroke: rgba(139, 82, 35, 0.68);
    stroke-width: 1.5;
    stroke-linecap: round;
}

.back-to-top-ship .wheat-leaf {
    fill: rgba(199, 128, 43, 0.42);
}

.back-to-top-wheat-icon {
    display: block;
    font-size: 31px;
    line-height: 58px;
    text-align: center;
    transform-origin: 50% 72%;
    filter:
        drop-shadow(0 0 8px rgba(255, 210, 112, 0.36))
        drop-shadow(0 7px 10px rgba(112, 56, 24, 0.16));
    transition: transform 0.25s ease, filter 0.25s ease;
}

.back-to-top-ship:hover .back-to-top-wheat-icon,
.back-to-top-ship.is-launching .back-to-top-wheat-icon {
    transform: translateY(-3px) rotate(-6deg);
    filter:
        drop-shadow(0 0 12px rgba(255, 218, 125, 0.46))
        drop-shadow(0 10px 14px rgba(112, 56, 24, 0.18));
}

.visitor-auth-panel {
    padding: 18px;
    border: 1px solid rgba(219, 159, 77, 0.48);
    border-radius: 18px;
    background:
        radial-gradient(circle at 8% 12%, rgba(255, 252, 236, 0.92) 0 34px, transparent 42px),
        radial-gradient(circle at 94% 18%, rgba(221, 129, 40, 0.12) 0 64px, transparent 78px),
        linear-gradient(135deg, rgba(255, 248, 231, 0.90), rgba(249, 232, 203, 0.74));
    box-shadow:
        0 16px 34px rgba(112, 65, 30, 0.10),
        inset 0 1px 0 rgba(255, 252, 240, 0.80);
}

.visitor-auth-panel.is-attention {
    box-shadow:
        0 0 0 3px rgba(238, 183, 92, 0.22),
        0 18px 38px rgba(142, 78, 30, 0.14),
        inset 0 1px 0 rgba(255, 252, 240, 0.86);
}

.visitor-auth-avatar {
    width: 46px;
    height: 46px;
    padding: 3px;
    border: 1px solid rgba(219, 159, 77, 0.58);
    background: rgba(255, 247, 226, 0.86);
    box-shadow:
        0 8px 18px rgba(112, 65, 30, 0.10),
        inset 0 0 10px rgba(255, 252, 238, 0.72);
}

.visitor-auth-input {
    border-color: rgba(207, 148, 70, 0.54);
    border-radius: 12px;
    background: rgba(255, 250, 235, 0.86);
    box-shadow: inset 0 1px 0 rgba(255, 255, 246, 0.66);
}

.visitor-auth-input:focus-within {
    border-color: rgba(204, 99, 30, 0.62);
    box-shadow:
        0 0 0 3px rgba(238, 183, 92, 0.18),
        inset 0 1px 0 rgba(255, 255, 246, 0.72);
}

.visitor-auth-input span {
    color: #724a2d;
    background:
        linear-gradient(135deg, rgba(255, 235, 189, 0.78), rgba(251, 221, 168, 0.54));
    border-right-color: rgba(207, 148, 70, 0.42);
}

.visitor-auth-input input {
    color: #4e3828;
}

.visitor-auth-input input::placeholder {
    color: rgba(123, 88, 63, 0.56);
}

.visitor-auth-send,
.visitor-auth-confirm {
    border-radius: 999px;
    color: #6f3f18;
    background:
        linear-gradient(135deg, #ffd998 0%, #ffc66d 48%, #fff0bc 100%);
    box-shadow:
        0 10px 20px rgba(190, 120, 38, 0.12),
        inset 0 1px 0 rgba(255, 253, 229, 0.62);
    text-shadow: 0 1px 0 rgba(255, 248, 219, 0.64);
}

.visitor-auth-send:hover,
.visitor-auth-confirm:hover {
    filter: brightness(1.06) saturate(1.06);
    box-shadow:
        0 12px 24px rgba(190, 120, 38, 0.16),
        0 0 18px rgba(255, 207, 112, 0.20),
        inset 0 1px 0 rgba(255, 253, 229, 0.72);
}

.visitor-auth-hint {
    color: #8a6447;
}

#commentInputArea > .btn {
    margin-top: 14px;
    padding: 11px 28px;
    min-width: 112px;
    border: 1px solid rgba(219, 159, 77, 0.54);
    border-radius: 999px;
    color: #6a3b18;
    background:
        linear-gradient(135deg, #fff0bc 0%, #ffd083 50%, #fff7d6 100%);
    box-shadow:
        0 12px 22px rgba(173, 104, 34, 0.12),
        inset 0 1px 0 rgba(255, 255, 239, 0.74);
    text-shadow: 0 1px 0 rgba(255, 248, 219, 0.68);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

#commentInputArea > .btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05) saturate(1.04);
    box-shadow:
        0 14px 26px rgba(173, 104, 34, 0.16),
        0 0 18px rgba(255, 211, 126, 0.22),
        inset 0 1px 0 rgba(255, 255, 239, 0.82);
}

.user-info-bar {
    border: 1px solid rgba(219, 159, 77, 0.46);
    border-radius: 16px;
    background:
        radial-gradient(circle at 10% 18%, rgba(255, 252, 238, 0.86) 0 36px, transparent 46px),
        linear-gradient(135deg, rgba(255, 248, 231, 0.88), rgba(249, 232, 203, 0.70));
    box-shadow:
        0 14px 30px rgba(112, 65, 30, 0.10),
        inset 0 1px 0 rgba(255, 252, 240, 0.72);
}

.user-info-bar .user-nickname {
    color: #8a4219;
}

.user-info-bar .logout-btn {
    color: #8d6748;
}

.user-info-bar .logout-btn:hover {
    color: #b85c24;
}

/* 对齐三栏首张卡片：正文卡片因内容区视觉更高，需要单独下移来贴合两侧卡片顶部。 */
.page-wrapper {
    align-items: start;
}

.post-toc,
.right-sidebar {
    align-self: start;
    margin-top: 0;
}

.main-content {
    align-self: start;
    margin-top: 100px;
    padding-top: 0;
}

.toc-box,
.article,
.column-posts-box {
    margin-top: 0;
    border-width: 1px;
}

.article {
    transform: none;
}

/* 文章页夏日顶部适配：与专栏页保持布局一致，同时清掉旧秋景色调。 */
body {
    color: #2f3d46;
    background:
        radial-gradient(circle at 10% 76%, rgba(178, 229, 255, 0.18) 0 190px, transparent 212px),
        radial-gradient(circle at 88% 34%, rgba(217, 252, 237, 0.16) 0 190px, transparent 214px),
        linear-gradient(180deg, #f7fbff 0%, #f4fbfb 48%, #f7fbff 100%);
}

.video-hero {
    height: 80vh;
    margin-bottom: 0;
}

.video-hero .video-bg {
    object-fit: cover;
    object-position: center 45%;
}

.top-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding: 12px 0;
    pointer-events: auto;
    border-bottom: none;
    background: transparent;
}

.top-header .container {
    max-width: 90%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.top-header .nav {
    position: relative;
    isolation: isolate;
    gap: 38px;
    padding: 9px 22px 10px;
    overflow: visible;
    border: 1px solid rgba(224, 252, 255, 0.66);
    border-radius: 999px;
    background:
        radial-gradient(circle at 8% 28%, rgba(255, 255, 255, 0.74) 0 7px, transparent 8px),
        radial-gradient(circle at 22% 74%, rgba(94, 210, 235, 0.18) 0 6px, transparent 7px),
        radial-gradient(circle at 43% 24%, rgba(255, 255, 255, 0.58) 0 5px, transparent 6px),
        radial-gradient(circle at 68% 70%, rgba(242, 242, 150, 0.18) 0 7px, transparent 8px),
        radial-gradient(circle at 90% 30%, rgba(229, 250, 255, 0.66) 0 8px, transparent 9px),
        linear-gradient(135deg, rgba(244, 254, 255, 0.66), rgba(188, 238, 252, 0.30) 48%, rgba(255, 250, 202, 0.18));
    box-shadow:
        0 16px 34px rgba(33, 132, 168, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        inset 0 -1px 0 rgba(113, 211, 231, 0.18);
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
}

.top-header .nav::before,
.top-header .nav::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.top-header .nav::before {
    left: 18px;
    right: 18px;
    bottom: 6px;
    height: 8px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 9% 50%, rgba(255, 255, 255, 0.62) 0 2px, transparent 3px),
        radial-gradient(circle at 29% 35%, rgba(116, 220, 243, 0.30) 0 3px, transparent 4px),
        radial-gradient(circle at 52% 55%, rgba(255, 255, 255, 0.48) 0 2px, transparent 3px),
        radial-gradient(circle at 76% 38%, rgba(251, 242, 154, 0.24) 0 3px, transparent 4px),
        linear-gradient(90deg, transparent, rgba(122, 224, 242, 0.32), rgba(230, 253, 255, 0.52), rgba(255, 246, 176, 0.22), transparent);
    opacity: 0.86;
}

.top-header .nav::after {
    right: -30px;
    top: -10px;
    width: 78px;
    height: 46px;
    border-radius: 48% 52% 44% 56%;
    opacity: 0.70;
    background:
        radial-gradient(circle at 30% 36%, rgba(255, 255, 255, 0.70) 0 5px, transparent 6px),
        radial-gradient(circle at 58% 58%, rgba(101, 213, 237, 0.22) 0 10px, transparent 11px),
        radial-gradient(ellipse at 46% 66%, rgba(255, 245, 159, 0.24) 0 16px, transparent 17px);
    filter: drop-shadow(0 6px 14px rgba(54, 146, 170, 0.11));
}

.top-header .nav a {
    z-index: 1;
    padding: 3px 8px 5px;
    border-radius: 999px;
    color: #143a50;
    font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    letter-spacing: 0.05em;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.84),
        0 8px 16px rgba(24, 91, 119, 0.14);
    background:
        radial-gradient(circle at 14% 20%, rgba(255, 255, 255, 0.40) 0 3px, transparent 4px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(221, 248, 255, 0));
    transition: color 0.25s ease, transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.top-header .nav a::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -9px;
    width: 18px;
    height: 12px;
    pointer-events: none;
    opacity: 0;
    border-radius: 999px 0 999px 0;
    border-top: 1px solid rgba(106, 190, 178, 0.30);
    background:
        radial-gradient(circle at 34% 48%, rgba(255, 255, 255, 0.78) 0 2px, transparent 3px),
        linear-gradient(135deg, rgba(142, 225, 203, 0.40), rgba(255, 250, 176, 0.22));
    transform: translateX(-50%) translateY(3px) rotate(-12deg);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.top-header .nav a::after {
    bottom: -5px;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(69, 188, 221, 0.88), rgba(142, 232, 210, 0.70), rgba(255, 247, 176, 0.68), transparent);
    box-shadow: 0 0 13px rgba(85, 197, 219, 0.26);
}

.top-header .nav a:hover {
    color: #1089ad;
    background:
        radial-gradient(circle at 16% 20%, rgba(255, 255, 255, 0.70) 0 4px, transparent 5px),
        linear-gradient(135deg, rgba(238, 253, 255, 0.40), rgba(255, 249, 194, 0.18));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.64),
        0 8px 18px rgba(56, 150, 174, 0.11);
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.90),
        0 8px 18px rgba(38, 126, 150, 0.18);
}

.top-header .nav a:hover::before {
    opacity: 0.86;
    transform: translateX(-50%) translateY(0) rotate(-12deg);
}

.top-header .blog-title {
    position: relative;
    padding: 10px 22px 11px;
    overflow: visible;
    border: 1px solid rgba(226, 252, 255, 0.68);
    border-radius: 28px 12px 28px 12px;
    color: #ecfcff;
    background:
        radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.38) 0 8px, transparent 9px),
        radial-gradient(circle at 84% 72%, rgba(107, 219, 238, 0.18) 0 14px, transparent 15px),
        linear-gradient(135deg, rgba(25, 112, 148, 0.30), rgba(119, 218, 238, 0.18) 52%, rgba(255, 247, 180, 0.16));
    box-shadow:
        0 16px 32px rgba(28, 108, 140, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.44),
        inset 0 -1px 0 rgba(125, 226, 236, 0.20);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -webkit-text-fill-color: currentColor;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.50),
        0 0 12px rgba(178, 240, 255, 0.40),
        0 7px 18px rgba(19, 76, 112, 0.22);
}

.top-header .blog-title::before,
.top-header .blog-title::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.top-header .blog-title::before {
    left: -10px;
    top: -8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    opacity: 0.76;
    background:
        radial-gradient(circle at 38% 38%, rgba(255, 255, 255, 0.74) 0 4px, transparent 5px),
        radial-gradient(circle at 66% 62%, rgba(120, 224, 244, 0.30) 0 11px, transparent 12px),
        radial-gradient(circle at 48% 48%, rgba(249, 254, 255, 0.44) 0 16px, transparent 17px);
    box-shadow:
        14px 7px 0 -12px rgba(255, 255, 255, 0.72),
        21px 15px 0 -15px rgba(255, 247, 178, 0.38);
}

.top-header .blog-title::after {
    right: -11px;
    bottom: -5px;
    width: 42px;
    height: 20px;
    border-radius: 999px 0 999px 0;
    opacity: 0.82;
    border-top: 1px solid rgba(134, 228, 210, 0.42);
    border-left: 1px solid rgba(134, 228, 210, 0.32);
    background:
        radial-gradient(circle at 70% 32%, rgba(255, 255, 255, 0.60) 0 3px, transparent 4px),
        linear-gradient(135deg, rgba(122, 224, 206, 0.24), rgba(255, 247, 178, 0.14));
    transform: rotate(-13deg);
    box-shadow: -16px -3px 0 -10px rgba(255, 245, 168, 0.34);
}

.video-title {
    color: #f0fcff;
    text-shadow:
        0 2px 12px rgba(24, 93, 126, 0.50),
        0 0 24px rgba(196, 244, 255, 0.28);
}

.video-meta,
.video-excerpt {
    color: rgba(241, 253, 255, 0.92);
    text-shadow: 0 2px 10px rgba(24, 93, 126, 0.46);
}

.toc-box,
.reading-stats-card,
.column-posts-box,
.article,
.comments-section,
.comment-form,
.comment-item,
.reply-form,
.user-info-bar {
    color: #2f3d46;
    border-color: rgba(180, 226, 241, 0.62);
    background:
        radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.88) 0 52px, transparent 62px),
        radial-gradient(circle at 90% 12%, rgba(183, 233, 250, 0.20) 0 96px, transparent 110px),
        linear-gradient(145deg, rgba(255, 255, 255, 0.90), rgba(238, 250, 255, 0.78) 58%, rgba(250, 252, 238, 0.70));
    box-shadow:
        0 20px 50px rgba(59, 137, 170, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.article::before,
.article::after {
    opacity: 0;
}

.article-content h1,
.article-content h2,
.article-content h3,
.comments-section h2,
.comment-form h3,
.toc-title,
.column-posts-title {
    color: #1d5d78;
}

.like-btn,
#commentInputArea > .btn,
.visitor-auth-send,
.visitor-auth-confirm {
    border-color: rgba(111, 202, 229, 0.56);
    color: #185a72;
    background: linear-gradient(135deg, #eefcff 0%, #bceef9 52%, #fff8c9 100%);
    box-shadow:
        0 12px 22px rgba(73, 157, 188, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.76);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

.like-btn:hover,
#commentInputArea > .btn:hover,
.visitor-auth-send:hover,
.visitor-auth-confirm:hover {
    box-shadow:
        0 14px 26px rgba(73, 157, 188, 0.16),
        0 0 18px rgba(174, 239, 255, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.meteor-layer,
.corner-autumn-birds,
.corner-solar-system {
    display: none;
}

/* Refresh article-side widgets so old warm highlights do not clash with the new summer video. */
.reading-stats-card {
    position: relative;
    gap: 12px;
    padding: 12px;
    overflow: hidden;
    border-color: rgba(153, 224, 239, 0.66);
    background:
        radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.88) 0 18px, transparent 19px),
        radial-gradient(circle at 86% 86%, rgba(255, 248, 187, 0.24) 0 24px, transparent 25px),
        linear-gradient(145deg, rgba(245, 254, 255, 0.82), rgba(219, 248, 255, 0.42) 58%, rgba(252, 255, 230, 0.30));
    box-shadow:
        0 16px 32px rgba(57, 149, 178, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.reading-stats-card::before {
    content: "";
    position: absolute;
    inset: 7px 10px auto;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(124, 224, 242, 0.48), rgba(255, 249, 181, 0.26), transparent);
}

.reading-stat {
    position: relative;
    min-height: 44px;
    overflow: hidden;
    color: #165b72;
    border: 1px solid rgba(122, 211, 232, 0.54);
    border-radius: 18px;
    background:
        radial-gradient(circle at 20% 22%, rgba(255, 255, 255, 0.78) 0 7px, transparent 8px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(201, 241, 251, 0.42) 58%, rgba(255, 250, 199, 0.28));
    box-shadow:
        0 10px 20px rgba(61, 151, 179, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.reading-stat::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.78);
    box-shadow:
        -18px 15px 0 -3px rgba(104, 213, 237, 0.22),
        5px 20px 0 -2px rgba(255, 247, 181, 0.28);
}

.reading-stat-icon {
    min-width: 18px;
    color: #118bad;
    font-size: 17px;
    line-height: 1;
    text-align: center;
    filter: drop-shadow(0 0 8px rgba(130, 229, 248, 0.36));
}

.reading-stat-value {
    color: #174e66;
    font-weight: 800;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82);
}

.visitor-auth-panel {
    position: relative;
    overflow: hidden;
    border-color: rgba(139, 220, 237, 0.64);
    background:
        radial-gradient(circle at 6% 20%, rgba(255, 255, 255, 0.84) 0 28px, transparent 34px),
        radial-gradient(circle at 90% 14%, rgba(126, 222, 242, 0.18) 0 72px, transparent 84px),
        radial-gradient(circle at 82% 92%, rgba(255, 248, 185, 0.24) 0 64px, transparent 76px),
        linear-gradient(135deg, rgba(247, 254, 255, 0.90), rgba(221, 249, 255, 0.64) 54%, rgba(255, 252, 224, 0.44));
    box-shadow:
        0 18px 40px rgba(59, 149, 178, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

.visitor-auth-panel::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(128, 228, 246, 0.58), rgba(255, 249, 186, 0.32), transparent);
}

.visitor-auth-panel.is-attention {
    box-shadow:
        0 0 0 3px rgba(128, 226, 246, 0.20),
        0 20px 44px rgba(59, 149, 178, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.visitor-auth-avatar {
    border-color: rgba(117, 211, 232, 0.62);
    background:
        radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.78) 0 5px, transparent 6px),
        linear-gradient(135deg, rgba(238, 253, 255, 0.92), rgba(196, 240, 250, 0.52));
    box-shadow:
        0 10px 20px rgba(59, 149, 178, 0.12),
        inset 0 0 12px rgba(255, 255, 255, 0.76);
}

.visitor-auth-input {
    border-color: rgba(128, 211, 232, 0.58);
    background: rgba(248, 254, 255, 0.82);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        0 8px 16px rgba(69, 157, 184, 0.06);
}

.visitor-auth-input:focus-within {
    border-color: rgba(48, 179, 211, 0.72);
    box-shadow:
        0 0 0 3px rgba(126, 226, 246, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.visitor-auth-input span {
    color: #236176;
    background:
        linear-gradient(135deg, rgba(232, 252, 255, 0.86), rgba(255, 250, 204, 0.34));
    border-right-color: rgba(128, 211, 232, 0.40);
}

.visitor-auth-input input {
    color: #244b5c;
}

.visitor-auth-input input::placeholder {
    color: rgba(83, 118, 132, 0.50);
}

.visitor-auth-hint {
    color: rgba(43, 91, 106, 0.72);
}

.column-post-item.current a {
    position: relative;
    overflow: hidden;
    color: #145b73;
    border: 1px solid rgba(122, 211, 232, 0.58);
    border-radius: 12px;
    background:
        radial-gradient(circle at 12% 30%, rgba(255, 255, 255, 0.78) 0 5px, transparent 6px),
        linear-gradient(90deg, rgba(232, 253, 255, 0.92), rgba(186, 236, 249, 0.56) 58%, rgba(255, 249, 194, 0.34));
    box-shadow:
        inset 4px 0 0 rgba(65, 190, 221, 0.62),
        0 10px 22px rgba(61, 151, 179, 0.12);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.80);
}

.column-post-item.current a::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.76);
    box-shadow:
        -18px -6px 0 -3px rgba(104, 213, 237, 0.28),
        -7px 9px 0 -4px rgba(255, 248, 182, 0.34);
    transform: translateY(-50%);
}

.column-post-item.current .column-post-date {
    color: rgba(27, 92, 112, 0.72);
}

/* Separate comments from the article card so the page reads as two clear sections instead of nested panels. */
.main-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.article {
    margin-bottom: 0;
}

.comments-section {
    position: relative;
    margin-top: 0;
    padding: 30px 32px 34px;
    overflow: hidden;
    border: 1px solid rgba(160, 226, 241, 0.62);
    border-radius: 24px;
    color: #2d4652;
    background:
        radial-gradient(circle at 10% 8%, rgba(255, 255, 255, 0.90) 0 72px, transparent 84px),
        radial-gradient(circle at 92% 12%, rgba(177, 236, 250, 0.22) 0 110px, transparent 126px),
        radial-gradient(circle at 82% 100%, rgba(255, 250, 202, 0.22) 0 110px, transparent 132px),
        linear-gradient(145deg, rgba(252, 254, 255, 0.92), rgba(235, 251, 255, 0.82) 58%, rgba(252, 255, 235, 0.72));
    box-shadow:
        0 22px 52px rgba(59, 137, 170, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.comments-section::before {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    top: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(118, 223, 244, 0.54), rgba(255, 249, 190, 0.30), transparent);
}

.comments-section h2 {
    margin: 0 0 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(142, 218, 235, 0.28);
    color: #1d5d78;
}

.comment-form {
    margin: 0 0 26px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.comment-form h3 {
    margin: 0 0 14px;
    color: #1d5d78;
}

.visitor-auth-panel {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-color: rgba(136, 218, 236, 0.46);
    border-radius: 18px;
    background:
        radial-gradient(circle at 4% 24%, rgba(255, 255, 255, 0.76) 0 20px, transparent 26px),
        linear-gradient(135deg, rgba(244, 254, 255, 0.74), rgba(218, 248, 255, 0.42) 56%, rgba(255, 252, 220, 0.26));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        0 8px 20px rgba(59, 149, 178, 0.06);
}

.visitor-auth-panel::before {
    left: 14px;
    right: 14px;
}

.visitor-auth-panel.is-attention {
    box-shadow:
        0 0 0 3px rgba(128, 226, 246, 0.18),
        0 10px 24px rgba(59, 149, 178, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

#commentInputArea textarea,
.reply-form textarea {
    border-color: rgba(146, 218, 236, 0.52);
    border-radius: 14px;
    color: #2d4652;
    background: rgba(255, 255, 255, 0.82);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.84),
        0 10px 24px rgba(59, 137, 170, 0.06);
}

#commentInputArea textarea:focus,
.reply-form textarea:focus {
    outline: none;
    border-color: rgba(55, 184, 215, 0.72);
    box-shadow:
        0 0 0 3px rgba(126, 226, 246, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.comment-list {
    margin-top: 24px;
    padding-top: 8px;
    border-top: 1px solid rgba(142, 218, 235, 0.24);
}

.comment-item {
    padding: 18px 0;
    border-bottom: 1px solid rgba(142, 218, 235, 0.20);
    background: transparent;
    box-shadow: none;
}

.comment-item:last-child {
    border-bottom: none;
}

.comment-item.comment-reply {
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(142, 218, 235, 0.22);
    border-radius: 16px;
    background: rgba(245, 253, 255, 0.48);
}

.reply-form {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid rgba(142, 218, 235, 0.24);
    border-radius: 16px;
    background: rgba(248, 254, 255, 0.54);
    box-shadow: none;
}

.user-info-bar {
    margin-bottom: 16px;
    border: 1px solid rgba(136, 218, 236, 0.42);
    border-radius: 16px;
    background: rgba(245, 253, 255, 0.66);
    box-shadow: none;
}

/* Article hero cards replace the centered title overlay to keep video metadata in one clear place. */
.post-hero-info-card,
.post-hero-poem-card {
    position: absolute;
    left: 50px;
    z-index: 50;
    max-width: calc(100vw - 80px);
    border: 1px solid rgba(205, 238, 255, 0.62);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 10px 28px rgba(78, 131, 164, 0.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.post-hero-info-card {
    top: 125px;
    width: 330px;
    padding: 20px 26px;
}

.post-hero-info-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(54, 118, 142, 0.14);
}

.post-hero-info-icon {
    font-size: 24px;
    line-height: 1;
    filter: drop-shadow(0 5px 10px rgba(68, 153, 174, 0.16));
}

.post-hero-info-title {
    color: #183e4f;
    font-size: 20px;
    font-weight: 650;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.74);
}

.post-hero-info-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.post-hero-info-item {
    display: flex;
    gap: 8px;
    min-width: 0;
    color: #263f4b;
    font-size: 14px;
    line-height: 1.55;
}

.post-hero-info-item--inline {
    gap: 26px;
    flex-wrap: wrap;
}

.post-hero-info-label {
    flex: 0 0 auto;
    color: rgba(45, 83, 98, 0.72);
}

.post-hero-info-value {
    min-width: 0;
    color: #142f3c;
    font-weight: 550;
    overflow-wrap: anywhere;
}

.post-hero-poem-card {
    top: calc(346px + 10vh);
    width: 440px;
    padding: 18px 24px 20px;
    overflow: hidden;
    color: #253f4b;
    background:
        radial-gradient(circle at 16% 18%, rgba(209, 249, 232, 0.42) 0 70px, transparent 82px),
        radial-gradient(circle at 84% 12%, rgba(204, 238, 255, 0.34) 0 78px, transparent 88px),
        radial-gradient(ellipse at 52% 94%, rgba(117, 203, 210, 0.18) 0 42%, transparent 62%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.84) 0%, rgba(232, 250, 252, 0.68) 54%, rgba(250, 255, 232, 0.58) 100%);
    border-color: rgba(179, 226, 220, 0.78);
}

.post-hero-poem-card::before,
.post-hero-poem-card::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.post-hero-poem-card::before {
    right: -28px;
    bottom: -34px;
    width: 150px;
    height: 120px;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 42% 48%, rgba(96, 184, 160, 0.16) 0 34%, transparent 36%),
        radial-gradient(ellipse at 62% 42%, rgba(76, 168, 190, 0.12) 0 28%, transparent 31%);
    transform: rotate(-18deg);
}

.post-hero-poem-card::after {
    left: 24px;
    right: 24px;
    bottom: 16px;
    height: 20px;
    opacity: 0.32;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(103, 190, 218, 0.24) 0 18px, transparent 20px),
        radial-gradient(ellipse at 56% 50%, rgba(136, 207, 225, 0.20) 0 22px, transparent 24px),
        radial-gradient(ellipse at 84% 50%, rgba(112, 196, 213, 0.18) 0 16px, transparent 18px);
}

.post-hero-poem-icon {
    position: relative;
    z-index: 1;
    width: 52px;
    height: 40px;
    margin: 0 auto 6px;
    color: #1f7f9a;
    font-size: 34px;
    line-height: 40px;
    text-align: center;
    text-shadow: 0 8px 18px rgba(70, 145, 168, 0.18);
    transform-origin: 50% 72%;
    animation: postHeroSailFloat 5.4s ease-in-out infinite;
}

.post-hero-poem-body {
    position: relative;
    z-index: 1;
    margin-top: 4px;
    color: #142b35;
    font-family: "LXGW WenKai", "霞鹜文楷", "STKaiti", "KaiTi", "Songti SC", "FangSong", "Microsoft YaHei", sans-serif;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.72;
    text-align: center;
}

.post-hero-poem-body p {
    margin: 0;
}

.post-hero-poem-body p + p {
    margin-top: 4px;
}

@keyframes postHeroSailFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(-2deg);
    }

    50% {
        transform: translate3d(0, -5px, 0) rotate(2deg);
    }
}

@media (max-width: 760px) {
    .post-hero-info-card,
    .post-hero-poem-card {
        left: 20px;
        max-width: calc(100vw - 40px);
    }

    .post-hero-info-card {
        top: 118px;
        width: 300px;
        padding: 18px 20px;
    }

    .post-hero-poem-card {
        top: calc(340px + 10vh);
        width: 340px;
        padding: 18px 18px 20px;
    }

    .post-hero-poem-body {
        font-size: 14px;
        line-height: 1.76;
    }
}

@media (prefers-reduced-motion: reduce) {
    .post-hero-poem-icon {
        animation: none;
    }
}

/* Keep the existing JS hook but turn the back-to-top control into a summer watermelon button. */
.back-to-top-ship {
    right: 28px;
    bottom: 30px;
    z-index: 82;
    border-color: rgba(128, 226, 246, 0.58);
    border-radius: 18px;
    background:
        radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.86) 0 16px, transparent 20px),
        radial-gradient(circle at 76% 78%, rgba(137, 232, 196, 0.20) 0 18px, transparent 22px),
        linear-gradient(145deg, rgba(246, 254, 255, 0.84), rgba(215, 248, 255, 0.66) 52%, rgba(255, 246, 198, 0.38));
    box-shadow:
        0 16px 34px rgba(58, 148, 181, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.back-to-top-ship:hover,
.back-to-top-ship.is-launching {
    box-shadow:
        0 18px 38px rgba(58, 148, 181, 0.20),
        0 0 20px rgba(165, 240, 255, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

.back-to-top-watermelon-icon {
    display: block;
    font-size: 30px;
    line-height: 58px;
    text-align: center;
    transform-origin: 50% 72%;
    filter:
        drop-shadow(0 0 8px rgba(137, 232, 196, 0.34))
        drop-shadow(0 8px 12px rgba(37, 104, 70, 0.14));
    transition: transform 0.25s ease, filter 0.25s ease;
}

.back-to-top-ship:hover .back-to-top-watermelon-icon,
.back-to-top-ship.is-launching .back-to-top-watermelon-icon {
    transform: translateY(-3px) rotate(-7deg) scale(1.06);
    filter:
        drop-shadow(0 0 12px rgba(137, 232, 196, 0.48))
        drop-shadow(0 11px 16px rgba(37, 104, 70, 0.18));
}

.toc-title::before {
    content: "🍨";
    color: inherit;
    text-shadow: 0 0 10px rgba(128, 226, 246, 0.26);
}

/* Final article-page layout tuning for the three-column card alignment. */
.post-toc {
    transform: translateX(-10vh);
}

.right-sidebar {
    transform: translateX(10vh);
}

.article,
.comments-section {
    box-sizing: border-box;
    width: calc(100% + 36px);
    margin-right: -18px;
    margin-left: -18px;
}

@media (max-width: 980px) {
    .post-toc,
    .right-sidebar {
        transform: none;
    }

    .article,
    .comments-section {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }
}

/* Normalize rich article elements so Markdown output matches the summer-water article theme. */
.article-content :not(pre) > code {
    padding: 2px 7px;
    border: 1px solid rgba(131, 215, 234, 0.58);
    border-radius: 8px;
    color: #155d76;
    background:
        linear-gradient(135deg, rgba(237, 253, 255, 0.92), rgba(210, 245, 253, 0.68) 56%, rgba(255, 252, 219, 0.42));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
    font-family: "JetBrains Mono", "Cascadia Code", Consolas, "SFMono-Regular", monospace;
    font-size: 0.92em;
}

.article-content pre {
    position: relative;
    max-width: 100%;
    margin: 24px 0;
    padding: 24px 24px 22px;
    overflow-x: auto;
    border: 1px solid rgba(118, 194, 224, 0.36);
    border-radius: 18px;
    color: #dff8ff;
    background:
        radial-gradient(circle at 92% 12%, rgba(108, 220, 244, 0.18) 0 72px, transparent 84px),
        radial-gradient(circle at 10% 88%, rgba(255, 249, 185, 0.10) 0 90px, transparent 108px),
        linear-gradient(135deg, #102d3f 0%, #173c52 52%, #1d5265 100%);
    box-shadow:
        0 18px 42px rgba(35, 113, 145, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.article-content pre code {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    background: transparent;
    box-shadow: none;
    font-family: "JetBrains Mono", "Cascadia Code", Consolas, "SFMono-Regular", monospace;
    font-size: 0.94em;
    line-height: 1.75;
}

.code-copy-btn {
    top: 10px;
    right: 10px;
    padding: 5px 12px;
    border: 1px solid rgba(153, 231, 246, 0.56);
    border-radius: 999px;
    color: #dffaff;
    background:
        linear-gradient(135deg, rgba(72, 170, 199, 0.62), rgba(31, 105, 135, 0.72));
    box-shadow:
        0 8px 18px rgba(18, 77, 103, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
    opacity: 0;
}

.article-content pre:hover .code-copy-btn,
.code-copy-btn:focus-visible {
    opacity: 1;
}

.code-copy-btn:hover {
    color: #ffffff;
    background:
        linear-gradient(135deg, rgba(96, 205, 229, 0.74), rgba(42, 133, 162, 0.82));
}

.code-copy-btn.copied {
    color: #0d5262;
    background:
        linear-gradient(135deg, #dffdf3 0%, #9cebd4 58%, #fff8c8 100%);
    border-color: rgba(121, 224, 199, 0.72);
}

.article-content blockquote {
    margin: 24px 0;
    padding: 18px 22px;
    border-left: 5px solid rgba(67, 188, 218, 0.76);
    border-radius: 16px;
    color: #244d5d;
    background:
        radial-gradient(circle at 92% 20%, rgba(255, 255, 255, 0.76) 0 8px, transparent 10px),
        radial-gradient(circle at 10% 90%, rgba(255, 249, 190, 0.22) 0 64px, transparent 78px),
        linear-gradient(135deg, rgba(242, 254, 255, 0.86), rgba(218, 248, 255, 0.56));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 12px 28px rgba(62, 146, 176, 0.08);
}

.article-content a {
    color: #117fa2;
    text-decoration: none;
    background-image: linear-gradient(90deg, rgba(79, 199, 225, 0.68), rgba(255, 241, 160, 0.70));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 2px;
}

.article-content a:hover {
    color: #0c607c;
    background-size: 100% 3px;
}

.article-content ul,
.article-content ol {
    margin: 20px 0;
    padding-left: 28px;
}

.article-content li {
    margin-bottom: 9px;
}

.article-content ul li::marker,
.article-content ol li::marker {
    color: #29a8ca;
    font-weight: 800;
}

.article-content table {
    width: 100%;
    max-width: 100%;
    margin: 24px 0;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid rgba(147, 221, 238, 0.56);
    border-radius: 16px;
    background: rgba(248, 254, 255, 0.76);
    box-shadow: 0 14px 32px rgba(62, 146, 176, 0.08);
}

.article-content th,
.article-content td {
    padding: 12px 14px;
    border-right: 1px solid rgba(147, 221, 238, 0.32);
    border-bottom: 1px solid rgba(147, 221, 238, 0.32);
    color: #2e4c59;
    text-align: left;
}

.article-content th {
    color: #155d76;
    background:
        linear-gradient(135deg, rgba(224, 251, 255, 0.88), rgba(255, 251, 215, 0.42));
    font-weight: 700;
}

.article-content tr:last-child td {
    border-bottom: 0;
}

.article-content th:last-child,
.article-content td:last-child {
    border-right: 0;
}

.article-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 24px auto;
    border: 1px solid rgba(147, 221, 238, 0.58);
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(62, 146, 176, 0.12);
}

.article-content hr {
    height: 1px;
    margin: 32px 0;
    border: 0;
    background:
        linear-gradient(90deg, transparent, rgba(91, 205, 228, 0.48), rgba(255, 245, 176, 0.34), transparent);
}

.article-content kbd {
    display: inline-block;
    padding: 2px 7px;
    border: 1px solid rgba(116, 202, 226, 0.58);
    border-bottom-width: 2px;
    border-radius: 7px;
    color: #1c5870;
    background: rgba(244, 253, 255, 0.88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
    font-family: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
    font-size: 0.88em;
}

.article-content mark {
    padding: 1px 5px;
    border-radius: 7px;
    color: #4b4a22;
    background: rgba(255, 246, 166, 0.62);
}

.article-content del {
    color: rgba(55, 82, 94, 0.58);
    text-decoration-color: rgba(41, 168, 202, 0.52);
}

.article-content strong {
    color: #174f66;
}

.article-content details {
    margin: 22px 0;
    padding: 16px 18px;
    border: 1px solid rgba(147, 221, 238, 0.50);
    border-radius: 16px;
    background: rgba(246, 254, 255, 0.72);
}

.article-content summary {
    cursor: pointer;
    color: #155d76;
    font-weight: 700;
}

@media (max-width: 760px) {
    .article-content pre {
        padding: 22px 18px 20px;
    }

    .article-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}