/* ===========================================================================
   青蛙小白 · 主题样式 (theme.css)
   从原型抽取的全站共享样式：配色 tokens（深/浅自动）、正文排版、代码块、
   TOC、导航等。每个页面模板都应引入本文件。
   依赖：Tailwind（CDN 或 CLI）+ JetBrains Mono 字体。
   =========================================================================== */

  /* ---------- THEME TOKENS ---------- */
  :root{
    --bg:#faf9f5; --surface:#ffffff; --surface-2:#f2f1eb;
    --line:#e7e8ec; --line-strong:#d6d8de;
    --fg:#191b22; --fg-muted:#565d6b; --fg-faint:#8a909d;
    --accent:hsl(15 54.2% 51.2%); --accent-fg:#ffffff;
    --accent-soft:hsl(15 54.2% 51.2% / 0.10);
    --code-bg:#f6f7f9; --code-line:#eceef1;
    --grid:rgba(20,22,30,0.045);
    --tk-c:#8a909d; --tk-s:#3f7d20; --tk-n:#b3541e; --tk-k:#7c3aed; --tk-key:#1f3a8a; --tk-p:#787f8c;
    --shadow: 0 1px 2px rgba(20,22,30,.04), 0 8px 30px rgba(20,22,30,.05);
    --ci:hsl(212 64% 50%);   --ci-bg:hsl(212 64% 50%/.07);
    --cw:hsl(37 80% 46%);    --cw-bg:hsl(37 80% 46%/.07);
    --cd:hsl(355 60% 52%);   --cd-bg:hsl(355 60% 52%/.07);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#050d1c; --surface:#0c1628; --surface-2:#121f38;
      --line:rgba(130,175,255,0.15); --line-strong:rgba(150,195,255,0.26);
      --fg:#dde8f5; --fg-muted:#8ba5c5; --fg-faint:#5a7090;
      --accent:hsl(15 63.1% 59.6%); --accent-fg:#ffffff;
      --accent-soft:hsl(15 63.1% 59.6% / 0.16);
      --code-bg:#030810; --code-line:rgba(100,150,255,0.10);
      --grid:rgba(100,150,255,0.04);
      --tk-c:#646b78; --tk-s:#9ece6a; --tk-n:#ff9e64; --tk-k:#bb9af7; --tk-key:#7aa2f7; --tk-p:#737a87;
      --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 40px rgba(0,0,0,.35);
      --ci:hsl(214 76% 64%);   --ci-bg:hsl(214 76% 64%/.10);
      --cw:hsl(39 82% 60%);    --cw-bg:hsl(39 82% 60%/.10);
      --cd:hsl(355 68% 63%);   --cd-bg:hsl(355 68% 63%/.10);
    }
  }
  :root[data-theme="dark"]{
    --bg:#050d1c; --surface:#0c1628; --surface-2:#121f38;
    --line:rgba(130,175,255,0.15); --line-strong:rgba(150,195,255,0.26);
    --fg:#dde8f5; --fg-muted:#8ba5c5; --fg-faint:#5a7090;
    --accent:hsl(15 63.1% 59.6%); --accent-fg:#ffffff;
    --accent-soft:hsl(15 63.1% 59.6% / 0.16);
    --code-bg:#030810; --code-line:rgba(100,150,255,0.10);
    --grid:rgba(100,150,255,0.04);
    --tk-c:#646b78; --tk-s:#9ece6a; --tk-n:#ff9e64; --tk-k:#bb9af7; --tk-key:#7aa2f7; --tk-p:#737a87;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 40px rgba(0,0,0,.35);
    --ci:hsl(214 76% 64%);   --ci-bg:hsl(214 76% 64%/.10);
    --cw:hsl(39 82% 60%);    --cw-bg:hsl(39 82% 60%/.10);
    --cd:hsl(355 68% 63%);   --cd-bg:hsl(355 68% 63%/.10);
  }

  html{ background:var(--bg); }
  body{ color:var(--fg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
  ::selection{ background:var(--accent-soft); }

  .grid-bg{}

  /* ---------- ARTICLE PROSE ---------- */
  .post-body{ font-size:17px; line-height:1.85; color:var(--fg); letter-spacing:.01em; }
  .post-body p{ margin: 1.25em 0; color:var(--fg); }
  .post-body > p:first-child{ margin-top:0; }
  .post-body > h2:first-child,.post-body > h3:first-child{ margin-top:0; }
  .post-body strong{ font-weight:700; color:var(--fg); }
  .post-body a{ color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent-soft); transition:border-color .15s; }
  .post-body a:hover{ border-bottom-color:var(--accent); }

  /* headings with mono # anchor */
  .post-body h1{ font-size:2rem; font-weight:700; letter-spacing:-.02em; line-height:1.25; color:var(--fg); margin:0 0 .6em; }
  .post-body h2,.post-body h3,.post-body h4{ scroll-margin-top:88px; position:relative; font-weight:700; line-height:1.4; }
  .post-body h2{ font-size:1.6rem; margin:2.6em 0 .9em; padding-bottom:.4em; border-bottom:1px solid var(--line); }
  .post-body h3{ font-size:1.25rem; margin:2em 0 .7em; }
  .post-body h4{ font-size:1.05rem; margin:1.6em 0 .6em; color:var(--fg); }
  .post-body h2::before,.post-body h3::before,.post-body h4::before{
    content:"#"; font-family:var(--mono,'JetBrains Mono',monospace); color:var(--accent);
    position:absolute; left:-1.1em; opacity:0; transition:opacity .15s; font-weight:500;
  }
  .post-body h2:hover::before,.post-body h3:hover::before,.post-body h4:hover::before{ opacity:.7; }

  /* lists */
  .post-body ul,.post-body ol{ margin:1.2em 0; padding-left:1.5em; }
  .post-body li{ margin:.5em 0; }
  .post-body ul li{ list-style:none; position:relative; padding-left:1.1em; }
  .post-body ul li::before{ content:""; position:absolute; left:0; top:.78em; width:6px; height:6px; background:var(--accent); border-radius:1px; }
  .post-body ul ul{ margin:.4em 0; }
  .post-body ul ul li::before{ background:var(--fg-faint); width:5px; height:1px; top:.95em; border-radius:0; }
  .post-body ol{ list-style:none; counter-reset:ol; padding-left:0; }
  .post-body ol > li{ counter-increment:ol; position:relative; padding-left:2.4em; }
  .post-body ol > li::before{
    content:counter(ol,decimal-leading-zero); position:absolute; left:0; top:.05em;
    font-family:'JetBrains Mono',monospace; font-size:.82em; font-weight:500; color:var(--accent);
    background:var(--accent-soft); border-radius:4px; padding:.05em .45em; line-height:1.5;
  }

  /* inline code */
  .post-body :not(pre) > code{
    font-family:'JetBrains Mono',monospace; font-size:.86em; background:var(--surface-2);
    border:1px solid var(--line); padding:.1em .4em; border-radius:5px; color:var(--accent);
    word-break:break-word;
  }

  /* blockquote / callout */
  .post-body blockquote{
    margin:1.6em 0; padding:.9em 1.2em; border-left:2px solid var(--accent);
    background:var(--surface); color:var(--fg-muted); border-radius:0 8px 8px 0; font-size:.98em;
  }
  .post-body blockquote p{ margin:.4em 0; }
  /* hint/callout */
  .callout{
    margin:1.5em 0; padding:.85em 1.1em;
    border-inline-start:3px solid var(--ci); background:var(--ci-bg);
    border-radius:0 6px 6px 0; font-size:.96em; color:var(--fg);
  }
  .callout-warning{ border-inline-start-color:var(--cw); background:var(--cw-bg); }
  .callout-danger{  border-inline-start-color:var(--cd); background:var(--cd-bg); }
  .callout p{ margin:.45em 0; }
  .callout p:first-child{ margin-top:0; }
  .callout p:last-child{ margin-bottom:0; }
  .callout strong{ color:var(--fg); }

  /* table */
  .table-wrap{ margin:1.8em 0; overflow-x:auto; border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); }
  .post-body table{ width:100%; border-collapse:collapse; font-size:.92em; min-width:520px; }
  .post-body thead th{
    text-align:left; font-weight:600; color:var(--fg); background:var(--surface-2);
    padding:.7em 1em; border-bottom:1px solid var(--line-strong); white-space:nowrap;
  }
  .post-body tbody td{ padding:.7em 1em; border-bottom:1px solid var(--line); color:var(--fg-muted); vertical-align:top; }
  .post-body tbody tr:last-child td{ border-bottom:none; }
  .post-body tbody tr:hover{ background:var(--accent-soft); }
  .post-body td strong, .post-body th strong{ color:var(--fg); }

  /* figure / image placeholder */
  .post-body figure{ margin:1.8em 0; }
  .img-ph{
    border:1px solid var(--line); border-radius:10px; background:var(--surface);
    aspect-ratio:16/7; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
  }
  .img-ph::before{
    content:""; position:absolute; inset:0;
    background-image:repeating-linear-gradient(45deg, var(--line) 0 1px, transparent 1px 11px);
    opacity:.5;
  }
  .img-ph span{
    font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--fg-faint);
    background:var(--surface); border:1px solid var(--line); padding:.4em .8em; border-radius:6px; z-index:1; letter-spacing:.02em;
  }
  .post-body figcaption{ text-align:center; font-size:.82rem; color:var(--fg-faint); margin-top:.7em; font-family:'JetBrains Mono',monospace; }

  /* ---------- CODE BLOCK ---------- */
  .code-block{ margin:1.8em 0; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--code-bg); box-shadow:var(--shadow); }
  .cb-header{
    display:flex; align-items:center; justify-content:space-between; padding:.3em .7em;
    background:var(--surface-2); border-bottom:1px solid var(--line);
  }
  /* macOS traffic lights */
  .cb-dots{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
  .cb-dot{
    width:12px; height:12px; border-radius:50%; position:relative; flex-shrink:0;
    transition:filter .15s;
  }
  .cb-red  { background:#ff5f57; }
  .cb-yellow{ background:#ffbd2e; }
  .cb-green { background:#28c840; }
  .cb-lang{ font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-faint); flex:1; text-align:center; }
  .copy-btn{
    display:flex; align-items:center; justify-content:center;
    color:var(--fg-muted); background:transparent; border:1px solid var(--line); border-radius:6px;
    padding:.2em; cursor:pointer; transition:all .15s; flex-shrink:0; width:22px; height:22px;
  }
  .copy-btn:hover{ color:var(--fg); border-color:var(--line-strong); }
  .copy-btn.copied{ color:var(--accent); border-color:var(--accent); }
  .copy-btn svg{ width:13px; height:13px; }
  .code-block pre{ margin:0; overflow-x:auto; padding:.9em 0; font-family:'JetBrains Mono',monospace; font-size:.84rem; line-height:1.7; }
  .code-block code{ display:block; }
  .code-block .ln{
    display:block; padding:0 1.1em 0 3.4em; position:relative; white-space:pre;
    counter-increment:cl;
  }
  .code-block pre{ counter-reset:cl; }
  .code-block .ln::before{
    content:counter(cl); position:absolute; left:0; width:2.4em; text-align:right;
    color:var(--fg-faint); opacity:.55; font-variant-numeric:tabular-nums; user-select:none;
    border-right:1px solid var(--code-line); padding-right:.7em;
  }
  .code-block .ln:hover{ background:var(--accent-soft); }
  /* tokens */
  .tk-c{ color:var(--tk-c); font-style:italic; }
  .tk-s{ color:var(--tk-s); }
  .tk-n{ color:var(--tk-n); }
  .tk-k{ color:var(--tk-k); }
  .tk-key{ color:var(--tk-key); }
  .tk-p{ color:var(--tk-p); }

  /* ---------- TOC ---------- */
  .toc-inline ul{ list-style:none; padding:0; margin:0; }
  .toc-inline li{ border-left:2px solid var(--line); margin:.1em 0; }
  .toc-inline li li{ margin-left:1em; }
  .toc-inline a{ display:block; padding:.2em .6em; font-size:.82rem; color:var(--fg-faint); text-decoration:none; transition:color .12s; }
  .toc-inline a:hover{ color:var(--fg); }
  .toc-link{ display:block; padding:.28em 0 .28em .8em; font-size:.84rem; color:var(--fg-faint); border-left:2px solid var(--line); transition:all .15s; line-height:1.45; }
  .toc-link:hover{ color:var(--fg); border-left-color:var(--line-strong); }
  .toc-link.active{ color:var(--accent); border-left-color:var(--accent); }
  .toc-link.lvl-3{ padding-left:1.7em; font-size:.8rem; }
  .toc-link.lvl-4{ padding-left:2.6em; font-size:.78rem; }

  /* nav */
  .nav-link{ position:relative; color:var(--fg-muted); transition:color .15s; }
  .nav-link:hover{ color:var(--fg); }
  .nav-link.active{ color:var(--accent); }
  .dropdown:hover .dropdown-menu{ opacity:1; visibility:visible; transform:translateY(0); }
  .dropdown-menu{ opacity:0; visibility:hidden; transform:translateY(-6px); transition:all .16s; }

  /* progress bar */
  #read-progress{ background:var(--accent); }

  /* misc */
  .hairline{ border-color:var(--line); }
  details > summary{ list-style:none; cursor:pointer; }
  details > summary::-webkit-details-marker{ display:none; }
  .book-details .details-chev{ flex:none; transition:transform .2s; color:var(--fg-faint); }
  .book-details[open] .details-chev{ transform:rotate(90deg); }
  .mono{ font-family:'JetBrains Mono',monospace; }
  @media (max-width: 1180px){ .toc-rail{ display:none !important; } }

  /* ---------- CHROMA (Hugo syntax highlight) token colors ---------- */
  .code-block .highlight{ margin:0; }
  .code-block .highlight pre{ margin:0; padding:.9em 1.1em; overflow-x:auto; background:var(--code-bg); font-family:'JetBrains Mono',monospace; font-size:.84rem; line-height:1.7; }
  .code-block .chroma{ background:var(--code-bg); }
  /* keywords */
  .chroma .k,.chroma .kd,.chroma .kn,.chroma .kp,.chroma .kr,.chroma .kt{ color:var(--tk-k); }
  /* strings */
  .chroma .s,.chroma .s1,.chroma .s2,.chroma .sa,.chroma .sb,.chroma .sc,.chroma .sd,.chroma .se,.chroma .sf,.chroma .sh,.chroma .si,.chroma .sl,.chroma .ss,.chroma .sx{ color:var(--tk-s); }
  /* comments */
  .chroma .c,.chroma .c1,.chroma .cm,.chroma .cp,.chroma .cs,.chroma .ch{ color:var(--tk-c); font-style:italic; }
  /* numbers/literals */
  .chroma .m,.chroma .mf,.chroma .mi,.chroma .mo,.chroma .mh,.chroma .il{ color:var(--tk-n); }
  /* json/yaml keys (property name / tag) */
  .chroma .nt,.chroma .na{ color:var(--tk-key); }
  /* name builtins/functions */
  .chroma .nb,.chroma .nf,.chroma .nv,.chroma .nc{ color:var(--tk-n); }
  /* punctuation/operators */
  .chroma .p,.chroma .o,.chroma .ow{ color:var(--tk-p); }
  /* error */
  .chroma .err{ color:var(--tk-n); }

  /* ---------- MERMAID ZOOM ---------- */
  .mermaid-wrap{ position:relative; }
  .mermaid-wrap.mermaid-zoomable{ cursor:zoom-in; }
  .mermaid-wrap.mermaid-zoomable:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
  }
  .mermaid-wrap pre.mermaid > svg{ display:block; margin-inline:auto; }
  .mermaid-zoom-btn{
    position:absolute; top:.55rem; right:.55rem; z-index:1;
    display:grid; place-items:center; width:32px; height:32px; padding:0;
    color:var(--fg-muted); background:color-mix(in srgb, var(--surface) 86%, transparent);
    border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow);
    cursor:zoom-in; opacity:0; transform:translateY(-2px);
    transition:opacity .15s,transform .15s,color .15s,border-color .15s,background .15s;
  }
  .mermaid-wrap:hover .mermaid-zoom-btn,
  .mermaid-wrap:focus-within .mermaid-zoom-btn{ opacity:1; transform:translateY(0); }
  .mermaid-zoom-btn:hover,
  .mermaid-zoom-btn:focus-visible{ color:var(--fg); border-color:var(--line-strong); background:var(--surface); outline:none; }
  .mermaid-zoom-btn svg,
  .mermaid-lightbox-close svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  body.mermaid-lightbox-open{ overflow:hidden; }
  .mermaid-lightbox[hidden]{ display:none; }
  .mermaid-lightbox{
    position:fixed; inset:0; z-index:100;
    display:flex; align-items:center; justify-content:center; padding:3vh 3vw;
    background:rgba(0,0,0,.64);
  }
  .mermaid-lightbox-panel{
    position:relative; width:min(96vw,1400px); height:92vh;
    border:1px solid var(--line-strong); border-radius:12px; background:var(--surface);
    box-shadow:0 20px 70px rgba(0,0,0,.35); overflow:hidden;
  }
  .mermaid-lightbox-close{
    position:absolute; top:.75rem; right:.75rem; z-index:2;
    display:grid; place-items:center; width:36px; height:36px; padding:0;
    color:var(--fg-muted); background:var(--surface); border:1px solid var(--line);
    border-radius:8px; box-shadow:var(--shadow); cursor:pointer;
    transition:color .15s,border-color .15s,background .15s;
  }
  .mermaid-lightbox-close:hover,
  .mermaid-lightbox-close:focus-visible{ color:var(--fg); border-color:var(--line-strong); outline:none; }
  .mermaid-lightbox-body{
    width:100%; height:100%; overflow:auto; padding:3.5rem 2rem 2rem;
    background:var(--surface);
  }
  .mermaid-lightbox-body svg{
    display:block; width:auto!important; max-width:none!important; height:auto!important;
    min-width:min-content; margin:auto;
  }
  @media (max-width:640px){
    .mermaid-zoom-btn{ opacity:1; transform:none; width:30px; height:30px; }
    .mermaid-lightbox{ padding:0; }
    .mermaid-lightbox-panel{ width:100vw; height:100vh; border-radius:0; border:0; }
    .mermaid-lightbox-body{ padding:4rem 1rem 1rem; }
  }

  /* ---------- HOME PAGE ---------- */
  .hero-grid{}
  /* wiki sidebar entries */
  .wiki-sidebar-item{ display:block; padding:.5rem 0; border-bottom:1px solid var(--line); text-decoration:none; transition:.12s; }
  .wiki-sidebar-item:last-child{ border-bottom:none; }
  .wiki-sidebar-title{ display:block; font-size:13px; font-weight:500; color:var(--fg); line-height:1.4; transition:color .12s; }
  .wiki-sidebar-item:hover .wiki-sidebar-title{ color:var(--accent); }
  .wiki-sidebar-desc{ display:block; font-size:11.5px; color:var(--fg-faint); margin-top:.1rem; line-height:1.4; }
  /* columns shortcode */
  .book-columns{ display:flex; flex-wrap:wrap; gap:1.5rem; margin:1.2em 0; }
  .book-column{ flex:1 1 0; min-width:0; }

  /* steps shortcode */
  .book-steps ol{ counter-reset:steps; list-style:none; padding-inline-start:2.5rem; margin:1.2em 0; }
  .book-steps ol > li{ position:relative; border-inline-start:2px solid var(--line-strong); padding-inline-start:2rem; padding-bottom:1.8rem; }
  .book-steps ol > li:last-child{ border-inline-start-color:transparent; padding-bottom:0; }
  .book-steps ol > li::before{
    content:counter(steps); counter-increment:steps;
    position:absolute; left:-1.1rem; top:0;
    width:2rem; height:2rem; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:.8rem; font-weight:700; line-height:1;
    background:var(--accent); color:var(--accent-fg);
    outline:3px solid var(--bg);
  }

  /* button shortcode */
  a.book-btn{ display:inline-block; font-size:.85em; color:var(--accent); padding:.3em .9em; border:1px solid var(--accent); border-radius:6px; text-decoration:none; transition:background .15s,color .15s; }
  a.book-btn:hover{ background:var(--accent); color:var(--accent-fg); }

  /* tabs shortcode */
  .tabs-wrap{ display:flex; flex-wrap:wrap; border:1px solid var(--line); border-radius:8px; margin:1.4em 0; }
  .tabs-wrap .tabs-toggle{ display:none; }
  .tabs-wrap label{ display:inline-block; padding:.5em 1.1em; cursor:pointer; color:var(--fg-muted); font-size:.9em; border-bottom:2px solid transparent; }
  .tabs-wrap .tabs-toggle:checked + label{ border-bottom-color:var(--accent); color:var(--fg); font-weight:600; }
  .tabs-wrap .tabs-content{ order:999; width:100%; border-top:1px solid var(--line); padding:1em 1.2em; display:none; }
  .tabs-wrap .tabs-toggle:checked + label + .tabs-content{ display:block; }

  .sec-card{ display:flex; gap:.9rem; align-items:flex-start; padding:1.1rem; border:1px solid var(--line); border-radius:14px; background:var(--surface); text-decoration:none; transition:border-color .15s,transform .15s,box-shadow .15s; }
  .sec-card:hover{ border-color:var(--line-strong); transform:translateY(-2px); box-shadow:var(--shadow); }
  .sec-card .ic{ width:40px; height:40px; flex:none; border-radius:10px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }
  .sec-card .ic svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .sec-card h3{ font-size:15px; font-weight:700; color:var(--fg); }
  .sec-card p{ font-size:12.5px; color:var(--fg-muted); margin-top:.25rem; line-height:1.5; }
  .sec-card .arr{ margin-left:auto; color:var(--fg-faint); transition:transform .15s,color .15s; align-self:center; }
  .sec-card:hover .arr{ transform:translateX(3px); color:var(--accent); }
  .tl-item{ display:flex; gap:1rem; padding:.6rem 0; text-decoration:none; align-items:baseline; border-top:1px solid var(--line); }
  .tl-item:first-of-type{ border-top:none; }
  .tl-item time{ font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--fg-faint); flex:none; width:46px; padding-top:.1rem; }
  .tl-item .ttl{ font-size:15px; color:var(--fg); font-weight:500; line-height:1.45; transition:color .15s; text-wrap:pretty; }
  .tl-item:hover .ttl{ color:var(--accent); }
  .tl-item .tg{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--fg-faint); margin-left:.5rem; white-space:nowrap; }
  /* post entry list (home page 博文) */
  .post-entry{ display:flex; align-items:baseline; gap:1rem; padding:.5rem .6rem .5rem .85rem; text-decoration:none; border-left:2px solid transparent; margin-left:-2px; border-radius:0 8px 8px 0; transition:border-color .15s; }
  .post-entry:hover{ border-left-color:var(--accent); }
  .post-entry-title{ font-size:15px; color:var(--fg); font-weight:500; line-height:1.45; transition:color .15s; text-wrap:pretty; }
  .post-entry:hover .post-entry-title{ color:var(--accent); }
  .post-entry-date{ font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--fg-faint); flex:none; white-space:nowrap; }
  .side-card{ border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; }
  .side-h{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-faint); padding:.9rem 1rem .55rem; display:flex; align-items:center; gap:.5em; }
  .side-h .d{ width:6px; height:6px; border-radius:50%; background:var(--accent); }
  .cmt{ display:block; padding:.7rem 1rem; border-top:1px solid var(--line); text-decoration:none; transition:background .12s; }
  .cmt:hover{ background:var(--surface-2); }
  .cmt .who{ font-size:12.5px; color:var(--fg); font-weight:600; }
  .cmt .who span{ color:var(--fg-faint); font-weight:400; font-family:'JetBrains Mono',monospace; font-size:11px; }
  .cmt .txt{ font-size:12.5px; color:var(--fg-muted); margin-top:.2rem; line-height:1.5; }
  .cmt .on{ font-size:11.5px; color:var(--accent); margin-top:.25rem; }
  /* tag cloud pills */
  .tc-cloud{ display:flex; flex-wrap:wrap; gap:.45em .4em; }
  .tc{ font-family:'JetBrains Mono',monospace; border-radius:999px; text-decoration:none; transition:filter .15s, opacity .15s; white-space:nowrap; line-height:1; display:inline-flex; align-items:center; }
  .tc:hover{ filter:brightness(1.08); opacity:.88; }
  .tc-sm{ font-size:11.5px; padding:.28em .65em; }
  .tc-md{ font-size:13px;   font-weight:500; padding:.32em .75em; }
  .tc-lg{ font-size:15.5px; font-weight:700; padding:.36em .85em; letter-spacing:-.01em; }
  .tc-1,.tc-2,.tc-3,.tc-4,.tc-5{ background:var(--surface-2); color:var(--fg-muted); }
  .arch-link{ display:flex; align-items:center; justify-content:space-between; padding:.7rem 1rem; border-top:1px solid var(--line); color:var(--fg-muted); text-decoration:none; font-size:13.5px; transition:background .12s,color .12s; }
  .arch-link:hover{ background:var(--surface-2); color:var(--fg); }
  .arch-link .c{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--fg-faint); }

  /* ---------- BLOG LIST ---------- */
  #post-list .post-item{ border-top:1px solid var(--line); }
  #post-list .post-item:first-child{ border-top:none; }
  .tc-all{ background:var(--surface-2); color:var(--fg-muted); font-size:12px; padding:.28em .65em; }
  .tc-all.active{ background:var(--accent); color:var(--accent-fg); }
  .tag-btn{ cursor:pointer; border:none; }
  .tag-btn.active{ outline:2px solid currentColor; outline-offset:2px; }
  .page-btn{ min-width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:8px; font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--fg-muted); background:var(--surface); transition:.15s; cursor:pointer; }
  .page-btn:hover:not(:disabled):not(.active){ color:var(--fg); border-color:var(--line-strong); }
  .page-btn.active{ background:var(--accent); color:var(--accent-fg); border-color:var(--accent); }
  .page-btn:disabled{ opacity:.35; cursor:not-allowed; }
  .filter-label{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; color:var(--fg-faint); text-transform:uppercase; margin-bottom:.6rem; }
  @media (min-width:1024px){ #filter-box>div{ display:block !important; } }

  /* ---------- LIBRARY TREE ---------- */
  .tree{ font-size:13.5px; line-height:1.4; }
  .tree .children{ margin-left:.55em; padding-left:.7em; border-left:1px solid var(--line); }
  .tree summary.folder{ display:flex; align-items:center; gap:.35em; padding:.34em .5em; border-radius:7px; cursor:pointer; color:var(--fg-muted); list-style:none; user-select:none; transition:background .12s,color .12s; }
  .tree summary.folder::-webkit-details-marker{ display:none; }
  .tree summary.folder:hover{ color:var(--fg); background:var(--surface-2); }
  .tree .chev{ width:13px; height:13px; flex:none; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; transition:transform .15s; opacity:.7; }
  .tree details[open] > summary.folder > .chev{ transform:rotate(90deg); }
  .tree a.leaf{ display:flex; align-items:center; gap:.5em; padding:.34em .5em .34em calc(.85em + 13px); border-radius:7px; color:var(--fg-muted); text-decoration:none; transition:background .12s,color .12s; }
  .tree a.leaf:hover{ color:var(--fg); background:var(--surface-2); }
  .tree a.leaf.active{ color:var(--accent); background:var(--accent-soft); font-weight:500; }
  /* flat section: non-collapsible heading */
  .tree .node-flat{ margin-top:.5em; }
  .tree .folder-flat{ display:block; padding:.3em .5em; font-size:.72rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--fg-faint); }
  @media (max-width:1023px){ .tree-aside{ box-shadow:var(--shadow); } }
  /* library layout: fixed-height sub-scroll (desktop only) */
  @media (min-width:1024px){
    .lib-layout{ height:calc(100vh - 50px); overflow:hidden; }
    .lib-main{ overflow-y:auto; }
    #tree-aside{
      position:static!important;
      top:auto!important; bottom:auto!important; left:auto!important;
      height:100%;
      overflow-y:auto;
      z-index:auto;
      transition:width .2s ease,padding .2s ease,border .2s ease;
    }
    #tree-aside.tree-collapsed{ width:0!important;min-width:0;padding:0!important;overflow:hidden!important;border-width:0!important; }
  }

  /* ---------- WIDE DETAIL LAYOUT ---------- */
  /* Keep the current laptop layout; only give large desktop viewports more room. */
  @media (min-width:1536px){
    .wiki-detail-layout{
      width:100%;
      max-width:1720px;
      margin-inline:auto;
      grid-template-columns:minmax(0,1fr) minmax(0,900px) minmax(0,1fr)!important;
      column-gap:40px!important;
    }
    .wiki-detail-main{ max-width:900px!important; }

    .post-detail-layout{
      max-width:1720px!important;
      display:grid!important;
      grid-template-columns:minmax(0,1fr) minmax(0,900px) minmax(0,1fr);
      column-gap:40px;
    }
    .post-detail-main{
      grid-column:2;
      width:100%;
      max-width:900px!important;
      margin-inline:0!important;
    }
    .post-detail-toc{
      grid-column:3;
      width:280px!important;
    }

    .lib-detail-layout{ max-width:1720px!important; }
    .lib-detail-layout #tree-aside{ width:280px!important; }
    .lib-detail-main{ padding-inline:40px!important; }
    .lib-detail-content{
      max-width:900px!important;
      margin-inline:auto;
    }
    .lib-detail-toc{
      width:280px!important;
      padding-right:20px!important;
    }
  }

  /* ---------- LLM WIKI ---------- */
  .post-body a.wl{ position:relative; display:inline; color:var(--accent); border-bottom:1px solid var(--accent-soft); font-weight:500; padding-right:.55em; }
  .post-body a.wl::after{ content:"↗"; position:absolute; right:-.1em; top:-.3em; font-size:.5em; line-height:1; opacity:.75; }
  .post-body a.wl:hover{ border-bottom-color:var(--accent); background:var(--accent-soft); border-radius:3px; }
  .post-body a.wl.red{ color:var(--fg-faint); border-bottom-color:var(--line); }
  .post-body a.wl.red::after{ opacity:.25; }
  .wiki-card{ border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:var(--shadow); }
  .wiki-card+.wiki-card{ margin-top:14px; }
  .wiki-card-h{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-faint); padding:.85rem 1rem .5rem; display:flex; align-items:center; gap:.5em; }
  .wiki-card-h .ico{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.8; }
  .rel-pill{ display:flex; align-items:center; gap:.55em; padding:.5rem 1rem; border-top:1px solid var(--line); color:var(--fg-muted); text-decoration:none; font-size:13.5px; transition:background .12s,color .12s; }
  .rel-pill:hover{ background:var(--surface-2); color:var(--fg); }
  .rel-pill .node{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; opacity:.7; }
  .rel-pill .w{ margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--fg-faint); }
  .ai-row{ display:flex; align-items:center; gap:.6em; padding:.45rem 1rem; border-top:1px solid var(--line); font-size:13px; color:var(--fg-muted); }
  .ai-row .k{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--fg-faint); width:74px; flex:none; letter-spacing:.04em; }
  .badge-ok{ display:inline-flex; align-items:center; gap:.35em; font-family:'JetBrains Mono',monospace; font-size:11px; color:oklch(0.62 0.15 150); background:oklch(0.62 0.15 150 / .12); padding:.12em .5em; border-radius:5px; }
  :root[data-theme="dark"] .badge-ok{ color:oklch(0.78 0.15 150); }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .badge-ok{ color:oklch(0.78 0.15 150); } }
  .wiki-toc ul{ margin:0; padding:0; list-style:none; }
  .wiki-toc #TableOfContents>ul>li{ position:relative; margin:.08rem 0; }
  .wiki-toc #TableOfContents>ul>li>a{
    display:block; margin-left:1.15rem; padding:.3rem .48rem .3rem 1.7rem; border-left:2px solid var(--line);
    border-radius:0 6px 6px 0; color:var(--fg-muted); font-size:13px; font-weight:500;
    line-height:1.4; text-decoration:none; transition:background .15s,color .15s,border-color .15s;
  }
  .wiki-toc #TableOfContents>ul>li.current-section>a{ color:var(--fg); font-weight:600; }
  .wiki-toc #TableOfContents>ul>li>ul{ margin:.12rem 0 .3rem 2.15rem; }
  .wiki-toc #TableOfContents>ul>li>ul[hidden]{ display:none; }
  .wiki-toc #TableOfContents>ul>li>ul>li>a{
    display:block; padding:.25rem .5rem .25rem 1rem; border-left:2px solid var(--line);
    color:var(--fg-faint); font-size:12px; line-height:1.4; text-decoration:none;
    transition:background .15s,color .15s,border-color .15s;
  }
  .wiki-toc #TableOfContents>ul>li>ul>li>ul{ display:none; }
  .wiki-toc a:hover{ color:var(--fg)!important; background:var(--surface-2); }
  .wiki-toc a.active{ color:var(--accent)!important; border-left-color:var(--accent)!important; background:var(--accent-soft); }
  .wiki-toc-toggle{
    position:absolute; top:.31rem; left:1.45rem; z-index:1; display:grid; place-items:center; width:1rem; height:1rem;
    padding:0; border:0; border-radius:4px; color:var(--fg-faint); background:transparent; cursor:pointer;
  }
  .wiki-toc-toggle:hover{ color:var(--fg); background:var(--surface-2); }
  .wiki-toc-toggle svg{ width:10px; height:10px; fill:none; stroke:currentColor; stroke-width:1.7; transition:transform .15s; }
  .wiki-toc li.expanded>.wiki-toc-toggle svg{ transform:rotate(90deg); }
  /* ---------- ABOUT PAGE ---------- */
  .about-grid{}
  .stack-chip{ display:inline-flex; align-items:center; gap:.4em; padding:.4em .7em; border:1px solid var(--line); border-radius:8px; background:var(--surface); font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--fg-muted); white-space:nowrap; }
  .stack-chip .d{ width:6px; height:6px; border-radius:50%; flex:none; }
  .tline{ position:relative; padding-left:1.6rem; }
  .tline::before{ content:""; position:absolute; left:5px; top:.4rem; bottom:.4rem; width:1px; background:var(--line); }
  .tline .row{ position:relative; padding:.55rem 0; }
  .tline .row::before{ content:""; position:absolute; left:-1.6rem; top:.85rem; width:11px; height:11px; border-radius:50%; background:var(--bg); border:2px solid var(--line-strong); }
  .tline .row.on::before{ border-color:var(--accent); background:var(--accent-soft); }
  .tline .yr{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--accent); }
  .tline .ev{ font-size:14.5px; color:var(--fg); margin-top:.1rem; line-height:1.5; }
  .link-row{ display:flex; align-items:center; gap:.6em; padding:.65rem 1rem; border-top:1px solid var(--line); color:var(--fg-muted); text-decoration:none; font-size:13.5px; transition:background .12s,color .12s; }
  .link-row:hover{ background:var(--surface-2); color:var(--fg); }
  .link-row svg{ width:15px; height:15px; flex:none; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; opacity:.8; }
  .link-row .ext{ margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--fg-faint); }