/* subset of src/index.css (header/footer/btn) + blog styles */
:root {
  --peach: #f7c9b8;
  --peach-deep: #f0a890;
  --lavender: #d4c4ee;
  --lilac: #c8b4e8;
  --bg: #faf6fb;
  --bg2: #fff8f5;
  --card: #ffffffc7;
  --text: #3d2a5c;
  --muted: #7a6a90;
  --line: #5a3c781f;
  --accent: #9b6bb8;
  --accent2: #7b4fa0;
  --accent-soft: #e8d4f0;
  --danger: #c47a8a;
  --ok: #6a9a88;
  --glow: 0 8px 32px #b48cc82e, 0 2px 8px #f0a08c1f;
  --radius: 18px;
  color: var(--text);
  background: linear-gradient(105deg, #fce8de 0%, #f8e4f0 42%, #ebe0f8 100%) fixed;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Songti TC", "Noto Serif TC", "PingFang TC", serif;
  line-height: 1.55;
}
* { box-sizing: border-box; }
html, body, #root { min-height: 100%; margin: 0; }
body {
  background-image:
    radial-gradient(80% 50% at 10% 0, #ffd2be8c, transparent 55%),
    radial-gradient(70% 45% at 90% 10%, #d2bef580, transparent 50%),
    linear-gradient(105deg, #fce8de 0%, #f8e4f0 45%, #ebe0f8 100%);
  background-attachment: fixed;
  min-height: 100vh;
  color: var(--text);
}
a { color: inherit; text-decoration: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.wrap { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; }
.topbar {
  z-index: 20;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--line);
  background: #fff8fac7;
  position: sticky;
  top: 0;
  box-shadow: 0 4px 24px #a078b414;
}
.topbar-inner { display: flex; align-items: center; gap: 1rem; padding: .9rem 0; }
.topbar-inner { display: flex; align-items: center; gap: 1rem; padding: .9rem 0; }
.brand {
  display: flex; align-items: center; gap: .65rem;
  letter-spacing: .04em; color: var(--text); font-weight: 600;
}
/* STATIC logo — no glow blur / drop-shadow shimmer / CSS animation */
.brand-mark {
  width: 42px; height: 42px; flex-shrink: 0;
  filter: none;
}
.brand-copy { display: flex; flex-direction: column; line-height: 1.2; }
.brand-copy .brand-zh { letter-spacing: .12em; font-size: 1.05rem; }
.brand-copy .brand-en { letter-spacing: .14em; color: var(--accent2); font-size: .78rem; font-weight: 500; }
.brand small {
  display: block; margin-top: .15rem;
  color: var(--muted); letter-spacing: .06em; font-size: .68rem; font-weight: 400;
}
.nav {
  display: flex; flex-wrap: wrap; gap: .9rem; margin-left: auto;
  color: var(--muted); font-size: .92rem;
}
.nav a:hover { color: var(--accent2); }
.nav a:hover { color: var(--accent2); }
.btn {
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #c9a0d8, #a878c8 45%, #9b6bb8);
  border: 0;
  border-radius: 999px;
  padding: .65rem 1.15rem;
  font-weight: 600;
  transition: .2s ease;
  box-shadow: 0 4px 16px #9b6bb847, 0 0 20px #ffc8b426;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.btn:hover:not(:disabled) {
  filter: brightness(1.05);
  box-shadow: 0 6px 22px #9b6bb861;
}
.btn:hover:not(:disabled) {
  filter: brightness(1.05);
  box-shadow: 0 6px 22px #9b6bb861;
}
.btn.ghost {
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: none;
  background: #ffffff8c;
}
.btn.ghost:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  background: #fff;
}
.btn.ghost:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  background: #fff;
}
.footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  padding: 2rem 0 3rem;
  font-size: .88rem;
  display: grid;
  gap: .45rem;
}
.empty { color: var(--muted); padding: 2rem 0; }
.footer-links{display:flex;flex-wrap:wrap;gap:.9rem}
.blog-head{padding:2.2rem 0 1rem}.blog-head h1{font-weight:500;margin:0 0 .4rem}.blog-head p{color:var(--muted);margin:0}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.2rem;padding:1rem 0 2.5rem}
.post-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--glow)}
.post-card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.post-card-body{padding:1rem 1.1rem 1.2rem}.post-card h2{font-size:1.1rem;font-weight:500;margin:0 0 .3rem}.post-card p{margin:.3rem 0;color:var(--muted);font-size:.92rem}
.post{max-width:760px;margin:0 auto;padding:1.5rem 0 2.5rem;font-size:1.04rem;line-height:1.85}
.post h1{font-weight:500;line-height:1.35;margin:.3rem 0}.post h2{font-weight:500;margin-top:2.2rem}
.post .meta,.crumb{color:var(--muted);font-size:.9rem}.crumb a{color:var(--accent2);display:inline-flex;align-items:center;min-height:44px;padding:.35rem .2rem}
.post ol li a{display:inline-flex;align-items:center;min-height:44px;padding:.25rem 0}
.post img{max-width:100%;height:auto;display:block;border-radius:12px}.post .cover{margin:1rem 0 1.5rem}
.fig{margin:1.4rem 0 .3rem}.fig img{background:#fff}
.post a{color:var(--accent2);text-decoration:underline;word-break:break-all}
.scene-cta{margin-top:2.5rem;padding:1.1rem 1.2rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
.post .scene-cta a.btn{text-decoration:none;display:inline-block}
.tldr{margin:1rem 0 1.5rem;padding:1rem 1.2rem;border-left:4px solid var(--accent2);border-radius:var(--radius);background:var(--card)}
.tldr h2{margin:0 0 .4rem;font-size:1.05rem}.tldr p{margin:0}
.related{margin-top:2.5rem}.related h2{font-size:1.15rem}
/* optional YouTube embed under article title (only rendered when seo youtube_id is set) */
.yt-embed { position: relative; aspect-ratio: 16 / 9; margin: 1rem 0 1.25rem; border-radius: var(--radius); overflow: hidden; }
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


/* ---- topic cluster / pillar pages 20261030 ---- */
.topic-badge{margin:.35rem 0 0;padding:.55rem .85rem;border:1px solid var(--line);border-radius:12px;background:var(--card);font-size:.92rem;color:var(--muted)}
.topic-badge a{color:var(--accent2);text-decoration:underline;font-weight:500}
.topic-section{padding:.5rem 0 1.2rem}
.topic-section-title{font-weight:500;margin:0 0 .75rem;font-size:1.25rem}
.topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.topic-card{display:block;padding:1.1rem 1.15rem 1.2rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--glow)}
.topic-card h2{font-size:1.05rem;font-weight:500;margin:0 0 .45rem;line-height:1.4}
.topic-card p{margin:0;color:var(--muted);font-size:.9rem}
.topic-card:hover{border-color:color-mix(in srgb, var(--accent) 35%, var(--line))}
.topic-pillar .topic-intro p{margin:0}
.topic-qmap ol{padding-left:1.2rem;margin:.4rem 0 0}
.topic-qmap li{margin:.55rem 0}
.topic-qmap .qmap-q{font-weight:500}
.topic-qmap .coming{color:var(--muted);font-style:normal}
.topic-members ul{padding-left:1.2rem}
.topic-members li{margin:.4rem 0}

/* ---- figure captions + pillar images 20261030 ---- */
figure.fig, figure.cover-fig { margin: 1.4rem 0 1rem; }
figure.cover-fig { margin: 1rem 0 1.5rem; }
figure.fig img, figure.cover-fig img { max-width: 100%; height: auto; display: block; border-radius: 12px; }
figure.cover-fig img.cover { width: 100%; }
figcaption {
  margin-top: .55rem;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.55;
  text-align: left;
}
.topic-qmap figure.fig { margin: .8rem 0 1.1rem; }
.topic-pillar figure.cover-fig { margin-top: .6rem; }

/* aichat-rag 20261109: citation jump target highlight */
.post [id^="p"],.post [id^="s"]{scroll-margin-top:96px}
.post p:target,.post li:target{background:#fbf1e6;box-shadow:-10px 0 0 #fbf1e6,10px 0 0 #fbf1e6;border-radius:4px;transition:background .6s}

/* ---- SPA-matching header (no hamburger; wrap like SPA @media width<=860px) 20261109b ---- */
.nav-line{
  border:1px solid var(--line);
  color:var(--text);
  background:#ffffffb3;
  border-radius:999px;
  padding:.35rem .85rem;
  box-shadow:0 2px 10px #b48cc81a;
  text-decoration:none;
  white-space:nowrap;
}
.nav-line:hover{color:var(--accent2);background:#fff}
.nav-cart{align-items:center;gap:.4rem;display:inline-flex}
.cart-count{
  background:var(--accent);
  color:#fff;
  border-radius:999px;
  place-items:center;
  min-width:1.35rem;
  height:1.35rem;
  padding:0 .35rem;
  font-size:.75rem;
  line-height:1;
  display:inline-grid;
}
/* Copied from SPA assets/index-Bfas45mO.css */
@media (width<=860px){
  .nav{order:3;gap:.75rem;width:100%;padding-bottom:.2rem;overflow-x:auto}
  .topbar-inner{flex-wrap:wrap}
}
/* Inline DOI: comfortable >=44px tap height without breaking paragraph flow */
.post a[href^="https://doi.org/"] {
  display: inline;
  padding: .65rem .05rem;
  line-height: 2.75;
  text-underline-offset: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---- blog views + share bar 20261109 ---- */
.fy-views{
  color:var(--muted);
  font-size:.88rem;
  margin-left:.15rem;
}
.fy-views:not([hidden])::before{content:" · ";}
.fy-share{margin:2rem 0 0;padding:1rem 0 .2rem}
.fy-share-label{margin:0 0 .65rem;color:var(--muted);font-size:.88rem;letter-spacing:.06em}
.fy-share-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.fy-share-btn{
  width:36px;height:36px;border-radius:999px;border:1px solid var(--line);
  background:#ffffffb3;color:#3d2a5c;display:inline-grid;place-items:center;
  cursor:pointer;padding:0;box-shadow:0 2px 8px #b48cc814;transition:color .15s,background .15s,border-color .15s;
}
.fy-share-btn:hover{background:#fff}
.fy-share-btn[data-share="line"]:hover{color:#06C755;border-color:#06C75555}
.fy-share-btn[data-share="facebook"]:hover{color:#1877F2;border-color:#1877F255}
.fy-share-btn[data-share="whatsapp"]:hover{color:#25D366;border-color:#25D36655}
.fy-share-btn[data-share="x"]:hover{color:#111;border-color:#1113}
.fy-share-btn[data-share="threads"]:hover{color:#111;border-color:#1113}
.fy-share-btn[data-share="wechat"]:hover{color:#07C160;border-color:#07C16055}
.fy-share-btn[data-share="ig"]:hover{color:#E4405F;border-color:#E4405F55}
.fy-share-btn[data-share="douyin"]:hover{color:#111;border-color:#1113}
.fy-wechat-modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:1rem}
.fy-wechat-modal[hidden]{display:none}
.fy-wechat-backdrop{position:absolute;inset:0;background:#3c285073;backdrop-filter:blur(6px)}
.fy-wechat-card{
  position:relative;z-index:1;background:#fffc;border:1px solid var(--line);
  border-radius:var(--radius);padding:1.2rem 1.3rem 1.3rem;box-shadow:0 16px 48px #643c8c33;
  width:min(320px,100%);text-align:center;
}
.fy-wechat-close{
  position:absolute;top:.45rem;right:.55rem;border:0;background:transparent;
  color:var(--muted);font-size:1.4rem;cursor:pointer;line-height:1;padding:.2rem .45rem;
}
.fy-wechat-cap{margin:0 0 .8rem;color:var(--text);font-size:.95rem}
.fy-wechat-qr{display:grid;place-items:center}
.fy-wechat-qr svg{width:min(220px,70vw);height:auto;border-radius:8px;background:#fff}
.fy-toast{
  position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%) translateY(12px);
  background:#3d2a5cee;color:#fff;border-radius:999px;padding:.55rem 1rem;font-size:.9rem;
  opacity:0;transition:opacity .2s,transform .2s;z-index:70;pointer-events:none;
  box-shadow:0 8px 24px #3d2a5c33;
}
.fy-toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}

/* fy-share-row-m4: mobile 4 per row x2 */
@media (max-width:560px){.fy-share-row{display:grid;grid-template-columns:repeat(4,36px);gap:12px 16px;justify-content:start}}