:root {
  --bg:#f8f5ee; --paper:#fffdf8; --ink:#2c261c; --muted:#7a705f; --line:#ebe4d6; --accent:#b08948;
  --font:"Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; --radius:16px; --shadow:0 10px 28px rgba(30, 24, 18, .05);
}
html[data-theme="dark"] {
  --bg:#151311; --paper:#1e1c18; --ink:#fefefd; --muted:#a9a59d; --line:#4e4940; --accent:#d1bb95; --shadow:none;
}
* { box-sizing:border-box; }
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); line-height:1.75; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; }
.top { position:sticky; top:0; z-index:5; background:color-mix(in srgb, var(--bg) 92%, transparent); border-bottom:1px solid var(--line); }
.top-inner, .brand, .nav { display:flex; align-items:center; }
.top-inner { width:min(1040px, calc(100% - 36px)); margin:0 auto; min-height:68px; justify-content:space-between; gap:16px; }
.brand { gap:10px; font-weight:650; letter-spacing:.01em; }
.brand img { width:36px; height:36px; object-fit:cover; border-radius:10px; }
.nav { gap:16px; flex-wrap:wrap; }
.nav a.on { color:var(--accent); }
.nav-toggle { position:absolute; opacity:0; pointer-events:none; }
.nav-btn { display:none; cursor:pointer; }
#theme-switch { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid var(--line); border-radius:999px; background:var(--paper); color:var(--ink); cursor:pointer; }
#theme-switch .icon-sun { display:none; }
html[data-theme="dark"] #theme-switch .icon-moon { display:none; }
html[data-theme="dark"] #theme-switch .icon-sun { display:block; }
.layout { width:min(1040px, calc(100% - 36px)); margin:0 auto; padding:32px 0 48px; display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:36px; }
.mast h1 { margin:0 0 8px; font-size:1.7rem; font-weight:650; letter-spacing:-.02em; }
.mast p, .meta, .excerpt, .empty, .foot { color:var(--muted); }
.mast p { margin:0 0 18px; max-width:46ch; }
.feed { display:grid; gap:14px; }
.item { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 18px; }
.mark { display:none; }
.item h2 { margin:0 0 6px; font-size:1.2rem; font-weight:650; letter-spacing:-.02em; line-height:1.35; }
.excerpt, .meta { margin:0; }
.meta { margin-top:8px; font-size:.86rem; }
.article h1 { margin:0 0 8px; font-size:2.05rem; line-height:1.3; letter-spacing:-.03em; }
.post-content { margin-top:18px; }
.post-content p { margin:0 0 1em; }
.post-video, .post-audio { margin:16px 0; }
.post-video video, .post-content video, .post-audio audio, .post-content audio { display:block; width:100%; border-radius:12px; }
.post-video video, .post-content video { background:#111; }
.tags a { display:inline-block; margin:8px 8px 0 0; padding:2px 8px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:.85rem; }
.near { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
.near div { padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.near span { display:block; color:var(--muted); font-size:.78rem; }
.side h3 { margin:0 0 8px; font-size:.92rem; }
.side section { margin-bottom:18px; }
.side ul { list-style:none; margin:0; padding:0; }
.side li { padding:5px 0; }
.side li span { float:right; color:var(--muted); }
.side input[type=search], .respond input, .respond textarea { width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); font:inherit; }
.pager { margin-top:18px; }
.page-navigator { display:flex; gap:8px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.page-navigator a, .page-navigator .current { display:inline-flex; min-width:32px; height:32px; align-items:center; justify-content:center; border-radius:999px; }
.page-navigator .current { background:var(--accent); color:#fff; }
.comments { margin-top:32px; }
.comments h3, .respond h3 { margin:0 0 12px; font-size:1.05rem; }
.comment-list, .comment-children { list-style:none; margin:0; padding:0; }
.comment { padding:12px 0; border-bottom:1px solid var(--line); }
.comment-inner { display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; }
.avatar img { width:40px; height:40px; border-radius:999px; object-fit:cover; }
.comment-meta { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; color:var(--muted); font-size:.88rem; }
.comment-meta cite { color:var(--ink); font-style:normal; }
.wait { color:var(--accent); font-style:normal; }
.reply-btn a, #cancel-comment-reply-link { display:inline-flex; align-items:center; height:24px; padding:0 10px; border:1px solid var(--line); border-radius:999px; font-size:.82rem; }
.comment-children { margin-left:52px; }
.respond { margin-top:16px; }
.respond-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; }
.respond input, .respond textarea { margin-bottom:10px; }
.respond button { border:0; border-radius:999px; padding:8px 16px; background:var(--accent); color:#fff; font:inherit; cursor:pointer; }
.login-note { color:var(--muted); }
.foot { width:min(1040px, calc(100% - 36px)); margin:0 auto; padding:4px 0 28px; color:var(--muted); font-size:.9rem; }
.shell { display:grid; grid-template-columns:248px minmax(0,1fr); min-height:100vh; }
.rail { position:sticky; top:0; height:100vh; overflow:auto; padding:26px 18px; background:var(--paper); color:var(--ink); border-right:1px solid var(--line); }
.rail .brand, .rail .nav a, .rail h3 { color:var(--ink); }
.rail .nav { display:grid; gap:4px; margin:18px 0; }
.rail .side, .rail .side a { color:var(--muted); }
.rail input { background:var(--bg); color:var(--ink); }
.stage main { width:min(760px, calc(100% - 48px)); margin:0 auto; padding:36px 0 12px; }
.chrome-center .top-inner { flex-direction:column; justify-content:center; padding:26px 0 14px; text-align:center; }
.chrome-center .layout { width:min(680px, calc(100% - 36px)); display:block; }
.chrome-center .side { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:32px; }
@media (max-width:860px) {
  .nav-btn { display:inline-flex; }
  .chrome-top .nav, .chrome-center .nav { display:none; position:absolute; left:0; right:0; top:68px; flex-direction:column; align-items:flex-start; padding:12px 16px 16px; background:var(--bg); border-bottom:1px solid var(--line); }
  .chrome-top .nav-toggle:checked ~ .nav, .chrome-center .nav-toggle:checked ~ .nav { display:flex; }
  .layout, .fields, .near, .chrome-center .side { grid-template-columns:1fr; }
  .shell { grid-template-columns:1fr; }
  .rail { position:sticky; height:auto; }
  .rail-body { display:none; }
  .rail .nav-toggle:checked ~ .rail-body { display:block; }
  .comment-children { margin-left:12px; }
  .feed { grid-template-columns:1fr !important; }
}

.layout { width:min(980px, calc(100% - 36px)); display:block; } .feed { grid-template-columns:1.2fr .8fr; } .item:first-child { grid-row:span 2; } .item:first-child h2 { font-size:1.7rem; } .side { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:22px; }