/* ============================================================
   style.css — 文艺版前端（静态部署）
   纸墨 · 山水 · 慢时光
   ============================================================ */

:root {
    /* ===== DeepSeek 蓝白配色系统 ===== */
    --color-bg-deep: #ffffff;
    --color-bg-surface: #ffffff;
    --color-bg-elevated: #ffffff;
    --color-bg-hover: #eef1f6;
    --color-text-primary: #1f2937;
    --color-text-secondary: #64748b;
    --color-text-muted: #94a3b8;
    --color-border-subtle: rgba(15,23,42,0.08);
    --color-border-medium: rgba(15,23,42,0.10);
    --color-border-accent: rgba(77,107,254,0.5);

    /* 品牌渐变:DeepSeek 蓝 → 紫 */
    --accent-grad: linear-gradient(135deg,#4d6bfe 0%,#7c3aed 48%,#2563eb 100%);
    --accent-grad-soft: linear-gradient(135deg,rgba(77,107,254,0.14),rgba(139,92,246,0.12));
    --accent-color: #4d6bfe;

    /* 三模型强调色（历史保留，未使用） */
    --deepseek: #4d6bff;
    --deepseek-soft: rgba(77,107,255,0.16);
    --chatgpt: #10a37f;
    --chatgpt-soft: rgba(16,163,127,0.16);
    --claude: #d97757;
    --claude-soft: rgba(217,119,87,0.16);

    /* 纸感面 */
    --glass-bg: rgba(255,255,255,0.62);
    --glass-bg-strong: rgba(255,255,255,0.94);
    --glass-border: 1px solid rgba(77,107,254,0.12);
    --glass-blur: blur(18px) saturate(130%);

    /* 阴影与圆角 */
    --shadow-card: 0 2px 14px rgba(100,116,255,0.10), 0 0 1px rgba(100,116,255,0.08);
    --shadow-card-hover: 0 12px 36px rgba(86,100,255,0.16), 0 0 1px rgba(77,107,254,0.18);
    --shadow-pop: 0 24px 60px rgba(80,90,220,0.22), 0 0 0 1px rgba(100,116,255,0.12), 0 0 40px rgba(109,124,255,0.12);
    --glow-accent: 0 0 34px rgba(77,107,254,0.20);

    --ease-out-expo: cubic-bezier(0.19,1,0.22,1);
    --ease-smooth: cubic-bezier(0.4,0,0.2,1);
    --font-body: "PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;   /* 纯系统字体，不加载任何在线字体 */
    --font-serif: "PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;
    --font-mono: "JetBrains Mono","SF Mono","Consolas",monospace;
    --space-sm:12px; --space-md:20px; --space-lg:32px; --space-xl:48px; --space-2xl:72px;
    --radius-lg:16px; --radius-md:12px; --radius-sm:8px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font-body);background-color:var(--color-bg-deep);color:var(--color-text-primary);min-height:100vh;line-height:1.6;overflow-x:hidden;display:flex;flex-direction:column;transition:background-color 1.2s var(--ease-smooth);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* 全局质感：滚动条 / 选区 / 焦点 */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(120,150,200,0.18);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(120,170,255,0.34);background-clip:padding-box}
* { scrollbar-width:thin; scrollbar-color:rgba(120,150,200,0.22) transparent; }
::selection{background:rgba(77,139,255,0.32);color:#fff}
:focus-visible{outline:2px solid var(--color-border-accent);outline-offset:2px;border-radius:var(--radius-sm)}
button,input,textarea,select,a{font-family:inherit}
a{color:inherit;text-decoration:none}


/* 背景 */
.ambient-backdrop{display:none}
@keyframes gridFlow{0%{background-position:0 0}100%{background-position:60px 60px}}
.ambient-backdrop::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 40% at 50% 12%,rgba(124,92,255,0.16)0%,rgba(80,60,200,0.05)40%,transparent 70%),radial-gradient(ellipse 40% 30% at 82% 48%,rgba(54,210,255,0.10)0%,transparent 60%),radial-gradient(ellipse 32% 42% at 18% 60%,rgba(90,139,255,0.08)0%,transparent 55%);animation:glowRotate 30s linear infinite}
@keyframes glowRotate{0%{transform:rotate(0deg)scale(1)}50%{transform:rotate(180deg)scale(1.1)}100%{transform:rotate(360deg)scale(1)}}

/* 粒子 */
.particle-layer{display:none}
.particle{display:none}
@keyframes floatParticle{0%{transform:translate(0,0)scale(0.8);opacity:0.2}100%{transform:translate(var(--tx,30px),var(--ty,-40px))scale(1.2);opacity:0.9}}

/* 主容器 */
/* flex:1 让内容不足一屏时撑满视口，把页脚备案号顶到最底部。
   这里不再写 min-height:100vh —— 那是备案号还放在首页内部时的写法，
   现在备案号在 body 层级，100vh 只会把它推到首屏之外，必须滚动才看得见。 */
.main-container{position:relative;z-index:1;max-width:1100px;width:100%;margin:0 auto;padding:var(--space-2xl) var(--space-lg) var(--space-xl);flex:1 0 auto}
.page{display:none;flex-direction:column;align-items:center;gap:var(--space-xl);animation:fadePage 0.4s var(--ease-out-expo)}
.page.active-page{display:flex}
@keyframes fadePage{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}

/* 主页 */
.home-page{gap:var(--space-xl)}
.hero-section{text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out-expo),transform .9s var(--ease-out-expo);position:relative;padding-top:8px}
.hero-section::before{display:none}
.hero-section.revealed{opacity:1;transform:translateY(0)}
.site-title{font-size:clamp(2.4rem,5.2vw,4rem);font-weight:700;letter-spacing:.02em;color:var(--color-text-primary);min-height:1.4em;position:relative;background:linear-gradient(120deg,#ffffff 0%,#cfe0ff 45%,#a9c6ff 70%,#8be0ff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 60px rgba(90,139,255,0.30);line-height:1.1}
@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}
.site-subtitle{font-size:1.02rem;color:var(--color-text-secondary);letter-spacing:.1em;opacity:.9}

.social-bar{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease-out-expo) .3s,transform .8s var(--ease-out-expo) .3s}
.social-bar.revealed{opacity:1;transform:translateY(0)}
.social-btn{display:flex;flex-direction:column;align-items:center;gap:7px;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:var(--glass-border);border-radius:16px;padding:18px 30px;cursor:pointer;color:var(--color-text-secondary);font-family:var(--font-body);font-size:.85rem;letter-spacing:.05em;transition:all .25s var(--ease-smooth);position:relative;overflow:hidden}
.social-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,0.05)50%,transparent 60%);transform:translateX(-100%);transition:transform .55s var(--ease-smooth)}
.social-btn:hover::before{transform:translateX(100%)}
.social-btn:hover{background:var(--color-bg-hover);border-color:var(--color-border-accent);color:var(--color-text-primary);transform:translateY(-3px);box-shadow:var(--shadow-pop)}
.social-icon{font-size:1.55rem;transition:transform .25s var(--ease-smooth);background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.social-btn:hover .social-icon{transform:scale(1.14)}

/* 主页卡片网格（居中 flex，避免 5 张卡片留空第 6 格） */
.home-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}
.home-card {
    min-height: 210px;
    cursor: pointer;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform .4s var(--ease-smooth), box-shadow .4s var(--ease-smooth), border-color .4s var(--ease-smooth), background .4s var(--ease-smooth);
    padding: var(--space-md);
    text-align: center;
}
.home-card::before {
    content: '';
    position: absolute;
    inset:0;
    border-radius:inherit;
    padding:1px;
    background:linear-gradient(140deg,rgba(150,180,255,0.10),rgba(150,180,255,0) 40%,rgba(150,180,255,0) 60%,rgba(150,180,255,0.10));
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
    transition: background .4s var(--ease-smooth);
}
.home-card:hover {
    transform: translateY(-8px);
    border-color: var(--color-border-accent);
    background: rgba(255,255,255,0.96);
    box-shadow: 0 8px 28px rgba(77,107,254,0.18), 0 0 0 1px rgba(77,107,254,0.45);
}
.home-card:active {
    transform: translateY(-2px) scale(0.98);
}
.home-card-title {
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--color-text-primary);
    letter-spacing: .04em;
}
.home-card-desc {
    font-size: .8rem;
    color: var(--color-text-muted);
    letter-spacing: .03em;
}
.home-card-badge {
    display: inline-flex;
    gap: 8px;
    font-size: .78rem;
    color: var(--color-text-secondary);
    letter-spacing: .03em;
}
.home-card-badge span {
    padding: 2px 10px;
    border-radius: 10px;
    background: rgba(150,180,255,0.08);
    border: 1px solid rgba(150,180,255,0.14);
}

/* 网页界面演示选择卡片 */
.os-select-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    width: 100%;
    max-width: 900px;
    margin: var(--space-xl) auto 0;
}
.os-card {
    cursor: pointer;
    background: rgba(13,21,40,0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-xl) var(--space-md);
    text-align: center;
    transition: all .35s var(--ease-smooth);
}
.os-card::before {
    content: '';
    position: absolute;
    inset:-1px;
    border-radius:inherit;
    padding:1px;
    background:linear-gradient(135deg,transparent 30%,rgba(0,180,255,0.15)50%,transparent 70%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
}
.os-card:hover {
    transform: translateY(-6px);
    border-color: var(--color-border-accent);
    box-shadow: 0 16px 48px rgba(0,50,150,0.35);
}
.os-card:active {
    transform: translateY(-2px) scale(0.98);
}
.os-card-icon {
    font-size: 3rem;
    margin-bottom: 4px;
    transition: transform .35s var(--ease-smooth);
}
.os-card:hover .os-card-icon {
    transform: scale(1.15);
}
.os-card-icon.apple { color: #a0a0a0; }
.os-card-icon.windows { color: #00a8ff; }
.os-card-icon.linux { color: #e95420; }
.os-card-name {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--color-text-primary);
    letter-spacing: .04em;
}
.os-card-desc {
    font-size: .85rem;
    color: var(--color-text-muted);
}
.os-card-version {
    font-size: .8rem;
    color: var(--color-text-secondary);
    padding: 2px 12px;
    border-radius: 10px;
    background: rgba(0,100,255,0.08);
    border: 1px solid rgba(0,100,255,0.12);
    margin-top: 4px;
}
@media (max-width: 600px) {
    .os-select-grid {
        grid-template-columns: 1fr;
        max-width: 360px;
    }
    .os-card { padding: var(--space-lg) var(--space-md); }}

/* 软件分享页 */
.software-page .page-header{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:var(--space-md);width:100%}
.page-header .back-btn{align-self:flex-start;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:var(--glass-border);color:var(--color-text-secondary);font-size:.85rem;cursor:pointer;padding:7px 14px;border-radius:12px;transition:all .2s;display:inline-flex;align-items:center;gap:6px}
.page-header .back-btn:hover{background:var(--color-bg-hover);border-color:var(--color-border-accent);color:var(--color-text-primary);transform:translateX(-2px)}
.page-title{font-size:1.95rem;font-weight:600;letter-spacing:.04em;color:var(--color-text-primary);background:linear-gradient(120deg,#ffffff,#cfe0ff 60%,#a9c6ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.page-subtitle{font-size:.95rem;color:var(--color-text-muted)}
.software-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-lg);width:100%;max-width:900px}
.software-card{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:var(--glass-border);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-card);transition:all .35s var(--ease-smooth);display:flex;flex-direction:column;gap:var(--space-sm);position:relative;overflow:hidden}
.software-card::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(150,180,255,0.12),transparent 50%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.software-card:hover{background:rgba(24,36,74,0.62);border-color:var(--color-border-accent);box-shadow:var(--shadow-pop);transform:translateY(-3px)}
.sw-header{display:flex;align-items:center;gap:10px}
.sw-icon{font-size:1.6rem;color:var(--accent-color);width:36px;text-align:center;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sw-title{font-size:1.2rem;font-weight:600;color:var(--color-text-primary)}
.sw-desc{font-size:.9rem;color:var(--color-text-secondary);line-height:1.6;flex:1}
.sw-note{margin-top:4px;font-size:.78rem;color:var(--color-text-muted);letter-spacing:.02em;line-height:1.6;border-top:1px dashed rgba(148,163,184,0.35);padding-top:8px}
.software-card.placeholder{opacity:.5;cursor:default}
.software-card.placeholder:hover{transform:none;box-shadow:var(--shadow-card)}

/* 网页界面演示页面头部 */
.macos-page .page-header,.win11-page .page-header{width:100%;display:flex;align-items:center;gap:var(--space-md);padding:0 4px;margin-bottom:var(--space-sm)}
.macos-page .page-header .back-btn,.win11-page .page-header .back-btn{background:transparent;border:none;color:var(--color-text-secondary);font-size:.9rem;cursor:pointer;padding:6px 12px;border-radius:6px;transition:all .2s}
.macos-page .page-header .back-btn:hover,.win11-page .page-header .back-btn:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}
.macos-page .page-title,.win11-page .page-title{font-size:1.3rem;font-weight:400;letter-spacing:.04em;color:var(--color-text-primary)}

/* 网页界面演示主页 - 三栏布局 */
.virtual-page .page-header{display:flex;align-items:center;gap:var(--space-md);padding:0 4px;margin-bottom:var(--space-md);width:100%}
.virtual-page .page-header .back-btn{background:transparent;border:none;color:var(--color-text-secondary);font-size:.9rem;cursor:pointer;padding:6px 12px;border-radius:6px;transition:all .2s}
.virtual-page .page-header .back-btn:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}
.virtual-page .page-title{font-size:1.3rem;font-weight:400;letter-spacing:.04em;color:var(--color-text-primary)}
@keyframes auroraGradient{0%{background-position:0% 50%}25%{background-position:50% 0%}50%{background-position:100% 50%}75%{background-position:50% 100%}100%{background-position:0% 50%}}/* 社交弹窗 */
.modal-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0);pointer-events:none;opacity:0;transition:opacity .35s var(--ease-smooth),background .35s var(--ease-smooth);backdrop-filter:blur(0px)}
.modal-panel{position:relative;background:var(--glass-bg-strong);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:var(--glass-border);border-radius:var(--radius-lg);padding:var(--space-xl) var(--space-lg);box-shadow:var(--shadow-pop);max-width:420px;width:90%;text-align:center;transform:scale(0.9) translateY(16px);transition:transform .4s var(--ease-out-expo);display:flex;flex-direction:column;align-items:center;gap:var(--space-md)}
.modal-close{position:absolute;top:var(--space-sm);right:var(--space-sm);width:36px;height:36px;border-radius:50%;border:1px solid var(--color-border-subtle);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s}
.modal-close:hover{background:var(--color-bg-hover);border-color:var(--color-border-accent)}
.close-icon{position:relative;width:14px;height:14px}
.close-icon::before,.close-icon::after{content:'';position:absolute;top:50%;left:0;width:100%;height:1.5px;background:var(--color-text-secondary);border-radius:1px}
.close-icon::before{transform:translateY(-50%) rotate(45deg)}
.close-icon::after{transform:translateY(-50%) rotate(-45deg)}
.modal-close:hover .close-icon::before,.modal-close:hover .close-icon::after{background:var(--color-text-primary)}
.modal-icon-wrapper{width:56px;height:56px;border-radius:50%;background:var(--color-bg-elevated);border:1px solid var(--color-border-medium);display:flex;align-items:center;justify-content:center}
.modal-platform-icon{font-size:1.6rem;color:var(--color-text-primary)}
.modal-platform-name{font-size:1.2rem;font-weight:400;letter-spacing:.05em;color:var(--color-text-primary)}
.modal-divider{width:50px;height:1px;background:var(--color-border-accent);opacity:.5}
.modal-contact-info{font-size:1rem;color:var(--color-text-secondary);letter-spacing:.03em;word-break:break-all}

/* 响应式 */
@media (max-width:768px){
    .main-container{padding:var(--space-xl) var(--space-md)}
    .software-grid{grid-template-columns:1fr}}

/* 响应式 */
@media (max-width: 768px) {
    /* OS 选择卡片响应式 */
    .os-select-grid { max-width: 360px; }
    /* 主页卡片 */
    .home-cards-grid { max-width: 460px; gap: var(--space-md); }}
@media (max-width: 480px) {
    .home-cards-grid { max-width: 340px; gap: var(--space-sm); }
    .home-card { flex: 0 0 150px; }
    .home-card { padding: var(--space-md); }
    .home-card-title { font-size: 1.1rem; }
    .home-card-desc { font-size: .8rem; }}

/* 更新日志弹窗 */
.changelog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.changelog-modal {
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: 20px;
    width: 460px;
    max-width: 92vw;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-pop);
}
.changelog-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 16px;
    font-weight: 600;
    color: #eef2fb;
}
.changelog-close {
    background: rgba(255,255,255,0.06);
    border: none;
    border-radius: 8px;
    padding: 5px 11px;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    font-size: 16px;
    transition: all .2s;
}
.changelog-close:hover { background: rgba(255,255,255,0.12); color: #fff; }
.changelog-modal-body {
    padding: 18px 22px 22px;
    overflow-y: auto;
    flex: 1;
}
.changelog-modal-body::-webkit-scrollbar { width: 4px; }
.changelog-modal-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

.cl-entry {
    position: relative;
    padding-left: 16px;
    margin-bottom: 18px;
    border-left: 2px solid rgba(124,160,255,0.28);
}
.cl-entry:last-child { margin-bottom: 0; }
.cl-entry .cl-ver {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    background: var(--accent-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1px;
}
.cl-entry .cl-date {
    font-size: 11px;
    color: rgba(255,255,255,0.32);
    margin-bottom: 4px;
}
.cl-entry .cl-text {
    font-size: 13px;
    color: #c8d0e8;
    line-height: 1.65;
}


/* ============================================================
   DeepSeek 蓝白覆盖层 — 简约现代 · 蓝白风格
   ============================================================ */

/* ---- 全局 ---- */
body {
    background-color: var(--color-bg-deep);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    background-image: none;
}
::selection{background:rgba(77,107,254,0.28);color:#1f2937}
::-webkit-scrollbar-thumb{background:rgba(100,116,255,0.30);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(77,107,254,0.50);background-clip:padding-box}
* { scrollbar-color:rgba(100,116,255,0.30) transparent; }
:focus-visible{outline:2px solid rgba(77,107,254,0.55);outline-offset:2px}

/* ---- 背景层：纯白 ---- */
.ambient-backdrop{display:none}
.site-title{
    font-family:var(--font-serif);
    font-weight:700;
    letter-spacing:.02em;
    background:none;
    -webkit-background-clip:unset;background-clip:unset;
    -webkit-text-fill-color:#0f172a;
    text-shadow:none;
    color:#0f172a;
    font-size:clamp(1.9rem,3.6vw,2.75rem);
    min-height:auto;
    line-height:1.3;
}
.title-highlight{
    background:linear-gradient(120deg,#7c3aed 0%,#4d6bfe 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    color:#4d6bfe;
    padding:0 2px;
}
.site-subtitle{color:#64748b;letter-spacing:.06em;opacity:1}
.site-name{font-size:.9rem;color:#94a3b8;letter-spacing:.16em;opacity:1}

/* ---- 社交按钮：圆形白卡，居中 ---- */
.social-btn{
    width:52px;height:52px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,0.85);
    border:1px solid rgba(77,107,254,0.14);
    box-shadow:0 4px 16px rgba(96,116,255,0.10);
    color:#64748b;cursor:pointer;position:relative;overflow:hidden;
    padding:0;font-size:.85rem;
    transition:all .25s var(--ease-smooth);
}
.social-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,0.4)50%,transparent 60%);transform:translateX(-100%);transition:transform .55s var(--ease-smooth)}
.social-btn:hover::before{transform:translateX(100%)}
.social-btn:hover{
    background:#ffffff;
    border-color:rgba(77,107,254,0.5);
    color:#1f2937;
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(86,100,255,0.18);
}
.social-icon{font-size:1.3rem;background:linear-gradient(135deg,#4d6bfe 0%,#7c3aed 60%,#2563eb 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---- 我的项目 区块头部 ---- */
.project-section{width:100%;max-width:760px;margin:0 auto;padding-top:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-md);opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease-out-expo),transform .9s var(--ease-out-expo)}
.project-section.revealed{opacity:1;transform:translateY(0)}
.section-head{display:flex;flex-direction:column;gap:6px;text-align:left}
.section-num{font-size:.95rem;color:#4d6bfe;font-weight:600;letter-spacing:.1em}
.section-title{font-family:var(--font-serif);font-size:1.5rem;font-weight:700;color:#1f2937;letter-spacing:.02em}
.section-desc{font-size:.95rem;color:#64748b}

/* ---- 主页卡片 ---- */
.home-cards-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:760px;gap:var(--space-md);width:100%}
.home-card{
    min-height:220px;
    background:linear-gradient(180deg,#ffffff 0%,#ffffff 100%);
    border:1px solid rgba(15,23,42,0.06);
    border-radius:16px;
    box-shadow:0 6px 18px rgba(15,23,42,0.05);
    cursor:pointer;position:relative;overflow:hidden;
    display:flex;flex-direction:column;align-items:flex-start;gap:12px;
    padding:var(--space-lg);
    text-align:left;
    transition:all .3s var(--ease-smooth);
}
.home-card::before,
.home-card::after{display:none}
.home-card:hover{
    transform:translateY(-6px);
    border-color:#4d6bfe;
    background:rgba(255,255,255,0.96);
    box-shadow:0 20px 44px rgba(77,107,254,0.18),0 0 0 1px rgba(77,107,254,0.45);
}
.home-card-title{font-family:var(--font-body);font-weight:700;letter-spacing:0;font-size:1.15rem;color:#0f172a;transition:color .2s}
.home-card:hover .home-card-title{color:#4d6bfe}
.home-card-desc{color:#64748b;font-size:.92rem;flex:1;letter-spacing:0}
.home-card-badge{display:flex;gap:8px}
.home-card-badge span{background:rgba(77,107,254,0.07);border:1px solid rgba(77,107,254,0.16);color:#4d6bfe;border-radius:6px;font-size:.75rem;padding:2px 10px}
.home-card-btn{display:inline-flex;align-items:center;justify-content:center;background:#4d6bfe;color:#fff;font-size:.85rem;font-weight:500;padding:8px 18px;border-radius:8px;transition:background .2s;user-select:none;margin-top:auto}
.home-card:hover .home-card-btn{background:#3b56e0}

/* ---- 页面底部胶囊按钮 ---- */
.page-footer{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;padding-top:var(--space-xl);opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease-out-expo) .4s,transform .8s var(--ease-out-expo) .4s}
.page-footer.revealed{opacity:1;transform:translateY(0)}

/* ---- 站点备案号 ----
   放在所有 .page 之外、body 的最末尾：
     · 任何页面都显示，不会因为切页而消失
     · 内容不足一屏时用 margin-top:auto 顶到视口底部
     · 内容超过一屏时自然跟在内容之后，不遮挡任何东西
   main-container 有 min-height:100vh 且末尾留白已减到 var(--space-md)，
   正好给这行备案号腾出位置。 */
.main-container{padding-bottom:var(--space-md)}
.site-beian{
    position:relative;z-index:1;
    margin-top:auto;                 /* 内容不足一屏时贴底 */
    padding:16px 20px calc(16px + env(safe-area-inset-bottom,0px));
    text-align:center;
    font-size:.86rem;line-height:1.6;letter-spacing:.04em;
}
.site-beian a{
    color:#94a3b8;text-decoration:none;
    border-bottom:1px solid transparent;
    transition:color .25s var(--ease-smooth),border-color .25s var(--ease-smooth)
}
.site-beian a:hover{color:#4d6bfe;border-bottom-color:rgba(77,107,254,.45)}

/* ---- 首页自我介绍 ----
   删掉「我的项目」板块后补的内容，让个人主页不显得空。
   宽度跟原来的 .project-section 对齐，视觉上不会跳。 */
.intro-section{width:100%;max-width:640px;margin:0 auto;text-align:center}
.intro-text{
    margin:0 0 14px;
    font-size:.98rem;line-height:2.1;letter-spacing:.03em;
    color:#475569;text-align:left;
}
.intro-text:last-child{margin-bottom:0}
.intro-muted{color:#94a3b8;font-size:.92rem}

.footer-pill{display:inline-flex;align-items:center;gap:6px;background:var(--color-bg-hover);border:1px solid rgba(15,23,42,0.06);border-radius:999px;padding:8px 18px;font-size:.85rem;color:#334155;cursor:pointer;transition:all .2s;font-family:var(--font-body)}
.footer-pill:hover{background:#e2e8f0;color:#0f172a;transform:translateY(-2px)}


/* ---- 系统选择卡 ---- */
.os-card{
    background:linear-gradient(180deg,#ffffff 0%,#f4f7ff 100%);
    border:1px solid rgba(77,107,254,0.16);
    border-radius:16px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 0 0 1px rgba(77,107,254,0.04) inset,
        0 8px 26px rgba(96,116,255,0.12);
}
.os-card::before{display:none}
.os-card::after{
    content:'';position:absolute;top:0;left:20px;right:20px;height:3px;
    background:linear-gradient(90deg,transparent,rgba(77,107,254,0.7),rgba(124,92,255,0.45),transparent);
    border-radius:0 0 3px 3px;opacity:.5;transition:opacity .3s var(--ease-smooth);
}
.os-card:hover{
    transform:translateY(-6px);
    border-color:rgba(77,107,254,0.5);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.95) inset,
        0 0 0 1px rgba(77,107,254,0.10) inset,
        0 20px 46px rgba(86,100,255,0.18);
}
.os-card:hover::after{opacity:.95}
.os-card-icon{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:20px;background:rgba(255,255,255,0.7);border:1px solid rgba(77,107,254,0.14);margin-bottom:10px}
.os-card-icon.apple{color:#64748b}
.os-card-icon.windows{color:#2f6fc2}
.os-card-icon.linux{color:#e95420}
.os-card-name{font-family:var(--font-serif);letter-spacing:.08em;font-size:1.35rem;color:#1f2937}
.os-card-desc{color:#94a3b8}
.os-card-version{background:rgba(77,107,254,0.08);border:1px solid rgba(77,107,254,0.20);color:#4d6bfe;border-radius:9px}

/* ---- 页面头部 ---- */
.back-btn{color:#64748b}
.back-btn:hover{color:#4d6bfe}
.page-title{font-family:var(--font-serif);letter-spacing:.04em;background:linear-gradient(120deg,#1f2937,#4d6bfe 60%,#2563eb);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.page-subtitle{color:#94a3b8}
.macos-page .page-title,.win11-page .page-title,.virtual-page .page-title,
.linux-page .page-title{color:#1f2937;background:none;-webkit-text-fill-color:currentColor}
.virtual-page .page-header .back-btn,.macos-page .page-header .back-btn,
.win11-page .page-header .back-btn{color:#64748b}
.virtual-page .page-header .back-btn:hover,.macos-page .page-header .back-btn:hover,
.win11-page .page-header .back-btn:hover{background:rgba(77,107,254,0.10);color:#4d6bfe}

/* ---- 软件分享 ---- */
.software-card{
    background:linear-gradient(180deg,#ffffff 0%,#f4f7ff 100%);
    border:1px solid rgba(77,107,254,0.16);
    border-radius:16px;
    box-shadow:0 1px 0 rgba(255,255,255,0.9) inset,0 0 0 1px rgba(77,107,254,0.04) inset,0 8px 26px rgba(96,116,255,0.12);
}
.software-card::before{display:none}
.software-card::after{
    content:'';position:absolute;top:0;left:18px;right:18px;height:3px;
    background:linear-gradient(90deg,transparent,rgba(77,107,254,0.7),rgba(124,92,255,0.45),transparent);
    border-radius:0 0 3px 3px;opacity:.5;transition:opacity .3s var(--ease-smooth);
}
.software-card:hover{
    transform:translateY(-4px);
    border-color:rgba(77,107,254,0.5);
    box-shadow:0 1px 0 rgba(255,255,255,0.95) inset,0 0 0 1px rgba(77,107,254,0.10) inset,0 18px 42px rgba(86,100,255,0.18);
}
.software-card:hover::after{opacity:.95}
.sw-icon{
    display:flex;align-items:center;justify-content:center;
    width:46px;height:46px;border-radius:13px;font-size:1.2rem;
    background:linear-gradient(135deg,rgba(77,107,254,0.12),rgba(124,92,255,0.10));
    border:1px solid rgba(77,107,254,0.20);
    color:#4d6bfe;
    background-clip:padding-box;
}
.sw-title{color:#1f2937;font-size:1.22rem}
.sw-desc{color:#64748b;line-height:1.8}
.software-card.placeholder{opacity:.6}
.sw-note{color:#64748b;border-top-color:rgba(100,116,139,0.22)}

/* ---- 闲言碎语 ---- */
.blog-area{width:100%;max-width:720px;display:flex;flex-direction:column;gap:var(--space-lg)}
.blog-quote{
    position:relative;text-align:center;padding:var(--space-xl) var(--space-lg);
    background:linear-gradient(180deg,#ffffff 0%,#f4f7ff 100%);
    border:1px solid rgba(77,107,254,0.16);
    border-radius:16px;
    box-shadow:0 1px 0 rgba(255,255,255,0.9) inset,0 0 0 1px rgba(77,107,254,0.04) inset,0 8px 26px rgba(96,116,255,0.12);
    overflow:hidden;
}
.blog-quote::after{
    content:'';position:absolute;top:0;left:24px;right:24px;height:3px;
    background:linear-gradient(90deg,transparent,rgba(77,107,254,0.7),rgba(124,92,255,0.45),transparent);
    border-radius:0 0 3px 3px;opacity:.55;
}
.blog-quote::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(77,107,254,0.05),rgba(124,92,255,0.04));pointer-events:none}
.blog-quote-mark{position:absolute;top:-6px;left:14px;font-family:var(--font-serif);font-size:64px;color:rgba(77,107,254,0.18);line-height:1}
.blog-quote-text{font-family:var(--font-serif);font-size:1.25rem;color:#1f2937;line-height:2;letter-spacing:.04em}
.blog-quote-author{margin-top:10px;font-size:.85rem;color:#94a3b8;letter-spacing:.12em}
.blog-list{display:flex;flex-direction:column;gap:var(--space-md)}
.blog-item{
    position:relative;padding:var(--space-lg);
    background:linear-gradient(180deg,#ffffff 0%,#f4f7ff 100%);
    border:1px solid rgba(77,107,254,0.16);border-radius:16px;
    box-shadow:0 1px 0 rgba(255,255,255,0.9) inset,0 0 0 1px rgba(77,107,254,0.04) inset,0 8px 26px rgba(96,116,255,0.12);
    transition:all .3s var(--ease-smooth);
}
.blog-item::after{
    content:'';position:absolute;top:0;left:18px;right:18px;height:3px;
    background:linear-gradient(90deg,transparent,rgba(77,107,254,0.7),rgba(124,92,255,0.45),transparent);
    border-radius:0 0 3px 3px;opacity:.5;transition:opacity .3s var(--ease-smooth);
}
.blog-item:hover{
    border-color:rgba(77,107,254,0.5);
    box-shadow:0 1px 0 rgba(255,255,255,0.95) inset,0 0 0 1px rgba(77,107,254,0.10) inset,0 16px 38px rgba(86,100,255,0.16);
    transform:translateY(-3px);
}
.blog-item:hover::after{opacity:.95}
.blog-item-date{font-size:.78rem;color:#4d6bfe;letter-spacing:.12em;margin-bottom:6px}
.blog-item-title{font-family:var(--font-serif);font-size:1.15rem;color:#1f2937;letter-spacing:.04em;margin-bottom:6px}
.blog-item-excerpt{font-size:.92rem;color:#64748b;line-height:1.9}

/* ---- 弹窗 ---- */
.modal-overlay{background:rgba(30,41,99,0.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal-panel{background:rgba(255,255,255,0.97);border:1px solid rgba(77,107,254,0.16);border-radius:16px;box-shadow:0 24px 60px rgba(80,90,220,0.22)}
.modal-close{border-color:rgba(77,107,254,0.2)}
.modal-close:hover{background:rgba(77,107,254,0.10);border-color:rgba(77,107,254,0.4)}
.modal-icon-wrapper{background:#f0f4ff;border:1px solid rgba(77,107,254,0.18)}
.modal-platform-name{color:#1f2937;font-family:var(--font-serif)}
.modal-divider{background:rgba(77,107,254,0.5)}
.modal-contact-info{color:#64748b}

/* ---- 更新日志 ---- */
.changelog-overlay{background:rgba(30,41,99,0.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.changelog-modal{background:rgba(255,255,255,0.97);border:1px solid rgba(77,107,254,0.16);border-radius:16px;box-shadow:0 24px 60px rgba(80,90,220,0.22)}
.changelog-modal-header{color:#1f2937;border-bottom:1px solid rgba(77,107,254,0.14);font-family:var(--font-serif)}
.changelog-close{background:rgba(77,107,254,0.08);color:#64748b}
.changelog-close:hover{background:rgba(77,107,254,0.14);color:#4d6bfe}
.cl-entry{border-left:2px solid rgba(77,107,254,0.35)}
.cl-entry .cl-ver{background:linear-gradient(135deg,#4d6bfe,#7c3aed);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cl-entry .cl-date{color:#94a3b8}
.cl-entry .cl-text{color:#475569}
/* ------------------------------------------------------------------
   社交弹窗的激活态
   这两条在 2026-10 的 CSS 精简中被误删了：我的死规则检测脚本先点开了弹窗
   （加上 .active）、又把它关掉（去掉 .active），然后才扫描规则，于是把
   「只有激活时才存在」的规则误判成了死规则。现已恢复。
   ------------------------------------------------------------------ */
.modal-overlay.active{background:rgba(0,0,0,0.65);pointer-events:auto;opacity:1;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal-overlay.active .modal-panel{transform:scale(1) translateY(0)}

/* ============================================================
   博客文章列表 / 文章详情 / 作品集 / 时间线
   —— 以下为「内容页」样式，配色与圆角沿用站点既有令牌
   ============================================================ */

/* 列表项现在是 <a>，需要块级化并让内部 span 变成块级（用 flex 列实现） */
.blog-item{
    display:flex;flex-direction:column;
    color:inherit;text-decoration:none;cursor:pointer;
}
.blog-item-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.blog-tag{
    display:inline-block;padding:2px 9px;border-radius:999px;
    font-size:.72rem;letter-spacing:.04em;
    color:#4d6bfe;background:rgba(77,107,254,0.08);
    border:1px solid rgba(77,107,254,0.16);
}
.blog-item-more{
    display:inline-flex;align-items:center;gap:6px;margin-top:12px;
    font-size:.82rem;color:#4d6bfe;letter-spacing:.04em;
}
.blog-item:hover .blog-item-more i{transform:translateX(4px)}
.blog-item-more i{transition:transform .25s var(--ease-smooth)}

/* ---------- 文章详情 ---------- */
.blog-detail{width:100%;max-width:720px;display:flex;flex-direction:column;gap:var(--space-lg);outline:none}
.md-head{display:flex;flex-direction:column;gap:12px;padding-bottom:var(--space-md);border-bottom:1px solid rgba(15,23,42,0.08)}
.md-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.md-date{font-size:.78rem;color:#4d6bfe;letter-spacing:.12em}
.md-back{
    display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
    padding:7px 14px;border-radius:999px;font-size:.84rem;
    color:#64748b;background:transparent;border:1px solid rgba(15,23,42,0.08);
    text-decoration:none;cursor:pointer;
    transition:background-color .2s var(--ease-smooth),color .2s var(--ease-smooth),border-color .2s var(--ease-smooth);
}
.md-back:hover{background:#eef1f6;color:#1f2937;border-color:rgba(77,107,254,0.5)}
.md-foot{display:flex;justify-content:flex-start;padding-top:var(--space-md);border-top:1px solid rgba(15,23,42,0.08)}

.md-body{font-size:1rem;line-height:2;color:#334155;letter-spacing:.01em}
.md-body h1{font-family:var(--font-serif);font-size:1.65rem;line-height:1.5;color:#0f172a;letter-spacing:.03em;margin:0 0 .8em}
.md-body h2{font-family:var(--font-serif);font-size:1.28rem;line-height:1.6;color:#0f172a;letter-spacing:.03em;margin:1.9em 0 .7em}
.md-body h3{font-size:1.06rem;line-height:1.7;color:#0f172a;font-weight:600;margin:1.6em 0 .6em}
.md-body h2::before,.md-body h3::before{
    content:'';display:inline-block;width:4px;height:.82em;margin-right:10px;
    border-radius:2px;background:linear-gradient(180deg,#4d6bfe,#7c3aed);vertical-align:-2px;
}
.md-body h1::before{content:none}
.md-body p{margin:.95em 0}
.md-body ul,.md-body ol{margin:.95em 0 .95em 1.5em}
.md-body li{margin:.4em 0}
.md-body blockquote{
    margin:1.2em 0;padding:.9em 1.2em;color:#475569;
    border-left:3px solid rgba(77,107,254,0.45);
    background:rgba(77,107,254,0.05);border-radius:0 10px 10px 0;
}
.md-body blockquote p{margin:.3em 0}
.md-body code{
    font-family:var(--font-mono);font-size:.87em;padding:2px 6px;border-radius:5px;
    color:#3b56e0;background:rgba(77,107,254,0.09);
}
.md-pre{
    margin:1.2em 0;padding:16px 18px;overflow:auto;
    background:#0f172a;border-radius:12px;
    box-shadow:0 12px 30px rgba(15,23,42,0.18);
}
.md-pre code{background:none;color:#e2e8f0;padding:0;font-size:.83rem;line-height:1.8}
.md-body hr{border:none;border-top:1px solid rgba(15,23,42,0.10);margin:2em 0}
.md-body a{color:#4d6bfe;text-decoration:underline;text-underline-offset:3px}
.md-body a:hover{color:#3b56e0}
.md-body strong{color:#0f172a;font-weight:600}
.md-body em{font-style:italic;color:#475569}

/* ---------- 作品集 ---------- */
.works-section{width:100%;max-width:900px;display:flex;flex-direction:column;gap:var(--space-md)}
.works-heading{
    font-family:var(--font-serif);font-size:1.05rem;font-weight:600;
    color:#1f2937;letter-spacing:.08em;
}
.works-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-md);width:100%}
.work-card{
    display:flex;flex-direction:column;gap:10px;padding:var(--space-lg);
    background:linear-gradient(180deg,#ffffff 0%,#f4f7ff 100%);
    border:1px solid rgba(77,107,254,0.16);border-radius:16px;
    box-shadow:0 1px 0 rgba(255,255,255,0.9) inset,0 8px 26px rgba(96,116,255,0.10);
    color:inherit;text-decoration:none;
    transition:transform .3s var(--ease-smooth),box-shadow .3s var(--ease-smooth),border-color .3s var(--ease-smooth);
}
.work-card.is-link{cursor:pointer}
.work-card.is-link:hover{
    transform:translateY(-3px);border-color:rgba(77,107,254,0.5);
    box-shadow:0 1px 0 rgba(255,255,255,0.95) inset,0 16px 38px rgba(86,100,255,0.16);
}
.work-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;justify-content:space-between}
.work-name{font-size:1.06rem;font-weight:600;color:#0f172a;letter-spacing:.02em}
.work-state{
    font-size:.72rem;letter-spacing:.04em;padding:2px 9px;border-radius:999px;
    color:#0f8a5f;background:rgba(15,138,95,0.08);border:1px solid rgba(15,138,95,0.18);
    white-space:nowrap;
}
.work-desc{font-size:.92rem;line-height:1.95;color:#64748b;flex:1}
.work-tags{display:flex;flex-wrap:wrap;gap:6px}
.work-tag{
    font-family:var(--font-mono);font-size:.7rem;letter-spacing:.04em;
    padding:2px 8px;border-radius:6px;color:#475569;
    background:rgba(15,23,42,0.05);border:1px solid rgba(15,23,42,0.08);
}
.work-go{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:#4d6bfe}
.work-card.is-link:hover .work-go i{transform:translateX(4px)}
.work-go i{transition:transform .25s var(--ease-smooth)}

/* ---------- 时间线 ---------- */
.timeline{list-style:none;position:relative;padding-left:30px;width:100%}
.timeline::before{
    content:'';position:absolute;left:7px;top:10px;bottom:10px;width:2px;border-radius:2px;
    background:linear-gradient(180deg,rgba(77,107,254,0.45),rgba(124,58,237,0.10));
}
.tl-item{position:relative;padding-bottom:var(--space-lg)}
.tl-item:last-child{padding-bottom:0}
.tl-dot{
    position:absolute;left:-30px;top:5px;width:16px;height:16px;border-radius:50%;
    background:#fff;border:2px solid #4d6bfe;
    box-shadow:0 0 0 4px rgba(77,107,254,0.10);
}
.tl-body{display:flex;flex-direction:column;gap:4px}
.tl-date{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.08em;color:#4d6bfe}
.tl-title{font-size:1.02rem;font-weight:600;color:#0f172a;letter-spacing:.02em}
.tl-desc{font-size:.9rem;line-height:1.9;color:#64748b}

/* ============================================================
   无障碍：跳转到主内容
   ============================================================ */
.skip-link{
    position:absolute;left:-9999px;top:0;z-index:9999;
    padding:12px 20px;border-radius:0 0 12px 0;
    background:#4d6bfe;color:#fff;font-size:.9rem;text-decoration:none;
}
.skip-link:focus{left:0;outline:3px solid #fff;outline-offset:-3px}

/* ============================================================
   桌面演示嵌入位：全屏进入
   ============================================================ */
.os-embed{position:relative}
.os-full-btn{
    position:absolute;top:12px;right:12px;z-index:3;
    display:inline-flex;align-items:center;gap:7px;
    padding:8px 14px;border-radius:999px;cursor:pointer;
    font-size:.82rem;letter-spacing:.02em;
    color:#fff;background:rgba(15,23,42,0.58);
    border:1px solid rgba(255,255,255,0.22);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    transition:background-color .22s var(--ease-smooth),transform .22s var(--ease-smooth);
}
.os-full-btn:hover{background:rgba(15,23,42,0.78)}
.os-full-btn:active{transform:scale(.97)}

/* 注意：只要祖先元素上有 transform / animation / filter / will-change，
   它就会成为 position:fixed 的包含块，全屏就会铺不满视口；
   而且嵌入位脱离文档流后祖先自身会塌缩，尺寸会变成那个塌缩后的高度。
   所以全屏时把这些祖先的变换与动画一并关掉，并改用四边定位。 */
body.has-fullscreen .main-container,
body.has-fullscreen .page,
body.has-fullscreen .page-footer{
    transform:none !important;
    animation:none !important;
    filter:none !important;
    will-change:auto !important;
    perspective:none !important;
}
.os-embed.is-fullscreen{
    position:fixed;top:0;right:0;bottom:0;left:0;z-index:9998;
    width:auto;height:auto;
    aspect-ratio:auto;max-height:none;min-height:0;margin:0;border-radius:0;
    box-shadow:none;
}
.os-embed.is-fullscreen .os-frame{height:100%}
.os-embed.is-fullscreen .os-full-btn{top:16px;right:16px}
body.has-fullscreen{overflow:hidden}

/* ---------- 窄屏 ---------- */
@media (max-width:720px){
    .works-grid{grid-template-columns:1fr}
    .work-card{padding:var(--space-md)}
    .md-body{font-size:.96rem;line-height:1.95}
    .md-body h1{font-size:1.4rem}
    .md-body h2{font-size:1.16rem}
    .md-pre{padding:12px 14px;border-radius:10px}
    .timeline{padding-left:26px}
    .tl-dot{left:-26px;width:14px;height:14px}
    .os-full-btn{padding:7px 12px;font-size:.78rem}
}

@media (prefers-reduced-motion:reduce){
    .blog-item,.work-card,.work-card.is-link:hover,.md-back,.os-full-btn{transition:none;transform:none}
    .blog-item:hover,.work-card.is-link:hover{transform:none}
}

/* ---------- 手机窄屏：首页卡片改单列，避免挤成 120px 宽 ---------- */
@media (max-width:560px){
    .home-cards-grid{grid-template-columns:1fr;max-width:none;gap:var(--space-sm)}
    .home-card{width:100%;flex:none}
    .works-grid{grid-template-columns:1fr}
    .work-card{padding:var(--space-md)}
    .blog-item{padding:var(--space-md)}
    .blog-detail{gap:var(--space-md)}
    .os-embed{min-height:440px}
    .os-full-btn{top:8px;right:8px}
}