:root{--ink:#111;--ink-2:#333;--ink-3:#555;--ink-4:#777;--ink-5:#888;--ink-6:#999;--rule:#e5e5e3;--surface-2:#f4f4f2;--paper:#fff;--accent:oklch(0.55 0.13 80)}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:13px/1.6 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,'Noto Sans CJK SC','PingFang SC',monospace}
a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:3px}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 48px;border-bottom:1px solid var(--rule);font-size:12px}
.topbar .root{font-weight:600}.topbar nav a{color:var(--ink-3);margin-left:24px}.topbar nav a.on{color:var(--ink);font-weight:600}
main{max-width:1100px;margin:0 auto}
.grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;padding:24px 48px;border-top:1px solid var(--rule)}
.grid:first-of-type{border-top:0;padding-top:56px}
.mk-col{font-size:12px;color:var(--accent);padding-top:6px}
.body-col{max-width:720px;min-width:0}
body.wide .body-col.resume{max-width:760px}
h1.page{font-size:28px;line-height:1.25;font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
.subtitle{font-size:18px;line-height:1.4;font-style:italic;color:#4d4d4d;margin-bottom:16px}
.soon{color:var(--ink-4);font-size:13px}
h1{font-size:24px;line-height:1.3;font-weight:600;margin-bottom:10px}
.lede{color:var(--ink-2);font-size:14px;line-height:1.6;max-width:64ch}
.socials{font-size:12px;color:var(--ink-3);margin-top:12px}.socials a{margin-right:20px}
table.projects{width:100%;border-collapse:collapse;font-size:13px}
.projects th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-4);text-align:left;border-bottom:1px solid var(--ink);padding:0 0 6px}
.projects td{padding:12px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.projects td:nth-child(1){width:150px}.projects td:nth-child(3){width:180px}.projects td:nth-child(4){width:50px}.projects td:nth-child(5){width:70px}
.projects .name{font-weight:600}.desc{color:var(--ink-2)}.meta{color:var(--ink-4);font-size:12px}
.launch{color:var(--accent)}
.wrow{display:grid;grid-template-columns:100px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:13px}
.more{margin-top:14px;font-size:12px;color:var(--ink-4)}.more a{color:inherit}
.rrow{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:14px 0;border-top:1px solid var(--rule)}
.rrow:first-child{border-top:0;padding-top:0}.rrow p{color:var(--ink-3);font-size:12px;margin-top:4px}
footer.site{display:flex;justify-content:space-between;padding:16px 48px;border-top:1px solid var(--rule);font-size:11px;color:var(--ink-5);margin-top:40px}
.chips{margin-top:16px}.chip{font:11px/1.6 inherit;font-family:inherit;padding:2px 8px;border-radius:3px;border:1px solid #ddd;background:none;color:var(--ink-3);cursor:pointer;margin-right:6px}
.chip.on{border-color:var(--ink);color:var(--ink)}
section.plain{padding:0 48px 8px;max-width:1100px}
.prow{display:grid;grid-template-columns:300px 1fr;gap:28px;padding:28px 0;border-top:1px solid var(--rule)}
.prow:last-child{border-bottom:1px solid var(--rule)}
.pinfo{display:flex;flex-direction:column;gap:10px}.ptitle{display:flex;justify-content:space-between;gap:16px}
.ptitle a{font-size:15px;font-weight:600}.pinfo p{color:var(--ink-2);font-size:13px}.stack{font-size:11px;color:var(--ink-4)}
.plinks{font-size:12px}.plinks a{margin-right:20px}
.ph{display:block;width:100%;aspect-ratio:16/10;border:1px solid var(--rule);background:repeating-linear-gradient(135deg,#f6f6f4 0 10px,#eeeeec 10px 20px)}
.shot .ph{aspect-ratio:16/10}
.crumb{color:var(--ink-4);font-size:12px}.crumb .on{color:var(--accent)}
.metastrip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;font-size:12px;padding:14px 0;margin:20px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.metastrip .lbl{display:block;font-size:11px;color:var(--ink-4);text-transform:uppercase;letter-spacing:.06em}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ink-6);margin-right:6px;vertical-align:baseline}
.dot.run{background:var(--accent)}
.btnrow{margin:20px 0}.btn{display:inline-block;font-size:12px;font-weight:600;border-radius:3px;padding:9px 16px;margin-right:10px}
.btn.primary{background:var(--ink);color:#fff}.btn.secondary{border:1px solid #ddd}
.btn.outline{border:1px solid var(--ink);padding:8px 14px}
.hero{margin:8px 0 24px}.hero .ph{aspect-ratio:16/9}
article{font-size:14px;line-height:1.75;color:var(--ink-2)}
article h2{font-size:18px;line-height:1.3;color:var(--ink);margin:36px 0 12px}article h2:first-child{margin-top:16px}
.mk{color:var(--accent)}
article p{margin:0 0 16px}
article pre{background:var(--surface-2);border:1px solid var(--rule);padding:16px 20px;border-radius:3px;font-size:12px;line-height:1.6;overflow:auto;margin:0 0 16px}
article code{background:var(--surface-2);padding:1px 5px;border-radius:3px;font-size:12px}article pre code{background:none;padding:0}
article blockquote{padding:4px 0 4px 20px;border-left:2px solid var(--accent);color:#444;margin:0 0 16px}
article ul,article ol{padding-left:24px;margin:0 0 16px}article li{margin-bottom:8px}article strong{font-weight:600}
.ygroup{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;padding:24px 48px;border-top:1px solid var(--rule)}
.postrow{display:grid;grid-template-columns:90px 1fr 150px;gap:20px;padding:16px 0;border-top:1px solid var(--rule);align-items:baseline}
.postrow .pt{display:flex;flex-direction:column;gap:2px}.postrow strong{font-size:14px;font-weight:600}
.sum{color:var(--ink-3);font-size:12px}.postrow .tags{text-align:right;font-size:11px;color:var(--ink-6)}
.mk-col.stick{position:sticky;top:24px}
.toclbl{font-size:11px;color:var(--ink-6);margin-top:20px}
.tocnav{display:flex;flex-direction:column;gap:6px}.tocnav a{font-size:12px;color:var(--ink-4)}.tocnav a.on{color:var(--ink)}
article.post{max-width:680px}article.post .meta{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--rule)}
.postnav{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--rule);margin-top:32px;padding-top:16px;font-size:12px;color:var(--ink-4)}
.rhead{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:24px}
.erow{display:grid;grid-template-columns:120px 1fr;gap:20px;margin-bottom:28px}
.erow ul{padding-left:18px;margin-top:8px}.erow li{color:var(--ink-2);margin-bottom:4px;font-size:13px}
.eh{display:flex;justify-content:space-between;gap:16px;font-size:15px}
.skgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.skgrid p{font-size:13px}.skgrid .lbl{font-size:11px;color:var(--ink-4);margin-bottom:6px}
.crow{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:10px 0;border-top:1px solid var(--rule)}
.ahead{display:grid;grid-template-columns:1fr 220px;gap:40px}.ahead p{color:var(--ink-2);font-size:14px;line-height:1.7;margin-bottom:14px}
.portrait .ph{aspect-ratio:4/5}
.hlgrid{display:grid;grid-template-columns:110px 1fr;gap:10px 20px;font-size:13px}
section.grid a:not(.launch):not(.btn){border-bottom:0}
@media (max-width:800px){
.topbar,footer.site{padding-left:20px;padding-right:20px}
.grid,.ygroup{grid-template-columns:1fr;padding:20px}section.grid:first-of-type{padding-top:32px}
.projects td:nth-child(1){width:auto}.projects table,.projects thead{display:none}
.projects tbody td{display:block;border:0;padding:2px 0}.projects tr{display:block;padding:12px 0;border-bottom:1px solid var(--rule)}
.prow{grid-template-columns:1fr}.mk-col.stick{position:static}.tocnav{display:none}
.ahead{grid-template-columns:1fr}.ahead .portrait{order:-1}.erow,.crow,.rrow,.postrow{grid-template-columns:1fr}.skgrid{grid-template-columns:1fr}
.postrow .tags{text-align:left}
}