/* ===== 主题变量（深色默认 / 浅色 [data-theme="light"]） ===== */
:root{
  --bg:#0E1116;
  --surface:#13171E;
  --surface-2:#0F1318;
  --ink:#ECE6D6;
  --muted:#9A9387;
  --line:rgba(236,230,214,.14);
  --accent:#3B5BDB;
  --accent-soft:#7B95E8;
  --on-accent:#ffffff;
  --grid:rgba(59,91,219,.05);
  --glow1:rgba(59,91,219,.16);
  --glow2:rgba(120,90,220,.13);
  --body-grad1:#1B2435;
  --body-grad2:#181A2E;
  /* canvas 粒子 RGB 通道 */
  --p1:59,91,219; --p2:120,90,220; --p3:100,149,237; --star:180,200,255;
  /* hero 区始终叠在深色视频上，文字固定亮 */
  --hero-nav:rgba(236,230,214,.78);
  --hero-ink:#ECE6D6;
  --hero-accent:#5A7AE8;
  --font-display:"Songti SC","STSong","Noto Serif CJK SC",serif;
  --font-sans:"PingFang SC","Hiragino Sans GB","Heiti SC",sans-serif;
  --w-regular:400;--w-medium:500;--w-semibold:600;--w-display:700;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --edge:max(var(--s8),calc((100vw - 1120px)/2));
}
[data-theme="light"]{
  --bg:#F4F1EA;
  --surface:#FFFFFF;
  --surface-2:#ECE7DA;
  --ink:#1A1F2B;
  --muted:#7A736B;
  --line:rgba(26,31,43,.13);
  --accent:#2B47C8;
  --accent-soft:#3B5BDB;
  --on-accent:#ffffff;
  --grid:rgba(43,71,200,.07);
  --glow1:rgba(59,91,219,.12);
  --glow2:rgba(120,90,220,.09);
  --body-grad1:#EAE5D8;
  --body-grad2:#E2DEF0;
  --p1:43,71,200; --p2:90,70,180; --p3:70,100,190; --star:120,140,200;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background:
    linear-gradient(var(--grid) 1px,transparent 1px) 0 0/58px 58px,
    linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/58px 58px,
    radial-gradient(ellipse 90% 60% at 50% -10%, var(--body-grad1) 0%, transparent 65%),
    radial-gradient(ellipse 70% 50% at 85% 110%, var(--body-grad2) 0%, transparent 60%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--font-sans);font-weight:var(--w-regular);font-size:16px;
  line-height:1.8;letter-spacing:0;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  line-break:strict;word-break:normal;overflow-wrap:normal;font-synthesis:none;
  transition:background-color .4s ease,color .4s ease;
}
@supports(text-spacing-trim:normal){body{text-spacing-trim:normal;}}
@supports(text-autospace:normal){body{text-autospace:normal;}}
a{color:inherit;}

/* 动态光晕 */
body::before,body::after{content:"";position:fixed;z-index:-1;pointer-events:none;filter:blur(36px);transition:background .4s ease;}
body::before{top:-15%;left:-10%;width:55vw;height:55vw;background:radial-gradient(circle,var(--glow1),transparent 62%);animation:drift1 24s ease-in-out infinite alternate;}
body::after{bottom:-20%;right:-12%;width:50vw;height:50vw;background:radial-gradient(circle,var(--glow2),transparent 62%);animation:drift2 30s ease-in-out infinite alternate;}
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(8vw,4vh) scale(1.1)}}
@keyframes drift2{from{transform:translate(0,0) scale(1)}to{transform:translate(-7vw,-3vh) scale(1.08)}}
@media (prefers-reduced-motion:reduce){body::before,body::after{animation:none;}}

/* 导航 */
.site-nav{display:flex;align-items:center;justify-content:space-between;padding:var(--s6) var(--edge) var(--s5);}
.brand{font-family:var(--font-display);font-weight:var(--w-display);font-size:18px;letter-spacing:.04em;color:var(--ink);text-decoration:none;}
.nav-links{display:flex;gap:var(--s6);align-items:center;}
.nav-links a{font-size:14px;line-height:1.5;color:var(--muted);text-decoration:none;letter-spacing:.02em;transition:color .2s;}
.nav-links a:hover{color:var(--ink);}
/* hero 区导航固定亮（叠在深色视频上，不跟主题） */
.hero .brand{color:var(--hero-ink);}
.hero .nav-links a{color:var(--hero-nav);}
.hero .nav-links a:hover{color:var(--hero-ink);}

/* 主题切换按钮（theme.js 自动插入导航） */
.theme-toggle{background:transparent;border:1px solid var(--line);color:var(--muted);
  font-size:15px;line-height:1;width:34px;height:34px;border-radius:50%;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:color .25s,border-color .25s,transform .25s;}
.theme-toggle:hover{color:var(--ink);border-color:var(--accent);transform:rotate(20deg);}
.hero .theme-toggle{color:var(--hero-nav);border-color:rgba(236,230,214,.22);}
.hero .theme-toggle:hover{color:var(--hero-ink);}

/* 按钮 */
.btn-primary,.btn-ghost{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-family:var(--font-sans);font-size:14px;line-height:1.5;font-weight:var(--w-semibold);letter-spacing:.02em;
  padding:var(--s3) var(--s5);border-radius:6px;text-decoration:none;cursor:pointer;
  transition:background .2s,border-color .2s,filter .2s;
}
.btn-primary{background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);}
.btn-primary:hover{filter:brightness(1.1);}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line);}
.btn-ghost:hover{border-color:color-mix(in srgb,var(--ink) 40%,transparent);}

/* 通用页面容器 */
.page{position:relative;z-index:2;background:transparent;padding:max(var(--s9),96px) var(--edge) var(--s9);border-top:1px solid var(--line);min-height:100vh;}
.page-head{margin-bottom:var(--s7);max-width:1120px;}
.page-title{font-family:var(--font-display);font-weight:var(--w-display);font-size:clamp(28px,3.4vw,40px);line-height:1.22;letter-spacing:0;color:var(--ink);margin-bottom:var(--s3);}
.page-sub{font-size:15px;line-height:1.8;color:color-mix(in srgb,var(--ink) 65%,transparent);max-width:30em;}

/* 作品卡片 */
.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);max-width:1120px;}
.work-card{display:block;text-decoration:none;color:inherit;}
.work-frame{position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(135deg,var(--surface),var(--bg));transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s;}
.work-frame::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 30% 20%,color-mix(in srgb,var(--accent) 25%,transparent),transparent 62%);transition:opacity .35s;}
.work-glyph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:var(--w-display);font-size:clamp(40px,5vw,60px);line-height:1.2;color:color-mix(in srgb,var(--ink) 92%,transparent);letter-spacing:.02em;transition:transform .35s cubic-bezier(.2,.7,.2,1);}
.work-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;padding:var(--s5);background:linear-gradient(180deg,transparent 42%,color-mix(in srgb,var(--bg) 88%,transparent));opacity:0;transition:opacity .35s;}
.work-overlay span{font-size:13px;line-height:1.5;color:var(--ink);font-weight:var(--w-semibold);display:inline-flex;align-items:center;gap:var(--s2);}
.work-card:hover .work-frame{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 60%,transparent);box-shadow:0 18px 40px -16px color-mix(in srgb,var(--accent) 55%,transparent);}
.work-card:hover .work-frame::before{opacity:1.4;}
.work-card:hover .work-glyph{transform:scale(1.06);}
.work-card:hover .work-overlay{opacity:1;}
.work-name{margin-top:var(--s4);font-family:var(--font-sans);font-size:16px;line-height:1.5;font-weight:var(--w-semibold);color:var(--ink);transition:color .25s;}
.work-tag{margin-top:var(--s1);font-size:13px;line-height:1.5;color:var(--muted);}
.work-tags{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2);}
.work-tags span{font-size:12px;line-height:1.5;color:var(--accent-soft);}
.work-snippet{margin-top:var(--s2);font-size:13px;line-height:1.6;color:var(--muted);}
/* 博客标签可点击 */
.post-tag{cursor:pointer;transition:color .2s,opacity .2s;}
.post-tag:hover{color:var(--accent);opacity:1;}
.post-tag.on{color:var(--accent);font-weight:var(--w-semibold);}
.tag-status{margin-bottom:var(--s6);max-width:1120px;}
.tag-on{display:inline-flex;align-items:center;gap:var(--s2);font-size:13px;line-height:1.5;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);padding:var(--s1) var(--s3);border-radius:999px;}
.tag-on button{background:transparent;border:none;color:var(--accent);cursor:pointer;font-size:14px;line-height:1;padding:0 0 0 var(--s1);}
.work-card:hover .work-name{color:var(--accent-soft);}

/* 分页 */
.pager{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s8);max-width:1120px;flex-wrap:wrap;}
.pager button{background:transparent;border:1px solid var(--line);color:var(--ink);font-family:var(--font-sans);font-size:14px;line-height:1.5;font-weight:var(--w-semibold);padding:var(--s2) var(--s4);border-radius:6px;cursor:pointer;transition:border-color .2s,background .2s;}
.pager button:hover{border-color:color-mix(in srgb,var(--ink) 40%,transparent);background:color-mix(in srgb,var(--ink) 5%,transparent);}
.pager button[disabled]{opacity:.3;cursor:not-allowed;}
.pager .pages{display:flex;gap:var(--s2);}
.pager .page-btn.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.pager .info{margin-left:auto;font-size:13px;line-height:1.5;color:var(--muted);}

/* 详情页 */
.detail-body{max-width:30em;}
.detail-back{display:inline-flex;align-items:center;gap:var(--s2);font-size:14px;line-height:1.5;color:var(--muted);text-decoration:none;margin-bottom:var(--s6);transition:color .2s;}
.detail-back:hover{color:var(--ink);}
.detail-eyebrow{font-size:13px;line-height:1.5;color:var(--accent);margin-bottom:var(--s4);letter-spacing:.02em;}
.detail-title{font-family:var(--font-display);font-weight:var(--w-display);font-size:clamp(26px,4vw,40px);line-height:1.22;color:var(--ink);margin-bottom:var(--s5);}
.detail-meta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s7);}
.detail-meta span{font-size:13px;line-height:1.5;color:var(--muted);border:1px solid var(--line);padding:var(--s1) var(--s3);border-radius:6px;}
.detail-lead{font-size:17px;line-height:1.85;color:color-mix(in srgb,var(--ink) 92%,transparent);margin-bottom:var(--s7);}
.detail-h{font-family:var(--font-display);font-weight:var(--w-display);font-size:20px;line-height:1.3;color:var(--ink);margin:var(--s7) 0 var(--s4);}
.detail-p{font-size:16px;line-height:1.85;color:color-mix(in srgb,var(--ink) 82%,transparent);margin-bottom:var(--s5);}
.detail-ul{list-style:none;margin-bottom:var(--s6);}
.detail-ul li{font-size:16px;line-height:1.8;color:color-mix(in srgb,var(--ink) 82%,transparent);padding-left:var(--s5);position:relative;margin-bottom:var(--s2);}
.detail-ul li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--accent);}
.detail-cta{margin-top:var(--s8);display:flex;gap:var(--s3);flex-wrap:wrap;}
/* 详情页图片 */
.detail-images{display:flex;flex-direction:column;gap:var(--s6);margin:var(--s6) 0;}
.detail-images figure{margin:0;}
.detail-images img{width:100%;border-radius:8px;border:1px solid var(--line);display:block;}
.detail-images figcaption{font-size:13px;line-height:1.6;color:var(--muted);margin-top:var(--s2);text-align:center;}

/* 博客：分类筛选 */
.filter-bar{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s7);max-width:1120px;}
.filter-btn{background:transparent;border:1px solid var(--line);color:var(--muted);font-family:var(--font-sans);font-size:13px;line-height:1.5;font-weight:var(--w-medium);padding:var(--s1) var(--s4);border-radius:999px;cursor:pointer;transition:border-color .2s,color .2s,background .2s;}
.filter-btn:hover{border-color:color-mix(in srgb,var(--ink) 40%,transparent);color:var(--ink);}
.filter-btn.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}

/* 博客：文章卡片 */
.posts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s6);max-width:1120px;}
.post-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:linear-gradient(180deg,var(--surface),var(--surface-2));border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s;}
.post-cover{position:relative;aspect-ratio:16/6;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,var(--surface)),var(--bg));border-bottom:1px solid var(--line);}
.post-cover .pin{position:absolute;top:10px;left:10px;z-index:2;background:var(--accent);color:var(--on-accent);font-size:12px;line-height:1;font-weight:var(--w-semibold);padding:5px 9px;border-radius:5px;letter-spacing:.05em;}
.post-cover span{font-family:var(--font-display);font-weight:var(--w-display);font-size:48px;line-height:1.2;color:var(--accent-soft);}
.post-body{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2);flex:1;}
.post-meta{font-size:13px;line-height:1.5;color:var(--muted);}
.post-title{font-family:var(--font-display);font-weight:var(--w-display);font-size:20px;line-height:1.3;color:var(--ink);}
.post-excerpt{font-size:14px;line-height:1.7;color:color-mix(in srgb,var(--ink) 72%,transparent);flex:1;max-width:30em;}
.post-tags{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2);}
.post-tags span{font-size:12px;line-height:1.5;color:var(--accent-soft);}
.post-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 50%,transparent);box-shadow:0 18px 40px -16px color-mix(in srgb,var(--accent) 45%,transparent);}
.post-card:hover .post-title{color:var(--accent-soft);}

/* 博客：文章正文（Markdown 渲染） */
.post-content{max-width:30em;}
.post-content h1{font-family:var(--font-display);font-weight:var(--w-display);font-size:24px;line-height:1.3;color:var(--ink);margin:var(--s7) 0 var(--s4);}
.post-content h2{font-family:var(--font-display);font-weight:var(--w-display);font-size:20px;line-height:1.3;color:var(--ink);margin:var(--s6) 0 var(--s3);}
.post-content h3{font-family:var(--font-display);font-weight:var(--w-display);font-size:17px;line-height:1.4;color:var(--ink);margin:var(--s5) 0 var(--s2);}
.post-content p{font-size:16px;line-height:1.85;color:color-mix(in srgb,var(--ink) 85%,transparent);margin-bottom:var(--s4);}
.post-content ul,.post-content ol{margin:0 0 var(--s4) var(--s4);}
.post-content li{font-size:16px;line-height:1.8;color:color-mix(in srgb,var(--ink) 85%,transparent);margin-bottom:var(--s2);}
.post-content blockquote{border-left:3px solid var(--accent);padding-left:var(--s4);margin:var(--s5) 0;color:var(--accent-soft);font-size:16px;line-height:1.8;}
.post-content code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;background:color-mix(in srgb,var(--accent) 15%,transparent);padding:2px 6px;border-radius:4px;color:var(--accent-soft);}
.post-content pre{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:var(--s4);overflow-x:auto;margin-bottom:var(--s5);}
.post-content pre code{background:transparent;padding:0;color:var(--ink);font-size:14px;line-height:1.6;}
.post-content a{color:var(--accent-soft);text-decoration:underline;text-underline-offset:3px;}
.post-content strong{color:var(--ink);font-weight:var(--w-semibold);}

/* 滚动入场动画 */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);}
.reveal.visible{opacity:1;transform:none;}

/* 响应式 */
@media (min-width:781px) and (max-width:1024px){.works-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:780px){
  :root{--edge:var(--s4);}
  .site-nav{padding:var(--s5) var(--s4);}
  .nav-links{gap:var(--s4);}
  .nav-links a{font-size:13px;}
  .works-grid{grid-template-columns:1fr;gap:var(--s5);}
  .page{padding:var(--s8) var(--s4);}
}