*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0b0b0b;--surface:#141414;--s2:#1a1a1a;
  --b:#1e1e1e;--b2:#2a2a2a;--text:#e8e4dc;
  --muted:#525250;--accent:#c8b89a;--adim:#7a6a56;--danger:#c05050;
  --g:'EB Garamond',Georgia,serif;
  --mono:'Geist Mono','Courier New',monospace;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--g);font-size:21px;line-height:1.8;min-height:100vh;-webkit-font-smoothing:antialiased}
.wrap{max-width:780px;margin:0 auto;padding:0 48px}

.skip{position:absolute;left:-9999px;font-family:var(--mono);font-size:12px}
.skip:focus{left:16px;top:16px;background:var(--surface);color:var(--text);padding:8px 14px;border:1px solid var(--b2);border-radius:4px;z-index:300}

nav{padding:56px 0 0;display:flex;align-items:baseline;gap:32px}
.nav-name{font-family:var(--mono);font-size:13px;font-weight:300;color:var(--accent);letter-spacing:.08em;margin-right:auto;cursor:pointer;text-decoration:none}
.nav-links{display:flex;gap:28px;list-style:none;align-items:baseline}
.nav-links a{font-family:var(--mono);font-size:12px;font-weight:300;color:var(--muted);text-decoration:none;letter-spacing:.05em;transition:color .2s;cursor:pointer}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.divider{border:none;border-top:1px solid var(--b);margin:36px 0}

.page{display:none;padding-bottom:100px}
.page.active{display:block;animation:fi .25s ease}
@keyframes fi{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .page.active{animation:none}
  *{transition-duration:.01ms !important}
}

.greeting{font-size:16px;font-family:var(--mono);font-weight:300;color:var(--muted);letter-spacing:.04em;margin-bottom:32px}
.hbody{font-size:24px;line-height:1.75;margin-bottom:48px;max-width:600px}
.hbody em{color:var(--accent);font-style:italic}
.sig{font-family:var(--mono);font-size:14px;font-weight:300;color:var(--adim);margin-bottom:52px}
.slinks{list-style:none;display:flex;flex-direction:column;gap:12px}
.slinks li{font-family:var(--mono);font-size:13px;font-weight:300;color:var(--muted)}
.slinks li span{color:var(--adim);display:inline-block;width:76px}
.slinks a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--b2);transition:border-color .2s,color .2s;cursor:pointer}
.slinks a:hover{color:var(--accent);border-color:var(--adim)}

.atitle,.stitle{font-size:13px;font-family:var(--mono);font-weight:300;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:36px}
.abody p{font-size:22px;line-height:1.85;margin-bottom:28px}
.abody em{color:var(--accent);font-style:italic}
.abody h2{font-family:var(--g);font-size:26px;font-style:italic;font-weight:400;margin:44px 0 18px}
.abody ul{padding-left:26px;margin-bottom:28px}
.abody li{margin-bottom:8px;font-size:21px}
.abody a{color:var(--accent)}

/* tools */
.ptools{margin-bottom:28px;display:flex;flex-direction:column;gap:16px}
.psearch{background:var(--s2);border:1px solid var(--b2);border-radius:4px;color:var(--text);font-family:var(--mono);font-size:13px;font-weight:300;padding:10px 14px;width:100%;outline:none;transition:border-color .2s}
.psearch:focus{border-color:var(--adim)}
.psearch::placeholder{color:var(--muted)}
.tagbar{display:flex;flex-wrap:wrap;gap:8px}
.tagchip{font-family:var(--mono);font-size:11px;font-weight:300;color:var(--muted);background:none;border:1px solid var(--b2);border-radius:3px;padding:4px 11px;cursor:pointer;letter-spacing:.04em;transition:color .2s,border-color .2s}
.tagchip:hover{color:var(--text)}
.tagchip.on{color:var(--accent);border-color:var(--adim)}

.plist{display:flex;flex-direction:column}
.pitem{display:flex;align-items:baseline;justify-content:space-between;padding:20px 0;border-bottom:1px solid var(--b);gap:20px;cursor:pointer;transition:opacity .15s;text-decoration:none;color:inherit}
.pitem:first-child{border-top:1px solid var(--b)}
.pitem:hover{opacity:.65}
.pi-left{display:flex;flex-direction:column;gap:5px;min-width:0}
.ptitle{font-size:22px;color:var(--text);font-family:var(--g);font-style:italic}
.pexc{font-family:var(--mono);font-size:12px;font-weight:300;color:var(--muted);line-height:1.6}
.pdate{font-family:var(--mono);font-size:11px;font-weight:300;color:var(--muted);white-space:nowrap;flex-shrink:0}
.pempty{font-family:var(--mono);font-size:13px;font-weight:300;color:var(--muted);padding:28px 0;border-top:1px solid var(--b)}

.pback{font-family:var(--mono);font-size:12px;font-weight:300;color:var(--muted);letter-spacing:.04em;display:inline-flex;align-items:center;gap:6px;margin-bottom:48px;cursor:pointer;transition:color .2s;text-decoration:none}
.pback:hover{color:var(--text)}
.pfdate{font-family:var(--mono);font-size:12px;font-weight:300;color:var(--muted);margin-bottom:20px}
.pftitle{font-size:42px;font-family:var(--g);font-weight:700;line-height:1.15;margin-bottom:20px;letter-spacing:-.01em}
.ptags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:44px}
.ptag{font-family:var(--mono);font-size:11px;font-weight:300;color:var(--adim);border:1px solid var(--b2);border-radius:3px;padding:3px 10px;letter-spacing:.04em;text-decoration:none;transition:color .2s}
.ptag:hover{color:var(--accent)}

.toc{border-left:2px solid var(--b2);padding:4px 0 4px 20px;margin-bottom:44px}
.toc-label{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.toc ul{list-style:none}
.toc li{margin-bottom:6px}
.toc a{font-family:var(--mono);font-size:12px;font-weight:300;color:var(--muted);text-decoration:none;transition:color .2s}
.toc a:hover{color:var(--accent)}

.pfbody{font-size:21px;line-height:1.85;max-width:680px}
.pfbody p{margin-bottom:28px}
.pfbody em{color:var(--accent);font-style:italic}
.pfbody strong{color:#ede9e0;font-weight:500}
.pfbody h2{font-family:var(--g);font-size:28px;font-style:italic;font-weight:400;color:var(--text);margin:52px 0 20px;scroll-margin-top:24px}
.pfbody h3{font-family:var(--g);font-size:23px;font-style:italic;font-weight:400;color:var(--text);margin:38px 0 16px;scroll-margin-top:24px}
.pfbody ul,.pfbody ol{padding-left:28px;margin-bottom:28px}
.pfbody li{margin-bottom:8px}
.pfbody a{color:var(--accent)}
.pfbody blockquote{border-left:2px solid var(--adim);padding-left:22px;margin:0 0 28px;color:var(--muted);font-style:italic}
.pfbody blockquote p{margin-bottom:12px}
.pfbody table{width:100%;border-collapse:collapse;margin-bottom:32px;font-family:var(--mono);font-size:14px;font-weight:300}
.pfbody th,.pfbody td{border:1px solid var(--b2);padding:9px 13px;text-align:left}
.pfbody th{color:var(--accent);font-weight:400;background:var(--s2)}
.pfbody hr{border:none;border-top:1px solid var(--b);margin:40px 0}
.pfbody img{max-width:100%;border-radius:6px;margin:8px 0 28px;display:block}
.pfbody code:not(pre code){background:var(--s2);color:var(--accent);font-family:var(--mono);font-size:15px;padding:2px 7px;border-radius:3px}

.cbwrap{position:relative;margin-bottom:32px}
.cblang{position:absolute;top:9px;right:12px;font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.cbcopy{position:absolute;top:8px;right:64px;font-family:var(--mono);font-size:10px;color:var(--muted);background:none;border:1px solid var(--b2);border-radius:3px;padding:3px 9px;cursor:pointer;opacity:0;transition:opacity .2s,color .2s}
.cbwrap:hover .cbcopy{opacity:1}
.cbcopy:hover{color:var(--accent)}
.pfbody pre{background:#0d1117;border:1px solid var(--b2);border-radius:6px;padding:24px;overflow-x:auto;margin:0}
.pfbody pre code{font-family:var(--mono);font-size:13px;line-height:1.65;color:#e6edf3;background:none;padding:0}

.pnav{display:flex;justify-content:space-between;gap:24px;font-family:var(--mono);font-size:12px;font-weight:300}
.pnav a{color:var(--muted);text-decoration:none;transition:color .2s;max-width:46%}
.pnav a:hover{color:var(--accent)}

.prjlist{display:flex;flex-direction:column}
.prjitem{padding:28px 0;border-bottom:1px solid var(--b)}
.prjitem:first-child{border-top:1px solid var(--b)}
.prjname{font-size:20px;font-family:var(--g);font-style:italic;margin-bottom:8px}
.prjdesc{font-family:var(--mono);font-size:12px;font-weight:300;color:var(--muted);line-height:1.6}
.prjlinks{margin-top:12px;display:flex;gap:16px}
.prjlinks a{font-family:var(--mono);font-size:11px;font-weight:300;color:var(--adim);text-decoration:none;letter-spacing:.04em;transition:color .2s}
.prjlinks a:hover{color:var(--accent)}

.totop{position:fixed;bottom:28px;right:28px;width:38px;height:38px;background:var(--surface);border:1px solid var(--b2);border-radius:50%;color:var(--muted);font-family:var(--mono);font-size:14px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s,color .2s;z-index:50}
.totop.show{opacity:1;pointer-events:auto}
.totop:hover{color:var(--accent)}

.toast{position:fixed;bottom:28px;left:28px;background:var(--surface);border:1px solid var(--b2);border-radius:6px;padding:13px 22px;font-family:var(--mono);font-size:13px;color:var(--text);z-index:200;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;pointer-events:none}
.toast.show{opacity:1;transform:translateY(0)}

@media(max-width:600px){
  body{font-size:19px}
  .wrap{padding:0 24px}
  nav{padding-top:36px;gap:16px;flex-wrap:wrap}
  .nav-name{width:100%}
  .pftitle{font-size:32px}
  .hbody{font-size:21px}
  .pfbody{font-size:19px}
  .pitem{flex-direction:column;gap:8px}
  .totop{display:none}
  .toast{left:16px;right:16px;bottom:16px}
}