:root { --ink:#20231f; --paper:#f6f4ed; --yellow:#e7e85d; --green:#a8c6a4; --coral:#d9826a; --line:rgba(32,35,31,.22); --mono:"DM Mono", monospace; --serif:"Noto Serif SC", serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--serif); }
a { color:inherit; text-decoration:none; }
.section-shell { width:min(1180px, calc(100% - 64px)); margin-inline:auto; }
.site-header { height:82px; width:min(1280px, calc(100% - 64px)); margin:auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:11px; font-weight:700; font-size:15px; letter-spacing:.02em; }
.brand-mark { display:grid; place-items:center; width:35px; height:35px; background:var(--ink); color:var(--paper); font:500 12px var(--mono); letter-spacing:-.1em; }
.main-nav { display:flex; gap:30px; font:13px var(--mono); }
.main-nav a { position:relative; padding:8px 0; }
.main-nav a::after { content:""; position:absolute; bottom:2px; left:0; width:0; height:1px; background:var(--ink); transition:width .25s; }
.main-nav a:hover::after,.main-nav .is-active::after { width:100%; }
.menu-button { display:none; border:0; background:transparent; padding:8px; }
.menu-button span { display:block; width:21px; height:1px; background:var(--ink); margin:5px; }
.intro { min-height:625px; padding:91px 0 65px; display:flex; flex-direction:column; justify-content:space-between; }
.eyebrow { margin:0; color:#64675d; font:11px/1.4 var(--mono); letter-spacing:.075em; }
.intro-content { display:grid; grid-template-columns:1.2fr .8fr; align-items:end; gap:40px; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:0; font:700 clamp(56px,8vw,106px)/1.04 "Playfair Display",var(--serif); letter-spacing:-.065em; }
h1 span { color:var(--coral); font-family:var(--serif); letter-spacing:-.12em; }
.intro-copy { max-width:365px; margin:0 0 10px; font-size:16px; line-height:2; }
.scroll-cue { display:flex; align-items:center; gap:12px; width:max-content; font:11px var(--mono); }
.scroll-line { width:42px; height:1px; background:var(--ink); }
.featured { padding:91px 0 110px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:25px; }
.text-link { font:12px var(--mono); border-bottom:1px solid var(--ink); padding-bottom:5px; }
.text-link span { margin-left:5px; font-size:15px; }
.featured-card { min-height:380px; display:grid; grid-template-columns:1fr 1fr; background:#d2ded0; }
.featured-art { padding:42px; position:relative; overflow:hidden; display:grid; place-items:center; }
.featured-art::before,.featured-art::after { content:""; position:absolute; border:1px solid rgba(32,35,31,.2); border-radius:50%; }
.featured-art::before { width:410px; height:410px; }
.featured-art::after { width:570px; height:570px; }
.code-window { position:relative; z-index:1; width:min(100%,395px); padding:21px 23px 24px; background:#252b27; box-shadow:14px 14px 0 rgba(32,35,31,.12); color:#e9eadb; font:14px/2.1 var(--mono); transform:rotate(-3deg); }
.window-dots { display:flex; gap:6px; margin-bottom:18px; }.window-dots i{width:7px;height:7px;border-radius:50%;background:#d9826a}.window-dots i:nth-child(2){background:#e7e85d}.window-dots i:nth-child(3){background:#a8c6a4}.code-window p{margin:0}.code-window em{color:#a8c6a4;font-style:normal}.code-window strong{color:#e7e85d;font-weight:400}.code-window b{color:#d9826a;float:right;font-size:25px}
.featured-body { display:flex; flex-direction:column; align-items:flex-start; padding:52px clamp(30px,5vw,72px); background:#f0a991; }
.meta { display:flex; gap:20px; font:11px var(--mono); }.meta span { padding:3px 7px; background:var(--yellow); }.meta time{padding-top:3px}.featured-body h2,.channel-heading h2,.post-section h2,.newsletter h2 { font:600 clamp(30px,3vw,45px)/1.3 var(--serif); letter-spacing:-.08em; }
.featured-body h2 { margin:37px 0 18px; }.featured-body>p{font-size:15px;line-height:1.9;max-width:405px}.round-link { width:48px;height:48px;display:grid;place-items:center;margin-top:auto;border:1px solid var(--ink);border-radius:50%;font:24px var(--mono);transition:.2s; }.round-link:hover { background:var(--ink);color:var(--paper); }
.channels { padding:100px 0; }.channel-heading { align-items:end; }.channel-heading h2,.post-section h2 { margin:10px 0 0; }.channel-heading>p { width:320px; margin:0; font-size:14px; line-height:1.9; }.channel-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:36px; }
.channel-card { min-height:385px; padding:32px; display:flex; flex-direction:column; position:relative; overflow:hidden; transition:transform .25s; }.channel-card:hover { transform:translateY(-5px); }.tech-card{background:var(--green)}.channel-grid-single{grid-template-columns:minmax(0,1fr);max-width:620px}.card-number{font:12px var(--mono)}.channel-icon{font:500 47px/1 var(--mono);margin:auto 0 27px;}.channel-card h3{font-size:30px;margin:8px 0 13px;letter-spacing:-.08em}.channel-card div:last-of-type p:last-child{max-width:300px;font-size:14px;line-height:1.8;margin:0}.card-arrow{position:absolute;right:31px;bottom:27px;font:25px var(--mono)}
.post-section { padding:95px 0 110px; }.post-list { border-top:1px solid var(--ink); }.post-item { min-height:130px; display:grid; grid-template-columns:48px 120px 1fr 35px; align-items:center; border-bottom:1px solid var(--line); gap:10px; }.post-item>p,.post-item time { margin:0;font:11px var(--mono); }.post-item h3{margin:0 0 9px;font-size:19px;letter-spacing:-.05em}.post-item div p{margin:0;color:#5e6258;font-size:13px}.post-item>a{font:21px var(--mono);}
.newsletter { background:var(--ink); color:var(--paper); padding:79px clamp(25px,6vw,88px); display:grid; grid-template-columns:1fr 1fr; gap:40px; }.newsletter .eyebrow{color:#b6bbb0}.newsletter h2{margin:16px 0 0}.subscribe-form{align-self:end}.subscribe-form input{width:100%;border:0;border-bottom:1px solid #b6bbb0;padding:12px 0;background:transparent;color:white;font:15px var(--serif);outline:none}.subscribe-form input::placeholder{color:#b6bbb0}.subscribe-form button{margin-top:22px;padding:0;border:0;background:transparent;color:var(--yellow);font:13px var(--mono);cursor:pointer}.subscribe-form button span{font-size:18px;margin-left:5px}.form-message{height:18px;margin:15px 0 0;color:var(--green);font-size:12px}
.site-footer{min-height:135px;display:flex;align-items:center;justify-content:space-between;font:11px var(--mono)}.site-footer p{margin:0;color:#686b62}.site-footer>a:last-child{border-bottom:1px solid var(--ink);padding-bottom:3px}
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.article-shell { width:min(960px, calc(100% - 64px)); margin:0 auto; }.article-nav{gap:24px}.back-link{display:inline-block;margin-top:56px;font:12px var(--mono);border-bottom:1px solid var(--ink);padding-bottom:4px}.article-hero{padding:62px 0 75px;border-bottom:1px solid var(--ink)}.article-hero h1{margin:21px 0 27px;font-size:clamp(45px,6vw,76px);letter-spacing:-.08em}.article-lead{max-width:600px;font-size:18px;line-height:2}.article-meta{display:flex;gap:11px;margin-top:36px;color:#666a60;font:11px var(--mono)}.prose{width:min(700px,100%);margin:70px auto 110px;font-size:16px;line-height:2}.prose h2{margin:75px 0 26px;font-size:32px;letter-spacing:-.07em}.prose h2:first-child{margin-top:0}.prose h3{margin:42px 0 18px;font-size:23px;letter-spacing:-.05em}.prose h4{margin:30px 0 13px;font-size:17px}.prose p{margin-bottom:19px}.prose a{color:#c45e47;border-bottom:1px solid currentColor}.prose code{padding:2px 5px;background:#e9e6dc;font:13px var(--mono);word-break:break-word}.prose pre{overflow:auto;margin:22px 0 29px;padding:22px 24px;background:#252b27;color:#eef0e9;line-height:1.75}.prose pre code{padding:0;background:transparent;color:inherit;font-size:12px;white-space:pre}.prose li{margin-bottom:8px}.prose strong{font-weight:700}.article-image-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0 27px}.prose figure{margin:0}.prose img{display:block;width:100%;border:1px solid var(--line)}.wide-figure{margin:23px 0 31px!important}.prose figcaption{margin-top:10px;color:#65685f;font-size:12px}.article-note{margin-top:40px;padding:30px 32px;background:var(--yellow)}.article-note p:last-child{margin:12px 0 0;font-size:15px;line-height:1.9}
.markdown-document{margin-top:52px}.markdown-document h1{margin:0 0 60px;padding-bottom:50px;border-bottom:1px solid var(--ink);font:700 clamp(44px,6vw,76px)/1.15 "Playfair Display",var(--serif);letter-spacing:-.075em}.markdown-document h1+h2{margin-top:0}.markdown-document img{margin:19px 0 9px}.markdown-error{padding:25px;background:#f0a991}
.markdown-document{width:min(760px,100%);margin:46px auto 120px;padding:68px clamp(28px,7vw,74px);background:#fbfaf6;border:1px solid rgba(32,35,31,.12);box-shadow:12px 14px 0 rgba(32,35,31,.06);font-size:17px;line-height:2.05}.markdown-article-header{margin-bottom:68px}.article-kicker{display:flex;align-items:center;gap:13px;margin:0 0 22px;color:#676b61;font:11px var(--mono);letter-spacing:.08em}.article-kicker span{padding:4px 8px;background:var(--yellow);color:var(--ink)}.markdown-document h1{margin:0;padding:0;border:0;font:600 clamp(42px,6vw,66px)/1.22 var(--serif);letter-spacing:-.1em}.markdown-document h2{position:relative;margin:76px 0 24px;padding-top:18px;border-top:1px solid var(--line);font-size:30px;line-height:1.4}.markdown-document h3{margin:46px 0 16px;font-size:22px;line-height:1.5}.markdown-document h4{margin:32px 0 12px;color:#555a50;font:500 13px var(--mono);letter-spacing:.07em}.markdown-document p{margin:0 0 25px}.markdown-document ul,.markdown-document ol{margin:0 0 27px;padding-left:1.45em}.markdown-document li{padding-left:.25em;margin-bottom:10px}.markdown-document li::marker{color:var(--coral);font-family:var(--mono)}.markdown-document pre{margin:25px -14px 34px;padding:23px 26px;border-left:4px solid var(--yellow);border-radius:2px;box-shadow:7px 7px 0 rgba(32,35,31,.08)}.markdown-document code{font-size:.82em}.markdown-document pre code{font-size:12px}.markdown-document .markdown-image{margin:35px -22px 42px;padding:10px;background:#ede9de;border:1px solid var(--line);box-shadow:8px 9px 0 rgba(32,35,31,.08)}.markdown-document .markdown-image img{display:block;margin:0;width:100%;border:0}.markdown-document a{font-weight:600;text-underline-offset:4px}.markdown-document strong{font-weight:700}.markdown-document blockquote{margin:30px 0;padding:16px 22px;border-left:3px solid var(--coral);background:#f5e5db;color:#41453d}.markdown-document hr{border:0;border-top:1px solid var(--line);margin:46px 0}
@media (max-width:700px){.section-shell,.site-header{width:calc(100% - 36px)}.site-header{height:68px}.main-nav{display:none;position:absolute;top:68px;left:18px;right:18px;padding:18px;background:var(--paper);border:1px solid var(--line);z-index:5;flex-direction:column;gap:6px}.main-nav.is-open{display:flex}.menu-button{display:block}.intro{min-height:560px;padding:63px 0 48px}.intro-content{display:block}.intro-copy{margin-top:35px;font-size:14px}.featured{padding:65px 0}.featured-card,.newsletter{grid-template-columns:1fr}.featured-art{min-height:285px}.featured-body{min-height:350px;padding:38px 28px}.section-heading{margin-bottom:20px}.channel-heading{display:block}.channel-heading>p{width:auto;margin-top:22px}.channels{padding:65px 0}.channel-grid{grid-template-columns:1fr;margin-top:26px}.channel-card{min-height:325px}.post-section{padding:65px 0}.post-item{grid-template-columns:35px 1fr 25px;gap:6px;padding:19px 0}.post-item time{grid-column:2}.post-item div{grid-column:2;grid-row:2}.post-item>a{grid-column:3;grid-row:1/3}.post-item h3{font-size:17px}.post-item div p{line-height:1.6}.newsletter{margin-inline:0;width:100%;padding:60px 18px}.site-footer{min-height:170px;align-items:flex-start;justify-content:center;flex-direction:column;gap:14px}.site-footer .brand{order:0}.site-footer p{order:2}.site-footer>a:last-child{order:1}}
@media (max-width:700px){.article-shell{width:calc(100% - 36px)}.article-nav{display:flex;position:static;flex-direction:row;border:0;padding:0;gap:13px;background:transparent;font-size:10px}.article-hero{padding:45px 0 57px}.article-hero h1{font-size:44px}.article-lead{font-size:16px}.prose{margin:55px auto 75px;font-size:15px}.prose h2{margin:58px 0 22px;font-size:28px}.prose h3{font-size:21px}.article-image-grid{grid-template-columns:1fr}.article-note{padding:25px}.prose pre{padding:18px}.prose pre code{font-size:11px}}
@media (max-width:700px){.markdown-document{margin:34px auto 75px;padding:42px 22px;font-size:16px;line-height:1.95;box-shadow:6px 7px 0 rgba(32,35,31,.06)}.markdown-article-header{margin-bottom:47px}.markdown-document h1{font-size:40px}.markdown-document h2{margin-top:58px;font-size:27px}.markdown-document h3{margin-top:38px;font-size:21px}.markdown-document pre{margin:21px -8px 28px;padding:18px}.markdown-document .markdown-image{margin:28px -10px 34px;padding:7px}.markdown-document .markdown-image img{max-width:100%}}
.article-shell{width:min(1160px,calc(100% - 64px))}.markdown-document{width:min(960px,100%);margin:46px auto 120px;padding:0;background:transparent;border:0;box-shadow:none;font-size:17px;line-height:2.1}.markdown-article-header{margin-bottom:58px;padding-bottom:48px;border-bottom:1px solid var(--ink)}.markdown-document h1{max-width:900px}.markdown-document h2{margin-top:72px}.markdown-document pre{margin:25px 0 34px}.markdown-document .markdown-image{width:fit-content;max-width:100%;margin:34px 0 42px;padding:9px}.markdown-document .markdown-image img{width:auto;max-width:100%;height:auto}.markdown-document .markdown-image:has(img[alt*="硬件配置"]){max-width:406px}
@media (max-width:700px){.article-shell{width:calc(100% - 36px)}.markdown-document{width:100%;margin:34px auto 75px;padding:0;font-size:16px;line-height:2}.markdown-article-header{margin-bottom:44px;padding-bottom:35px}.markdown-document .markdown-image{margin:28px 0 34px;padding:7px}.markdown-document .markdown-image:has(img[alt*="硬件配置"]){max-width:100%}}
.article-shell{width:min(1260px,calc(100% - 64px))}.article-reader{display:grid;grid-template-columns:170px minmax(0,960px);gap:58px;align-items:start}.article-reader .markdown-document{width:100%;margin:46px 0 120px}.article-toc{position:sticky;top:34px;margin-top:53px;padding-top:16px;border-top:1px solid var(--ink)}.article-toc-links{display:flex;flex-direction:column;gap:9px;margin-top:18px}.article-toc-links a{color:#65695f;font-size:13px;line-height:1.5;transition:color .18s}.article-toc-links a:hover,.article-toc-links a.is-active{color:var(--ink);font-weight:700}.article-toc-links .toc-level-3{padding-left:13px;font-size:12px}.markdown-document h2,.markdown-document h3{scroll-margin-top:34px}
.markdown-document table{width:100%;margin:28px 0 34px;border-collapse:collapse;font-size:15px;line-height:1.7}.markdown-document th,.markdown-document td{padding:13px 15px;text-align:left;border-bottom:1px solid var(--line)}.markdown-document th{background:var(--green);font:500 12px var(--mono);letter-spacing:.06em}.markdown-document td:first-child{width:28%;font-family:var(--mono);font-size:13px}.markdown-document blockquote p:last-child{margin-bottom:0}
@media (max-width:960px){.article-reader{display:block}.article-toc{position:static;margin:30px 0 0;padding:15px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}.article-toc-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 18px;margin:12px 0}.article-toc-links .toc-level-3{padding-left:8px}.article-reader .markdown-document{margin-top:42px}}
@media (max-width:700px){.article-shell{width:calc(100% - 36px)}.article-toc-links{grid-template-columns:1fr}.article-reader .markdown-document{margin-top:34px}}
@media (max-width:700px){.markdown-document table{font-size:13px}.markdown-document th,.markdown-document td{padding:10px}.markdown-document td:first-child{font-size:12px}}

/* Developer-focused home and archive */
.dev-site{background:#f7f7f4;font-family:"Noto Sans SC",sans-serif}.dev-site .site-header{height:72px}.dev-site .brand{font-family:var(--mono);font-weight:500}.dev-site .brand-mark{width:37px;height:30px;background:#20231f;border-radius:3px;letter-spacing:-.12em}.dev-site .main-nav{font-size:12px}.dev-hero{padding:110px 0 100px;border-bottom:1px solid var(--line)}.terminal-line{margin:0 0 25px;font:13px var(--mono);color:#687067}.terminal-line span{color:#c85e42}.dev-hero h1{font:700 clamp(44px,6vw,82px)/1.14 "Noto Sans SC",sans-serif;letter-spacing:-.08em}.dev-hero h1 span{color:#20231f;font-family:inherit;letter-spacing:inherit}.dev-intro{max-width:560px;margin:29px 0 0;color:#596057;font-size:17px;line-height:1.9}.hero-actions{display:flex;gap:18px;margin-top:38px;align-items:center}.button-primary,.button-secondary{display:inline-flex;align-items:center;gap:14px;font:12px var(--mono)}.button-primary{padding:14px 17px;background:#20231f;color:#f7f7f4;border:1px solid #20231f}.button-primary:hover{background:#3d463e}.button-secondary{border-bottom:1px solid var(--ink);padding-bottom:4px}.home-section{padding:76px 0}.dev-section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:27px}.dev-section-heading h2{margin:7px 0 0;font-size:28px;letter-spacing:-.07em}.dev-section-heading>a{font:12px var(--mono);border-bottom:1px solid var(--ink);padding-bottom:4px}.latest-post{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);border:1px solid var(--line);background:#fff}.post-terminal{min-height:236px;padding:26px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:10px;background:#20231f;color:#dce3d9;font:12px/1.7 var(--mono)}.terminal-prompt{color:#e7e85d}.post-terminal i{align-self:flex-end;width:100%;color:#8fc38b;font-size:11px;font-style:normal}.latest-post-content{padding:33px 38px}.post-labels{display:flex;align-items:center;gap:13px;font:11px var(--mono)}.post-labels span{padding:3px 6px;background:#e7e85d}.post-labels time{color:#687067}.latest-post h3{margin:23px 0 12px;font-size:27px;letter-spacing:-.07em}.latest-post p{max-width:530px;margin:0;color:#596057;font-size:14px;line-height:1.9}.inline-arrow{display:inline-block;margin-top:22px;font:12px var(--mono);border-bottom:1px solid var(--ink);padding-bottom:4px}.inline-arrow span{margin-left:5px}.topic-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--line)}.topic-grid>a{min-height:180px;padding:25px;display:grid;grid-template-columns:auto 1fr auto;gap:17px;align-items:start;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .2s}.topic-grid>a:hover{background:#e8eee5}.topic-grid h3{margin:0 0 8px;font-size:18px;letter-spacing:-.05em}.topic-grid p{margin:0;color:#687067;font-size:12px;line-height:1.7}.topic-icon{font:24px var(--mono)}.topic-grid>a>span:last-child{color:#7b8179;font:11px var(--mono)}
.tech-archive{padding-top:80px}.archive-hero{padding-bottom:66px;border-bottom:1px solid var(--ink)}.archive-hero h1{margin:18px 0 13px;font:700 clamp(42px,6vw,70px)/1.2 "Noto Sans SC",sans-serif;letter-spacing:-.09em}.archive-hero>p:last-child{margin:0;color:#687067;font-size:16px}.archive-layout{display:grid;grid-template-columns:185px minmax(0,1fr);gap:62px;padding:52px 0 115px}.archive-nav{position:sticky;top:30px;height:max-content;padding-top:11px;border-top:1px solid var(--ink)}.archive-nav>a{display:flex;justify-content:space-between;margin-top:16px;color:#6b7269;font-size:13px}.archive-nav>a:hover,.archive-nav>a.is-active{color:var(--ink);font-weight:700}.archive-nav a span{font:11px var(--mono)}.category-block{scroll-margin-top:30px;padding-bottom:58px;margin-bottom:55px;border-bottom:1px solid var(--line)}.category-block:last-child{margin:0}.category-title{display:flex;align-items:end;justify-content:space-between;margin-bottom:26px}.category-title h2{margin:7px 0 0;font-size:28px;letter-spacing:-.07em}.archive-post{display:grid;grid-template-columns:94px minmax(0,1fr) 35px;gap:15px;padding:27px 0;border-top:1px solid var(--ink)}.archive-post time{font:11px var(--mono);padding-top:7px;color:#697069}.archive-post h3{margin:0 0 10px;font-size:21px;letter-spacing:-.06em}.archive-post p{margin:0;color:#5f675e;font-size:14px;line-height:1.8}.archive-arrow{font:22px var(--mono);align-self:center}.post-tags{display:flex;gap:7px;margin-top:16px}.post-tags span{padding:3px 6px;background:#e8eee5;color:#586354;font:10px var(--mono)}.empty-category{display:flex;align-items:center;gap:13px;padding:29px 0;color:#777d74;font-size:13px}.empty-category span{font:18px var(--mono)}.empty-category p{margin:0}
@media (max-width:700px){.dev-site .site-header{height:64px}.dev-hero{padding:70px 0}.dev-intro{font-size:15px}.hero-actions{margin-top:30px;gap:15px}.home-section{padding:55px 0}.latest-post{grid-template-columns:1fr}.post-terminal{min-height:135px}.latest-post-content{padding:25px}.latest-post h3{font-size:22px}.topic-grid{grid-template-columns:1fr}.topic-grid>a{min-height:112px}.tech-archive{padding-top:48px}.archive-hero{padding-bottom:43px}.archive-layout{display:block;padding:30px 0 75px}.archive-nav{position:static;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:15px 0;border-bottom:1px solid var(--line)}.archive-nav .eyebrow{grid-column:1/-1}.archive-nav>a{display:block;margin:0;font-size:12px}.archive-nav a span{display:block;margin-top:4px}.category-list{margin-top:45px}.category-block{padding-bottom:42px;margin-bottom:42px}.archive-post{grid-template-columns:1fr 25px}.archive-post time{grid-column:1/2;grid-row:1;padding:0}.archive-post>div{grid-column:1}.archive-arrow{grid-column:2;grid-row:1/3}.article-nav{display:flex}.dev-site .main-nav{font-size:10px}}