@charset "UTF-8";
:root{--bg:#fafafa;--fg:#202020;--muted:#777;--faint:#aaa;--line:#e1e1e1;--hover:#f1f1f1;color-scheme:light;font-family:Arial,Helvetica,"PingFang SC","Microsoft YaHei",sans-serif;font-synthesis:none;--mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace}
:root[data-theme=dark]{--bg:#141413;--fg:#eee;--muted:#96958d;--faint:#64645f;--line:#2d2d2a;--hover:#1c1c1a;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--bg);color:var(--fg);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input{font:inherit;color:inherit}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible{outline:1px solid var(--fg);outline-offset:5px}::selection{background:var(--fg);color:var(--bg)}button,a{-webkit-tap-highlight-color:transparent}
#header{position:sticky;top:0;z-index:20;background:var(--bg);padding:28px 40px;display:flex;align-items:center;justify-content:space-between;gap:28px;max-width:1800px;margin:auto;font:12px var(--mono);letter-spacing:.035em}.top-nav{display:flex;gap:28px}.top-nav a{color:var(--muted)}.top-nav a:hover,.top-nav a[aria-current]{color:var(--fg)}.preferences{display:flex;align-items:center;gap:18px}.theme{border:0;background:none;font-size:22px;width:26px;height:30px;padding:0;line-height:1}
#main{max-width:1800px;margin:auto;padding:76px 40px 0;min-height:calc(100vh - 190px)}.layout{display:grid;grid-template-columns:minmax(230px,29%) minmax(0,1fr);gap:55px;align-items:start}.sidebar{position:sticky;top:110px;max-width:340px}.site-name{display:block;font-family:var(--mono);font-weight:400;font-size:32px;line-height:1.35;letter-spacing:-1px;margin:0 0 15px;overflow-wrap:anywhere}.sidebar p{font-size:18px;line-height:1.55;color:var(--muted);max-width:290px;margin:0}.sidebar-intro{padding-bottom:40px}.tree{padding-top:0;font:12px/1.8 var(--mono)}.tree-label{color:var(--muted);letter-spacing:.07em;margin-bottom:12px}.tree a{display:flex;gap:10px;color:var(--muted);padding:2px 0;line-height:1.65;max-width:310px}.tree a span{color:var(--faint)}.tree a:hover,.tree a[aria-current]{color:var(--fg)}.tree a:hover span,.tree a[aria-current] span{color:var(--fg)}.scroll-status{margin-top:34px;color:var(--muted);font:11px var(--mono);letter-spacing:.035em}.scroll-line{display:flex;gap:12px;align-items:center}.scroll-track{height:12px;max-width:230px;flex:1;background-image:radial-gradient(var(--faint) .65px,transparent .8px);background-size:3px 3px;position:relative}.scroll-track span{position:absolute;inset:0 auto 0 0;width:0;background-image:radial-gradient(var(--fg) .8px,transparent .9px);background-size:3px 3px}.scroll-hint{display:block;margin-top:16px}
.content-panel{min-width:0}.page-heading{margin:0 0 54px;max-width:760px}.page-heading h1{font-size:44px;line-height:1.2;font-weight:400;letter-spacing:-1.5px;margin:0 0 18px}.page-heading p{font-size:16px;line-height:1.7;color:var(--muted);margin:0;max-width:560px}.list-tools{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:0 0 17px;gap:20px}.filters{display:flex;gap:22px;flex-wrap:wrap}.filters button{font:11px var(--mono);color:var(--muted);padding:0;background:none;border:0;white-space:nowrap}.filters button[aria-pressed=true],.filters button:hover{color:var(--fg)}.search{display:flex;align-items:center;font:11px var(--mono);color:var(--muted);gap:8px;min-width:0}.search input{background:none;border:0;width:78px;min-width:0;padding:0;font:11px var(--mono)}.search input:focus{width:120px}.search input::placeholder{color:var(--muted);opacity:1}.post-row{display:grid;grid-template-columns:24% minmax(0,1fr) 25px;gap:20px;align-items:start;padding:24px 0;color:var(--muted)}.post-row:hover{color:var(--fg)}.row-date{font:12px/25.2px var(--mono);color:var(--faint)}.row-copy h2{font-size:18px;font-weight:400;line-height:1.4;letter-spacing:-.15px;margin:0}.row-meta{font:11px var(--mono);color:var(--muted);margin-top:8px}.row-meta span{color:var(--faint)}.row-arrow{font:16px/25.2px var(--mono);color:var(--faint);justify-self:end}.post-row:hover .row-arrow{color:var(--fg)}.featured{padding:25px 0 30px;color:var(--fg)}.featured-label{color:var(--fg)!important}.pixel-wave{display:block;font:20px/1 var(--mono);letter-spacing:1px;color:var(--fg);white-space:nowrap;width:80px}.list-end{display:flex;justify-content:space-between;gap:20px;color:var(--faint);font:11px var(--mono);padding:25px 0}.empty{color:var(--muted);font-size:15px;padding:35px 0}
.reading{max-width:680px}.prose{font-size:17px;line-height:1.85;min-width:0}.prose p{margin:0 0 27px}.prose h2{font-size:30px;font-weight:400;letter-spacing:-.7px;line-height:1.3;margin:0 0 26px}.prose h3{font-size:22px;font-weight:400;letter-spacing:-.3px;line-height:1.4;margin:44px 0 20px}.prose h4,.prose h5,.prose h6{font-size:18px;font-weight:400}.prose em{font-size:12px;color:var(--muted)}.prose ul{padding-left:21px;margin-bottom:28px}.prose a{text-decoration:underline;text-underline-offset:4px}.prose blockquote{margin:35px 0;border-left:1px solid var(--muted);padding:4px 0 4px 25px;color:var(--muted)}.prose code{font-family:var(--mono);font-size:.8em}.prose pre{padding:20px;overflow:auto;background:var(--hover)}.article-meta{display:flex;gap:24px;font:11px var(--mono);color:var(--muted);margin-bottom:40px}.about-section{padding-top:0}.about-section+.about-section{margin-top:90px}.post-end{margin-top:70px;max-width:680px;border-top:1px solid var(--line);padding:23px 0;display:flex;justify-content:space-between;font:12px var(--mono);color:var(--muted)}#footer{max-width:1800px;margin:100px auto 0;padding:24px 40px 28px;display:flex;gap:25px;justify-content:space-between;border-top:1px solid var(--line);color:var(--muted);font:11px var(--mono)}.skip{position:fixed;top:-100px;left:12px;z-index:10;background:var(--fg);color:var(--bg);padding:10px}.skip:focus{top:12px}
@media(min-width:1500px){.layout{gap:85px}.sidebar{max-width:360px}.post-row{grid-template-columns:25% minmax(0,1fr) 25px}}
@media(max-width:1100px){#header{padding:25px 28px}#main{padding:60px 28px 0}.layout{grid-template-columns:230px minmax(0,1fr);gap:35px}.site-name{display:block;font-size:27px}.sidebar p{font-size:16px}.filters{gap:13px}.list-tools{align-items:flex-start;flex-wrap:wrap}.search{margin-left:auto}.post-row{grid-template-columns:160px minmax(0,1fr) 16px;gap:14px}#footer{padding:24px 28px}}
@media(max-width:700px){html{scroll-padding-top:120px}#header{padding:23px 20px;gap:20px;flex-wrap:wrap}.top-nav{gap:22px;font-size:11px}.preferences{gap:14px}.theme{font-size:20px}#main{padding:40px 20px 0}.layout{grid-template-columns:1fr;gap:42px}.sidebar{position:static;max-width:none}.sidebar-intro{padding-bottom:28px}.site-name{display:block;font-size:30px}.sidebar p{max-width:350px;font-size:16px}.tree{padding-top:18px}.tree a{max-width:none}.scroll-status{margin-top:22px}.scroll-track{max-width:none}.scroll-hint{display:none}.filters{gap:15px}.filters button{font-size:10px}.list-tools{gap:15px;padding-bottom:17px}.post-row{grid-template-columns:140px minmax(0,1fr) 12px;gap:14px;padding:23px 0}.row-date{font-size:11px;line-height:22.4px}.row-arrow{line-height:22.4px}.page-heading{margin-bottom:38px}.page-heading h1{font-size:36px}.page-heading p{font-size:15px}.row-copy h2{font-size:16px}.row-meta{font-size:10px}.featured{padding:23px 0 27px}.pixel-wave{font-size:17px}.prose{font-size:16px}.prose h2{font-size:27px}.about-section+.about-section{margin-top:60px}#footer{margin-top:70px;padding:24px 20px;flex-wrap:wrap}#footer span:nth-child(2){order:3;width:100%}#footer span:last-child{margin-left:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body[data-page="post"] .prose h2{font-size:24px;margin:44px 0 20px}

/* Categories lead the article hierarchy; whitespace separates each group. */
#writing{position:relative}
body[data-page="home"] .list-tools{position:absolute;right:0;top:9px;border:0;padding:0}
.writing-group+.writing-group{margin-top:48px}
.group-title{font-size:26px;font-weight:400;line-height:1.3;letter-spacing:-.5px;margin:0 0 12px}
.writing-group:first-child .group-title{padding-right:160px}

.writing-group .post-row{padding:18px 0}
body[data-page="home"] .list-end{margin-top:38px}
@media(max-width:700px){.group-title{font-size:24px}.writing-group+.writing-group{margin-top:36px}.writing-group:first-child .group-title{padding-right:120px}body[data-page="home"] .list-tools{top:8px}}

/* Quiet, consistent reading typography. */
.prose{font-size:16px;line-height:1.75}
.prose p{margin:0 0 22px}
.prose h2,body[data-page="post"] .prose h2{font-size:22px;line-height:1.4;font-weight:400;letter-spacing:0;margin:38px 0 16px}
.prose h3,.prose h4,.prose h5,.prose h6{font-size:18px;line-height:1.5;font-weight:400;letter-spacing:0;margin:32px 0 14px}
.prose>:first-child{margin-top:0}
.prose em{font-size:inherit;color:inherit}
.prose strong{font-weight:600}
.prose ul{padding-left:20px;margin:0 0 22px}
.prose li{padding-left:2px;margin:4px 0}
.prose blockquote{font-size:inherit;border:0;margin:26px 0;padding:0 0 0 20px;color:var(--muted)}
.prose pre{background:none;padding:16px 0;margin:24px 0;font-size:14px;line-height:1.65}
.row-copy h2{color:var(--fg)}
.row-meta{margin-top:7px;color:var(--muted)}


/* Fine rules frame each category list and separate its articles. */
.writing-group .post-row+.post-row{border-top:1px solid var(--line)}
.inline-markdown{display:block;width:100%;min-height:120px;margin:0;padding:0;border:0!important;outline:0!important;box-shadow:none;background:transparent;color:var(--fg);font:inherit;line-height:inherit;resize:none;overflow:hidden;border-radius:0}
.prose:focus-visible{outline:0}
.inline-error{font-size:12px;color:var(--muted);margin-top:12px}

/* Shared typography aligns the wordmark and category headings. */
:root{--heading-size:32px}
.site-name,.group-title,.page-heading h1{font-family:var(--mono);font-size:var(--heading-size);font-weight:400;line-height:1.35;letter-spacing:-1px}
.article-meta{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.article-dates{white-space:nowrap}
.post-row{position:relative;transition:opacity .25s}
.post-row::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:color-mix(in srgb,var(--fg) 9%,var(--bg));opacity:0}
@media(hover:hover){#post-list:has(.post-row:hover) .post-row:not(:hover){opacity:.35}.post-row:hover::before{opacity:1}}
#post-list:has(.post-row:focus-visible) .post-row:not(:focus-visible){opacity:.35}
.post-row:focus-visible::before,.post-row:active::before{opacity:1}
.tree a{transition:color .15s,transform .25s}
.tree a:hover{transform:translateX(3px)}
@media(max-width:1100px){:root{--heading-size:27px}}
@media(max-width:700px){:root{--heading-size:30px}}
@media(prefers-reduced-motion:reduce){.post-row,.tree a{transition:none}}

.article-image{margin:30px 0;width:100%}
.article-image img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.article-image figcaption{font:12px/1.6 var(--mono);color:var(--muted);margin-top:10px}

.writing-group .group-title+.post-row{border-top:1px solid var(--line)}
.writing-group .post-row:last-child{border-bottom:1px solid var(--line)}

:root{--prose-leading:1.6;--prose-tracking:0em;--topbar-height:86px}
html{scroll-padding-top:calc(var(--topbar-height) + 24px)}
.sidebar{top:calc(var(--topbar-height) + 24px)}
.prose{line-height:var(--prose-leading);letter-spacing:var(--prose-tracking)}
.prose :is(h2,h3,h4,h5,h6){letter-spacing:inherit}
#header{flex-wrap:wrap}
.type-toggle{font:11px var(--mono);border:0;background:none;color:var(--muted);padding:5px 0}
.type-toggle[aria-expanded="true"]{color:var(--fg)}
.type-panel{flex-basis:100%;display:flex;justify-content:flex-end;align-items:center;gap:28px;padding:16px 0 4px;font:11px var(--mono);color:var(--muted)}
.type-panel[hidden],.type-toggle[hidden]{display:none}
.type-panel label{display:flex;align-items:center;gap:12px;white-space:nowrap}
.type-panel input{width:120px;accent-color:var(--fg)}
.type-panel output{min-width:48px;font:11px var(--mono)}
.type-actions{display:flex;align-items:center;gap:18px}
.type-actions button{font:11px var(--mono);border:0;background:none;color:var(--fg);padding:4px 0;white-space:nowrap}
#type-save{text-decoration:underline;text-underline-offset:4px}
#type-status{font:11px var(--mono)}
@media(max-width:1100px){.type-panel{flex-wrap:wrap;gap:18px}.type-caption{display:none}}
@media(max-width:700px){.type-panel{display:grid;grid-template-columns:1fr;gap:14px;justify-items:end}.type-panel[hidden]{display:none}.type-panel label{width:100%}.type-panel input{flex:1}.type-actions{justify-content:flex-end;width:100%}.type-toggle{font-size:10px}}

/* The editor works on the same Markdown files that generate the public site. */
.admin-toggle{border:0;background:none;padding:5px 0;color:var(--muted);font:11px var(--mono)}
.admin-toggle:hover{color:var(--fg)}
#admin-status{font:11px var(--mono);color:var(--muted);max-width:240px}
.about-title{font-size:24px;font-weight:400;margin:0 0 24px}
dialog{color:var(--fg);background:var(--bg);border:1px solid var(--line);padding:28px;max-height:92dvh}
dialog::backdrop{background:rgb(0 0 0 / .45)}
dialog h2{font-size:20px;font-weight:400;margin:0 0 16px}
dialog button{background:none;border:1px solid var(--line);padding:8px 14px;color:var(--fg);font:12px var(--mono)}
dialog button:disabled{opacity:.4;cursor:default}
.login-dialog{width:min(420px,calc(100vw - 32px))}
.login-dialog p,.login-dialog label{font-size:14px;color:var(--muted)}
.login-dialog input{display:block;width:100%;margin-top:8px;padding:10px;background:var(--bg);border:0}
.dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}
.login-error{min-height:22px}
.markdown-workspace{width:calc(100vw - 48px);height:calc(100dvh - 48px);max-width:1600px;padding:22px;overflow:hidden}
.workspace-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}
.workspace-heading h2{margin:0}
.workspace-toolbar{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--line)}
.workspace-layout{display:grid;grid-template-columns:240px minmax(0,1fr);height:calc(100% - 155px);min-height:0}
#workspace-tree{overflow:auto;padding:20px 18px 20px 0;border-right:1px solid var(--line);font:12px/1.8 var(--mono)}
#workspace-tree button{display:block;text-align:left;border:0;padding:5px 4px;overflow-wrap:anywhere;width:100%;color:var(--muted);line-height:1.6}
#workspace-tree button:hover,#workspace-tree button[aria-current=true]{color:var(--fg);background:var(--hover)}
#workspace-tree summary{display:flex;align-items:center;cursor:pointer}
#workspace-tree summary::before{content:'▾';font-size:10px;margin-right:4px}
#workspace-tree details:not([open])>summary::before{content:'▸'}
#workspace-tree details{margin-left:12px}
#workspace-tree .file-entry{padding-left:12px}
.workspace-writing{min-width:0;display:flex;flex-direction:column;padding-left:22px;min-height:0}
.workspace-file{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:16px 0;flex-shrink:0}
#workspace-path{font:12px/1.6 var(--mono);overflow-wrap:anywhere}
.workspace-panes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;min-height:0;flex:1}
.source-pane,.preview-pane{display:flex;flex-direction:column;min-height:0;min-width:0;font:11px var(--mono);color:var(--muted)}
#workspace-editor{flex:1;min-height:0;width:100%;resize:none;border:0;background:none;color:var(--fg);font:14px/1.8 var(--mono);padding:14px 0;margin-top:12px}
#workspace-preview{overflow:auto;flex:1;min-height:0;margin-top:12px;border-top:1px solid var(--line);padding-top:14px;font-family:Arial,Helvetica,"PingFang SC",sans-serif;color:var(--fg);overflow-wrap:anywhere}
#workspace-status{font:12px/1.5 var(--mono);color:var(--muted);margin:16px 0 0;min-height:18px}
@media(max-width:900px){.workspace-layout{grid-template-columns:180px minmax(0,1fr)}.workspace-panes{grid-template-columns:1fr}.preview-pane{display:none}#admin-status{display:none}}
@media(max-width:700px){.markdown-workspace{width:calc(100vw - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px);padding:16px}.workspace-layout{grid-template-columns:130px minmax(0,1fr);height:calc(100% - 195px)}.workspace-writing{padding-left:12px}.workspace-toolbar{gap:6px}.workspace-toolbar button{padding:6px 8px;font-size:10px}.workspace-file{align-items:flex-start}#workspace-tree{padding-right:8px}.preferences{flex-wrap:wrap;gap:14px}}
#workspace-mode{display:none}
.workspace-file code{margin-right:auto}
.prose ol{padding-left:24px;margin:0 0 22px}
@media(max-width:900px){#workspace-mode{display:block}.markdown-workspace[data-view=preview] .source-pane{display:none}.markdown-workspace[data-view=preview] .preview-pane{display:flex}}
.tree-rename{display:block;width:100%;min-width:0;border:0;background:var(--bg);color:var(--fg);font:12px/1.6 var(--mono);padding:5px 4px;border-radius:0}
#workspace-tree button[draggable=true]{cursor:grab}

/* Editor-only file actions stay beside the filesystem instead of in a toolbar. */
.workspace-hint{font:11px/1.5 var(--mono);color:var(--muted);margin:6px 0 0}
.workspace-layout{height:calc(100% - 112px)}
.tree-root{display:flex;align-items:center;gap:6px}
#workspace-tree .tree-more{width:28px;flex-shrink:0;font-size:16px;padding:0;text-align:center}
.tree-context-menu{position:fixed;z-index:100;min-width:160px;padding:5px;background:var(--bg);border:1px solid var(--line);box-shadow:0 8px 32px rgb(0 0 0 / .15)}
.tree-context-menu button{display:block;width:100%;padding:9px 14px;border:0;text-align:left;font:12px var(--mono)}
.tree-context-menu button:hover,.tree-context-menu button:focus-visible{background:var(--hover);outline:0}
.tree-context-menu button:disabled{opacity:.35}

/* Saved variables are shared by the homepage, articles, About and editor preview. */
.prose{font-family:var(--prose-font,Arial,Helvetica,"PingFang SC",sans-serif);font-size:var(--prose-size,16px);font-weight:var(--prose-weight,400);line-height:var(--prose-leading,1.6);letter-spacing:var(--prose-tracking,0em)}
.prose p,.prose ul,.prose ol{margin-bottom:var(--prose-paragraph,22px)}
.prose h2,body[data-page="post"] .prose h2{font-size:var(--prose-heading,22px);margin-top:var(--prose-heading-gap,38px);margin-bottom:calc(var(--prose-heading-gap,38px) * .42)}
.prose h3,.prose h4,.prose h5,.prose h6{font-size:calc(var(--prose-heading,22px) * .82);margin-top:calc(var(--prose-heading-gap,38px) * .84);margin-bottom:calc(var(--prose-heading-gap,38px) * .37)}
.prose>:first-child{margin-top:0}
.reading,.post-end,.page-heading{max-width:var(--reading-width,680px)}
.row-copy h2{font-family:var(--prose-font,Arial,Helvetica,sans-serif);font-size:calc(var(--prose-size,16px) + 2px);font-weight:var(--prose-weight,400);letter-spacing:var(--prose-tracking,0em)}
.about-title{font-size:var(--prose-heading,22px)}

.type-panel{position:fixed;top:calc(var(--topbar-height) + 8px);right:28px;width:340px;max-height:calc(100dvh - var(--topbar-height) - 28px);overflow:auto;display:block;padding:20px;border:1px solid var(--line);background:var(--bg);box-shadow:0 8px 32px rgb(0 0 0 / .08);z-index:25}
.type-panel[hidden]{display:none}
.type-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;color:var(--fg)}
.type-heading button{background:none;border:0;color:var(--muted);font-size:20px;padding:0}
.type-panel .type-font{display:flex;justify-content:space-between;margin-bottom:20px}
.type-panel select{background:var(--bg);color:var(--fg);border:1px solid var(--line);font:12px var(--mono);padding:6px;width:110px}
.type-control{margin-bottom:18px}
.type-control label{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px}
.type-control label span{font-size:10px;color:var(--faint)}
.type-control>div{display:grid;grid-template-columns:minmax(0,1fr) 74px;align-items:center;gap:14px}
.type-panel input[type=range]{width:100%;margin:0}
.type-panel input[type=number]{width:74px;min-width:0;padding:5px 6px;background:var(--bg);border:0;color:var(--fg);font:12px var(--mono)}
.type-panel input:invalid{color:#a55}
.type-actions{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:14px}
.type-actions button{font-size:11px;white-space:normal}
#type-status{font:11px/1.7 var(--mono);margin:12px 0 0}
@media(max-width:700px){.workspace-layout{height:calc(100% - 112px)}.type-panel{right:16px;width:min(340px,calc(100vw - 32px));max-height:65dvh}.type-control label{width:auto}.type-control input[type=range]{flex:initial}.type-panel .type-actions{width:auto}}
.type-panel{display:flex;flex-direction:column;overflow:hidden}
.type-fields{overflow:auto;min-height:0;flex:1;padding-right:4px}
.type-heading,.type-actions,#type-status{flex-shrink:0}
.type-actions{margin-top:12px}
#type-status{white-space:normal}
.type-panel{align-items:stretch;justify-content:flex-start;gap:0;flex-wrap:nowrap}
.type-fields,.type-heading,.type-actions{width:100%}

/* Text editing stays visually part of the page, including while focused. */
input:not([type=range]),textarea,input:not([type=range]):focus,textarea:focus{outline:0;box-shadow:none}
.inline-markdown{display:block;width:100%;padding:0;margin:0;border:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;resize:none;overflow:hidden}