:root {
  --bg-main:#071014; --bg-panel:rgba(13,24,29,.82); --border-soft:rgba(140,180,180,.18);
  --text-main:#e8eeee; --text-muted:#8d9a9f; --accent-cyan:#55d6d2; --accent-orange:#d99a4e;
  --sidebar:196px; --content-max:1320px; --radius:10px; --shadow:0 20px 60px rgba(0,0,0,.22);
}
* { box-sizing:border-box; }
html { background:var(--bg-main); scroll-behavior:smooth; }
body { margin:0; background:var(--bg-main); color:var(--text-main); font-family:"Microsoft YaHei",system-ui,sans-serif; line-height:1.65; }
a { color:inherit; text-decoration:none; } button { font:inherit; } img { max-width:100%; display:block; }
.layout { min-height:100vh; padding-left:var(--sidebar); }
.sidebar { position:fixed; z-index:20; inset:0 auto 0 0; display:flex; flex-direction:column; width:var(--sidebar); padding:30px 26px; background:linear-gradient(180deg,rgba(7,16,20,.98),rgba(7,16,20,.92)); border-right:1px solid var(--border-soft); }
.brand { padding-bottom:28px; border-bottom:1px solid var(--border-soft); }
.brand-mark { width:52px; height:38px; margin-bottom:11px; color:var(--accent-cyan); }
.brand-mark svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; }
.brand-en { font:600 21px Georgia,serif; letter-spacing:.2px; }.brand-cn { margin-top:2px; color:#c7d3d4; font-size:16px; }
.nav { display:grid; gap:7px; padding:26px 0; }.nav-link { display:flex; align-items:center; gap:14px; padding:9px 8px; border-radius:6px; color:#b2bec1; transition:.2s; }
.nav-link:hover,.nav-link.active { background:rgba(85,214,210,.08); color:var(--accent-cyan); }.nav-icon { width:24px; font-size:19px; text-align:center; }
.nav-text small { display:block; color:var(--text-muted); font:11px Georgia,serif; letter-spacing:.4px; }
.sidebar-bottom { margin-top:auto; color:#758287; font-size:13px; }.sidebar-bottom:after { content:""; display:block; width:23px; height:1px; margin-top:17px; background:#9bbec0; }
.main { min-height:100vh; }.page { max-width:var(--content-max); margin:auto; padding:68px 7vw 52px; }.page-head { margin-bottom:42px; }
.eyebrow { margin:0 0 9px; color:var(--accent-cyan); font:12px Georgia,serif; letter-spacing:2px; text-transform:uppercase; }
.page-title { margin:0; font:600 clamp(36px,4vw,58px) Georgia,"Songti SC",serif; letter-spacing:-1px; }.page-title-cn { margin:8px 0 0; color:#a8b6b8; font-size:18px; }.page-intro { max-width:680px; color:var(--text-muted); }
.footer { margin-left:var(--sidebar); display:flex; justify-content:space-between; gap:20px; padding:18px 7vw; border-top:1px solid var(--border-soft); color:#718086; font-size:12px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:11px 21px; border:1px solid var(--border-soft); border-radius:7px; background:transparent; color:var(--text-main); cursor:pointer; transition:.2s; }
.btn:hover { border-color:var(--accent-cyan); color:var(--accent-cyan); transform:translateY(-1px); }.btn-primary { background:rgba(85,214,210,.22); border-color:rgba(85,214,210,.62); color:#e9ffff; }
.filters { display:flex; flex-wrap:wrap; gap:9px; margin:24px 0 32px; }.filter { padding:7px 14px; border:1px solid var(--border-soft); border-radius:999px; background:transparent; color:var(--text-muted); cursor:pointer; }
.filter.active,.filter:hover { color:var(--accent-cyan); border-color:rgba(85,214,210,.55); background:rgba(85,214,210,.08); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; }.card { overflow:hidden; background:var(--bg-panel); border:1px solid var(--border-soft); border-radius:var(--radius); box-shadow:var(--shadow); transition:.25s; }
.card:hover { transform:translateY(-4px); border-color:rgba(85,214,210,.47); }.work-cover { position:relative; aspect-ratio:16/10; overflow:hidden; background:#111; }.work-cover img { width:100%; height:100%; object-fit:cover; filter:saturate(.78) brightness(.82); transition:.35s; }.card:hover .work-cover img { transform:scale(1.035); filter:saturate(.96) brightness(.95); }
.tag { display:inline-block; padding:3px 8px; border:1px solid rgba(85,214,210,.42); border-radius:4px; color:var(--accent-cyan); font-size:12px; }.work-body,.article-card,.lab-card { padding:20px; }.work-meta { display:flex; justify-content:space-between; align-items:center; gap:10px; }.work-title,.article-title,.lab-card h2 { margin:12px 0 7px; font:600 22px Georgia,"Songti SC",serif; }.work-desc,.article-summary { margin:0; color:var(--text-muted); font-size:14px; }.tools { margin:14px 0 0; color:#95a4a8; font-size:12px; }.tools span { margin-right:8px; }.review-mark,.status { color:var(--accent-orange); font-size:12px; }.article-date { color:#77868a; font-size:12px; }.article-action { display:inline-block; margin-top:16px; color:var(--accent-cyan); font-size:14px; }
.empty { padding:42px; border:1px dashed var(--border-soft); border-radius:var(--radius); color:var(--text-muted); text-align:center; }
.hero { position:relative; min-height:calc(100vh - 72px); padding:clamp(70px,11vh,130px) 7vw 45px; isolation:isolate; background:linear-gradient(90deg,rgba(7,16,20,.95) 0%,rgba(7,16,20,.72) 36%,rgba(7,16,20,.1) 72%),url("../images/hero/gushan-mist.png") center/cover; }.hero:after { position:absolute; content:""; inset:auto 7vw 0; height:1px; background:var(--border-soft); }.hero-content { max-width:570px; }.hero-title { margin:0; font:600 clamp(55px,6vw,86px) Georgia,"Songti SC",serif; line-height:1.08; }.hero-title-cn { margin:7px 0 17px; font:500 clamp(40px,4vw,62px) "Songti SC",serif; letter-spacing:3px; }.hero-subtitle { margin:0; color:var(--accent-cyan); font-size:18px; letter-spacing:2px; }.hero-desc { max-width:460px; margin:19px 0 26px; color:#b7c0c2; }.hero-actions,.contact-links { display:flex; flex-wrap:wrap; gap:12px; }
.about-grid { display:grid; grid-template-columns:190px minmax(0,650px); gap:35px; align-items:start; }.avatar { width:170px; aspect-ratio:1; border:1px solid var(--border-soft); border-radius:12px; object-fit:cover; filter:saturate(.72); }.about-copy h2 { margin:0 0 13px; font:600 28px Georgia,"Songti SC",serif; }.about-copy p { color:#abb8ba; }
.detail-hero { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(240px,.7fr); gap:28px; }.detail-media { overflow:hidden; border:1px solid var(--border-soft); border-radius:var(--radius); background:#0b1519; }.detail-media img,.detail-media video { width:100%; max-height:560px; object-fit:contain; }.detail-media-link { position:relative; display:block; cursor:pointer; }.detail-media-link span { position:absolute; right:14px; bottom:14px; padding:6px 10px; border:1px solid rgba(85,214,210,.45); border-radius:5px; background:rgba(7,16,20,.78); color:var(--accent-cyan); font-size:12px; opacity:0; transition:.2s; }.detail-media-link:hover { border-color:var(--accent-cyan); }.detail-media-link:hover span { opacity:1; }.detail-info { padding:24px; border:1px solid var(--border-soft); border-radius:var(--radius); background:var(--bg-panel); }.detail-info h1 { margin:15px 0 10px; font:600 38px Georgia,"Songti SC",serif; }.info-list { margin:25px 0; padding:0; list-style:none; }.info-list li { padding:9px 0; border-bottom:1px solid var(--border-soft); color:#aebbbc; }.info-list strong { display:inline-block; width:56px; color:#718287; font-weight:400; }
.article { max-width:850px; }.article-content { font-size:16px; color:#ced7d8; }.article-content h1,.article-content h2,.article-content h3,.article-content h4 { margin:1.7em 0 .6em; font-family:Georgia,"Songti SC",serif; color:#eef5f5; }.article-content p { margin:0 0 1.25em; }.article-content a { color:var(--accent-cyan); text-decoration:underline; }.article-content blockquote { margin:1.5em 0; padding:4px 18px; border-left:3px solid var(--accent-cyan); color:#aebbbc; }.article-content pre { overflow:auto; padding:16px; border:1px solid var(--border-soft); border-radius:7px; background:#0a1317; }.article-content code { font-family:Consolas,monospace; }.article-content :not(pre)>code { padding:2px 5px; border-radius:4px; background:#102127; }.article-content img { margin:20px 0; border-radius:8px; }.article-content table { width:100%; border-collapse:collapse; }.article-content th,.article-content td { padding:9px; border:1px solid var(--border-soft); text-align:left; }
@media (max-width:780px) { :root { --sidebar:0px; }.layout { padding-left:0; }.sidebar { position:sticky; top:0; width:100%; height:auto; padding:13px 18px; flex-direction:row; align-items:center; background:rgba(7,16,20,.97); backdrop-filter:blur(12px); }.brand { display:flex; gap:8px; align-items:center; padding:0; border:0; }.brand-mark { width:31px; height:25px; margin:0; }.brand-en { font-size:17px; }.brand-cn,.sidebar-bottom { display:none; }.nav { display:flex; gap:1px; margin-left:auto; padding:0; }.nav-link { padding:7px 6px; }.nav-icon,.nav-text small { display:none; }.nav-text { font-size:12px; }.page { padding:48px 22px; }.hero { min-height:calc(100vh - 55px); padding:90px 28px 45px; background-position:62% center; }.hero-title { font-size:51px; }.hero-title-cn { font-size:38px; }.footer { margin-left:0; padding:16px 22px; }.about-grid,.detail-hero { grid-template-columns:1fr; }.avatar { width:130px; }.grid { grid-template-columns:1fr; }.detail-info h1 { font-size:32px; } }