/* =========================================================
   沉浸式知乎 · 视差主页样式
   宣纸主题取自脚本 THEMES[0]（📜 宣纸）
   ========================================================= */

/* ---- 宣纸主题变量（与脚本 constants.js 完全一致）---- */
:root{
  --zh-bg:#E5DEC9; --zh-paper:#F8F4E6; --zh-text:#2b2b2b; --zh-title:#1a1a1a;
  --zh-accent:#8B2626; --zh-border:#d4cbb8; --zh-quote:#f0ebe1; --zh-code:#eae5d9;
  --zh-modal-bg:#F8F4E6;
  --ink:#2b2b2b; --serif:'Times New Roman','KaiTi','STKaiti',serif;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* 演示舞台的主题切换（只作用于 .zh-stage 内部） */
.zh-stage[data-theme="zhu"]{--zh-bg:#D6E4D0;--zh-paper:#EDF5EA;--zh-text:#2C3E2E;--zh-title:#1B2A1E;--zh-accent:#3D7A4A;--zh-border:#B3CCAF;--zh-quote:#DDE9DA;--zh-code:#D4E2D0;--zh-modal-bg:#EDF5EA}
.zh-stage[data-theme="niu"]{--zh-bg:#D4C4A8;--zh-paper:#F5EBDA;--zh-text:#3D2E1C;--zh-title:#2A1A08;--zh-accent:#8B5E34;--zh-border:#C9B896;--zh-quote:#EDE3D1;--zh-code:#E8DCCA;--zh-modal-bg:#F5EBDA}
.zh-stage[data-theme="xue"]{--zh-bg:#0F0F0F;--zh-paper:#1A1A1A;--zh-text:#C8C8C8;--zh-title:#E0E0E0;--zh-accent:#C0392B;--zh-border:#2E2E2E;--zh-quote:#222;--zh-code:#161616;--zh-modal-bg:#242424}
.zh-stage[data-theme="bai"]{--zh-bg:#F0F2F5;--zh-paper:#fff;--zh-text:#1F2937;--zh-title:#111827;--zh-accent:#2563EB;--zh-border:#E5E7EB;--zh-quote:#F8FAFC;--zh-code:#F3F4F6;--zh-modal-bg:#fff}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--serif); color:var(--ink);
  background:#E5DEC9; line-height:1.8; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--zh-accent)}
img{max-width:100%}

/* ===================== 视差背景 ===================== */
.px-bg{position:fixed; inset:0; z-index:-1; overflow:hidden; background:
  radial-gradient(120% 80% at 50% -10%, #efe7d0 0%, #e5dec9 45%, #ddd3ba 100%);}
.px-layer{position:absolute; inset:-15% -5%; will-change:transform;}
.px-paper{
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 2px, transparent 2px 4px),
    radial-gradient(60% 40% at 20% 20%, rgba(139,38,38,.05), transparent 60%),
    radial-gradient(50% 50% at 85% 70%, rgba(60,40,20,.06), transparent 60%);
}
.px-ink{filter:blur(2px); opacity:.5;}
.px-ink-1{background:
  radial-gradient(38% 30% at 78% 18%, rgba(43,43,43,.22), transparent 70%),
  radial-gradient(30% 22% at 12% 78%, rgba(43,43,43,.16), transparent 70%);}
.px-ink-2{background:
  radial-gradient(26% 20% at 65% 80%, rgba(139,38,38,.10), transparent 70%),
  radial-gradient(22% 18% at 30% 30%, rgba(43,43,43,.10), transparent 70%);}
.px-seal{background:
  radial-gradient(8% 6% at 88% 30%, rgba(139,38,38,.18), transparent 60%),
  radial-gradient(6% 5% at 8% 40%, rgba(139,38,38,.12), transparent 60%);}
.px-grain{position:absolute; inset:0; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");}

/* ===================== 顶部导航 ===================== */
.nav{position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:24px; padding:14px 6vw;
  background:rgba(248,244,230,.0); border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s, box-shadow .35s, padding .35s;}
.nav.scrolled{background:rgba(248,244,230,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--zh-border); box-shadow:0 4px 20px rgba(0,0,0,.05); padding:10px 6vw;}
.nav-brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--zh-title); margin-right:auto;}
.nav-seal{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  background:var(--zh-accent); color:#F8F4E6; border-radius:4px; font-weight:bold; font-size:20px;
  box-shadow:0 3px 8px rgba(139,38,38,.3);}
.nav-title{font-size:19px; font-weight:bold; letter-spacing:1px;}
.nav-links{display:flex; gap:26px;}
.nav-links a{color:var(--zh-text); text-decoration:none; font-size:15px; opacity:.8; transition:opacity .2s, color .2s;}
.nav-links a:hover{opacity:1; color:var(--zh-accent);}
.nav-cta{text-decoration:none; padding:8px 18px; border:1px solid var(--zh-accent);
  border-radius:4px; color:var(--zh-accent); font-size:14px; transition:all .2s;}
.nav-cta:hover{background:var(--zh-accent); color:#F8F4E6;}

/* ===================== 英雄区 ===================== */
.hero{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:120px 6vw 124px; position:relative;}
.hero-inner{max-width:820px;}
.hero-eyebrow{letter-spacing:4px; font-size:13px; color:var(--zh-accent); opacity:.85; margin:0 0 18px; text-transform:uppercase;}
.hero-title{font-size:clamp(42px,8vw,84px); margin:0 0 24px; color:var(--zh-title); font-weight:bold;
  letter-spacing:4px; line-height:1.2; text-shadow:0 2px 0 rgba(255,255,255,.4);}
.hero-sep{color:var(--zh-accent);}
.hero-sub{font-size:clamp(16px,2.2vw,21px); color:var(--zh-text); opacity:.82; margin:0 auto 38px; max-width:660px; line-height:2;}
.hero-cta{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:18px;}
.hero-note{font-size:14px; opacity:.7; margin:0 auto 44px; max-width:560px;}
.hero-note a{color:var(--zh-accent);}
.hero-stats{display:flex; gap:48px; justify-content:center; flex-wrap:wrap; margin-bottom:28px;}
.stat{display:flex; flex-direction:column; align-items:center;}
.stat b{font-size:40px; color:var(--zh-accent); line-height:1;}
.stat span{font-size:13px; opacity:.7; margin-top:6px; letter-spacing:1px;}
.hero-scroll{position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  font-size:13px; opacity:.6; letter-spacing:2px; display:flex; flex-direction:column; align-items:center; gap:8px;}
.hero-scroll span{width:1px; height:34px; background:linear-gradient(var(--zh-accent),transparent); animation:scrolldrop 1.8s infinite;}
@keyframes scrolldrop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---- 通用按钮 ---- */
.btn{display:inline-flex; align-items:center; gap:9px; padding:13px 26px; border-radius:5px;
  font-family:var(--serif); font-size:16px; cursor:pointer; border:1px solid var(--zh-accent);
  transition:transform .15s var(--ease), box-shadow .25s, background .2s, color .2s; text-decoration:none;}
.btn small{display:block; font-size:11px; opacity:.75; letter-spacing:1px; font-weight:normal;}
.btn svg{flex-shrink:0;}
.btn-primary{background:var(--zh-accent); color:#F8F4E6; box-shadow:0 6px 18px rgba(139,38,38,.28);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(139,38,38,.36);}
.btn-ghost{background:var(--zh-paper); color:var(--zh-accent);}
.btn-ghost:hover{transform:translateY(-2px); background:var(--zh-accent); color:#F8F4E6;}

/* ===================== 通用区块标题 ===================== */
section{position:relative; padding:90px 6vw;}
.section-head{max-width:760px; margin:0 auto 50px; text-align:center;}
.section-eyebrow{letter-spacing:4px; font-size:12px; color:var(--zh-accent); opacity:.8; margin:0 0 12px;}
.section-title{font-size:clamp(28px,5vw,44px); color:var(--zh-title); margin:0 0 16px; letter-spacing:2px;
  display:inline-block; border-bottom:2px solid var(--zh-accent); padding-bottom:10px;}
.section-desc{font-size:16px; opacity:.78; margin:0; line-height:1.9;}

/* 滚动入场动画 */
.reveal{opacity:0; transform:translateY(36px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1; transform:none;}

/* ===================== 演示区 ===================== */
.demo{background:linear-gradient(180deg, rgba(248,244,230,0), rgba(248,244,230,.35) 30%, rgba(248,244,230,.35) 70%, rgba(248,244,230,0));}
.demo-themebar{display:flex; align-items:center; gap:10px; justify-content:center; margin:0 auto 22px; font-size:14px; opacity:.85;}
.theme-dot{width:24px; height:24px; border-radius:50%; cursor:pointer; padding:0;
  border:2px solid rgba(0,0,0,.15); background:
  radial-gradient(circle at 35% 35%, var(--p) 0 48%, var(--d) 52% 100%);
  transition:transform .2s var(--ease), box-shadow .2s;}
.theme-dot:hover{transform:scale(1.15);}
.theme-dot.is-active{box-shadow:0 0 0 3px var(--zh-accent); transform:scale(1.12);}

/* 浏览器外壳 */
.browser{max-width:1180px; margin:0 auto; border-radius:12px; overflow:hidden;
  background:#cfc6b0; box-shadow:0 30px 80px rgba(43,30,15,.28), 0 6px 18px rgba(0,0,0,.12);
  border:1px solid rgba(255,255,255,.4);}
.browser-bar{display:flex; align-items:center; gap:8px; padding:11px 16px; background:#e9e2d0; border-bottom:1px solid #cfc6b0;}
.browser-bar .dot{width:12px; height:12px; border-radius:50%;}
.dot.r{background:#ec6a5e}.dot.y{background:#f4bf4f}.dot.g{background:#61c554}
.browser-url{flex:0 1 auto; margin-left:10px; padding:5px 16px; background:#f6f1e4; border-radius:20px;
  font-size:12px; color:#7a7363; border:1px solid #d9d0bd; max-width:280px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.browser-tabs{margin-left:auto; display:flex; gap:6px;}
.vtab{padding:6px 14px; border:1px solid #d0c7b2; background:#f1ebdc; color:#6a6354;
  border-radius:6px; cursor:pointer; font-family:var(--serif); font-size:13px; transition:all .2s;}
.vtab:hover{border-color:var(--zh-accent); color:var(--zh-accent);}
.vtab.is-active{background:var(--zh-accent); color:#fff; border-color:var(--zh-accent);}

/* 真实渲染舞台：背景用主题 --zh-bg，模拟 body 50px 内边距 */
.zh-stage{position:relative; background:var(--zh-bg); min-height:560px; max-height:680px; overflow:auto;
  padding:40px 0; transition:background .5s ease; font-size:16px; line-height:2.0;}
.zh-view{display:none; animation:zh-page-enter .35s ease-out;}
.zh-view.is-active{display:block;}
@keyframes zh-page-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.demo-hint{text-align:center; font-size:14px; opacity:.7; margin:26px auto 0; max-width:680px;}

/* =========================================================
   以下为脚本核心样式的复刻（取自 src/styles.js，按宣纸主题渲染）
   ========================================================= */
#immersive-wrapper{position:relative; max-width:760px; margin:0 auto; padding:48px 64px;
  background-color:var(--zh-paper); border-radius:4px; box-shadow:0 4px 25px rgba(0,0,0,.06);
  color:var(--zh-text); line-height:2.0; font-size:17px;
  border-left:2px solid var(--zh-accent); border-right:1px solid var(--zh-border);
  transition:all .5s ease;}
#immersive-wrapper.zh-home-wide{max-width:1080px; padding:24px 40px 36px; border-left:none; border-right:none;
  box-shadow:none; background:transparent;}
#immersive-wrapper h1,#immersive-wrapper h2{font-weight:bold; color:var(--zh-title);
  border-bottom:1px dashed var(--zh-border); padding-bottom:12px; margin-top:1.4em;}
#immersive-wrapper blockquote{border-left:4px solid var(--zh-accent); background:var(--zh-quote);
  color:var(--zh-text); padding:14px 20px; margin:20px 0;}
#immersive-wrapper a{color:var(--zh-accent); text-decoration:none; border-bottom:1px solid var(--zh-accent);}
#immersive-wrapper pre{background-color:var(--zh-code); font-family:Consolas,monospace; font-size:.92em;
  padding:1em 1.2em; border-radius:6px; overflow-x:auto; line-height:1.5;}
#immersive-wrapper pre code{background:transparent; padding:0; font-family:inherit;}

/* 首页标题 / 问题标题 */
.zh-home-title{margin:0 0 14px; padding-bottom:12px; border-bottom:2px solid var(--zh-accent);
  font-size:26px; line-height:1.4; color:var(--zh-title);}
.zh-question-title{margin:0 0 18px; padding-bottom:16px; border-bottom:2px solid var(--zh-accent);
  font-size:28px; line-height:1.45; color:var(--zh-title);}
.zh-has-top-nav .zh-question-title,.zh-has-top-nav .zh-home-title{padding-right:290px;}

/* 首页导航工具栏 */
.zh-home-toolbar{display:flex; align-items:center; gap:8px; margin:0 0 14px; flex-wrap:wrap;}
.zh-home-nav-btn{display:inline-flex; align-items:center; gap:4px; padding:6px 12px;
  border:1px solid var(--zh-border); border-radius:6px; background:var(--zh-paper); color:var(--zh-text);
  cursor:pointer; font-family:inherit; font-size:13px; transition:all .15s ease;}
.zh-home-nav-btn:hover:not(:disabled){border-color:var(--zh-accent); color:var(--zh-accent); background:var(--zh-quote);}
.zh-home-nav-btn:disabled{opacity:.35; cursor:not-allowed;}
.zh-home-nav-icon{font-size:16px; font-weight:bold; line-height:1;}
.zh-home-nav-indicator{font-size:13px; color:var(--zh-text); opacity:.6; padding:0 4px; white-space:nowrap;}
.zh-home-layout-btn{margin-left:auto;}

/* 首页卡片网格 */
.zh-home-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:6px;}
.zh-home-card{border:1px solid var(--zh-border); border-radius:8px; padding:16px 18px; background:var(--zh-paper);
  cursor:pointer; transition:border-color .2s, transform .15s, box-shadow .2s;
  display:flex; flex-direction:column; gap:8px;}
.zh-home-card:hover{border-color:var(--zh-accent); transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.08);}
.zh-home-card-title{font-size:17px; font-weight:bold; color:var(--zh-title); line-height:1.5; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.zh-home-card-meta{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--zh-accent); opacity:.85; flex-wrap:wrap;}
.zh-home-card-meta .av{width:20px; height:20px; border-radius:3px; flex-shrink:0; background:var(--zh-accent); opacity:.55;}
.zh-home-card-type{display:inline-block; font-size:11px; padding:1px 5px; border-radius:3px;
  background:var(--zh-quote); color:var(--zh-accent); border:1px solid var(--zh-border); white-space:nowrap;}
.zh-home-card-snippet{font-size:14px; color:var(--zh-text); opacity:.6; line-height:1.6; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

/* 阅读视图：顶部导航条 */
.zh-reader-top-nav{position:absolute; top:18px; right:18px; z-index:3; max-width:270px;
  display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:6px;
  margin:0; padding:6px 7px; border:1px solid var(--zh-border); border-radius:4px;
  background:var(--zh-paper); box-shadow:0 4px 14px rgba(0,0,0,.08); font-size:12px; line-height:1.2; opacity:.94;}
.zh-inline-btn{padding:4px 7px; border:1px solid var(--zh-accent); border-radius:4px;
  background:var(--zh-paper); color:var(--zh-accent); cursor:pointer; font-family:inherit; font-size:12px; line-height:1.2;}
.zh-inline-btn:hover{background:var(--zh-accent); color:var(--zh-paper);}
.zh-nav-current{display:inline-flex; align-items:center; color:var(--zh-accent); font-weight:bold; padding:4px 2px; white-space:nowrap;}
.zh-toread-btn{display:inline-flex; align-items:center; justify-content:center; width:28px; height:26px; padding:0;}
.zh-toread-btn svg{fill:none; stroke:currentColor; stroke-width:2; width:15px; height:15px;}
.zh-toread-btn.zh-btn-active svg{fill:currentColor;}

/* 问题补充折叠块 */
.zh-question-detail{margin:0 0 26px; border:1px dashed var(--zh-border); background:var(--zh-quote); border-radius:4px; padding:0 16px;}
.zh-question-detail summary{cursor:pointer; color:var(--zh-accent); font-weight:bold; padding:12px 0;}
.zh-question-detail-body{padding:0 0 16px;}

/* 作者信息 */
.zh-api-author{display:flex; align-items:center; gap:10px; margin:8px 0 16px;}
.zh-api-author .zh-api-avatar{width:38px; height:38px; border-radius:5px; flex:0 0 38px; background:var(--zh-accent); opacity:.6;}
.zh-api-author-text{flex:1; min-width:0; line-height:1.5;}
.zh-api-author-text small{opacity:.7;}

/* AI 摘要 / 翻译卡片 */
.zh-tr-card{margin:10px 0 25px; padding:12px 18px; background-color:var(--zh-quote);
  border-left:3px dashed var(--zh-accent); border-radius:4px; font-size:.95em; color:var(--zh-text);}
.zh-summary-card{border-left:4px solid var(--zh-accent); font-weight:500; margin-bottom:30px;}

/* 互动栏 action bar */
.zh-api-action-bar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:24px;
  padding-top:16px; border-top:1px dashed var(--zh-border);}
.zh-action-btn{display:inline-flex; align-items:center; gap:4px; padding:6px 12px;
  border:1px solid var(--zh-border); border-radius:4px; background:var(--zh-paper); color:var(--zh-text);
  cursor:pointer; font-family:inherit; font-size:13px; line-height:1.3; transition:all .15s ease;}
.zh-action-btn:hover{border-color:var(--zh-accent); color:var(--zh-accent);}
.zh-action-vote-up.is-active{background:#0066ff; border-color:#0066ff; color:#fff;}
.zh-action-vote-down.is-active{background:#f56c6c; border-color:#f56c6c; color:#fff;}

/* 浮动侧边工具栏（演示中绝对定位于舞台右下） */
#zh-tools-panel{position:absolute; bottom:24px; right:24px; display:flex; flex-direction:column; gap:10px; z-index:8;}
.zh-square-btn{width:38px; height:38px; background-color:var(--zh-paper); border:1px solid var(--zh-accent);
  border-radius:4px; box-shadow:0 4px 10px rgba(0,0,0,.15); display:flex; align-items:center; justify-content:center;
  color:var(--zh-accent); cursor:pointer; transition:all .2s ease; padding:0;}
.zh-square-btn:hover{background-color:var(--zh-accent); color:var(--zh-paper);}
.zh-square-btn svg{fill:currentColor; width:20px; height:20px;}
#immersive-exit-btn{position:absolute; bottom:24px; left:24px; padding:8px 16px; background-color:var(--zh-paper);
  color:var(--zh-accent); border:1px solid var(--zh-accent); border-radius:4px; font-family:'KaiTi',var(--serif);
  cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,.15); z-index:8;}
#immersive-exit-btn:hover{background:var(--zh-accent); color:var(--zh-paper);}
/* 专属工具按钮（分享/Wiki）的显隐由 main.js 按当前视图控制 */

/* ===================== 功能区 ===================== */
.feature-grid{max-width:1080px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.feature-card{background:var(--zh-paper); border:1px solid var(--zh-border); border-left:3px solid var(--zh-accent);
  border-radius:8px; padding:26px 24px; transition:transform .2s var(--ease), box-shadow .25s;}
.feature-card:hover{transform:translateY(-4px); box-shadow:0 14px 34px rgba(43,30,15,.14);}
.feature-icon{width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:var(--zh-quote); border:1px solid var(--zh-border); border-radius:8px; color:var(--zh-accent); margin-bottom:16px;}
.feature-icon svg{width:24px; height:24px; fill:currentColor;}
.feature-card h3{margin:0 0 10px; color:var(--zh-title); font-size:19px; letter-spacing:1px;}
.feature-card p{margin:0; font-size:14.5px; opacity:.78; line-height:1.85;}

/* ===================== 安装区 ===================== */
.install{background:linear-gradient(180deg, rgba(248,244,230,0), rgba(229,222,201,.5));}
.install-grid{max-width:920px; margin:0 auto 40px; display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.install-card{position:relative; background:var(--zh-paper); border:1px solid var(--zh-border);
  border-radius:12px; padding:34px 30px; box-shadow:0 10px 30px rgba(43,30,15,.08); text-align:left;}
.install-tag{position:absolute; top:-12px; right:24px; background:var(--zh-accent); color:#F8F4E6;
  font-size:12px; padding:4px 12px; border-radius:20px; letter-spacing:2px;}
.install-tag.alt{background:#6a6354;}
.install-card h3{margin:0 0 12px; color:var(--zh-title); font-size:23px; letter-spacing:1px;}
.install-card p{margin:0 0 18px; font-size:15px; opacity:.8; line-height:1.9; min-height:84px;}
.install-card code{background:var(--zh-code); padding:2px 6px; border-radius:3px; font-size:.9em;}
.install-stats{display:flex; gap:10px; margin:0 0 20px; flex-wrap:wrap;}
.install-stat{flex:1; min-width:84px; background:var(--zh-quote); border:1px solid var(--zh-border);
  border-radius:8px; padding:10px 8px; text-align:center; font-size:12px; color:var(--zh-text); opacity:.85;}
.install-stat b{display:block; font-size:22px; color:var(--zh-accent); line-height:1.2; margin-bottom:2px;}
.install-foot{margin:12px 0 0 !important; font-size:13px !important; opacity:.62 !important; min-height:0 !important; line-height:1.6 !important;}
.install-btn{width:100%; justify-content:center;}
.install-alt{display:inline-block; margin-top:14px; font-size:13px; opacity:.8; text-decoration:none;}
.install-alt:hover{text-decoration:underline;}
.install-steps{max-width:720px; margin:0 auto; padding:0; list-style:none; counter-reset:step;
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.install-steps li{counter-increment:step; position:relative; background:var(--zh-paper); border:1px dashed var(--zh-border);
  border-radius:8px; padding:20px 18px 18px; font-size:14px; opacity:.9; line-height:1.7;}
.install-steps li::before{content:counter(step); position:absolute; top:-14px; left:18px; width:28px; height:28px;
  background:var(--zh-accent); color:#F8F4E6; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px;}
.install-steps b{color:var(--zh-accent); display:block; margin-bottom:4px;}
kbd{background:var(--zh-code); border:1px solid var(--zh-border); border-radius:3px; padding:1px 6px; font-family:Consolas,monospace; font-size:.85em;}

/* ===================== 页脚 ===================== */
.footer{text-align:center; padding:70px 6vw 50px;}
.footer-seal{width:50px; height:50px; margin:0 auto 18px; background:var(--zh-accent); color:#F8F4E6;
  border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:bold;
  box-shadow:0 6px 16px rgba(139,38,38,.3);}
.footer-quote{font-size:20px; color:var(--zh-title); letter-spacing:3px; margin:0 0 20px;}
.footer-links{display:flex; gap:12px; justify-content:center; align-items:center; margin-bottom:16px; opacity:.85;}
.footer-links a{color:var(--zh-accent); text-decoration:none;}
.footer-links a:hover{text-decoration:underline;}
.footer-copy{font-size:13px; opacity:.6; margin:0;}

/* ===================== Toast ===================== */
#toast{position:fixed; top:80px; left:50%; transform:translateX(-50%) translateY(-12px); z-index:9999;
  padding:11px 24px; background:var(--zh-paper); color:var(--zh-text); border:1px solid var(--zh-border);
  border-radius:8px; font-size:14px; box-shadow:0 6px 24px rgba(0,0,0,.14); opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s;}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ===================== 响应式 ===================== */
@media (max-width:920px){
  .feature-grid{grid-template-columns:1fr 1fr;}
  .install-grid{grid-template-columns:1fr;}
  .zh-home-grid{grid-template-columns:1fr;}
  #immersive-wrapper{padding:36px 28px;}
  .zh-has-top-nav .zh-question-title{padding-right:0;}
  .zh-reader-top-nav{position:static; max-width:none; justify-content:flex-start; margin:0 0 18px;}
}
@media (max-width:680px){
  .nav-links{display:none;}
  .feature-grid,.install-steps{grid-template-columns:1fr;}
  .hero-stats{gap:30px;}
  section{padding:64px 5vw;}
  #immersive-wrapper.zh-home-wide{padding:18px 14px;}
  .browser-url{display:none;}
  #zh-tools-panel{bottom:14px; right:14px;}
  #immersive-exit-btn{bottom:14px; left:14px; font-size:13px;}
}
@media (prefers-reduced-motion:reduce){
  .px-layer{transform:none !important;}
  .reveal{opacity:1; transform:none;}
  html{scroll-behavior:auto;}
}