/* ===== 基础设定 ===== */
@property --fav-reveal-x {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: calc(100% + 22px);
}

.comment-avatar-placeholder { background: var(--border-color); }
.comment-loading { padding: 1rem 0; font-size: .85rem; }
.list-empty-hint { color: var(--text-muted); font-size: .85rem; text-align: left; width: 100%; }
.clickable-card { cursor: pointer; }
.project-footer-action,
.fav-footer-action,
.says-footer-action { text-align: center; margin-top: 1.5rem; }
.no-scroll { overflow: hidden !important; }
.pointer-events-none { pointer-events: none !important; }
.hide-img { display: none !important; }
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.fav-cover-error { background: var(--image-fallback-bg) !important; min-height: 120px !important; }
:root {
    --bg-color: #fafafa;
    --text-main: #2c2c2c;
    --text-muted: #999999;
    --accent-color: #555555;
    --border-color: #e8e8e8;
    --card-bg: #ffffff;
    --nav-capsule-bg: rgba(255, 255, 255, 0.34);
    --nav-capsule-border: rgba(255, 255, 255, 0.62);
    --nav-capsule-highlight: rgba(255, 255, 255, 0.72);
    --nav-capsule-shadow: rgba(32, 42, 36, 0.16);
    --nav-selection-bg: #1d1d1d;
    --nav-selection-text: #ffffff;
    --hover-bg: rgba(0,0,0,0.04);
    --shadow-soft: rgba(0,0,0,0.06);
    --shadow-medium: rgba(0,0,0,0.12);
    --shadow-strong: rgba(0,0,0,0.15);
    --overlay-bg: rgba(0,0,0,0.35);
    --button-hover-bg: #f5f5f5;
    --button-on-text: #ffffff;
    --error-text: #d9534f;
    --error-bg: #fdf7f7;
    --error-border: #ebcccc;
    --image-fallback-bg: #f0f0f0;
    --footer-text: #999999;
    --fav-moonlight-soft: rgba(160, 169, 180, 0.04);
    --fav-moonlight-core: rgba(209, 217, 226, 0.52);
    --terminal-warning: #b54848;
    --terminal-warning-soft: rgba(181, 72, 72, 0.08);
    --comment-success-ground: rgba(238, 174, 196, 0.32);
    --comment-success-bubble-bg: rgba(255, 255, 255, 0.97);
    --comment-success-bubble-border: rgba(189, 150, 165, 0.38);
    --comment-success-bubble-text: #3a3034;
    --comment-success-bubble-muted: #8c747d;
    --logo-filter: none;
    --header-height: 64px;
    --max-content-width: 860px;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
}

:root[data-theme="dark"] {
    --bg-color: #111111;
    --text-main: #f2f2f2;
    --text-muted: #a0a0a0;
    --accent-color: #d8d8d8;
    --border-color: #2a2a2a;
    --card-bg: #181818;
    --nav-capsule-bg: rgba(20, 20, 20, 0.34);
    --nav-capsule-border: rgba(255, 255, 255, 0.12);
    --nav-capsule-highlight: rgba(255, 255, 255, 0.1);
    --nav-capsule-shadow: rgba(0, 0, 0, 0.42);
    --nav-selection-bg: #f3f3f3;
    --nav-selection-text: #111111;
    --hover-bg: rgba(255,255,255,0.08);
    --shadow-soft: rgba(0,0,0,0.3);
    --shadow-medium: rgba(0,0,0,0.36);
    --shadow-strong: rgba(0,0,0,0.5);
    --overlay-bg: rgba(0,0,0,0.62);
    --button-hover-bg: #242424;
    --button-on-text: #111111;
    --error-text: #ff8d8d;
    --error-bg: #241616;
    --error-border: #553030;
    --image-fallback-bg: #242424;
    --footer-text: #777777;
    --fav-moonlight-soft: rgba(242, 247, 251, 0.06);
    --fav-moonlight-core: rgba(242, 247, 251, 0.68);
    --terminal-warning: #ff7777;
    --terminal-warning-soft: rgba(255, 119, 119, 0.1);
    --comment-success-ground: rgba(244, 156, 190, 0.3);
    --comment-success-bubble-bg: rgba(31, 29, 30, 0.97);
    --comment-success-bubble-border: rgba(255, 218, 232, 0.28);
    --comment-success-bubble-text: #fff7fa;
    --comment-success-bubble-muted: #d7b9c4;
    --logo-filter: invert(1);
    color-scheme: dark;
}

:root[data-theme="light"] {
    color-scheme: light;
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-family);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    padding-top: var(--header-height);
    overflow-x: hidden;
    transition: background-color 0.25s ease, color 0.25s ease;
    isolation: isolate;
}

/* ===== 全局环境背景：亮色竹影 / 暗色月夜 ===== */
.ambient-background {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    contain: strict;
}

.ambient-stars,
.ambient-moon-stage,
.ambient-bamboo {
    position: absolute;
    display: block;
}

.ambient-stars {
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    color: #dce8f2;
    opacity: 0;
    transition: opacity 0.65s ease;
}

:root[data-theme="dark"] .ambient-stars { opacity: 0.76; }

.ambient-moon-stage {
    top: -2rem;
    right: -4rem;
    width: clamp(820px, 78vw, 1080px);
    z-index: 1;
    aspect-ratio: 1;
    transform: translate3d(13%, -13%, 0) scale(0.97);
    transition: transform 0.88s cubic-bezier(0.22, 1, 0.36, 1);
}

:root[data-theme="dark"] .ambient-moon-stage {
    transform: translate3d(0, 0, 0) scale(1);
}

.ambient-moon-occlusion,
.ambient-moon {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.72s ease;
}

.ambient-moon-occlusion {
    z-index: 0;
    background: #111111;
    -webkit-mask: url("/assets/v2/images/moonlight-alpha-v2.webp") center / contain no-repeat;
    mask: url("/assets/v2/images/moonlight-alpha-v2.webp") center / contain no-repeat;
}

.ambient-moon {
    z-index: 1;
    object-fit: contain;
}

:root[data-theme="dark"] .ambient-moon-occlusion { opacity: 0.96; }
:root[data-theme="dark"] .ambient-moon { opacity: 0.58; }

.star-field { fill: currentColor; }
.star-field-distant { opacity: 0.38; }
.star-field-mid { opacity: 0.68; }
.star-field > * {
    --star-low: 0.52;
    --star-high: 1;
    --star-duration: 12s;
    --star-delay: -3s;
    animation: starTwinkle var(--star-duration) ease-in-out infinite alternate;
    animation-delay: var(--star-delay);
    animation-play-state: paused;
}
.star-field-distant > * { --star-low: 0.45; --star-high: 0.82; }
.star-field-mid > * { --star-low: 0.5; --star-high: 1; }
.star-accent > * { --star-low: 0.4; --star-high: 1; }
.star-field > :nth-child(5n + 1) { --star-duration: 8.5s; --star-delay: -5.4s; }
.star-field > :nth-child(5n + 2) { --star-duration: 11s; --star-delay: -2.2s; }
.star-field > :nth-child(5n + 3) { --star-duration: 13.5s; --star-delay: -9.5s; }
.star-field > :nth-child(5n + 4) { --star-duration: 16s; --star-delay: -4.2s; }
.star-field > :nth-child(5n + 5) { --star-duration: 10s; --star-delay: -7s; }
:root[data-theme="dark"] .star-field > * { animation-play-state: running; }

@keyframes starTwinkle {
    0% { fill-opacity: var(--star-low); }
    42% { fill-opacity: var(--star-high); }
    72% { fill-opacity: calc((var(--star-low) + var(--star-high)) / 2); }
    100% { fill-opacity: var(--star-low); }
}

.ambient-bamboo {
    inset: -1.25rem;
    z-index: 3;
    width: calc(100% + 2.5rem);
    height: calc(100% + 2.5rem);
    object-fit: cover;
    object-position: left center;
    opacity: 0;
    transition: opacity 0.65s ease;
}

:root[data-theme="light"] .ambient-bamboo.is-ready { opacity: 1; }

:root[data-theme="light"] .ambient-bamboo.is-ready.is-custom {
    opacity: var(--custom-light-background-opacity, 0.38);
}

:root[data-theme="dark"] .ambient-bamboo { opacity: 0; }

/* 昼夜切换只在用户主动操作时启用一次性合成动画。 */
:root.theme-transitioning body { transition-duration: 0.78s; }
:root.theme-transitioning .ambient-moon-stage { will-change: transform; }
:root.theme-to-dark .ambient-bamboo { transition-duration: 0.32s; }
:root.theme-to-dark .ambient-stars { transition-delay: 0.18s; }
:root.theme-to-dark .ambient-moon-occlusion,
:root.theme-to-dark .ambient-moon { transition-delay: 0.08s; }
:root.theme-to-light .ambient-stars { transition-duration: 0.25s; }
:root.theme-to-light .ambient-moon-occlusion,
:root.theme-to-light .ambient-moon { transition-duration: 0.72s; }
:root.theme-to-light .ambient-bamboo {
    transition-duration: 0.62s;
    transition-delay: 0.18s;
}

.content-area,
.site-footer {
    position: relative;
    z-index: 1;
}

/* ===== 顶部导航栏 ===== */
.top-header {
    position: fixed;
    top: 0; left: 0; width: 100%;
    height: var(--header-height);
    background: transparent;
    border-bottom: 0;
    z-index: 100;
    display: flex;
    align-items: center;
}

.header-inner {
    max-width: var(--max-content-width);
    width: 100%;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    line-height: 1;
}

.brand {
    font-size: 1.25rem; font-weight: 600; letter-spacing: -0.5px;
    display: flex; align-items: center; line-height: 1; user-select: none;
    text-decoration: none; color: var(--text-main);
}

.nav-menu {
    --nav-control-width: 58px;
    --nav-selection-x: 0px;
    --nav-selection-width: var(--nav-control-width);
    position: relative;
    isolation: isolate;
    display: flex;
    gap: 0;
    align-items: center;
    padding: 5px;
    line-height: 1;
    background: var(--nav-capsule-bg);
    border: 1px solid var(--nav-capsule-border);
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 var(--nav-capsule-highlight),
        0 8px 20px -18px var(--nav-capsule-shadow);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.nav-selection {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 0;
    z-index: 0;
    width: var(--nav-selection-width);
    pointer-events: none;
    opacity: 0;
    background: var(--nav-selection-bg);
    border-radius: 999px;
    transform: translate3d(var(--nav-selection-x), 0, 0);
    transition:
        transform 0.44s cubic-bezier(0.34, 1.56, 0.64, 1),
        width 0.34s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.18s ease,
        background-color 0.32s ease;
}

.nav-menu.has-nav-selection .nav-selection {
    opacity: 1;
}

.nav-item,
.theme-toggle {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    flex: 0 0 var(--nav-control-width);
    width: var(--nav-control-width);
    min-width: 0;
    justify-content: center;
    padding: 0.5rem 0;
    border-radius: 999px;
    white-space: nowrap;
}

.nav-item {
    text-decoration: none; color: var(--text-muted); font-size: 0.9rem; font-weight: 400;
    transition: color 0.2s ease; cursor: pointer;
    line-height: 1;
}
.nav-item:hover {
    color: var(--text-main);
}
.nav-item.active {
    color: var(--text-main);
    font-weight: 600;
}

.theme-toggle {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
}
.theme-toggle:hover {
    color: var(--text-main);
}
.nav-item:focus-visible,
.theme-toggle:focus-visible {
    color: var(--text-main);
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
.nav-item.is-nav-selection-target,
.theme-toggle.is-nav-selection-target {
    color: var(--nav-selection-text);
}

/* ===== 主内容区 ===== */
.content-area {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: 5rem 1.5rem 6rem; /* 顶部空间从 4rem 增加到 5rem */
}

/* ===== Section 切换动画 ===== */
.section { display: none; }
.section.active { display: block; animation: fadeIn 0.35s ease forwards; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== 桌面端一级模块：一屏式预览 ===== */
@media (min-width: 769px) {
    body.primary-section-view {
        height: 100vh;
        min-height: 100vh;
        overflow-y: hidden;
    }

    body.primary-section-view .content-area {
        height: calc(100vh - var(--header-height));
        min-height: 0;
        padding: 2.25rem 1.5rem 2rem;
        display: flex;
        align-items: stretch;
    }

    body.primary-section-view .section.active {
        width: 100%;
        min-height: calc(100vh - var(--header-height) - 4.25rem);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    body.primary-section-view .section-title {
        margin-bottom: 1.35rem;
    }

    body.primary-section-view .hero-container {
        padding-top: 0;
    }

    body.primary-section-view .card-grid-3,
    body.primary-section-view .fav-cards,
    body.primary-section-view .timeline-cards {
        gap: 0.9rem;
    }

    body.primary-section-view .project-card {
        height: 220px;
        padding: 1.15rem;
    }

    body.primary-section-view .moment-card .tags {
        padding-top: 0.45rem;
    }

    body.primary-section-view .moment-card {
        height: 170px;
        padding: 1rem;
        flex-basis: calc((100% - 1.8rem) / 3);
    }

    body.primary-section-view .project-footer-action,
    body.primary-section-view .fav-footer-action,
    body.primary-section-view .says-footer-action {
        margin-top: 1rem;
    }

    body.primary-section-view .about-profile-card {
        min-height: 460px;
        padding: 0.75rem 0;
    }

    body.primary-section-view .site-footer {
        position: fixed;
        right: 0;
        bottom: 1.35rem;
        left: 0;
        z-index: 20;
        margin: 0;
        padding: 0;
        opacity: 0.55;
        pointer-events: none;
    }
}

/* ===== 内容出现 Reveal 动画 ===== */
.reveal-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}
.reveal-mask + .reveal-mask { margin-left: 0; }
.reveal-token {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    will-change: opacity, transform;
}
[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    will-change: opacity, transform;
}
[data-reveal="paragraph"] { transform: none; }
.section.motion-ready .reveal-token {
    animation: textReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--reveal-delay, 0ms) + var(--token-delay, 0ms));
}
.section.motion-ready [data-reveal="block"] {
    animation: blockReveal 0.64s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--reveal-delay, 120ms);
}
.section.motion-ready [data-reveal="paragraph"] {
    animation: paragraphReveal 0.68s ease-out forwards;
    animation-delay: var(--reveal-delay, 220ms);
}
@keyframes textReveal {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes blockReveal {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes paragraphReveal {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===== 通用 ===== */
.loading { color: var(--text-muted); font-size: 0.85rem; text-align: center; padding: 3rem 0; }
.loading:not(.comment-loading) {
    position: relative;
    min-height: 128px;
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.loading:not(.comment-loading).is-visible {
    visibility: visible;
    opacity: 1;
}
.loading:not(.comment-loading)::before {
    content: "";
    display: block;
    width: min(220px, 64vw);
    height: 52px;
    background: url("/posts/v2/photos/my/moolei.svg") left center / 220px auto no-repeat;
    filter: var(--logo-filter);
    animation: mooleiLogoWrite 1.45s cubic-bezier(0.65, 0, 0.35, 1) 1 forwards;
    animation-play-state: paused;
}
.loading:not(.comment-loading)::after {
    content: "";
    position: absolute;
    width: min(220px, 64vw);
    height: 1px;
    bottom: 2.35rem;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--text-muted), transparent);
    opacity: 0.35;
    animation: mooleiLoaderGlow 1.45s ease-in-out 1 forwards;
    animation-play-state: paused;
}
.loading:not(.comment-loading).is-visible::before,
.loading:not(.comment-loading).is-visible::after {
    animation-play-state: running;
}
@keyframes mooleiLogoWrite {
    0% {
        clip-path: inset(0 100% 0 0);
        opacity: 0.3;
    }
    18% {
        opacity: 1;
    }
    72% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
    100% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}
@keyframes mooleiLoaderGlow {
    0%, 100% {
        transform: translateX(-50%) scaleX(0.2);
        opacity: 0;
    }
    55% {
        transform: translateX(-50%) scaleX(1);
        opacity: 0.32;
    }
}
.error-msg { color: var(--error-text); background: var(--error-bg); padding: 1rem 1.25rem; border-radius: 8px; border: 1px solid var(--error-border); text-align: center; margin-top: 1rem; font-size: 0.9rem; }

/* 页面标题居中 */
.section-title { text-align: center; font-size: 1.5rem; font-weight: 600; margin-bottom: 2.5rem; letter-spacing: -0.5px; }

.tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem; }
.tag { font-size: 0.7rem; padding: 0.15rem 0.55rem; background-color: var(--bg-color); border: 1px solid var(--border-color); border-radius: 10px; color: var(--accent-color); font-weight: 500; }

/* ============================
   首页 —— 居中 + 整体下移
   ============================ */
.hero-container {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2rem; /* 内容区内再下移 */
}

.avatar-placeholder {
    width: 56px; height: 56px; border-radius: 50%;
    background-color: var(--border-color); margin-bottom: 2rem;
    object-fit: cover; display: block;
}
.avatar-placeholder.large { width: 80px; height: 80px; margin-bottom: 2rem; }

.greeting { color: var(--text-muted); font-size: 0.85rem; font-weight: 500; margin-bottom: 0.25rem; letter-spacing: 0.5px; }
.name { font-size: 2.8rem; font-weight: 700; margin-bottom: 0.75rem; letter-spacing: -1.5px; line-height: 1.15; }
.intro { font-size: 1.15rem; font-weight: 500; margin-bottom: 0.5rem; line-height: 1.5; }

.status {
    color: var(--text-muted); font-size: 0.9rem; line-height: 1.6;
    margin-bottom: 3rem; min-height: 1.6em;
}

.console-trigger {
    min-width: 48px;
    min-height: 34px;
    margin: 0 0 3rem;
    padding: 0.3rem 0.7rem;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.console-trigger:hover {
    color: var(--text-main);
    background: var(--hover-bg);
    border-color: var(--border-color);
    transform: translateY(-1px);
}

.console-trigger:focus-visible,
.home-terminal button:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
}

body.terminal-open {
    overflow: hidden !important;
}

.home-terminal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--overlay-bg);
    animation: terminalOverlayIn 0.18s ease both;
}

.home-terminal {
    width: min(100%, 680px);
    max-height: min(78vh, 660px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--text-main);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 24px 70px var(--shadow-strong);
    animation: terminalPanelIn 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.home-terminal.warning-mode {
    border-color: var(--terminal-warning);
    box-shadow: 0 24px 70px var(--shadow-strong), 0 0 0 1px var(--terminal-warning-soft);
}

.home-terminal.warning-impact .home-terminal-header {
    animation: terminalWarningImpact 0.42s ease both;
}

.home-terminal-header {
    min-height: 72px;
    padding: 1rem 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.22s ease, border-color 0.22s ease;
}

.home-terminal.warning-mode .home-terminal-header {
    background: var(--terminal-warning-soft);
    border-bottom-color: var(--terminal-warning);
}

.home-terminal.warning-mode .home-terminal-kicker,
.home-terminal.warning-mode .home-terminal-header h2,
.home-terminal.warning-mode .home-terminal-live > span:first-child,
.home-terminal.warning-mode .home-terminal-prompt {
    color: var(--terminal-warning);
}

.home-terminal-kicker {
    display: block;
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
}

.home-terminal-header h2 {
    margin-top: 0.12rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.home-terminal-close {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
}

.home-terminal-close:hover {
    color: var(--text-main);
    background: var(--hover-bg);
    border-color: var(--border-color);
}

.home-terminal-screen {
    min-height: 250px;
    padding: 1.25rem 1.35rem;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.84rem;
    line-height: 1.75;
}

.home-terminal-welcome {
    margin-bottom: 0.85rem;
    color: var(--text-muted);
}

.home-terminal-welcome p + p {
    margin-top: 0.15rem;
}

.home-terminal-live {
    min-height: 1.75em;
    margin-bottom: 1.15rem;
    color: var(--text-main);
}

.home-terminal-live > span:first-child,
.home-terminal-prompt {
    color: var(--text-muted);
}

.home-terminal-cursor {
    margin-left: 0.08em;
    color: var(--text-muted);
    animation: terminalCursorBlink 0.85s step-end infinite;
}

.home-terminal-output {
    display: grid;
    gap: 0.55rem;
}

.home-terminal-entry {
    overflow-wrap: anywhere;
}

.home-terminal-output-line {
    display: block;
    opacity: 0;
    transform: translateY(4px);
    animation: terminalOutputLineIn 0.24s ease forwards;
    animation-delay: var(--line-delay, 0ms);
}

.home-terminal-entry.command {
    color: var(--text-muted);
}

.home-terminal-entry.response {
    padding-left: 0.8rem;
    border-left: 1px solid var(--border-color);
}

.home-terminal-entry.warning-banner {
    padding: 0.45rem 0.65rem;
    color: var(--terminal-warning);
    background: var(--terminal-warning-soft);
    border: 1px solid var(--terminal-warning);
    border-radius: 5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-align: center;
}

.home-terminal-entry.warning-code {
    color: var(--terminal-warning);
    opacity: 0.78;
}

.home-terminal-entry.warning-response {
    padding-left: 0.8rem;
    color: var(--terminal-warning);
    border-left: 1px solid var(--terminal-warning);
}

.home-terminal-entry.warning-clear {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.home-terminal-form {
    min-height: 58px;
    padding: 0.75rem 1.35rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: var(--bg-color);
    border-top: 1px solid var(--border-color);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.82rem;
    transition: border-color 0.22s ease;
}

.home-terminal.warning-mode .home-terminal-form {
    border-top-color: var(--terminal-warning);
}

.home-terminal-prompt {
    flex: 0 0 auto;
    white-space: nowrap;
}

.home-terminal-input {
    min-width: 0;
    flex: 1;
    color: var(--text-main);
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    border: 0 !important;
    border-radius: 0;
    outline: 0 !important;
    box-shadow: none !important;
    caret-color: var(--text-main);
    font: inherit;
}

.home-terminal-input:focus,
.home-terminal-input:focus-visible {
    background: transparent;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.home-terminal-hint {
    padding: 0.5rem 1.35rem 0.65rem;
    color: var(--text-muted);
    background: var(--bg-color);
    font-size: 0.68rem;
    text-align: right;
}

@keyframes terminalOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes terminalCursorBlink {
    50% { opacity: 0; }
}

@keyframes terminalWarningImpact {
    0%, 100% { transform: translateX(0); }
    22% { transform: translateX(-3px); }
    44% { transform: translateX(3px); }
    66% { transform: translateX(-2px); }
    84% { transform: translateX(2px); }
}

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


/* ============================
   通用 3 列卡片网格
   ============================ */
.card-grid-3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1.25rem;
}

/* 项目卡片 */
.project-card {
    background-color: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: 12px; padding: 1.5rem;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    display: flex; flex-direction: column;
    height: 260px;
    overflow: hidden;
    flex: 0 0 calc((100% - 2.5rem) / 3);
}
.project-card:hover { box-shadow: 0 4px 20px var(--shadow-soft); transform: translateY(-2px); }
.project-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; flex-shrink: 0; }
.project-logo { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }
.project-card h3 {
    font-size: 1.05rem; font-weight: 600; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.project-card h3 a { color: var(--text-main); text-decoration: none; }
.project-card h3 a:hover { text-decoration: underline; }
.project-card p {
    color: var(--text-muted); font-size: 0.85rem; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.project-card .tags { margin-top: auto; padding-top: 0.75rem; }

/* ============================
   喜爱 —— 一屏预览 + 分类列表
   ============================ */
.fav-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1.25rem;
}

.fav-card {
    background-color: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: 12px; padding: 1.5rem;
    color: var(--text-main);
    text-decoration: none;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    display: flex; flex-direction: column;
    height: 320px;
    flex: 0 0 calc((100% - 2.5rem) / 3);
    overflow: hidden;
}
.fav-card:hover { box-shadow: 0 4px 20px var(--shadow-soft); }
.fav-card:focus-visible {
    outline: 1px solid var(--text-muted);
    outline-offset: 4px;
}
.fav-card.is-fav-changing { pointer-events: none; }
.fav-card-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
}
.fav-card-content.is-fav-next {
    --fav-reveal-x: calc(100% + 22px);
    position: absolute;
    inset: 1.5rem;
    width: auto;
    height: auto;
    z-index: 3;
}
.fav-card-content.is-fav-next .fav-cover-stage {
    background-color: transparent;
}
.fav-cover-stage {
    position: relative;
    width: 100%;
    height: 120px;
    margin-bottom: 1rem;
    overflow: hidden;
    border-radius: 8px;
    background-color: var(--bg-color);
    flex-shrink: 0;
}
.fav-cover {
    width: 100%; height: 100%; border-radius: inherit; object-fit: cover;
    background-color: var(--bg-color); display: block;
}
.fav-moon-sweep {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--fav-reveal-x);
    width: 48%;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-52%) skewX(-10deg);
    transform-origin: 52% 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--fav-moonlight-soft) 28%,
        var(--fav-moonlight-core) 52%,
        var(--fav-moonlight-soft) 72%,
        transparent 100%
    );
}
.fav-card-content.is-fav-next .fav-cover {
    background-color: transparent;
    clip-path: polygon(
        var(--fav-reveal-x) 0,
        100% 0,
        100% 100%,
        calc(var(--fav-reveal-x) - 22px) 100%
    );
}
.fav-card-content.is-fav-next h4,
.fav-card-content.is-fav-next p,
.fav-card-content.is-fav-next .tags {
    opacity: 0;
    transform: translateX(5px);
}
.fav-card-content.is-fav-receding h4 {
    animation: favTextRecede 0.24s ease 0.48s forwards;
}
.fav-card-content.is-fav-receding p {
    animation: favTextRecede 0.24s ease 0.54s forwards;
}
.fav-card-content.is-fav-receding .tags {
    animation: favTextRecede 0.24s ease 0.6s forwards;
}
.fav-card-content.is-fav-revealing {
    animation: favMoonRevealProgress 1.16s cubic-bezier(0.65, 0, 0.18, 1) forwards;
}
.fav-card-content.is-fav-revealing .fav-moon-sweep {
    animation: favMoonSweepGlow 1.16s linear forwards;
}
.fav-card-content.is-fav-revealing h4 {
    animation: favTextArrive 0.4s ease 0.7s forwards;
}
.fav-card-content.is-fav-revealing p {
    animation: favTextArrive 0.4s ease 0.8s forwards;
}
.fav-card-content.is-fav-revealing .tags {
    animation: favTextArrive 0.4s ease 0.9s forwards;
}
@keyframes favMoonRevealProgress {
    from { --fav-reveal-x: calc(100% + 22px); }
    to { --fav-reveal-x: 0px; }
}
@keyframes favMoonSweepGlow {
    0% { opacity: 0; }
    18% { opacity: 0.68; }
    58% { opacity: 0.88; }
    86% { opacity: 0.58; }
    100% { opacity: 0; }
}
@keyframes favTextRecede {
    to { opacity: 0; transform: translateX(-3px); }
}
@keyframes favTextArrive {
    from { opacity: 0; transform: translateX(5px); }
    to { opacity: 1; transform: translateX(0); }
}
.fav-card h4 {
    font-size: 1rem; font-weight: 600; margin-bottom: 0.35rem;
    text-align: left;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.fav-card p {
    font-size: 0.85rem; color: var(--text-muted); line-height: 1.5;
    text-align: left;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fav-card .tags { margin-top: auto; padding-top: 0.75rem; }

/* 分类标签页 */
.fav-category-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    margin: -0.35rem auto 2rem;
    border-bottom: 1px solid var(--border-color);
}
.fav-category-tab {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 5.5rem;
    padding: 0.8rem 1rem 0.7rem;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.2s ease;
}
.fav-category-tab::after {
    content: "";
    position: absolute;
    right: 0.85rem;
    bottom: -1px;
    left: 0.85rem;
    height: 1px;
    background: var(--text-main);
    opacity: 0;
    transform: scaleX(0.45);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.fav-category-tab:hover,
.fav-category-tab.active { color: var(--text-main); }
.fav-category-tab.active::after {
    opacity: 1;
    transform: scaleX(1);
}
.fav-category-tab:focus-visible {
    outline: 1px solid var(--text-muted);
    outline-offset: -4px;
}
.fav-category-panel {
    animation: favCategoryEnter 0.24s ease both;
}
@keyframes favCategoryEnter {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.project-more-link,
.fav-more-link,
.says-more-link {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
}
.project-more-link:hover,
.fav-more-link:hover,
.says-more-link:hover { color: var(--text-main); }

/* 分类列表页 / 归档列表页 —— 返回按钮 */
.project-all-back,
.fav-category-back,
.says-all-back {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
    margin-bottom: 1.5rem;
    transition: color 0.2s;
}
.project-all-back:hover,
.fav-category-back:hover,
.says-all-back:hover { color: var(--text-main); }

/* ============================
   说说 —— 时间线布局
   ============================ */
.timeline { position: relative; }

.timeline-group { margin-bottom: 2.5rem; }

.timeline-date {
    font-size: 0.85rem; font-weight: 600; color: var(--text-main);
    margin-bottom: 1rem; padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    letter-spacing: 0.5px;
    display: flex; align-items: center; gap: 0.5rem;
}
.timeline-date::before {
    content: ""; display: inline-block;
    width: 8px; height: 8px; border-radius: 50%;
    background-color: var(--accent-color); flex-shrink: 0;
}

.timeline-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1.25rem;
}

/* 说说卡片 */
.moment-card {
    background-color: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: 12px; padding: 1.5rem;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    display: flex; flex-direction: column;
    height: 200px;
    flex: 0 0 calc((100% - 2.5rem) / 3);
}
.moment-card:hover { box-shadow: 0 4px 20px var(--shadow-soft); }
.moment-time { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.5rem; letter-spacing: 0.5px; flex-shrink: 0; }
.moment-title {
    font-weight: 600; font-size: 1rem; margin-bottom: 0.5rem; line-height: 1.4;
    flex-shrink: 0;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.moment-content {
    font-size: 0.85rem; color: var(--text-muted); line-height: 1.7;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.moment-card .tags { margin-top: auto; padding-top: 0.75rem; }

/* 暗色月夜：月光只擦亮卡片朝向右上方的局部边缘。 */
.project-card,
.fav-card,
.moment-card {
    position: relative;
}

:root[data-theme="dark"] .project-card,
:root[data-theme="dark"] .fav-card,
:root[data-theme="dark"] .moment-card {
    border-color: #303030;
}

.project-card::before,
.fav-card::before,
.moment-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(
        from 0deg,
        rgba(242, 247, 251, 0.62) 0deg,
        rgba(242, 247, 251, 0.62) 118deg,
        transparent 158deg,
        transparent 292deg,
        rgba(242, 247, 251, 0.18) 332deg,
        rgba(242, 247, 251, 0.62) 360deg
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.55s ease;
}

:root[data-theme="dark"] .project-card::before,
:root[data-theme="dark"] .fav-card::before,
:root[data-theme="dark"] .moment-card::before { opacity: 0.78; }

:root[data-theme="dark"] .project-card:hover::before,
:root[data-theme="dark"] .fav-card:hover::before,
:root[data-theme="dark"] .moment-card:hover::before {
    opacity: 1;
}

/* ============================
   关于 —— 身份介绍 / 可配置档案
   ============================ */
.about-container {
    max-width: 860px;
    margin: 0 auto;
}

.about-profile-card {
    position: relative;
    isolation: isolate;
    min-height: 460px;
    padding: 1rem 0;
    display: grid;
    grid-template-columns: minmax(250px, 0.82fr) minmax(0, 1.18fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 5.25rem);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.about-card-copy {
    position: relative;
    z-index: 2;
    width: 100%;
    min-width: 0;
    margin: 0;
    text-align: center;
}

.about-profile-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-bottom: 0;
}

.about-avatar {
    flex: 0 0 auto;
    margin: 0;
}

.about-avatar .avatar-placeholder.large {
    width: 84px;
    height: 84px;
    margin-bottom: 0;
    padding: 4px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 24px var(--shadow-soft);
}

.about-name {
    margin: 0;
    font-size: clamp(1.5rem, 2.5vw, 1.95rem);
    font-weight: 620;
    letter-spacing: -0.025em;
}

.about-text {
    margin: 0.12rem 0 0;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.7;
    letter-spacing: 0.025em;
}

.about-identity-email {
    margin-top: 0.65rem;
}

.contact-links-container {
    width: 100%;
    margin-top: 1.8rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.contact-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem 1rem;
}

.contact-item,
.contact-email {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.contact-item:hover,
.contact-email:hover {
    color: var(--text-main);
}

.contact-email {
    display: inline-block;
}

.about-identity-email .contact-email {
    font-size: 0.82rem;
}

.about-profile-facts {
    min-width: 0;
    border-top: 1px solid var(--border-color);
}

.about-profile-fact {
    min-width: 0;
    padding: 1.15rem 0;
    display: grid;
    grid-template-columns: minmax(88px, 0.32fr) minmax(0, 1fr);
    align-items: start;
    gap: 1.1rem;
    border-bottom: 1px solid var(--border-color);
}

.about-profile-fact h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 0.86rem;
    font-weight: 650;
    line-height: 1.7;
}

.about-profile-fact p {
    min-width: 0;
    margin: 0;
    color: var(--text-main);
    font-size: 0.92rem;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

@media (max-width: 768px) {
    .about-profile-card {
        min-height: 0;
        padding: 0.25rem 0 1rem;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 2.25rem;
    }

    .about-avatar .avatar-placeholder.large {
        width: 76px;
        height: 76px;
    }

    .contact-links-container {
        margin-top: 1.25rem;
    }

    .about-profile-fact {
        padding: 1rem 0;
        grid-template-columns: minmax(72px, 0.28fr) minmax(0, 1fr);
        gap: 0.85rem;
    }

    .about-profile-fact h3 {
        font-size: 0.82rem;
    }

    .about-profile-fact p {
        font-size: 0.86rem;
    }

}

/* ============================
   移动端侧边栏
   ============================ */
.hamburger {
    display: none;  /* 桌面端隐藏 */
    background: none; border: none;
    font-size: 1.4rem; cursor: pointer;
    color: var(--text-main); padding: 0.25rem;
    line-height: 1;
}
.sidebar-overlay {
    display: none;  /* 桌面端隐藏 */
    position: fixed; inset: 0;
    background: var(--overlay-bg);
    z-index: 199;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
}
.sidebar-overlay.open { opacity: 1; pointer-events: auto; }

.sidebar {
    display: none;  /* 桌面端隐藏 */
    position: fixed; top: 0; right: 0;
    height: 100dvh; width: min(82vw, 320px);
    background: var(--card-bg);
    z-index: 200;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s ease, box-shadow 0.25s ease;
    box-shadow: -2px 0 24px var(--shadow-medium);
    overflow-y: auto;
    flex-direction: column;
}
.sidebar.open { transform: translate3d(0, 0, 0); }

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
.sidebar-brand {
    font-size: 1.15rem; font-weight: 600;
    color: var(--text-main);
    letter-spacing: -0.5px;
}
.sidebar-close {
    background: none; border: none;
    font-size: 1.15rem; cursor: pointer;
    color: var(--text-muted);
    padding: 0.25rem; line-height: 1;
}
.sidebar-close:hover { color: var(--text-main); }

.sidebar-nav {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 0.5rem 0 max(0.75rem, env(safe-area-inset-bottom));
}

.sidebar-item {
    display: block;
    width: 100%;
    padding: 0.9rem 1.5rem;
    border: 0;
    background: transparent;
    text-decoration: none;
    color: var(--text-main);
    font-size: 0.95rem;
    font-family: var(--font-family);
    text-align: left;
    cursor: pointer;
    transition: background 0.2s;
}
.sidebar-item:hover { background: var(--bg-color); }
.sidebar-item.active {
    font-weight: 600;
    background: var(--bg-color);
    color: var(--text-main);
}
.sidebar-theme-toggle {
    margin-top: auto;
    border-top: 1px solid var(--border-color);
}

/* ============================
   移动端
   ============================ */
@media (max-width: 768px) {
    /* 显示 hamburger + 侧边栏，隐藏桌面导航 */
    .hamburger { display: flex; align-items: center; }
    .top-header .nav-menu { display: none; }
    .sidebar-overlay { display: block; }
    .sidebar { display: flex; }

    .card-grid-3, .fav-cards, .timeline-cards { justify-content: center; }
    .project-card, .fav-card, .moment-card { flex: 0 0 100%; }
    .name { font-size: 2.2rem; }
    .content-area { padding: 3rem 1.25rem 5rem; }
    .hero-container { padding-top: 1rem; }
    .fav-category-tabs {
        width: 100%;
        gap: 0;
        margin-bottom: 1.5rem;
    }
    .fav-category-tab {
        flex: 1 1 0;
        min-width: 0;
        padding-right: 0.45rem;
        padding-left: 0.45rem;
    }

    .header-inner { justify-content: center; gap: 0; position: relative; }
    .hamburger { position: absolute; right: 1.5rem; }

    .ambient-bamboo {
        inset: -1rem;
        width: calc(100% + 2rem);
        height: calc(100% + 2rem);
        object-position: -3rem center;
        opacity: 0;
    }

    :root[data-theme="light"] .ambient-bamboo.is-ready { opacity: 0.86; }

    :root[data-theme="light"] .ambient-bamboo.is-ready.is-custom {
        opacity: var(--custom-light-background-opacity, 0.38);
    }

    :root[data-theme="dark"] .ambient-bamboo { opacity: 0; }
    :root[data-theme="dark"] .ambient-stars { opacity: 0.58; }
    .ambient-moon-stage {
        top: -1.5rem;
        right: -7rem;
        width: 720px;
    }
    :root[data-theme="dark"] .ambient-moon { opacity: 0.52; }

}

@media (prefers-reduced-motion: reduce) {
    .fav-card,
    .fav-category-panel,
    .fav-card-content,
    .fav-cover,
    .fav-moon-sweep {
        animation: none;
        transition-duration: 0.01ms;
    }
}

@media (max-width: 480px) {
    .top-header { height: auto; padding: 0.5rem 0; }
    body { padding-top: 58px; }
    .header-inner { flex-direction: row; height: auto; }
    .ambient-moon-stage {
        top: -1rem;
        right: -7.5rem;
        width: 560px;
    }
    :root[data-theme="dark"] .ambient-moon { opacity: 0.48; }
}

/* ============================
   详情页
   ============================ */
.detail-container {
    max-width: 720px;
    margin: 0 auto;
    animation: fadeIn 0.3s ease forwards;
}

.detail-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    margin-bottom: 2.5rem;
    transition: color 0.2s;
}
.detail-back:hover { color: var(--text-main); }

.detail-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.detail-title {
    font-size: 2.05rem;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 2.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color);
    line-height: 1.4;
    text-wrap: pretty;
}

.detail-body {
    line-height: 1.9;
    font-size: 1.0625rem;
    color: var(--text-main);
    overflow-wrap: break-word;
}

.detail-body h1,
.detail-body h2,
.detail-body h3 {
    line-height: 1.45;
    letter-spacing: 0;
    scroll-margin-top: calc(var(--header-height) + 1.5rem);
}
.detail-body h1 { font-size: 1.55rem; margin: 2.8rem 0 1.1rem; }
.detail-body h2 { font-size: 1.35rem; margin: 2.6rem 0 1rem; }
.detail-body h3 { font-size: 1.15rem; margin: 2.2rem 0 0.8rem; }
.detail-body p { margin-bottom: 1.35rem; }
.detail-body ul, .detail-body ol { margin: 0 0 1.4rem 1.6rem; }
.detail-body li { margin-bottom: 0.5rem; padding-left: 0.15rem; }
.detail-body blockquote {
    border-left: 2px solid var(--text-muted);
    border-radius: 0 6px 6px 0;
    padding: 0.85rem 1rem;
    margin: 1.75rem 0;
    background: var(--hover-bg);
    color: var(--text-muted);
}
.detail-body blockquote p { margin-bottom: 0; }
.detail-body code {
    background: var(--bg-color);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
.detail-body pre {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    padding: 1.15rem 1.25rem;
    border-radius: 6px;
    overflow-x: auto;
    margin: 1.75rem 0;
    font-size: 0.85rem;
    line-height: 1.7;
    tab-size: 4;
}
.detail-body pre code { background: none; padding: 0; white-space: pre; }
.detail-body hr { border: none; border-top: 1px solid var(--border-color); margin: 2.5rem 0; }
.detail-body img {
    display: block;
    width: auto;
    max-width: min(100%, 560px);
    max-height: 70vh;
    height: auto;
    margin: 1.75rem auto;
    border-radius: 8px;
    object-fit: contain;
}
.detail-body figcaption {
    margin: -1rem auto 1.75rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.6;
    text-align: center;
}
.detail-body em { font-style: italic; }
.detail-body strong { font-weight: 600; }
.detail-body a { color: var(--text-main); text-decoration: underline; }

.detail-tags {
    display: flex; gap: 0.4rem; flex-wrap: wrap;
    margin-top: 2rem;
    padding: 1.25rem 0;
}

.detail-error {
    text-align: center; padding: 3rem 0; color: var(--text-muted);
}

/* 项目访问按钮 */
.btn-visit {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 1rem;
    margin-top: 1rem;
    border: 1px solid var(--text-main);
    border-radius: 6px;
    background: var(--text-main);
    color: var(--button-on-text);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: opacity 0.2s;
    align-self: flex-start;
}
.btn-visit:hover { opacity: 0.85; }

/* ============================
   详情页浮动按钮
   ============================ */
.detail-float-btns {
    position: fixed;
    bottom: clamp(2rem, 8vh, 4.5rem);
    right: max(1.25rem, calc((100vw - 816px) / 2));
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    z-index: 999;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.float-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    color: var(--text-muted);
    transition: color 0.2s, background 0.2s, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s;
    text-decoration: none;
}
.float-btn:hover {
    color: var(--text-main);
    background: var(--button-hover-bg);
    border-color: var(--border-color);
    box-shadow: 0 2px 12px var(--shadow-soft);
    transform: translateY(-2px);
}
.float-icon {
    width: 22px;
    height: 22px;
    display: block;
    overflow: visible;
}
.float-icon path {
    fill: currentColor;
    transform-box: fill-box;
    transform-origin: center;
}
.like-icon .icon-fill,
.comment-icon .icon-fill {
    opacity: 0;
    transform: scale(0.72);
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.like-icon .icon-outline,
.comment-icon .icon-outline {
    opacity: 1;
    transition: opacity 0.2s ease;
}
.float-btn.is-liked {
    color: #f05a78;
}
.float-btn.is-liked .like-icon .icon-fill {
    opacity: 1;
    transform: scale(1);
}
.float-btn.is-liked .like-icon .icon-outline {
    opacity: 0;
}
.float-btn.like-pop .like-icon {
    animation: detailLikePop 0.48s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.float-btn:hover .comment-icon .icon-fill {
    opacity: 0.18;
    transform: scale(1);
}
@keyframes detailLikePop {
    0% { transform: scale(0.78); }
    55% { transform: scale(1.2); }
    78% { transform: scale(0.95); }
    100% { transform: scale(1); }
}
.float-btn.hidden-btn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.float-btn .badge {
    position: absolute;
    top: 0;
    right: -2px;
    background: var(--accent-color);
    color: var(--button-on-text);
    font-size: 0.65rem;
    font-weight: 600;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
    box-shadow: 0 1px 6px var(--shadow-medium);
}

/* ============================
   评论弹窗
   ============================ */
.comment-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    animation: fadeIn 0.2s ease;
}

.comment-modal {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 2rem;
    max-width: 480px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 8px 40px var(--shadow-strong);
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.comment-modal h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.comment-modal .form-group {
    margin-bottom: 1rem;
}
.comment-field-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.3rem;
}
.comment-field-heading label,
.comment-field-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.comment-field-error {
    min-height: 1em;
    color: var(--error-text);
    font-size: 0.72rem;
    line-height: 1.35;
    text-align: right;
}
.comment-modal .form-group input,
.comment-modal .form-group textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: var(--font-family);
    background: var(--bg-color);
    color: var(--text-main);
    transition: background-color 0.25s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.25s ease;
}
.comment-modal .form-group.has-error input,
.comment-modal .form-group.has-error textarea,
.comment-modal .form-group.has-error .avatar-picker {
    border-color: var(--error-text);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--error-text) 18%, transparent);
}
.comment-modal .form-group.has-error input:focus,
.comment-modal .form-group.has-error textarea:focus,
.comment-modal .form-group.has-error .avatar-picker:focus {
    outline: 1px solid var(--error-text);
    outline-offset: 1px;
}
.comment-modal .form-group textarea {
    resize: vertical;
    min-height: 80px;
}
.comment-modal .honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    height: 0;
}

/* 头像选择器 */
.avatar-picker {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-height: 48px;
    padding: 0.3rem;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.avatar-option {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    object-fit: cover;
    transition: border-color 0.2s;
}
.avatar-option.selected {
    border-color: var(--text-main);
}

.comment-modal-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1rem;
}
.comment-modal .btn {
    padding: 0.5rem 1.1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-main);
    font-size: 0.9rem;
    cursor: pointer;
    font-family: var(--font-family);
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.comment-modal .btn-primary {
    background: var(--text-main);
    color: var(--button-on-text);
    border-color: var(--text-main);
}
.comment-modal .btn:disabled {
    cursor: wait;
    opacity: 0.58;
}
.comment-form-error {
    margin-top: 0.25rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--error-border);
    border-radius: 8px;
    background: var(--error-bg);
    color: var(--error-text);
    font-size: 0.78rem;
    line-height: 1.5;
}

/* 评论区列表 */
.comment-list {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    max-height: 240px;
    overflow-y: auto;
}
.comment-item {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.comment-avatar-sm {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}
.comment-body {
    flex: 1;
    min-width: 0;
}
.comment-nickname {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.15rem;
}
.comment-text {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    word-break: break-word;
}
.comment-time {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
}
.comment-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 1rem 0;
}

.comment-submit-ok {
    position: relative;
    width: 100%;
    height: 320px;
    color: var(--comment-success-bubble-text);
}
.comment-modal.is-success {
    width: min(92vw, 500px);
    max-width: 500px;
    min-height: 0;
    max-height: none;
    padding: 0;
    overflow: visible;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    transition: none;
}
.comment-success-character {
    position: absolute;
    left: 36px;
    bottom: 24px;
    width: 210px;
    animation: commentSuccessSceneIn 0.24s ease-out both;
}
.comment-success-character::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    bottom: 4px;
    width: 68%;
    height: 22px;
    border-radius: 50%;
    background: var(--comment-success-ground);
    transform: translateX(-50%);
}
.comment-success-visual {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 220 / 208;
    object-fit: contain;
}
.comment-success-bubble {
    position: absolute;
    z-index: 2;
    top: 30px;
    right: auto;
    left: 250px;
    width: max-content;
    min-width: 204px;
    max-width: 240px;
    padding: 0.86rem 1.55rem 0.9rem;
    color: var(--comment-success-bubble-text);
    line-height: 1.45;
    text-align: center;
    animation: commentSuccessBubbleIn 0.28s 0.12s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.comment-success-bubble-shape {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% + 18px);
    overflow: visible;
    pointer-events: none;
}
.comment-success-bubble-shape path {
    fill: var(--comment-success-bubble-bg);
    stroke: var(--comment-success-bubble-border);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
.comment-success-title,
.comment-success-copy {
    position: relative;
    z-index: 1;
    display: block;
}
.comment-success-title {
    font-size: 0.98rem;
    font-weight: 650;
}
.comment-success-copy {
    margin-top: 0.12rem;
    color: var(--comment-success-bubble-muted);
    font-size: 0.8rem;
}
@keyframes commentSuccessSceneIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes commentSuccessBubbleIn {
    from { opacity: 0; transform: translate(-4px, 4px) scale(0.96); }
    to { opacity: 1; transform: translate(0, 0) scale(1); }
}
@media (max-width: 480px) {
    .comment-modal.is-success {
        width: min(92vw, 340px);
    }
    .comment-submit-ok {
        height: 300px;
    }
    .comment-success-character {
        left: 18px;
        bottom: 24px;
        width: 165px;
    }
    .comment-success-character::before {
        height: 18px;
    }
    .comment-success-bubble {
        top: 20px;
        right: 10px;
        left: auto;
        min-width: 190px;
        max-width: 210px;
        padding: 0.78rem 1.25rem 0.82rem;
    }
    .comment-success-title {
        font-size: 0.9rem;
    }
    .comment-success-copy {
        font-size: 0.76rem;
    }
}



/* 详情页底部评论区 */
.detail-comments-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}
.detail-comments-section h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}
.detail-comment-item {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color);
}
.detail-comment-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
/* 移动端浮动按钮缩小 */
@media (max-width: 480px) {
    .detail-float-btns {
        bottom: 1rem;
        right: 1rem;
        gap: 0.5rem;
    }
    .float-btn {
        width: 38px;
        height: 38px;
    }
    .float-icon {
        width: 20px;
        height: 20px;
    }
}

/* 版权标识 */
.copyright-notice {
    text-align: center;
    color: var(--footer-text);
    font-size: 12px;
    margin-top: 40px;
    padding-bottom: 20px;
}

/* 全站底部 Footer */
.site-footer {
    margin-top: 3rem;
    padding: 2rem 1rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Logo Image Styling */
.nav-logo {
    display: block;
    height: 32px;
    width: auto;
    object-fit: contain;
    filter: var(--logo-filter);
    transition: filter 0.25s ease;
}

/* ===== 减少动态效果偏好 ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
    .section,
    .reveal-token,
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }

    .star-field > * {
        animation: none !important;
    }

    .home-terminal-cursor {
        animation: none !important;
    }

    .home-terminal-output-line {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

@media (max-width: 768px) {
    .home-terminal-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .home-terminal {
        width: 100%;
        max-height: min(82dvh, 680px);
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 14px 14px 0 0;
    }

    .home-terminal-header {
        min-height: 64px;
        padding: 0.8rem 1rem;
    }

    .home-terminal-screen {
        min-height: 190px;
        padding: 1rem;
        font-size: 0.8rem;
    }

    .home-terminal-form {
        min-height: 56px;
        padding: 0.7rem 1rem;
    }

    .home-terminal-prompt {
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .home-terminal-hint {
        padding: 0.45rem 1rem calc(0.55rem + env(safe-area-inset-bottom));
    }

    .detail-container { max-width: 100%; }
    .detail-back { margin-bottom: 2rem; }
    .detail-title {
        font-size: 1.75rem;
        margin-bottom: 1.75rem;
        padding-bottom: 1rem;
    }
    .detail-body {
        font-size: 1rem;
        line-height: 1.85;
    }
    .detail-body h1 { font-size: 1.4rem; margin-top: 2.4rem; }
    .detail-body h2 { font-size: 1.25rem; margin-top: 2.2rem; }
    .detail-body h3 { font-size: 1.1rem; margin-top: 2rem; }
    .detail-body p { margin-bottom: 1.25rem; }
    .detail-body blockquote { margin: 1.5rem 0; }
    .detail-body pre {
        margin: 1.5rem -0.25rem;
        padding: 1rem;
    }
    .detail-body img {
        max-width: 100%;
        max-height: 60vh;
        border-radius: 8px;
    }
}