@charset "UTF-8";
:root {
  color-scheme: light;
  --paper:#f6f5f0; --surface:#fffefa; --ink:#252b29; --muted:#687064;
  --accent:#15705e; --accent-soft:#e5eee6; --line:#dddfd5; --warm:#db7d4b;
  --code:#eeeee6; --header:rgba(246,245,240,.94); --shadow:0 18px 50px rgba(28,53,37,.055);
  --sans:Inter,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:"Cascadia Code","SFMono-Regular",Consolas,monospace;
}
:root[data-theme="dark"] {
  color-scheme:dark; --paper:#171d1a; --surface:#1e2621; --ink:#e4e9df; --muted:#a1ad9e;
  --accent:#93cbb1; --accent-soft:#273f32; --line:#364239; --warm:#efa77b;
  --code:#202b24; --header:rgba(23,29,26,.94); --shadow:0 18px 50px rgba(0,0,0,.12);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:108px; }
body { margin:0; font-family:var(--sans); background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.65; }
::selection { color:var(--ink); background:var(--accent-soft); }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:default; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
[hidden] { display:none!important; }
svg { flex-shrink:0; }
img { max-width:100%; height:auto; }
.page-width { max-width:1180px; margin-inline:auto; padding-inline:36px; }
.skip-link { position:fixed; top:10px; left:15px; z-index:100; padding:9px 16px; background:var(--accent); color:var(--paper); transform:translateY(-180%); border-radius:6px; }
.skip-link:focus { transform:none; }
.site-header { height:91px; position:sticky; top:0; z-index:20; background:var(--header); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); }
.header-inner { max-width:1180px; margin:auto; padding:0 36px; height:100%; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.brand { display:flex; align-items:center; gap:14px; font-size:17px; letter-spacing:.01em; font-weight:650; line-height:1.3; }
.brand small { display:block; color:var(--muted); font-weight:400; font-size:11px; letter-spacing:.16em; margin-top:4px; }
.brand-mark { display:flex; justify-content:center; align-items:center; width:43px; height:43px; background:var(--accent); color:var(--paper); border-radius:12px 12px 12px 3px; font:600 23px var(--mono); letter-spacing:-.1em; padding-right:4px; }
.brand-mark span { color:#e9b280; }
.site-header nav { display:flex; align-items:center; gap:29px; font-size:13px; color:var(--muted); }
.site-header nav>a { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.site-header nav>a:hover { color:var(--accent); }
.site-header nav svg { width:14px; height:14px; }
.theme-toggle { border:1px solid var(--line); border-radius:50%; width:33px; height:33px; background:transparent; color:var(--ink); display:grid; place-items:center; }
.site-header .theme-toggle svg { width:16px; height:16px; }
.site-header .nav-github { padding-left:25px; border-left:1px solid var(--line); color:var(--ink); }
.eyebrow { font:500 10px/1.5 var(--mono); letter-spacing:.16em; color:var(--muted); margin:0 0 23px; }
.status-dot { width:6px; height:6px; background:var(--accent); border-radius:50%; display:inline-block; flex-shrink:0; }
.hero { display:grid; grid-template-columns:1.05fr 1fr; gap:45px; align-items:center; padding-top:84px; padding-bottom:74px; }
.hero .eyebrow { display:flex; align-items:center; gap:9px; color:var(--accent); margin-bottom:26px; }
.hero h1 { font-size:clamp(36px,3.55vw,49px); line-height:1.45; letter-spacing:-.052em; font-weight:650; margin:0 0 21px; }
.accent-word { color:var(--accent); }
.accent-dot { color:var(--warm); }
.hero-description { font-size:14px; line-height:1.95; color:var(--muted); margin:0; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-top:32px; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:13px; border-radius:7px; padding:12px 20px; border:1px solid transparent; font-size:12px; font-weight:550; line-height:1.5; }
.button svg { width:16px; height:16px; }
.button-primary { background:var(--accent); color:var(--paper); }
.button-primary:hover { filter:brightness(1.1); transform:translateY(-1px); }
.button-secondary { background:var(--surface); color:var(--ink); border-color:var(--line); }
.text-link { color:var(--accent); display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:550; }
.text-link svg { width:14px; height:14px; }
.text-link:hover { text-decoration:underline; text-underline-offset:4px; }
.hero-note { display:flex; flex-wrap:wrap; gap:0; color:var(--muted); font-size:10px; margin-top:31px; }
.hero-note span+span::before { content:"/"; color:var(--line); margin:0 12px; }
.hero-visual { border:1px solid var(--line); background:var(--surface); border-radius:11px; overflow:hidden; box-shadow:var(--shadow); transform:rotate(-1deg); }
.hero-visual img { display:block; width:100%; background:#fbfcf6; }
.diagram-header { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); font:9px var(--mono); color:var(--muted); }
.diagram-header>span:first-child { display:flex; gap:4px; }
.diagram-header i { display:inline-block; width:5px; height:5px; border-radius:50%; background:#c6c9bc; }
.diagram-header i:first-child { background:#d79a79; }
.diagram-header i:nth-child(2) { background:#c4bd85; }
.diagram-header i:nth-child(3) { background:#97b494; }
.diagram-badge { color:var(--accent); border:1px solid var(--line); border-radius:3px; padding:1px 5px; }
.diagram-footer { display:flex; align-items:center; gap:8px; border-top:1px solid var(--line); padding:12px 16px; color:var(--muted); font-size:9px; }
.diagram-footer code { color:var(--accent); font-size:9px; }
.diagram-footer>span:last-child { margin-left:auto; }
.series-strip { display:flex; align-items:center; gap:22px; border-block:1px solid var(--line); padding-block:24px; background:linear-gradient(90deg,transparent,var(--accent-soft),transparent); }
.series-label { font-size:10px; letter-spacing:.05em; color:var(--accent); background:var(--accent-soft); padding:5px 9px; border-radius:4px; white-space:nowrap; }
.series-strip h2 { font-size:14px; font-weight:550; margin:0 0 4px; }
.series-strip p { color:var(--muted); margin:0; font-size:11px; }
.series-strip>a { margin-left:auto; display:flex; align-items:center; gap:12px; font-size:11px; white-space:nowrap; color:var(--accent); }
.series-strip svg { width:15px; }
.writing { padding-top:65px; padding-bottom:75px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; }
.section-heading .eyebrow { margin-bottom:7px; font-size:9px; }
.section-heading h2 { font-size:28px; font-weight:550; letter-spacing:-.03em; margin:0; }
.heading-dot { font-weight:300; color:var(--line); margin-inline:4px; }
.heading-count { font:400 16px var(--mono); color:var(--muted); }
.search-box { display:flex; align-items:center; border:1px solid var(--line); border-radius:6px; padding:9px 11px; gap:9px; width:240px; color:var(--muted); background:var(--surface); }
.search-box svg { width:14px; height:14px; }
.search-box input { min-width:0; width:100%; color:var(--ink); border:0; outline:0; background:transparent; font-size:11px; }
.search-box:focus-within { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.search-box kbd { font:10px var(--mono); border:1px solid var(--line); border-radius:3px; padding:0 4px; }
.filter-bar { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; padding-bottom:21px; border-bottom:1px solid var(--line); }
.filter { padding:7px 13px; border-radius:5px; color:var(--muted); background:transparent; border:1px solid transparent; font-size:11px; }
.filter:hover { color:var(--accent); background:var(--accent-soft); }
.filter.is-active { color:var(--accent); background:var(--accent-soft); border-color:var(--line); }
.filter span { font:9px var(--mono); margin-left:5px; opacity:.7; }
.search-status { color:var(--muted); font-size:11px; margin:12px 0 0; min-height:0; }
.search-status:empty { display:none; }
.post-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; padding-top:23px; }
.post-card { position:relative; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:8px; padding:25px 27px 23px; background:var(--surface); min-height:230px; transition:transform .18s,border-color .18s,box-shadow .18s; }
.post-card:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow); }
.card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.post-number { font:11px var(--mono); color:var(--muted); }
.category { font-size:10px; letter-spacing:.035em; color:var(--accent); padding:3px 7px; border-radius:3px; background:var(--accent-soft); }
.card-title::after { content:""; position:absolute; inset:0; border-radius:8px; }
.card-title h3 { margin:0; font-size:18px; line-height:1.7; font-weight:550; letter-spacing:-.025em; }
.post-card>p { font-size:12px; line-height:1.9; color:var(--muted); margin:10px 0 24px; }
.card-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; }
.tags { display:flex; gap:10px; flex-wrap:wrap; }
.tags span { font-size:9px; color:var(--muted); }
.tags span::before { content:"#"; color:var(--line); margin-right:2px; }
.read-time { color:var(--muted); font-size:9px; display:flex; align-items:center; gap:9px; white-space:nowrap; }
.read-time svg { width:14px; height:14px; color:var(--accent); }
.empty-state { text-align:center; padding:50px 20px; border:1px dashed var(--line); margin-top:25px; border-radius:8px; }
.empty-state>span { font-size:35px; color:var(--accent); }
.empty-state h3 { font-size:17px; margin:10px 0; font-weight:500; }
.empty-state p { color:var(--muted); font-size:13px; }
.about { padding-top:44px; padding-bottom:60px; display:grid; grid-template-columns:.8fr 1.2fr; gap:65px; border-top:1px solid var(--line); }
.about .eyebrow { margin-bottom:12px; }
.about h2 { font-size:32px; line-height:1.65; letter-spacing:-.04em; font-weight:500; margin:0; }
.about-copy { padding-top:25px; }
.about-copy>p { font-size:13px; line-height:2; color:var(--muted); margin:0 0 16px; }
.about-copy>p a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.about-links { display:flex; gap:25px; margin-top:23px; }
.site-footer { max-width:1108px; margin:0 auto; border-top:1px solid var(--line); padding:30px 0 34px; display:flex; justify-content:space-between; gap:30px; }
.footer-brand { font-size:12px; font-weight:550; }
.site-footer p { font-size:10px; color:var(--muted); margin:5px 0 0; }
.footer-links { display:flex; align-items:center; gap:22px; color:var(--muted); font-size:9px; }
.footer-links a { display:flex; align-items:center; gap:5px; }
.footer-links svg { width:11px; height:11px; }
.back-top { position:fixed; bottom:25px; right:25px; z-index:15; width:38px; height:38px; border:1px solid var(--line); background:var(--surface); color:var(--accent); border-radius:50%; box-shadow:var(--shadow); font-size:19px; }
.reading-progress { position:fixed; z-index:30; top:89px; height:2px; width:100%; pointer-events:none; }
.reading-progress span { display:block; width:0; height:100%; background:var(--accent); }
.article-page { padding-top:38px; }
.article-top { display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:10px; }
.breadcrumb:hover { color:var(--accent); }
.article-header { max-width:810px; padding:45px 0 35px; }
.article-eyebrow { display:flex; align-items:center; gap:15px; font-size:10px; color:var(--muted); }
.article-header h1 { font-size:34px; font-weight:600; line-height:1.65; letter-spacing:-.035em; margin:17px 0 15px; text-wrap:balance; }
.article-deck { font-size:14px; line-height:1.9; color:var(--muted); margin:0 0 24px; max-width:700px; }
.article-meta { display:flex; align-items:center; flex-wrap:wrap; gap:10px; color:var(--muted); font-size:10px; }
.author-avatar { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:var(--accent-soft); color:var(--accent); font:9px var(--mono); }
.meta-divider { color:var(--line); }
.article-layout { display:grid; grid-template-columns:minmax(0,750px) minmax(150px,1fr); gap:65px; border-top:1px solid var(--line); padding-top:32px; padding-bottom:55px; }
.article-main { min-width:0; }
.prose { font-size:16px; line-height:2.05; overflow-wrap:anywhere; }
.prose>p:first-child { margin-top:0; }
.prose h2 { font-size:22px; line-height:1.7; font-weight:600; letter-spacing:-.02em; margin:44px 0 18px; scroll-margin-top:112px; }
.prose h3 { font-size:18px; font-weight:550; margin:30px 0 14px; scroll-margin-top:112px; }
.prose p { margin:18px 0; }
.prose a { color:var(--accent); text-decoration:underline; text-underline-offset:4px; text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent); }
.prose a:hover { text-decoration-color:var(--accent); }
.prose blockquote { margin:0 0 28px; padding:13px 20px; border-left:3px solid var(--accent); background:var(--accent-soft); color:var(--accent); font-size:14px; border-radius:0 5px 5px 0; }
.prose blockquote p { margin:0; }
.prose strong { font-weight:600; }
.prose ul,.prose ol { padding-left:23px; }
.prose li { margin:8px 0; }
.prose code { font-family:var(--mono); background:var(--code); border-radius:3px; padding:2px 5px; font-size:.82em; color:var(--accent); }
.prose pre { position:relative; background:var(--code); border:1px solid var(--line); border-radius:7px; margin:23px 0; padding:23px 22px; overflow:auto; font-size:12px; line-height:1.85; }
.prose pre code { color:var(--ink); border-radius:0; background:transparent; padding:0; font-size:inherit; display:block; min-width:0; }
.prose pre:has(.copy-code) { padding-top:43px; }
.copy-code { position:absolute; right:10px; top:9px; font-size:10px; color:var(--muted); border:1px solid var(--line); background:var(--surface); padding:3px 8px; border-radius:4px; }
.copy-code:hover { color:var(--accent); }
.table-scroll { overflow-x:auto; margin:25px 0; border:1px solid var(--line); border-radius:6px; }
.prose table { width:100%; border-collapse:collapse; font-size:12px; line-height:1.8; }
.prose th { background:var(--accent-soft); font-weight:550; text-align:left; white-space:nowrap; }
.prose th,.prose td { padding:11px 13px; border-bottom:1px solid var(--line); min-width:80px; }
.prose td { background:var(--surface); }
.prose tr:last-child td { border-bottom:0; }
.prose figure { margin:26px 0; }
.article-diagram { border:1px solid var(--line); border-radius:7px; background:var(--surface); padding:15px; }
.article-diagram>img { width:100%; display:block; background:#fbfcf6; border-radius:3px; }
.article-diagram figcaption { font-size:10px; line-height:1.8; color:var(--muted); padding:12px 4px 5px; }
.article-diagram details { font-size:10px; color:var(--muted); padding:5px 4px; }
.article-diagram summary { cursor:pointer; }
.article-diagram details pre { font-size:10px; margin:12px 0 0; }
.desktop-toc { position:sticky; top:125px; align-self:start; padding:10px 0 0 20px; border-left:1px solid var(--line); }
.desktop-toc .eyebrow { font-size:9px; }
.desktop-toc>p { font-size:12px; font-weight:550; margin:8px 0 13px; }
.desktop-toc nav { display:flex; flex-direction:column; gap:13px; max-height:calc(100dvh - 290px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding-right:8px; }
.desktop-toc nav a { font-size:11px; line-height:1.85; color:var(--muted); }
.desktop-toc nav a:hover,.desktop-toc nav a.is-current { color:var(--accent); }
.desktop-toc .toc-level-3 { padding-left:10px; font-size:10px; }
.toc-back { display:block; font-size:10px; color:var(--accent); margin-top:25px; padding-top:18px; border-top:1px solid var(--line); }
.mobile-toc { display:none; }
.project-callout { display:flex; gap:17px; border:1px solid var(--line); border-radius:8px; padding:22px; background:var(--accent-soft); margin-top:37px; }
.callout-symbol { color:var(--accent); font-size:24px; }
.project-callout h2 { font-size:16px; font-weight:550; margin:0; }
.project-callout p { color:var(--muted); font-size:12px; line-height:1.9; margin:8px 0 13px; }
.post-navigation { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:30px; }
.post-navigation a { padding:17px 19px; border:1px solid var(--line); border-radius:7px; background:var(--surface); }
.post-navigation a:hover { border-color:var(--accent); }
.post-navigation span { display:block; color:var(--muted); font-size:10px; margin-bottom:9px; }
.post-navigation strong { font-size:12px; font-weight:550; line-height:1.9; display:block; }
.post-navigation a:last-child { text-align:right; }
.article-source { display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; font-size:10px; color:var(--muted); padding-top:24px; }
.article-source a:hover { color:var(--accent); }
.not-found { min-height:65vh; padding-block:90px; }
.not-found h1 { font-size:40px; font-weight:550; }
.not-found p:not(.eyebrow) { color:var(--muted); margin-bottom:30px; }
@media(min-width:1500px) { .hero { padding-top:100px; padding-bottom:90px; } }
@media(max-width:1000px) {
  .hero { gap:30px; }
  .hero h1 { font-size:36px; }
  .hero-description { font-size:12px; }
  .hero-actions { gap:17px; }
  .hero-actions .text-link { font-size:11px; }
  .hero-note { font-size:9px; }
  .hero-note span+span::before { margin:0 7px; }
  .diagram-footer>span:last-child { display:none; }
  .site-footer { margin-inline:36px; }
  .footer-links { gap:15px; }
  .article-layout { gap:35px; grid-template-columns:minmax(0,1fr) 170px; }
}
@media(max-width:760px) {
  .page-width { padding-inline:24px; }
  .site-header { height:76px; }
  .header-inner { padding-inline:24px; gap:14px; }
  .brand { gap:10px; font-size:15px; }
  .brand-mark { width:36px; height:36px; font-size:20px; border-radius:9px 9px 9px 3px; }
  .brand small { font-size:9px; }
  .site-header nav { gap:18px; font-size:12px; }
  .site-header .nav-github { display:none; }
  .site-header .rss-link { display:none; }
  .hero { grid-template-columns:1fr; padding-top:48px; padding-bottom:45px; gap:37px; }
  .hero h1 { font-size:40px; }
  .hero-description { font-size:13px; }
  .hero .eyebrow { font-size:9px; margin-bottom:22px; }
  .hero-actions { margin-top:25px; gap:23px; }
  .hero-note { margin-top:25px; font-size:9px; }
  .hero-visual { transform:none; max-width:530px; width:100%; margin:auto; }
  .hero-visual img { max-height:345px; object-fit:contain; }
  .diagram-footer>span:last-child { display:inline; }
  .series-strip { margin-inline:24px; padding-inline:0; gap:14px; padding-block:20px; align-items:flex-start; flex-wrap:wrap; }
  .series-strip h2 { font-size:12px; }
  .series-strip p { font-size:10px; max-width:240px; }
  .series-strip>a { margin-left:0; padding-left:68px; }
  .writing { padding-top:45px; padding-bottom:45px; }
  .section-heading { flex-direction:column; align-items:stretch; gap:21px; }
  .section-heading h2 { font-size:26px; }
  .search-box { width:100%; padding:11px 12px; }
  .search-box input { font-size:12px; }
  .filter-bar { margin-top:19px; gap:6px; }
  .filter { padding:7px 9px; font-size:10px; }
  .post-grid { gap:14px; }
  .post-card { padding:20px; min-height:235px; }
  .card-title h3 { font-size:16px; }
  .post-card>p { font-size:11px; }
  .tags { gap:7px; }
  .tags span { font-size:8px; }
  .about { grid-template-columns:1fr; gap:20px; margin-inline:24px; padding-inline:0; padding-top:32px; padding-bottom:35px; }
  .about h2 { font-size:29px; }
  .about-copy { padding-top:0; }
  .about-copy>p { font-size:12px; }
  .site-footer { margin-inline:24px; flex-direction:column; gap:24px; padding-top:25px; }
  .footer-links { flex-wrap:wrap; justify-content:space-between; gap:17px; }
  .reading-progress { top:74px; }
  .article-page { padding-top:26px; }
  .article-top { font-size:9px; gap:12px; }
  .article-header { padding-top:32px; padding-bottom:27px; }
  .article-header h1 { font-size:28px; line-height:1.7; margin-top:15px; }
  .article-deck { font-size:13px; }
  .article-layout { display:block; padding-top:23px; padding-bottom:35px; }
  .desktop-toc { display:none; }
  .mobile-toc { display:block; border:1px solid var(--line); border-radius:6px; padding:12px 15px; margin-bottom:25px; font-size:12px; background:var(--surface); }
  .mobile-toc summary { cursor:pointer; color:var(--accent); }
  .mobile-toc nav { display:flex; flex-direction:column; gap:9px; padding-top:15px; }
  .mobile-toc nav a { color:var(--muted); }
  .prose { font-size:15px; }
  .prose h2 { font-size:20px; margin-top:34px; }
  .prose blockquote { font-size:13px; padding:12px 15px; }
  .prose pre { padding:18px 14px; font-size:11px; }
  .project-callout { padding:18px; gap:12px; }
  .post-navigation { gap:10px; }
  .post-navigation a { padding:13px; }
  .post-navigation strong { font-size:11px; }
  .article-source { font-size:9px; }
}
@media(max-width:520px) {
  .post-grid { grid-template-columns:1fr; }
  .post-card { min-height:215px; }
  .card-title h3 { font-size:18px; }
  .post-card>p { font-size:12px; }
  .card-bottom .tags span { font-size:9px; }
  .hero h1 { font-size:34px; }
  .desktop-break { display:none; }
  .hero-actions { gap:17px; }
  .hero-actions .text-link { font-size:11px; }
  .hero-note span+span::before { margin-inline:7px; }
  .article-header h1 { font-size:25px; }
  .article-top>span { max-width:140px; text-align:right; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none!important; }
}