:root{
  --bg:#faf9f6; --ink:#1c1e21; --dim:#6a6d72; --grn:#2b8a3e; --border:#c9c6be;
  --panel:#ffffff; --code-bg:#f2f1ec; --dash:#b8b5ad;
}
[data-theme="dark"]{
  --bg:#131516; --ink:#d8d6d0; --dim:#8f8d87; --grn:#4cc38a; --border:#43464a;
  --panel:#191c1d; --code-bg:#1f2224; --dash:#4a4d50;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 "IBM Plex Sans",system-ui,sans-serif;
  transition:background .2s,color .2s;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
a{color:var(--ink); text-decoration-color:var(--dash); text-underline-offset:3px}
a:hover{color:var(--grn)}
.wrap{max-width:760px; margin:0 auto; padding:32px 20px 64px}

/* header */
.site-head{display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:36px}
.site-head .home{font-family:"IBM Plex Mono",monospace; font-size:14px; font-weight:500; text-decoration:none}
.site-nav{display:flex; align-items:baseline; gap:18px; font-family:"IBM Plex Mono",monospace; font-size:13px}
.site-nav a{text-decoration:none; color:var(--dim)}
.site-nav a:hover,.site-nav a.active{color:var(--grn)}
#theme-toggle{background:none; border:none; cursor:pointer; font-size:15px; color:var(--dim); padding:0; line-height:1}
#theme-toggle:hover{color:var(--grn)}

/* prompt headings */
.prompt{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--dim); margin:36px 0 14px}
.prompt .ps1{color:var(--grn)}

/* whoami card */
.whoami{border:1.5px solid var(--border); border-radius:8px; padding:22px 24px; background:var(--panel)}
.whoami h1{margin:6px 0 2px; font-size:26px; line-height:1.2}
.whoami .tag{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--dim)}
.whoami .bio{margin:12px 0 0; font-size:15px; color:var(--dim)}
.links{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.links a{
  font-family:"IBM Plex Mono",monospace; font-size:12.5px; text-decoration:none;
  border:1.5px solid var(--border); border-radius:99px; padding:4px 12px; color:var(--ink);
}
.links a:hover{border-color:var(--grn); color:var(--grn)}

/* project cards */
.proj-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:560px){.proj-grid{grid-template-columns:1fr}}
.proj{border:1.5px solid var(--border); border-radius:8px; padding:14px 16px; background:var(--panel)}
.proj .name{font-family:"IBM Plex Mono",monospace; font-size:14px; font-weight:500}
.proj p{margin:6px 0 10px; font-size:14px; color:var(--dim)}
.proj .plinks{display:flex; gap:14px; font-family:"IBM Plex Mono",monospace; font-size:12px}
.proj .plinks a{color:var(--grn); text-decoration:none}
.proj .plinks a:hover{text-decoration:underline}

/* post list */
.post-list{display:flex; flex-direction:column; gap:10px; margin:0; padding:0; list-style:none}
.post-list a{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  border:1.5px dashed var(--dash); border-radius:6px; padding:12px 16px; text-decoration:none;
}
.post-list a:hover{border-color:var(--grn); border-style:solid}
.post-list .t{font-size:15.5px; font-weight:500}
.post-list .d{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--dim); white-space:nowrap}

/* footer */
.site-foot{
  margin-top:56px; padding-top:16px; border-top:1.5px dashed var(--dash);
  font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--dim);
  display:flex; gap:16px; flex-wrap:wrap;
}
.site-foot a{color:var(--dim); text-decoration:none}
.site-foot a:hover{color:var(--grn)}

/* article */
.post-meta{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--dim); margin:4px 0 28px}
article h1{font-size:30px; line-height:1.25; margin:6px 0 0}
article h2{font-size:21px; margin:36px 0 10px}
article h3{font-size:17px; margin:28px 0 8px}
article p,article li{font-size:16px}
article img{max-width:100%; border-radius:6px}
article blockquote{margin:16px 0; padding:4px 18px; border-left:3px solid var(--grn); color:var(--dim)}
article code{font-family:"IBM Plex Mono",monospace; font-size:.86em; background:var(--code-bg); border-radius:4px; padding:2px 5px}
article pre{position:relative; background:var(--code-bg); border:1.5px solid var(--border); border-radius:8px; padding:14px 16px; overflow-x:auto; font-size:13.5px; line-height:1.55}
.copy-btn{
  position:absolute; top:8px; right:8px; font-size:10.5px; cursor:pointer;
  background:var(--bg); color:var(--dim); border:1.5px solid var(--border); border-radius:5px; padding:3px 9px;
  opacity:0; transition:opacity .15s;
}
article pre:hover .copy-btn{opacity:1}
.copy-btn:hover{color:var(--grn); border-color:var(--grn)}

/* reading progress — sticky pv-style bar */
.read-progress{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:10px;
  background:var(--bg); padding:8px 0 10px; margin-bottom:6px;
}
.rp-track{flex:1; height:6px; border:1.5px solid var(--border); border-radius:99px; overflow:hidden}
.rp-fill{height:100%; width:0; background:var(--grn); transition:width .1s linear}
.rp-pct{font-size:10.5px; color:var(--dim); min-width:34px; text-align:right}

/* post series box */
.series-box{border:1.5px dashed var(--dash); border-radius:8px; padding:14px 18px; margin:20px 0}
.series-box .series-head{font-size:12px; color:var(--dim); margin-bottom:8px}
.series-box .series-head .ps1{color:var(--grn)}
.series-box ol{margin:0; padding-left:22px; font-size:14px}
.series-box li{margin:4px 0}
.series-box .cur{font-weight:600; color:var(--grn)}
article pre code{background:none; padding:0; font-size:inherit}
article table{border-collapse:collapse; width:100%; margin:16px 0; font-size:14px; display:block; overflow-x:auto}
article th,article td{border:1px solid var(--border); padding:7px 10px; text-align:left; vertical-align:top}
article th{font-family:"IBM Plex Mono",monospace; font-size:12.5px; background:var(--code-bg); white-space:nowrap}
/* long unbroken commands otherwise force wide tables to scroll sideways */
article table code{word-break:break-word}
article hr{border:none; border-top:1.5px dashed var(--dash); margin:32px 0}
.post-nav{display:flex; justify-content:space-between; gap:16px; margin-top:48px; padding-top:16px; border-top:1.5px dashed var(--dash); font-family:"IBM Plex Mono",monospace; font-size:13px}
.post-nav a{text-decoration:none; color:var(--dim)}
.post-nav a:hover{color:var(--grn)}

/* pubs */
.pub-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.pub-list li{font-size:14.5px}
.pub-list .y{font-family:"IBM Plex Mono",monospace; color:var(--dim); font-size:13px}
.pub-list .v{color:var(--dim)}
.pub-list a{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--grn); text-decoration:none}
.pub-list a:hover{text-decoration:underline}

/* tags */
.post-meta .tags{display:inline-flex; flex-wrap:wrap; gap:8px}
.post-meta .tags a{color:var(--grn); text-decoration:none}
.post-meta .tags a:hover{text-decoration:underline}
.tag-cloud{display:flex; flex-wrap:wrap; gap:10px}
.tag-cloud a{
  font-family:"IBM Plex Mono",monospace; font-size:13px; text-decoration:none;
  border:1.5px solid var(--border); border-radius:99px; padding:4px 12px;
}
.tag-cloud a span{color:var(--dim); font-size:11px}
.tag-cloud a:hover{border-color:var(--grn); color:var(--grn)}

/* grep search input */
.grep-q{
  background:none; border:none; border-bottom:1.5px dashed var(--dash);
  color:var(--grn); font-size:13px; width:160px; padding:0 2px; outline:none;
}
.grep-q:focus{border-bottom-color:var(--grn)}

/* giscus */
#giscus-thread{margin-top:8px; min-height:0}

/* banner image */
article .banner{width:100%; border-radius:8px; border:1.5px solid var(--border); margin-bottom:18px}

/* table of contents — floats in the right margin on wide screens */
.toc{display:none}
@media (min-width:1280px){
  .toc{
    display:block; position:fixed; top:120px; left:calc(50% + 410px); width:220px;
    font-size:12.5px; line-height:1.5;
  }
  .toc .toc-head{font-size:12px; color:var(--dim); margin-bottom:8px}
  .toc nav>ul{border-left:1.5px dashed var(--dash); padding-left:14px}
  .toc ul{list-style:none; margin:0; padding-left:0}
  .toc ul ul{padding-left:14px}
  .toc li{margin:5px 0}
  .toc a{color:var(--dim); text-decoration:none}
  .toc a:hover{color:var(--grn)}
}