/* ═══════════════════════════════════════════════════════════
   WHISPER · LIQUID PROTOCOL — 共享设计系统
   (抽取自首页 introduction.html, 供落地页/博客复用)
   ═══════════════════════════════════════════════════════════ */
:root {
  --ink: #08090b; --ink2: #0e1014;
  --panel: rgba(255,255,255,0.018); --panel2: rgba(255,255,255,0.04);
  --line: rgba(255,255,255,0.07); --line2: rgba(255,255,255,0.13);
  --txt: #f4f5f7; --txt2: #c4c8d0; --mut: #8b90a0;
  --pri: #ff6a2b; --pri2: #e8531a; --ice: #ff8f5e; --acc: #ffffff;
  --r: 14px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --spring: cubic-bezier(.34,1.4,.64,1);
  --f-disp: 'Inter',-apple-system,system-ui,sans-serif;
  --f-body: 'Inter',-apple-system,system-ui,sans-serif;
  --f-mono: 'JetBrains Mono',ui-monospace,monospace;
}
html[data-bs-theme="light"] {
  --ink: #ffffff; --ink2: #f6f7f9;
  --panel: rgba(10,12,20,0.02); --panel2: rgba(10,12,20,0.045);
  --line: rgba(10,12,20,0.09); --line2: rgba(10,12,20,0.15);
  --txt: #0a0c12; --txt2: #353a45; --mut: #6b7280;
  --pri: #e8531a; --pri2: #c8410d; --ice: #f0875a; --acc: #0a0c12;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { background:var(--ink); scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--f-body); color:var(--txt); background:transparent;
  line-height:1.6; overflow-x:hidden; position:relative;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
::selection { background:var(--pri); color:var(--ink); }

/* ── 背景层 ── */
.lq-bgwrap::after {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 50% 40% at 50% -5%, rgba(255,106,43,0.06), transparent 55%);
}
.lq-grid {
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 35%,#000 10%,transparent 72%);
  mask-image:radial-gradient(ellipse 75% 65% at 50% 35%,#000 10%,transparent 72%);
}
.lq-noise {
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.lq-wrap { max-width:1100px; margin:0 auto; padding:0 32px; }
@media(max-width:640px){ .lq-wrap{ padding:0 20px; } }

/* ── 通用排版 ── */
.lq-eyebrow {
  display:inline-flex; align-items:center; gap:.6rem; font-family:var(--f-mono);
  font-size:.7rem; letter-spacing:.34em; text-transform:uppercase; color:var(--pri);
  padding:.45rem .9rem; border:1px solid var(--line2); border-radius:999px; background:var(--panel);
  backdrop-filter:blur(10px);
}
.lq-eyebrow .d { width:6px; height:6px; border-radius:50%; background:var(--pri); box-shadow:0 0 12px var(--pri); animation:lqp 2.2s ease-in-out infinite; }
@keyframes lqp { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.55)} }
.lq-h2 { font-family:var(--f-disp); font-weight:680; font-size:clamp(1.9rem,4vw,3rem); line-height:1.06; letter-spacing:-.035em; }
.lq-sub { color:var(--mut); font-size:clamp(1.02rem,1.4vw,1.15rem); line-height:1.6; max-width:52ch; margin-top:1.1rem; }
.lq-flow { color:var(--pri); }

/* ── 按钮 ── */
.lq-btn { position:relative; display:inline-flex; align-items:center; gap:.5rem; font-family:var(--f-body); font-weight:550; font-size:.96rem; padding:.7rem 1.3rem; border-radius:10px; border:1px solid var(--line2); color:var(--txt); background:transparent; overflow:hidden; transition:transform .3s var(--ease), border-color .3s, background .3s, color .3s; cursor:pointer; }
.lq-btn:hover { border-color:var(--line2); background:var(--panel2); transform:translateY(-1px); }
.lq-btn-pri { background:var(--pri); color:#fff; border-color:var(--pri); font-weight:600; }
.lq-btn-pri:hover { background:var(--pri2); border-color:var(--pri2); box-shadow:0 8px 24px rgba(255,106,43,.25); }
.lq-btn .rp { position:absolute; border-radius:50%; transform:translate(-50%,-50%) scale(0); background:radial-gradient(circle,rgba(255,255,255,.35),transparent 70%); pointer-events:none; animation:lqrp .7s var(--ease) forwards; }
@keyframes lqrp { to{ transform:translate(-50%,-50%) scale(1); opacity:0; } }

/* ── 导航 ── */
.lq-nav { position:fixed; top:0; left:0; right:0; z-index:1000; transition:padding .4s var(--ease), background .4s, border-color .4s; padding:1.1rem 0; border-bottom:1px solid transparent; }
.lq-nav.s { padding:.55rem 0; background:color-mix(in srgb, var(--ink) 72%, transparent); backdrop-filter:blur(18px) saturate(1.6); border-color:var(--line); }
.lq-nav-in { display:flex; align-items:center; justify-content:space-between; }
.lq-brand { display:inline-flex; align-items:center; gap:11px; font-family:var(--f-disp); font-weight:700; font-size:1.25rem; letter-spacing:-.02em; }
.lq-brand img { width:34px; height:34px; filter:invert(1); }
html[data-bs-theme="light"] .lq-brand img { filter:none; }
.lq-nav-act { display:flex; align-items:center; gap:.5rem; }
.lq-nav-link { font-family:var(--f-mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); padding:.5rem .8rem; border-radius:999px; transition:color .3s,background .3s; }
.lq-nav-link:hover { color:var(--txt); background:var(--panel2); }
.lq-iconbtn { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--line2); background:var(--panel); color:var(--txt); cursor:pointer; transition:transform .3s,border-color .3s; }
.lq-iconbtn:hover { transform:rotate(15deg); border-color:var(--pri); }
@media(max-width:860px){ .lq-nav-link.hide-m{ display:none; } }

/* ── section ── */
.lq-sec { padding:7rem 0; position:relative; }
@media(max-width:640px){ .lq-sec{ padding:4.5rem 0; } }
.lq-sec-head { margin-bottom:3rem; max-width:52ch; }
.lq-sec-head.center { margin-left:auto; margin-right:auto; text-align:center; }

/* ── 进度条 + 图片预览 ── */
.lq-prog { position:fixed; top:0; left:0; height:2px; width:0; z-index:2000; background:linear-gradient(90deg,var(--pri),var(--ice)); box-shadow:0 0 12px var(--pri); }
.lq-viewer { display:none; position:fixed; inset:0; z-index:5000; background:rgba(0,0,0,.9); align-items:center; justify-content:center; padding:2rem; cursor:zoom-out; }
.lq-viewer img { max-width:92vw; max-height:92vh; border-radius:12px; }

/* ── footer ── */
.lq-foot { border-top:1px solid var(--line); padding:2.5rem 0; margin-top:2rem; }
.lq-foot-in { display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; font-size:.85rem; color:var(--mut); }
.lq-foot a { color:var(--mut); transition:color .3s; }
.lq-foot a:hover { color:var(--pri); }
.lq-foot-links { display:flex; flex-wrap:wrap; gap:1.2rem; font-family:var(--f-mono); font-size:.78rem; }

/* ── 入场动画 ── */
.rv { opacity:0; transform:translateY(40px) scale(.97); filter:blur(8px); }
.rv.in { opacity:1; transform:none; filter:blur(0); transition:opacity .8s var(--ease),transform 1s var(--spring),filter .8s ease; }
.stg > * { opacity:0; transform:translateY(34px) scale(.97); filter:blur(6px); }
.stg.in > * { opacity:1; transform:none; filter:blur(0); transition:opacity .7s var(--ease),transform .9s var(--spring),filter .7s ease; }
.stg.in > *:nth-child(1){transition-delay:.05s}.stg.in > *:nth-child(2){transition-delay:.14s}.stg.in > *:nth-child(3){transition-delay:.23s}.stg.in > *:nth-child(4){transition-delay:.32s}.stg.in > *:nth-child(5){transition-delay:.41s}.stg.in > *:nth-child(6){transition-delay:.5s}
@media(prefers-reduced-motion:reduce){
  .rv,.stg>*{ opacity:1!important; transform:none!important; filter:none!important; transition:none!important; }
  .lq-flow,.lq-eyebrow .d{ animation:none!important; }
  html{ scroll-behavior:auto; }
}

/* ── HERO(通用居中叙事) ── */
.lq-phero { position:relative; padding:9rem 0 3rem; text-align:center; }
.lq-phero-title { font-family:var(--f-disp); font-weight:680; font-size:clamp(2.2rem,5.5vw,4rem); line-height:1.04; letter-spacing:-.04em; margin:1.4rem auto 0; max-width:18ch; }
.lq-phero-desc { color:var(--txt2); font-size:clamp(1.02rem,1.4vw,1.22rem); line-height:1.6; max-width:46ch; margin:1.4rem auto 2rem; }
.lq-phero-cta { display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }
.lq-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2.2rem; justify-content:center; }
.lq-chip { font-family:var(--f-mono); font-size:.72rem; letter-spacing:.04em; color:var(--mut); padding:.4rem .8rem; border:1px solid var(--line); border-radius:999px; display:inline-flex; align-items:center; gap:.4rem; transition:color .3s,border-color .3s; }
.lq-chip:hover { color:var(--txt); border-color:var(--line2); }
.lq-chip i { color:var(--pri); }

/* ── 卡片网格 ── */
.lq-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
@media(max-width:900px){ .lq-cards{ grid-template-columns:1fr; } }
.lq-cards.two { grid-template-columns:repeat(2,1fr); }
@media(max-width:820px){ .lq-cards.two{ grid-template-columns:1fr; } }
.lq-card { position:relative; padding:1.9rem; border:1px solid var(--line); border-radius:18px; background:var(--panel); overflow:hidden; transition:transform .5s var(--ease),border-color .4s; will-change:transform; display:flex; flex-direction:column; }
.lq-card::before { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(255,106,43,.10),transparent 60%); opacity:0; transition:opacity .4s; pointer-events:none; }
.lq-card:hover::before { opacity:1; }
.lq-card:hover { border-color:var(--line2); transform:translateY(-4px); }
.lq-card-ico { width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:var(--pri); background:color-mix(in srgb,var(--pri) 12%,transparent); border:1px solid color-mix(in srgb,var(--pri) 32%,transparent); margin-bottom:1.1rem; }
.lq-card h3 { font-family:var(--f-disp); font-weight:640; font-size:1.28rem; letter-spacing:-.02em; }
.lq-card p { color:var(--mut); font-size:.95rem; margin-top:.6rem; line-height:1.55; }
.lq-card-tag { font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; color:var(--pri); text-transform:uppercase; margin-bottom:.6rem; }

/* ── FAQ 手风琴 ── */
.lq-faq { display:grid; gap:.8rem; max-width:920px; }
.lq-q { border:1px solid var(--line); border-radius:14px; background:var(--panel); overflow:hidden; transition:border-color .3s; }
.lq-q.open { border-color:var(--pri); }
.lq-q-btn { width:100%; text-align:left; background:none; border:none; color:var(--txt); font-family:var(--f-disp); font-weight:600; font-size:1.08rem; padding:1.3rem 1.5rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; cursor:pointer; }
.lq-q-btn i { color:var(--pri); transition:transform .4s var(--ease); flex-shrink:0; }
.lq-q.open .lq-q-btn i { transform:rotate(45deg); }
.lq-q-body { max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
.lq-q-body p { padding:0 1.5rem 1.4rem; color:var(--mut); font-size:.96rem; line-height:1.7; }

/* ── 博客列表卡 ── */
.lq-posts { display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; }
@media(max-width:820px){ .lq-posts{ grid-template-columns:1fr; } }
.lq-post { position:relative; display:flex; flex-direction:column; padding:1.7rem; border:1px solid var(--line); border-radius:18px; background:var(--panel); overflow:hidden; transition:transform .5s var(--ease),border-color .4s; }
.lq-post::before { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(255,106,43,.10),transparent 60%); opacity:0; transition:opacity .4s; pointer-events:none; }
.lq-post:hover::before { opacity:1; }
.lq-post:hover { border-color:var(--line2); transform:translateY(-4px); }
.lq-post-meta { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.lq-post-date { font-family:var(--f-mono); font-size:.74rem; color:var(--mut); flex-shrink:0; }
.lq-post h3 { font-family:var(--f-disp); font-weight:640; font-size:1.3rem; letter-spacing:-.02em; line-height:1.3; }
.lq-post p { color:var(--mut); font-size:.94rem; margin-top:.6rem; line-height:1.6; flex:1; }
.lq-tags { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.2rem; }
.lq-tag { font-family:var(--f-mono); font-size:.72rem; color:var(--mut); padding:.32rem .65rem; border:1px solid var(--line); border-radius:7px; display:inline-flex; gap:.35rem; align-items:center; }
.lq-tag i { color:var(--pri); }
.lq-empty { padding:3rem; text-align:center; color:var(--mut); border:1px dashed var(--line2); border-radius:16px; }

/* ── CTA 横幅 ── */
.lq-cta { position:relative; padding:3.2rem 2.6rem; border:1px solid var(--line2); border-radius:24px; background:linear-gradient(135deg,var(--ink2),rgba(255,106,43,.08)); overflow:hidden; text-align:center; }
.lq-cta h2 { font-family:var(--f-disp); font-size:clamp(1.6rem,3.5vw,2.4rem); font-weight:700; letter-spacing:-.03em; }
.lq-cta p { color:var(--mut); margin:.9rem auto 1.6rem; max-width:48ch; }

/* ── 文章正文(markdown) ── */
.lq-article { border:1px solid var(--line); border-radius:20px; background:var(--panel); padding:2.6rem; max-width:820px; margin:0 auto; }
@media(max-width:640px){ .lq-article{ padding:1.6rem; } }
.lq-article-head h1 { font-family:var(--f-disp); font-weight:700; font-size:clamp(1.8rem,4vw,2.6rem); letter-spacing:-.03em; line-height:1.15; }
.lq-article-sub { color:var(--txt2); margin-top:1rem; font-size:1.02rem; line-height:1.6; }
.lq-md { line-height:1.85; color:var(--txt2); margin-top:1.8rem; }
.lq-md h1,.lq-md h2,.lq-md h3 { font-family:var(--f-disp); color:var(--txt); margin:2rem 0 1rem; letter-spacing:-.02em; line-height:1.3; }
.lq-md h2 { font-size:1.6rem; } .lq-md h3 { font-size:1.3rem; }
.lq-md p { margin:1rem 0; } .lq-md ul,.lq-md ol { margin:1rem 0 1rem 1.4rem; }
.lq-md li { margin:.4rem 0; }
.lq-md a { color:var(--pri); border-bottom:1px solid color-mix(in srgb,var(--pri) 40%,transparent); }
.lq-md a:hover { color:var(--ice); }
.lq-md pre { background:#0b0d11; padding:1.2rem 1.3rem; border-radius:12px; border:1px solid var(--line); overflow:auto; margin:1.3rem 0; }
html[data-bs-theme="light"] .lq-md pre { background:#0d1017; }
.lq-md pre code { font-family:var(--f-mono); font-size:.86rem; color:#d7dbe4; }
.lq-md :not(pre)>code { font-family:var(--f-mono); font-size:.86em; padding:.15em .4em; border-radius:6px; background:var(--panel2); border:1px solid var(--line); color:var(--ice); }
.lq-md blockquote { border-left:3px solid var(--pri); padding:.4rem 0 .4rem 1.2rem; margin:1.3rem 0; color:var(--mut); }
.lq-md img { border-radius:12px; margin:1.3rem 0; border:1px solid var(--line); }
.lq-md table { width:100%; border-collapse:collapse; margin:1.3rem 0; font-size:.92rem; }
.lq-md th,.lq-md td { border:1px solid var(--line); padding:.6rem .8rem; text-align:left; }
.lq-md th { background:var(--panel2); font-family:var(--f-disp); color:var(--txt); }
.lq-divline { height:1px; background:var(--line); margin:1.8rem 0; }