:root{--bg:#fff;--bg-subtle:#f8fafc;--bg-section:#f1f5f9;--surface:#fff;--text:#0f172a;--text-2:#334155;--muted:#64748b;--muted-2:#94a3b8;--border:#e2e8f0;--border-strong:#cbd5e1;--brand:#4f46e5;--brand-hover:#4338ca;--brand-soft:#eef2ff;--brand-line:#c7d2fe;--green:#059669;--green-soft:#ecfdf5;--amber:#d97706;--amber-soft:#fffbeb;--code-bg:#f1f5f9;--max:1280px;--prose:760px;--radius:12px;--radius-sm:8px;--shadow-sm:0 1px 2px #0f172a0a, 0 1px 3px #0f172a0f;--shadow-md:0 4px 6px -1px #0f172a0f, 0 2px 4px -2px #0f172a0d;--shadow-lg:0 12px 24px -8px #0f172a1f, 0 4px 8px -4px #0f172a0f}*{box-sizing:border-box}html{scroll-behavior:smooth}body,#root{min-height:100vh;margin:0}body{color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;font-size:16px;line-height:1.6}a{color:var(--brand);text-decoration:none;transition:color .15s}a:hover{color:var(--brand-hover)}h1,h2,h3,h4{color:var(--text);letter-spacing:-.01em;font-weight:700;line-height:1.25}p{color:var(--text-2)}::selection{background:var(--brand-soft);color:var(--brand-hover)}:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}.container{max-width:var(--max);min-width:0;margin:0 auto;padding:0 24px}.page{padding:56px 0 72px}.site{flex-direction:column;min-height:100vh;display:flex}main.main{flex:1}.topbar{z-index:30;-webkit-backdrop-filter:saturate(180%)blur(14px);border-bottom:1px solid var(--border);background:#ffffffd1;position:sticky;top:0}.nav{justify-content:space-between;align-items:center;gap:16px;min-height:64px;display:flex}.brand{color:var(--text);letter-spacing:-.01em;align-items:center;gap:10px;font-size:16px;font-weight:700;display:inline-flex}.brand:hover{color:var(--text)}.brand-mark{background:var(--brand);color:#fff;border-radius:8px;place-items:center;width:30px;height:30px;font-size:12px;font-weight:800;display:inline-grid}.menu{align-items:center;gap:4px;display:flex}.menu a{color:var(--muted);border-radius:var(--radius-sm);padding:7px 12px;font-size:14px;font-weight:500;transition:background .15s,color .15s}.menu a:hover{color:var(--text);background:var(--bg-subtle);text-decoration:none}.menu a[aria-current=page]{color:var(--brand);background:var(--brand-soft)}.nav-actions{align-items:center;gap:4px;display:flex}.icon-link{border-radius:var(--radius-sm);width:36px;height:36px;color:var(--muted);place-items:center;transition:background .15s,color .15s;display:inline-grid}.icon-link:hover{color:var(--text);background:var(--bg-subtle)}.section-head{margin-bottom:28px}.section-head h2{margin:0 0 8px;font-size:24px}.section-head p{color:var(--muted);max-width:60ch;margin:0}.section-head .more{align-items:center;gap:4px;margin-top:12px;font-size:14px;font-weight:600;display:inline-flex}.stack-vertical>*+*{margin-top:40px}.eyebrow{color:var(--brand);background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:999px;align-items:center;gap:6px;padding:5px 12px;font-size:13px;font-weight:600;display:inline-flex}.btn{border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;border:1px solid #0000;justify-content:center;align-items:center;gap:6px;padding:10px 18px;font-size:14px;font-weight:600;line-height:1;transition:all .15s;display:inline-flex}.btn.primary{background:var(--brand);color:#fff;box-shadow:var(--shadow-sm)}.btn.primary:hover{background:var(--brand-hover);color:#fff;box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn.ghost{background:var(--surface);color:var(--text);border-color:var(--border-strong)}.btn.ghost:hover{background:var(--bg-subtle);color:var(--text)}.btn.sm{padding:7px 12px;font-size:13px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:24px;transition:border-color .18s,box-shadow .18s,transform .18s}.card.hover:hover{border-color:var(--border-strong);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.grid{gap:24px;min-width:0;display:grid}.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}@media (width>=640px){.grid.cols-2,.grid.cols-3{grid-template-columns:repeat(2,1fr)}}@media (width>=1040px){.grid.cols-3{grid-template-columns:repeat(3,1fr)}}.hero-split{grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr);align-items:center;gap:40px;display:grid}.hero h1{letter-spacing:-.02em;max-width:16ch;margin:18px 0;font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.15}.hero .lead{color:var(--muted);max-width:54ch;margin:0 0 28px;font-size:18px;line-height:1.7}.hero-actions{flex-wrap:wrap;gap:12px;margin-bottom:24px;display:flex}.hero-tags{flex-wrap:wrap;gap:8px;display:flex}.tag{color:var(--muted);background:var(--bg-section);border:1px solid var(--border);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:500}.hero-card{background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:24px}.hero-card .label{text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);margin-bottom:8px;font-size:12px;font-weight:600}.hero-card h3{margin:0 0 8px;font-size:17px}.hero-card p{color:var(--muted);margin:0;font-size:14px}.hero-stats{border-top:1px solid var(--border);grid-template-columns:repeat(3,1fr);gap:4px;margin-top:18px;padding-top:18px;display:grid}.hero-stats .stat strong{color:var(--text);font-size:22px;font-weight:700;display:block}.hero-stats .stat span{color:var(--muted);font-size:12px}.project-card{flex-direction:column;height:100%;display:flex}.project-top{justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;display:flex}.lang{color:var(--muted);align-items:center;gap:6px;font-size:13px;display:inline-flex}.lang .dot{border-radius:50%;flex:none;width:10px;height:10px}.stars{color:var(--muted);align-items:center;gap:4px;font-size:13px;display:inline-flex}.project-card h3{margin:0 0 4px;font-size:17px}.project-card .tagline{color:var(--muted);margin:0 0 10px;font-size:14px}.project-card .desc{color:var(--text-2);flex:1;margin:0 0 14px;font-size:14px;line-height:1.6}.project-tags{flex-wrap:wrap;gap:6px;margin-bottom:14px;display:flex}.project-footer{border-top:1px solid var(--border);justify-content:space-between;align-items:center;gap:8px;padding-top:14px;display:flex}.status{color:var(--green);background:var(--green-soft);border-radius:999px;align-items:center;gap:6px;padding:4px 10px;font-size:12px;font-weight:500;display:inline-flex}.status.wip{color:var(--amber);background:var(--amber-soft)}.status .pulse{background:currentColor;border-radius:50%;width:6px;height:6px}.repo-link{color:var(--muted);align-items:center;gap:6px;font-size:13px;font-weight:600;display:inline-flex}.repo-link:hover{color:var(--brand)}.service-card{flex-direction:column;height:100%;display:flex}.service-card.highlight{border-color:var(--brand-line);box-shadow:0 8px 24px -12px #4f46e559}.service-icon{background:var(--brand-soft);width:44px;height:44px;color:var(--brand);border-radius:12px;place-items:center;margin-bottom:16px;display:inline-grid}.service-card h3{margin:0 0 8px;font-size:18px}.service-card .summary{color:var(--muted);margin:0 0 16px;font-size:14px}.feature-list{flex:1;gap:8px;margin:0 0 18px;padding:0;list-style:none;display:grid}.feature-list li{color:var(--text-2);align-items:flex-start;gap:8px;font-size:14px;line-height:1.5;display:flex}.feature-list li:before{content:"✓";color:var(--green);flex:none;margin-top:1px;font-weight:700}.post-list{gap:16px;display:grid}@media (width>=880px){.post-list{grid-template-columns:1fr 1fr;align-items:start;gap:20px}}.post-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px;transition:border-color .18s,box-shadow .18s,transform .18s;display:block}.post-item:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);text-decoration:none;transform:translateY(-2px)}.post-item .date{color:var(--muted-2);margin-bottom:8px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:13px}.post-item h3{color:var(--text);margin:0 0 8px;font-size:18px}.post-item:hover h3{color:var(--brand)}.post-item .excerpt{color:var(--muted);margin:0;font-size:14px;line-height:1.6}.archive-layout{grid-template-columns:200px minmax(0,1fr);align-items:start;gap:48px;display:grid}@media (width<=900px){.archive-layout{grid-template-columns:1fr;gap:24px}}.archive-toc{padding-right:8px;position:sticky;top:88px}.archive-toc .toc-label{text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2);margin-bottom:12px;padding-left:12px;font-size:12px;font-weight:700}.archive-toc .toc-nav{border-left:1px solid var(--border);gap:2px;display:grid}.archive-toc .toc-link{color:var(--muted);border-radius:0 6px 6px 0;justify-content:space-between;align-items:center;padding:7px 12px;font-size:14px;transition:color .15s,background .15s;display:flex}.archive-toc .toc-link:hover{color:var(--brand);background:var(--brand-soft);text-decoration:none}.archive-toc .toc-count{color:var(--muted-2);background:var(--bg-section);border-radius:999px;padding:1px 8px;font-size:12px}@media (width<=900px){.archive-toc{position:static}.archive-toc .toc-nav{border-left:0;flex-flow:wrap;gap:8px;display:flex}.archive-toc .toc-link{border:1px solid var(--border);border-radius:999px}}.archive-group{scroll-margin-top:88px}.archive-group+.archive-group{margin-top:48px}.archive-cat{color:var(--text);border-bottom:1px solid var(--border);margin:0 0 18px;padding-bottom:10px;font-size:16px}.archive-posts{gap:14px;grid-template-columns:1fr!important}.article-layout{gap:0;display:grid}.article-layout.has-toc{grid-template-columns:200px minmax(0,720px);justify-content:center;align-items:start;gap:48px}@media (width<=1024px){.article-layout.has-toc{grid-template-columns:1fr;gap:0}}.toc{max-height:calc(100vh - 110px);padding-right:8px;position:sticky;top:88px;overflow-y:auto}.toc .back-link{margin-bottom:20px}.toc-label{text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2);margin-bottom:12px;padding-left:12px;font-size:12px;font-weight:700}.toc-nav{border-left:1px solid var(--border);gap:2px;display:grid}.toc-link{color:var(--muted);border-radius:0 6px 6px 0;padding:5px 12px;font-size:13px;line-height:1.5;transition:color .15s,background .15s;display:block}.toc-link:hover{color:var(--brand);background:var(--brand-soft);text-decoration:none}.toc-d3{color:var(--muted-2);padding-left:24px;font-size:12.5px}@media (width<=1024px){.toc{max-height:none;margin-bottom:24px;position:static}}.article{max-width:var(--prose);margin:0 auto}.article-layout.has-toc .article{max-width:none}.article-head{border-bottom:1px solid var(--border);margin-bottom:32px;padding-bottom:24px}.article-head .date{color:var(--muted);margin-bottom:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:13px}.article-head h1{margin:0;font-size:clamp(1.8rem,3vw,2.4rem)}.back-link{color:var(--muted);align-items:center;gap:4px;margin-bottom:24px;font-size:14px;font-weight:500;display:inline-flex}.back-link:hover{color:var(--brand)}.prose{color:var(--text-2);font-size:16px;line-height:1.75}.prose :where(h1,h2,h3,h4){color:var(--text);margin-top:1.8em;margin-bottom:.6em;line-height:1.3}.prose h1{font-size:1.6em}.prose h2{border-bottom:1px solid var(--border);padding-bottom:.3em;font-size:1.35em}.prose h3{font-size:1.15em}.prose :where(p,ul,ol,blockquote){margin:0 0 1em}.prose ul,.prose ol{padding-left:1.4em}.prose li{margin-bottom:.4em}.prose a{color:var(--brand);text-underline-offset:2px;text-decoration:underline 1px}.prose code{background:var(--code-bg);color:var(--text);border-radius:5px;padding:.15em .4em;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.88em}.prose pre{border-radius:var(--radius-sm);background:#0f172a;border:1px solid #1e293b;margin:0 0 1.2em;padding:16px 18px;overflow:auto}.prose pre code{color:#e2e8f0;background:0 0;padding:0;font-size:.86em;line-height:1.6}.prose blockquote{border-left:3px solid var(--brand-line);background:var(--brand-soft);color:var(--text-2);border-radius:0 6px 6px 0;padding:4px 16px}.prose table{border-collapse:collapse;width:100%;margin:0 0 1.2em;font-size:.92em}.prose th,.prose td{border:1px solid var(--border);text-align:left;padding:8px 12px}.prose th{background:var(--bg-subtle);color:var(--text);font-weight:600}.prose img{border-radius:var(--radius-sm);max-width:100%}.prose hr{border:0;border-top:1px solid var(--border);margin:2em 0}.comments{max-width:var(--prose);border-top:1px solid var(--border);margin:56px auto 0;padding-top:32px}.comments h2{margin:0 0 20px;font-size:18px}.comment-list{gap:14px;margin-bottom:24px;display:grid}.comment-empty{color:var(--muted);margin:0;font-size:14px}.comment-item{background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px}.comment-head{align-items:baseline;gap:10px;margin-bottom:6px;display:flex}.comment-head strong{color:var(--text);font-size:14px}.comment-time{color:var(--muted-2);font-size:12px}.comment-body{color:var(--text-2);white-space:pre-wrap;word-break:break-word;font-size:14px;line-height:1.6}.comment-form{gap:10px;display:grid}.comment-input,.comment-textarea{width:100%;color:var(--text);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:10px 12px;font-family:inherit;font-size:14px;transition:border-color .15s,box-shadow .15s}.comment-input:focus,.comment-textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);outline:none}.comment-textarea{resize:vertical;line-height:1.6}.comment-form-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.comment-hint{color:var(--muted-2);font-size:12px}.write-form{gap:16px;max-width:880px;display:grid}.field{gap:6px;display:grid}.field>span{color:var(--text-2);font-size:13px;font-weight:600}.field input,.field textarea{width:100%;color:var(--text);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:10px 12px;font-family:inherit;font-size:14px;transition:border-color .15s,box-shadow .15s}.field textarea{resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.6}.field input:focus,.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);outline:none}.write-actions{justify-content:space-between;align-items:center;gap:12px;display:flex}.write-hint{color:var(--green);font-size:13px}.status-bar{color:var(--muted);align-items:center;gap:8px;font-size:14px;display:inline-flex}.status-bar .pulse{background:var(--green);border-radius:50%;width:8px;height:8px;animation:2s infinite pulse;box-shadow:0 0 #05966966}@keyframes pulse{0%{box-shadow:0 0 #05966966}70%{box-shadow:0 0 0 8px #05966900}to{box-shadow:0 0 #05966900}}.empty{text-align:center}.empty h1{margin-bottom:12px;font-size:2rem}.empty p{color:var(--muted);margin-bottom:24px}.footer{border-top:1px solid var(--border);background:var(--bg-subtle);margin-top:auto}.footer-inner{min-height:72px;color:var(--muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;font-size:14px;display:flex}.footer-brand{color:var(--text-2);align-items:center;gap:8px;font-weight:600;display:inline-flex}.footer-links{align-items:center;gap:16px;display:flex}.footer-links a{color:var(--muted)}.footer-links a:hover{color:var(--brand)}@media (width<=860px){.hero-split{grid-template-columns:1fr;gap:28px}.page{padding:44px 0 56px}}@media (width<=600px){.container{padding:0 18px}.nav{flex-wrap:wrap;gap:10px;min-height:auto;padding:12px 0}.menu{order:3;width:100%;padding-bottom:2px;overflow-x:auto}.nav-actions{margin-left:auto}.menu a{padding:6px 10px}.hero h1{max-width:none}.footer-inner{flex-direction:column;align-items:flex-start;gap:12px;padding:18px 0}}