/* 文章视频卡片与后台预览共用网站主题。 */
.prose a.bilibili-card { display:flex; align-items:stretch; gap:0; width:100%; margin:26px 0; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--fg); text-decoration:none; box-shadow:0 3px 12px #00000004; transition:border-color .2s,box-shadow .2s; }
.prose a.bilibili-card:hover { border-color:var(--gold); color:var(--fg); box-shadow:var(--shadow); }
.prose a.bilibili-card:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
.bilibili-card-cover { position:relative; display:flex; align-items:center; justify-content:center; flex:0 0 38%; min-height:170px; overflow:hidden; background:var(--bg2); }
.prose .bilibili-card-cover img { position:absolute; inset:0; width:100%; height:100%; max-height:none; object-fit:cover; border:0; border-radius:0; margin:0; cursor:inherit; }
.bilibili-card-placeholder { font:600 27px/1 var(--sans); letter-spacing:-1px; color:var(--muted); opacity:.35; transform:translateY(-20px); }
.bilibili-card-play { position:absolute; display:grid; place-items:center; width:40px; height:40px; padding-left:3px; border:1px solid #ffffff8c; border-radius:50%; background:#0f1e33aa; color:#fff; font-size:14px; }
.bilibili-card-info { display:flex; flex:1; min-width:0; flex-direction:column; align-items:start; gap:9px; padding:23px 25px; font-family:var(--sans); }
.bilibili-card-label { font-size:10px; font-weight:600; letter-spacing:1.3px; color:var(--muted); }
.prose .bilibili-card-title { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:18px; font-weight:600; line-height:1.5; overflow-wrap:anywhere; }
.bilibili-card-description { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:12px; line-height:1.7; color:var(--fg2); overflow-wrap:anywhere; }
.bilibili-card-action { display:flex; align-items:center; gap:18px; margin-top:auto; padding-top:8px; color:var(--gold); font-size:12px; }
@media (max-width:560px) { .prose a.bilibili-card { flex-direction:column; } .bilibili-card-cover { flex-basis:auto; min-height:0; aspect-ratio:16/9; } .bilibili-card-info { padding:19px 20px; gap:8px; } }

/* ========== 主题变量：亮色 / 暗色 ========== */
:root {
  --bg:#f9faf8; --bg2:#eef2f3; --surface:#fff; --surface2:#fbf9f4;
  --fg:#0f1e33; --fg2:#435264; --muted:#5c6a79; --line:#dde2e3; --line2:#e9eded;
  --gold:#7d653b; --gold-soft:#e6e1d6;
  --band:#0f1e33; --band-fg:#fff; --band-muted:#9fb0bd; --band-line:#ffffff1f; --band-gold:#d2bd97;
  --btn:#0f1e33; --btn-fg:#fff; --code:#eef2f3; --hl:#efe7d6;
  --shadow:0 18px 50px #0f1e3312; --shadow-lg:0 22px 48px #0f1e3314, 0 1px 4px #0f1e331a;
  --serif:"Songti SC", STSong, "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", serif;
  --sans:-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono:"SFMono-Regular", "JetBrains Mono", Consolas, monospace;
  --ease:cubic-bezier(.22,.72,.22,1);
  color-scheme:light;
}
[data-theme=dark] {
  --bg:#0b111a; --bg2:#101926; --surface:#131e2c; --surface2:#16212f;
  --fg:#e4e9ee; --fg2:#b7c2cd; --muted:#8391a1; --line:#223042; --line2:#1a2635;
  --gold:#cbb38a; --gold-soft:#3a3427;
  --band:#070b12; --band-fg:#e4e9ee; --band-muted:#8b9aab; --band-line:#ffffff14; --band-gold:#d6c19c;
  --btn:#e4e9ee; --btn-fg:#0b111a; --code:#101926; --hl:#3a3220;
  --shadow:0 18px 50px #00000059; --shadow-lg:0 22px 48px #00000073, 0 0 0 1px #ffffff0a;
  color-scheme:dark;
}

/* ========== 基础 ========== */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.75 var(--sans); transition:background-color .3s, color .3s; }
a { color:inherit; text-decoration:none; }
button, input { font:inherit; color:inherit; }
button { background:none; border:0; cursor:pointer; padding:0; }
h1, h2, h3, h4, p { margin:0; }
h1, h2, h3 { font-family:var(--serif); font-weight:600; line-height:1.4; }
img { max-width:100%; display:block; }
[hidden] { display:none !important; }
::selection { background:var(--hl); }
:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
.wrap { width:min(1240px, calc(100% - 10vw)); margin:auto; }
.skip-link { position:absolute; left:12px; top:-64px; z-index:100; padding:10px 18px; background:var(--fg); color:var(--bg); font-size:13px; letter-spacing:.08em; transition:top .18s; }
.skip-link:focus { top:12px; }
.eyebrow { color:var(--gold); font-size:12px; letter-spacing:.18em; }
.kicker { font-size:11px; letter-spacing:.24em; color:var(--muted); text-transform:uppercase; }
.btn { display:inline-flex; align-items:center; gap:40px; background:var(--btn); color:var(--btn-fg); border:1px solid var(--btn); padding:14px 20px; font-size:13px; letter-spacing:.08em; transition:background .2s, color .2s; }
.btn:hover { background:transparent; color:var(--fg); }
.link { font-size:13px; letter-spacing:.08em; border-bottom:1px solid currentColor; padding-bottom:1px; transition:color .2s; }
.link:hover { color:var(--gold); }
.js .reveal { opacity:0; transform:translateY(24px); transition:opacity .8s, transform .8s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity:1; transform:none; }
@keyframes intro { from { opacity:.4; transform:translateY(8px); } }

/* ========== 页头 ========== */
.header { height:88px; display:flex; align-items:center; justify-content:space-between; gap:24px; position:relative; z-index:20; }
.brand { display:flex; align-items:center; gap:10px; flex:none; }
.brand img { width:34px; height:34px; transition:transform .4s var(--ease); }
.brand:hover img { transform:rotate(-8deg); }
[data-theme=dark] .brand img { filter:drop-shadow(0 0 1px rgb(255 247 234 / .55)); }
.brand span { font:600 16px/1.2 var(--serif); letter-spacing:.12em; }
.brand small { display:block; font:9px var(--sans); letter-spacing:.2em; color:var(--muted); margin-top:3px; }
.nav { display:flex; gap:40px; font-size:13px; letter-spacing:.08em; }
.nav a { padding:6px 0; border-bottom:1px solid transparent; color:var(--fg2); transition:color .2s, border-color .2s; }
.nav a:hover, .nav a.on { color:var(--fg); border-color:var(--fg); }
.nav .nav-contact-m { display:none; }
.tools { display:flex; align-items:center; gap:10px; }
.icon-btn { width:36px; height:36px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; transition:border-color .2s, transform .4s var(--ease); }
.icon-btn:hover { border-color:var(--fg); }
.icon-btn svg { width:16px; height:16px; }
.theme:active { transform:rotate(30deg); }
.theme .moon, [data-theme=dark] .theme .sun { display:none; }
[data-theme=dark] .theme .moon { display:block; }
.menu { display:none; }
.nav-cta { border:1px solid var(--fg); border-radius:30px; padding:7px 20px; font-size:12px; letter-spacing:.06em; transition:background .2s, color .2s; }
.nav-cta:hover, .nav-cta.on { background:var(--fg); color:var(--bg); }

/* ========== 页脚 ========== */
.footer { border-top:1px solid var(--line); padding:36px 0; }
.footer .wrap { display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; }
.footer nav { display:flex; gap:24px; font-size:12px; color:var(--muted); }
.footer nav a:hover { color:var(--fg); }
.footer small { color:var(--muted); font-size:11px; }

/* ========== 列表页通用头部 ========== */
.page-head { padding:64px 0 40px; border-bottom:1px solid var(--line); }
.page-head h1 { font-size:clamp(34px, 4vw, 52px); letter-spacing:.06em; margin-top:12px; }
.page-head p { color:var(--muted); margin-top:12px; max-width:540px; line-height:1.9; }

/* ========== Markdown 正文 ========== */
.prose { font-size:17px; line-height:1.9; color:var(--fg); overflow-wrap:anywhere; }
.prose h2 { font:500 25px/1.4 var(--serif); margin:52px 0 14px; scroll-margin-top:24px; }
.prose h3 { font-size:18px; margin:32px 0 8px; scroll-margin-top:24px; }
.prose h4 { font-size:16px; line-height:1.5; margin:24px 0 8px; scroll-margin-top:24px; }
.prose h5 { font-size:15px; line-height:1.5; margin:20px 0 8px; scroll-margin-top:24px; }
.prose h6 { font-size:14px; line-height:1.5; margin:16px 0 8px; scroll-margin-top:24px; }
.prose h2 + h3 { margin-top:16px; }
.prose h3 + h4,.prose h4 + h5,.prose h5 + h6 { margin-top:12px; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose pre, .prose table { margin:0 0 18px; }
.prose ul, .prose ol { padding-left:22px; }
.prose li { margin-bottom:4px; }
.prose a { color:var(--gold); border-bottom:1px solid var(--gold-soft); }
.prose a:hover { border-color:var(--gold); }
.prose strong { font-weight:600; }
.prose code { background:var(--code); padding:2px 6px; border-radius:4px; font:14px var(--mono); }
.prose pre { max-width:100%; background:var(--code); padding:16px 20px; border-radius:8px; overflow:auto; line-height:1.7; overflow-wrap:normal; }
.prose pre code { padding:0; background:none; }
.prose kbd { border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; padding:0 6px; font:13px var(--mono); background:var(--surface); }
.prose blockquote { border-left:2px solid var(--gold); padding:2px 0 2px 18px; color:var(--fg2); }
.prose blockquote p { margin:0; }
.prose img { height:auto; border-radius:8px; margin:28px auto; box-shadow:var(--shadow); }
.article-image-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; margin:28px 0; }
.article-image-row[data-columns="3"] { grid-template-columns:repeat(3,minmax(0,1fr)); }
.article-image-row[data-columns="4"] { grid-template-columns:repeat(4,minmax(0,1fr)); }
.article-image-cell { min-width:0; }
.prose .article-image-row img { max-width:100%; height:auto; margin:0 auto; }
@media(max-width:600px) { .article-image-row { gap:10px; } .article-image-row[data-columns="3"],.article-image-row[data-columns="4"] { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.prose table { width:100%; border-collapse:collapse; font-size:15px; display:block; overflow-x:auto; }
.prose th, .prose td { border-bottom:1px solid var(--line); padding:10px 12px 10px 0; text-align:left; }
.prose th { font-weight:500; color:var(--muted); font-size:13px; }
.prose hr { border:0; border-top:1px solid var(--line); margin:44px 0; }
.prose figure { margin:28px 0; }
.prose figure img { margin:0 auto; }
.prose figcaption { margin-top:10px; color:var(--muted); font-size:13px; }
.prose details { padding:14px 0; border-bottom:1px solid var(--line); }
.prose summary { cursor:pointer; font-weight:500; }
.prose details[open] > :not(summary) { margin-top:14px; }

@media (max-width:760px) {
  .wrap { width:calc(100% - 40px); }
  .header { height:72px; gap:12px; }
  .tools { gap:8px; flex:none; }
  .header .icon-btn { width:44px; height:44px; }
  .menu { display:grid; }
  .nav-cta { display:none; }
  .nav { display:none; position:absolute; top:68px; left:0; right:0; flex-direction:column; gap:0; max-height:calc(100dvh - 88px); overflow-y:auto; background:var(--surface); padding:8px; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg); }
  .nav.open { display:flex; }
  .nav a, .nav .nav-contact-m { display:flex; align-items:center; min-height:46px; padding:10px 14px; border:0; border-radius:6px; font-size:14px; }
  .nav a:hover, .nav a.on { background:var(--bg2); }
  .page-head { padding:36px 0 28px; }
  .footer .wrap { flex-direction:column; align-items:flex-start; }
  .footer nav { flex-wrap:wrap; gap:8px 20px; }
  .footer nav a { display:inline-flex; align-items:center; min-height:44px; }
  .prose { font-size:16px; }
}
@media (max-width:480px) {
  .article-image-row[data-columns] { grid-template-columns:minmax(0,1fr); gap:16px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .js .reveal { opacity:1; transform:none; }
}