:root {
  color-scheme: light;
  --bg: #f3f5f4;
  --surface: #ffffff;
  --surface-2: #e8eeec;
  --text: #17211f;
  --muted: #64706d;
  --line: #dbe3e0;
  --accent: #0f766e;
  --accent-2: #d97706;
  --shadow: 0 16px 44px rgba(20, 42, 37, .08);
  --radius: 18px;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --serif: "Noto Serif SC", "Songti SC", STSong, Georgia, serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; --bg:#101514; --surface:#18201e; --surface-2:#222c29; --text:#edf4f2; --muted:#a7b4b0; --line:#30403c; --accent:#5eead4; --accent-2:#fbbf24; --shadow:0 18px 50px rgba(0,0,0,.25); }
}
:root[data-theme="dark"] { color-scheme: dark; --bg:#101514; --surface:#18201e; --surface-2:#222c29; --text:#edf4f2; --muted:#a7b4b0; --line:#30403c; --accent:#5eead4; --accent-2:#fbbf24; --shadow:0 18px 50px rgba(0,0,0,.25); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; overflow-x:clip; background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.75; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; }
.shell { width:min(1160px, calc(100% - 40px)); margin-inline:auto; }
.eyebrow { margin:0 0 .35rem; color:var(--accent); font-size:.72rem; font-weight:800; letter-spacing:.18em; }

.site-header { position:sticky; top:0; z-index:30; border-bottom:1px solid color-mix(in srgb, var(--line) 76%, transparent); background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(16px); }
.nav-wrap { min-height:66px; display:flex; align-items:center; gap:22px; position:relative; }
.brand { display:grid; place-items:center; width:42px; height:42px; background:transparent; }
.brand img { display:block; width:100%; height:100%; object-fit:contain; }
.site-nav { display:flex; align-items:center; gap:4px; flex:1; }
.site-nav a { padding:9px 11px; border-radius:10px; color:var(--muted); font-size:.92rem; font-weight:650; }
.site-nav a:hover { color:var(--text); background:var(--surface-2); }
.theme-toggle,.nav-toggle { border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:11px; cursor:pointer; }
.theme-toggle { width:40px; height:40px; font-size:1.2rem; }
.nav-toggle { display:none; padding:7px 11px; }

.hero { min-height:430px; display:grid; align-items:end; position:relative; background-image:var(--hero-light); background-size:cover; background-position:center; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero { background-image:var(--hero-dark); } }
:root[data-theme="dark"] .hero { background-image:var(--hero-dark); }
.hero-shade { position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,15,13,.05), rgba(5,15,13,.8)); }
.hero-content { position:relative; padding-bottom:66px; color:#fff; }
.hero-content .eyebrow { color:#99f6e4; }
.hero h1 { margin:0; max-width:800px; font-family:var(--serif); font-size:clamp(3rem, 8vw, 6.5rem); line-height:.98; letter-spacing:-.06em; }
.hero-content > p:last-child { margin:20px 0 0; font-size:1.15rem; opacity:.82; }
.page-heading { padding:56px 0 30px; }
.page-heading h1 { margin:0; overflow-wrap:anywhere; font:700 clamp(2rem, 5vw, 3.6rem)/1.15 var(--serif); letter-spacing:-.035em; }

.site-main { display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:34px; padding-block:50px 80px; align-items:start; }
.single-column { grid-template-columns:1fr; }
.section-intro { display:flex; justify-content:space-between; align-items:end; margin-bottom:20px; }
.section-intro h2 { margin:0; font:700 2rem/1.2 var(--serif); }
.section-intro > span,.quiet-link { color:var(--muted); font-size:.9rem; }
.quiet-link:hover { color:var(--accent); }

.post-list { display:grid; gap:18px; }
.post-card { display:grid; grid-template-columns:76px minmax(0,1fr); gap:24px; padding:28px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.post-date { border-right:1px solid var(--line); color:var(--muted); }
.post-date strong { display:block; color:var(--accent); font-size:2.2rem; line-height:1; }
.post-date span { display:block; margin-top:7px; font-size:.75rem; }
.post-terms { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:8px; }
.post-terms a { color:var(--accent); font-size:.73rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.post-card-body { min-width:0; }
.post-card h2 { margin:0; overflow-wrap:anywhere; font:700 1.5rem/1.35 var(--serif); }
.post-card h2 a:hover { color:var(--accent); }
.post-card p { margin:10px 0 16px; overflow-wrap:anywhere; color:var(--muted); }
.post-card footer { display:flex; justify-content:space-between; color:var(--muted); font-size:.83rem; }
.post-card footer a { color:var(--accent); font-weight:700; }

.sidebar { display:grid; gap:18px; position:sticky; top:86px; }
.side-card { padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.side-card h2 { margin:0 0 14px; font-size:.85rem; letter-spacing:.11em; text-transform:uppercase; }
.profile-card { text-align:center; }
.profile-card img { border-radius:50%; border:4px solid var(--surface-2); background:var(--accent); object-fit:cover; }
.profile-card h2 { margin:10px 0 2px; font-size:1.05rem; letter-spacing:0; text-transform:none; }
.profile-card p { margin:0; color:var(--muted); font-size:.83rem; }
.side-list { list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.side-list a { display:block; overflow-wrap:anywhere; line-height:1.4; font-size:.87rem; }
.side-list a:hover { color:var(--accent); }
.side-list time { display:block; color:var(--muted); font-size:.7rem; }
.term-cloud { display:flex; flex-wrap:wrap; gap:8px; }
.term-cloud a { padding:4px 8px; border-radius:8px; background:var(--surface-2); font-size:.78rem; }
.term-cloud small { color:var(--muted); }
.toc-card nav > ul { padding-left:0; }
.toc-card ul { margin:0; padding-left:18px; list-style:none; }
.toc-card a { color:var(--muted); font-size:.8rem; }
.toc-card a:hover { color:var(--accent); }

.article,.archive-card,.search-box { padding:clamp(24px, 5vw, 52px); border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
.article-meta { display:flex; flex-wrap:wrap; gap:16px; color:var(--muted); font-size:.82rem; }
.article-header { padding-bottom:22px; border-bottom:1px solid var(--line); }
.article-header .post-terms { margin-top:9px; margin-bottom:0; }
.article-content { padding-top:22px; font-size:1.02rem; overflow-wrap:anywhere; }
.article-content h2,.article-content h3,.article-content h4 { scroll-margin-top:88px; font-family:var(--serif); line-height:1.35; }
.article-content h2 { margin-top:2.4em; font-size:1.7rem; }
.article-content h3 { margin-top:2em; font-size:1.35rem; }
.article-content a { color:var(--accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.article-content img { display:block; margin:26px auto; border-radius:12px; }
.article-content blockquote { margin:1.5em 0; padding:10px 20px; border-left:4px solid var(--accent); color:var(--muted); background:var(--surface-2); }
.article-content pre { overflow:auto; padding:18px; border-radius:12px; background:#151a19; color:#e5efec; line-height:1.55; }
.article-content code { padding:.12em .35em; border-radius:5px; background:var(--surface-2); font-size:.9em; }
.article-content pre code { padding:0; background:transparent; }
.article-content table { display:block; width:100%; overflow-x:auto; border-collapse:collapse; }
.article-content th,.article-content td { padding:9px 12px; border:1px solid var(--line); }
.article-content details { margin:18px 0; padding:13px 16px; border:1px solid var(--line); border-radius:10px; }
.article-footer { margin-top:42px; padding-top:22px; border-top:1px solid var(--line); }
.license { padding:14px 16px; border-radius:10px; background:var(--surface-2); color:var(--muted); font-size:.85rem; }
.license a { color:var(--accent); }
.tag-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; font-size:.85rem; }
.tag-row a { color:var(--accent); }
.post-nav { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }
.post-nav a { padding:17px 20px; border:1px solid var(--line); border-radius:13px; background:var(--surface); }
.post-nav a:hover { border-color:var(--accent); }
.post-nav small { display:block; color:var(--muted); }
.post-nav span { display:block; overflow-wrap:anywhere; line-height:1.4; }
.post-nav .next { text-align:right; }

.pagination { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:15px; margin-top:24px; padding:15px; color:var(--muted); font-size:.86rem; }
.pagination a:last-child { text-align:right; }
.pagination a { color:var(--accent); font-weight:700; }
.term-grid,.friend-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.term-card,.friend-card { display:flex; align-items:center; gap:15px; padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.term-card { justify-content:space-between; }
.term-card strong { display:grid; place-items:center; min-width:36px; height:36px; border-radius:50%; color:var(--accent); background:var(--surface-2); }
.friend-card:hover,.term-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.friend-card img { border-radius:50%; object-fit:cover; background:var(--surface-2); }
.friend-card span { min-width:0; }
.friend-card strong,.friend-card small { display:block; }
.friend-card small { color:var(--muted); line-height:1.4; }

.archive-count { margin-top:0; color:var(--muted); }
.archive-year { display:grid; grid-template-columns:85px 1fr; gap:22px; border-top:1px solid var(--line); padding:26px 0; }
.archive-year h2 { margin:0; color:var(--accent); font:700 1.8rem/1 var(--serif); }
.archive-year ol { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.archive-year li { display:grid; grid-template-columns:48px 1fr; gap:13px; }
.archive-year time { color:var(--muted); font-size:.8rem; }
.archive-year a:hover { color:var(--accent); }

.search-box label { display:block; margin-bottom:10px; font-weight:700; }
.search-box input { width:100%; padding:15px 17px; border:1px solid var(--line); border-radius:12px; outline:none; background:var(--bg); color:var(--text); font:inherit; }
.search-box input:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.search-box p { margin-bottom:0; color:var(--muted); font-size:.85rem; }
.search-results { display:grid; gap:14px; margin-top:18px; }
.search-results article { padding:21px 24px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.search-results time { color:var(--muted); font-size:.75rem; }
.search-results h2 { margin:4px 0; font:700 1.25rem/1.35 var(--serif); }
.search-results h2 a:hover { color:var(--accent); }
.search-results p { margin:0; color:var(--muted); font-size:.9rem; }
.not-found { padding:40px; text-align:center; }
.not-found img { display:block; margin:auto; }
.not-found p { color:var(--muted); }
.button { display:inline-block; padding:10px 18px; border-radius:11px; color:#fff; background:var(--accent); font-weight:700; }

.site-footer { border-top:1px solid var(--line); background:var(--surface); }
.footer-inner { display:flex; justify-content:space-between; gap:20px; padding-block:28px; color:var(--muted); font-size:.82rem; }
.footer-inner p { margin:0; }
.footer-inner a { color:var(--accent); }

@media (max-width:900px) {
  .site-main { grid-template-columns:minmax(0,1fr); }
  .content-column,.post-list,.sidebar { min-width:0; max-width:100%; }
  .sidebar { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .toc-card { grid-column:1/-1; }
  .hero { min-height:360px; }
  .site-nav { display:none; position:absolute; z-index:10; top:calc(100% + 8px); left:0; right:0; max-height:calc(100dvh - 90px); overflow-y:auto; overscroll-behavior:contain; padding:10px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--shadow); }
  .site-nav.is-open { display:grid; }
  .site-nav a { padding:10px 12px; }
  .nav-toggle { display:block; margin-left:auto; }
}

@media (max-width:620px) {
  .shell { width:min(calc(100% - 24px), 1160px); }
  .nav-wrap { min-height:60px; gap:12px; }
  .brand { width:38px; height:38px; }
  .theme-toggle { width:38px; height:38px; flex:0 0 38px; }
  .nav-toggle { min-height:38px; padding:6px 10px; }
  .site-nav { top:calc(100% + 6px); }
  .hero { min-height:300px; background-position:center; }
  .hero-content { padding-bottom:34px; }
  .hero h1 { font-size:clamp(2.65rem, 14vw, 4rem); letter-spacing:-.045em; }
  .hero-content > p:last-child { margin-top:14px; font-size:1rem; }
  .site-main { gap:24px; padding-block:26px 48px; }
  .page-heading { padding:32px 0 14px; }
  .page-heading h1 { font-size:clamp(1.85rem, 9vw, 2.55rem); line-height:1.25; }
  .section-intro { align-items:center; gap:12px; }
  .section-intro h2 { font-size:1.75rem; }
  .quiet-link { flex:0 0 auto; }
  .post-list { gap:14px; }
  .post-card { grid-template-columns:minmax(0,1fr); gap:14px; padding:20px; border-radius:15px; }
  .post-date { border-right:0; border-bottom:1px solid var(--line); padding-bottom:12px; }
  .post-date strong,.post-date span { display:inline; margin-right:5px; }
  .post-card h2 { font-size:1.32rem; }
  .post-card p { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:4; font-size:.94rem; }
  .post-card footer { flex-wrap:wrap; gap:8px 14px; }
  .sidebar,.term-grid,.friend-grid { grid-template-columns:1fr; }
  .side-card { padding:20px; border-radius:15px; }
  .article,.archive-card,.search-box { max-width:100%; padding:20px; border-radius:15px; box-shadow:0 10px 30px rgba(20,42,37,.06); }
  .article-meta { gap:9px; }
  .article-content { padding-top:18px; font-size:.98rem; line-height:1.8; }
  .article-content h2 { margin-top:2em; font-size:1.48rem; }
  .article-content h3 { margin-top:1.8em; font-size:1.24rem; }
  .article-content img { margin-block:20px; border-radius:9px; }
  .article-content pre { max-width:100%; padding:14px; border-radius:9px; font-size:.84rem; overscroll-behavior-inline:contain; }
  .article-content table { max-width:100%; overscroll-behavior-inline:contain; }
  .article-content blockquote { margin-inline:0; padding:9px 14px; }
  .article-content details { padding:10px 12px; }
  .article-footer { margin-top:32px; }
  .license { padding:12px 14px; }
  .post-nav { grid-template-columns:1fr; }
  .post-nav .next { text-align:left; }
  .archive-year { grid-template-columns:1fr; gap:10px; }
  .archive-year li { grid-template-columns:44px minmax(0,1fr); }
  .archive-year a { overflow-wrap:anywhere; }
  .pagination { grid-template-columns:1fr 1fr; gap:8px 16px; padding-inline:4px; }
  .pagination > :nth-child(2) { grid-column:1/-1; grid-row:1; text-align:center; }
  .pagination > :first-child { grid-column:1; grid-row:2; }
  .pagination > :last-child { grid-column:2; grid-row:2; text-align:right; }
  .footer-inner { display:block; text-align:center; }
  .footer-inner p + p { margin-top:5px; }
}

@media (max-width:360px) {
  .shell { width:min(calc(100% - 18px), 1160px); }
  .nav-wrap { gap:8px; }
  .nav-toggle { font-size:.82rem; }
  .post-card,.article,.archive-card,.search-box,.side-card { padding:17px; }
  .section-intro { align-items:flex-start; }
  .section-intro h2 { font-size:1.55rem; }
  .quiet-link { font-size:.8rem; }
}