:root{--u-bg:#f3f1eb;--u-panel:#faf9f4;--u-ink:#252c23;--u-muted:#6e7766;--u-line:#d7dbce;--u-accent:#718953;--u-tint:#e9eddf;--u-dark:#243027;--u-button:#263020;--u-button-text:#f0f4e8;--u-grid:#313a2407}
:root[data-theme=dark]{--u-bg:#181e1a;--u-panel:#222a23;--u-ink:#e7ecdf;--u-muted:#a9b4a0;--u-line:#3a4538;--u-accent:#b9cf8c;--u-tint:#283426;--u-dark:#111a14;--u-button:#bdd496;--u-button-text:#1d2919;--u-grid:#d0e1ba04}
html,body{background:var(--u-bg);color:var(--u-ink);--paper:var(--u-bg);--ink:var(--u-ink);--muted:var(--u-muted);--line:var(--u-line);--lime-dark:var(--u-accent);--terminal:var(--u-dark);--lime:#c6f277}
body:before{display:none}body{background-image:linear-gradient(var(--u-grid) 1px,transparent 1px),linear-gradient(90deg,var(--u-grid) 1px,transparent 1px);background-size:34px 34px}
.page,.shell{width:min(1120px,calc(100% - 80px));max-width:1120px;margin:auto}
.unified-header{height:96px;border-bottom:1px solid var(--u-line);display:flex;align-items:center;justify-content:space-between;gap:28px;font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif}
.unified-brand{display:flex;align-items:center;gap:13px;color:var(--u-ink);font-size:17px;font-weight:650;letter-spacing:-.035em;flex-shrink:0}
.unified-avatar{width:42px;height:42px;border-radius:11px;object-fit:cover;border:1px solid var(--u-line)}
.unified-brand small{margin-left:8px;color:var(--u-muted);font:11px Consolas,monospace;letter-spacing:.03em;font-weight:400}
.unified-right{display:flex;align-items:center;gap:26px}.unified-nav{display:flex;align-items:center;gap:27px}
.unified-nav a{font-size:16px;line-height:44px;color:var(--u-muted);position:relative;white-space:nowrap;font-weight:400}
.unified-nav a:hover,.unified-nav a[aria-current=page]{color:var(--u-ink)}.unified-nav a[aria-current=page]:after{content:"";position:absolute;bottom:2px;left:0;right:0;height:2px;background:var(--u-accent)}
.unified-mode{width:44px;height:44px;padding:0;border:1px solid var(--u-line);border-radius:50%;display:grid;place-items:center;background:var(--u-panel);color:var(--u-ink);cursor:pointer}
.unified-mode svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.personal-hero{padding:54px 0 48px}.personal-hero h1{color:var(--u-ink)}.personal-hero h1 em{color:var(--u-accent)}.personal-hero .intro,.personal-card p,.about-copy{color:var(--u-muted)}
.eyebrow,.personal-card small{color:var(--u-muted)}.section-heading a,.contact-links a{color:var(--u-accent)}
.personal-card{background:var(--u-panel);border-color:var(--u-line)}.contact-links a{background:transparent;border-color:var(--u-line)}.contact-links .design-primary{background:var(--u-button);color:var(--u-button-text);border-color:var(--u-button)}
.design-feature{background:var(--u-tint);border-color:var(--u-line);box-shadow:7px 9px 0 var(--u-bg),8px 10px 0 var(--u-line)}.design-feature-meta,.design-feature p{color:var(--u-muted)}.design-feature-title{color:var(--u-ink)}.design-feature a{color:var(--u-accent);border-color:var(--u-line)}.design-feature-tab{background:var(--u-accent)}
.design-site-preview{background:var(--u-tint)}.design-site-preview img{border-color:var(--u-line)}.design-work-preview{background:var(--u-dark)}.design-project-copy a{color:var(--u-accent);border-color:var(--u-line)}.personal-section,.personal-footer{border-color:var(--u-line)}
.design-page-head{padding:55px 0 32px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px}.design-page-head .eyebrow{font:11px Consolas,monospace;letter-spacing:.12em;color:var(--u-accent)}.design-page-head h1{font-size:55px;letter-spacing:-.055em;line-height:1.15;margin:17px 0 18px;font-weight:720}.design-page-head p{font-size:15px;color:var(--u-muted);line-height:1.9;margin:0}.design-count{font:12px Consolas,monospace;color:var(--u-muted);padding-bottom:5px}
.design-search-row{display:flex;gap:12px;margin:0 0 27px;align-items:center}.design-search-row input{flex:1;max-width:440px;padding:13px 16px;background:var(--u-panel);color:var(--u-ink);border:1px solid var(--u-line);border-radius:7px;font-size:14px}.design-search-row input::placeholder{color:var(--u-muted)}.design-filter{height:44px;min-width:90px;border:1px solid var(--u-line);background:transparent;color:var(--u-muted);border-radius:7px;font-size:14px;cursor:pointer}
.design-feature-article{display:grid;grid-template-columns:290px 1fr;gap:32px;background:var(--u-panel);border:1px solid var(--u-line);border-radius:10px;overflow:hidden}
.design-article-art{background:var(--u-tint);padding:29px 38px;display:grid;place-items:center;min-height:256px}.design-notebook{width:178px;height:202px;background:var(--u-bg);border:1px solid var(--u-line);padding:23px;transform:rotate(-5deg);box-shadow:5px 5px 0 var(--u-tint),6px 6px 0 var(--u-line)}.design-notebook small{font:9px Consolas,monospace;color:var(--u-muted);letter-spacing:.04em}.design-notebook b{display:block;font-size:31px;line-height:1.4;color:var(--u-accent);margin:22px 0 18px}.design-notebook span{font:9px Consolas,monospace;color:var(--u-muted)}
.design-article-copy{padding:30px 34px 28px 0;display:flex;flex-direction:column;justify-content:center}.design-article-meta{font:11px Consolas,monospace;color:var(--u-muted)}.design-article-copy h2{font-size:27px;letter-spacing:-.04em;margin:15px 0 12px}.design-article-copy p{font-size:15px;line-height:1.9;color:var(--u-muted);margin:0 0 21px}.design-article-link{display:flex;justify-content:space-between;color:var(--u-accent);font-size:14px;padding-top:14px;border-top:1px solid var(--u-line)}
.design-notes-heading{display:flex;justify-content:space-between;gap:20px;margin:35px 0 18px;align-items:center}.design-notes-heading h2{font-size:22px;margin:0;letter-spacing:-.035em}.design-notes-heading a{color:var(--u-accent);font-size:13px}.design-notes-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.design-note{padding:22px 24px;border:1px solid var(--u-line);border-radius:9px;background:var(--u-panel)}.design-note small{color:var(--u-muted);font:10px Consolas,monospace}.design-note h3{font-size:18px;letter-spacing:-.035em;margin:11px 0}.design-note p{font-size:14px;line-height:1.9;color:var(--u-muted);margin:0}.design-footer{margin-top:42px;padding:22px 0;border-top:1px solid var(--u-line);display:flex;justify-content:space-between;gap:20px;color:var(--u-muted);font-size:12px;line-height:1.8}.design-footer span:last-child{display:flex;gap:19px}
@media(max-width:640px){.page,.shell{width:calc(100% - 36px)}.unified-header{height:auto;min-height:115px;padding:16px 0;align-items:flex-start;gap:14px;flex-wrap:wrap}.unified-brand small{display:none}.unified-right{width:100%;gap:15px;justify-content:space-between}.unified-nav{gap:20px}.unified-nav a{font-size:14px}.unified-mode{width:40px;height:40px}.personal-hero{padding-top:35px}.design-feature-article{grid-template-columns:1fr;gap:0}.design-article-copy{padding:25px}.design-notes-grid{grid-template-columns:1fr}.design-page-head h1{font-size:42px}.design-footer{flex-wrap:wrap}.design-count{display:none}}

/* Shared list, reading and responsive styles follow the approved page designs. */
[hidden]{display:none!important}
.site-entering .page{opacity:0}.site-entry{position:fixed;inset:0;z-index:100;background:var(--u-bg);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:38px;transition:opacity .35s ease}.entry-book{position:relative;width:200px;height:260px;padding:26px 30px;border:1px solid var(--u-line);background:var(--u-panel);box-shadow:5px 5px 0 var(--u-bg),6px 6px 0 var(--u-line),11px 10px 0 var(--u-bg),12px 11px 0 var(--u-line);transform:rotate(-5deg);transform-origin:left center;transition:transform .4s ease}.entry-book::after{content:"";position:absolute;right:-8px;top:30px;width:16px;height:42px;background:var(--u-accent);border-radius:0 3px 3px 0}.entry-book span,.entry-book small{font:10px var(--mono);color:var(--u-muted)}.entry-book strong{display:block;color:var(--u-accent);font-size:42px;line-height:1.45;font-weight:500;margin:28px 0 27px}.entry-caption{font-size:12px;color:var(--u-muted)}.entry-skip{min-height:44px;border:0;background:transparent;color:var(--u-accent);font-size:13px;cursor:pointer}.entry-opening{opacity:0;pointer-events:none}.entry-opening .entry-book{transform:perspective(900px) rotateY(-50deg) translateX(-35px)}
.giscus,.giscus-frame{width:100%;max-width:100%}.giscus-frame{display:block;border:0}.article-layout>div{min-width:0}.markdown pre{max-width:100%;overflow:auto}
.main{min-height:0}.page-head{padding:55px 0 32px;border:0;gap:20px;grid-template-columns:1fr auto;align-items:end}.page-head h1{font-size:55px;font-weight:720;line-height:1.15;letter-spacing:-.055em;margin:17px 0 18px}.page-head p{font-size:15px;line-height:1.9;color:var(--u-muted);margin:0}.page-head .eyebrow{font-size:11px;color:var(--u-accent)}.page-count{padding:0;border:0;background:transparent;color:var(--u-muted);font-size:12px;min-width:0}.page-count b{display:inline;font-size:12px;margin-right:6px;color:var(--u-muted)}
.toolbar{padding:0;display:block}.design-search-row{margin:0 0 20px}.design-search-row .search-wrap{width:min(440px,100%);max-width:440px;flex:1}.design-search-row input.search{height:46px;width:100%;max-width:none;padding-left:35px;font-family:var(--sans);font-size:14px;color:var(--u-ink);background:var(--u-panel)}.search-icon{font-size:17px;color:var(--u-muted)}.filter-panel{padding:14px 18px;margin-bottom:20px;background:var(--u-panel);border:1px solid var(--u-line);border-radius:8px}.filter-row{gap:12px;margin:4px 0}.filter-label{font-size:11px;color:var(--u-muted);min-width:52px}.filter{font-size:12px;color:var(--u-muted);min-height:36px}.filter:hover,.filter.active{background:var(--u-tint);border-color:var(--u-line);color:var(--u-ink)}.filter.active{box-shadow:inset 0 -2px var(--u-accent)}.list-topline{font-size:11px;color:var(--u-muted);padding:0 0 16px}.entries{padding-bottom:0;gap:18px}.blog-entries{display:grid;grid-template-columns:1fr}.design-feature-article{gap:32px}.entry-card{padding:24px;background:var(--u-panel);border-color:var(--u-line);min-height:230px}.entry-cat{font-size:11px;color:var(--u-muted)}.entry-card h2{font-size:20px;line-height:1.5;color:var(--u-ink)}.entry-card .excerpt{font-size:14px;line-height:1.9;color:var(--u-muted)}.entry-meta{font-size:11px;color:var(--u-muted)}.tag{font-size:10px;padding:5px 9px;background:var(--u-tint);color:var(--u-muted);border-color:var(--u-line)}.status{font-size:10px}.status.ready{background:var(--u-tint);color:var(--u-accent);border-color:var(--u-line)}.status.more,.status.working{background:var(--u-panel);color:var(--u-muted);border-color:var(--u-line)}.empty{font-size:14px;color:var(--u-muted);border-color:var(--u-line)}.closing{font-size:12px;line-height:1.8;color:var(--u-muted);margin-top:42px;padding:22px 0;border-color:var(--u-line);flex-wrap:wrap;gap:18px}.closing a{color:var(--u-accent)}
.article-wrap{padding-top:32px}.article-head h1{font-size:44px;line-height:1.3;letter-spacing:-.045em;color:var(--u-ink);margin:16px 0}.article-head .eyebrow{font-size:11px;color:var(--u-accent)}.article-dek{font-size:15px;line-height:1.9;color:var(--u-muted)}.article-meta{font-size:11px;color:var(--u-muted);line-height:1.8}.back-link{font-size:12px;color:var(--u-accent);padding:8px 0}.article-body{background:transparent;border:0;box-shadow:none;padding:0}.markdown h2{font-size:24px;margin:30px 0 14px;color:var(--u-ink)}.markdown h2:first-child{margin-top:0}.markdown h3{font-size:19px;line-height:1.5;color:var(--u-ink)}.markdown p{font-size:16px;line-height:1.95;color:var(--u-muted);margin-bottom:20px}.markdown ul,.markdown ol{font-size:15px;line-height:1.95;color:var(--u-muted)}.markdown blockquote{font-size:15px;background:var(--u-tint);color:var(--u-muted);border-color:var(--u-accent)}.markdown code{font-size:13px;background:var(--u-tint);color:var(--u-accent)}.markdown pre{font-size:13px;color:#dce7d1;background:var(--u-dark);border-color:var(--u-line)}.markdown pre code{color:inherit;background:transparent}.markdown a{color:var(--u-accent);text-decoration:underline;text-underline-offset:3px}.toc{background:var(--u-panel);border-color:var(--u-line);padding:18px}.toc-title{font-size:11px;color:var(--u-muted)}.toc a{font-size:12px;line-height:1.8;color:var(--u-muted);border-color:var(--u-line)}.toc a:hover{background:var(--u-tint);color:var(--u-accent);border-color:var(--u-accent)}.source-box{margin-top:28px;padding:18px;background:var(--u-tint);border-color:var(--u-line)}.source-title{font-size:11px;color:var(--u-muted)}.source-list a{font-size:13px;color:var(--u-accent)}.source-list small{font-size:10px;color:var(--u-muted)}.article-end{font-size:11px;color:var(--u-muted);border-color:var(--u-line);flex-wrap:wrap;line-height:1.8}.article-status{background:var(--u-panel);border-color:var(--u-line);color:var(--u-muted);font-size:11px;flex-wrap:wrap}.pager{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-top:25px}.pager a{background:var(--u-panel);border-color:var(--u-line);padding:18px}.pager small{font-size:11px;color:var(--u-muted)}.pager strong{font-size:14px;line-height:1.8;color:var(--u-ink)}.design-related{display:flex;flex-direction:column;gap:12px;margin-top:25px;padding:22px;border:1px solid var(--u-line);background:var(--u-tint);border-radius:8px}.design-related small{font:11px var(--mono);color:var(--u-muted)}.design-related strong{font-size:18px;color:var(--u-ink)}.design-related span{font-size:14px;line-height:1.8;color:var(--u-muted)}.comment-section{background:var(--u-panel);border-color:var(--u-line);padding:22px;margin-top:28px}.comment-section h2{font-size:22px;color:var(--u-ink)}.comment-section p{font-size:14px;line-height:1.9;color:var(--u-muted)}.comment-section a{color:var(--u-accent)}.design-toc{display:none}.not-found{padding:80px 0}.not-found h1{color:var(--u-ink)}.not-found p{font-size:15px;color:var(--u-muted)}.not-found a{color:var(--u-accent)}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--u-accent);outline-offset:4px}
@media(max-width:760px){.article-layout{display:block}.article-side{display:none}.design-toc{display:block;border-top:1px solid var(--u-line);border-bottom:1px solid var(--u-line);padding:15px 0;margin-bottom:24px;color:var(--u-muted)}.design-toc summary{font-size:13px;cursor:pointer;min-height:24px}.design-toc summary span{float:right;color:var(--u-muted);font-size:11px}.design-toc .toc-list{padding-top:14px;gap:8px}.design-toc a{font-size:13px;padding:8px;color:var(--u-accent)}.article-head h1{font-size:29px;line-height:1.3}.article-wrap{padding-top:22px}.markdown h2{font-size:21px}.markdown p{font-size:15px}.page-head h1{font-size:42px}.page-head{padding-top:36px;grid-template-columns:1fr}.page-count{display:none}.entry-card{padding:22px}.entries{grid-template-columns:1fr}.article-dek{font-size:14px}.closing{margin-top:32px}.unified-nav{gap:clamp(12px,4vw,20px)}.unified-right{gap:10px}.unified-brand{font-size:16px}.unified-nav a{font-size:14px}.unified-mode{flex-shrink:0}.personal-grid{grid-template-columns:1fr}.personal-hero{grid-template-columns:1fr;gap:32px}.personal-hero h1{font-size:42px}.design-feature{transform:none}.design-project-image{height:210px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Compact text navigation and softer night palette approved in the image preview. */
.unified-header.header-floating{width:calc(100% - 96px);margin-inline:auto}
@media(max-width:640px){.unified-header.header-floating{width:100%}}
:root[data-theme=dark]{--u-bg:#1e241f;--u-panel:#272e27;--u-ink:#dde3d5;--u-muted:#a7b19f;--u-line:#3b4639;--u-accent:#adbf89;--u-tint:#2b3628;--u-dark:#18221b;--u-button:#afc58d;--u-button-text:#202b1b}
.personal-card,.personal-card h3{color:var(--u-ink)}
.unified-header{position:sticky;top:16px;z-index:70;height:52px;min-height:52px;margin-top:16px;margin-bottom:34px;padding:0;gap:28px;border:1px solid transparent;border-radius:14px;background:transparent;transition:transform .22s ease,background-color .22s ease,border-color .22s ease,padding .22s ease;flex-wrap:nowrap}
.unified-brand{font-size:20px;font-weight:600;letter-spacing:-.035em;display:block}.unified-right{gap:20px;width:auto}.unified-nav{gap:24px}.unified-nav a{font-size:16px;line-height:40px}.unified-mode,.unified-menu{width:36px;height:36px;min-height:36px;border:1px solid var(--u-line);border-radius:7px;background:transparent;color:var(--u-ink);display:grid;place-items:center;cursor:pointer;padding:0;flex-shrink:0}.unified-mode svg,.unified-menu svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}.unified-menu{display:none}.header-floating{padding-inline:16px;background:var(--u-panel);border-color:var(--u-line);box-shadow:0 5px 20px #1725160a}.header-hidden{transform:translateY(calc(-100% - 24px));pointer-events:none}.unified-header:has(:focus-visible){transform:none;pointer-events:auto}
.personal-hero{padding:28px 0 46px;gap:74px;grid-template-columns:1.5fr 1fr}.personal-hero h1{font-size:56px;line-height:1.25;margin-top:18px}.profile-introduction{padding:26px 28px 0;background:var(--u-panel);border:1px solid var(--u-line);border-radius:10px;overflow:hidden}.profile-kicker{font:10px Consolas,monospace;color:var(--u-muted);letter-spacing:.1em}.profile-person{display:flex;align-items:center;gap:18px;margin-top:23px}.profile-person img{width:84px;height:84px;object-fit:cover;border-radius:14px}.profile-person h2{font-size:22px;margin:0 0 9px;letter-spacing:-.035em;font-weight:600}.profile-person span{font-size:12px;color:var(--u-muted)}.profile-introduction p{font-size:14px;line-height:1.9;color:var(--u-muted);margin:22px 0 14px}.profile-about{display:flex;justify-content:space-between;font-size:12px;color:var(--u-accent);margin-bottom:23px}.profile-reading{display:flex;flex-direction:column;gap:10px;background:var(--u-tint);margin:0 -28px;padding:21px 28px;color:var(--u-ink);border-top:1px solid var(--u-line)}.profile-reading small{font-size:11px;color:var(--u-muted)}.profile-reading strong{font-size:16px;font-weight:500}.profile-reading span{font-size:11px;color:var(--u-muted)}.profile-reading i{float:right;font-style:normal;color:var(--u-accent)}
.personal-section,.markdown h2,.markdown h3{scroll-margin-top:94px}.article-side{top:94px}.theme-changing,.theme-changing body,.theme-changing .page,.theme-changing .shell,.theme-changing .personal-card,.theme-changing .design-project-image,.theme-changing .profile-introduction,.theme-changing .profile-reading,.theme-changing .entry-card,.theme-changing .design-feature-article,.theme-changing .design-article-art,.theme-changing .design-notebook,.theme-changing .design-note,.theme-changing .design-related,.theme-changing .comment-section,.theme-changing .source-box,.theme-changing .toc,.theme-changing .filter-panel,.theme-changing input,.theme-changing button,.theme-changing a,.theme-changing p,.theme-changing h1,.theme-changing h2,.theme-changing h3,.theme-changing strong,.theme-changing span,.theme-changing small,.theme-changing em,.theme-changing summary{transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease}.theme-changing .unified-header{transition:transform .22s ease,background-color .3s ease,color .3s ease,border-color .3s ease,padding .22s ease}.theme-changing .unified-mode svg{animation:theme-icon-in .3s ease}@keyframes theme-icon-in{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@media(max-width:760px){.personal-hero{grid-template-columns:1fr;gap:28px}.personal-hero h1{font-size:42px}.profile-person img{width:70px;height:70px}.article-side{display:none}}
@media(max-width:640px){.unified-header{height:50px;min-height:50px;padding:0;margin-bottom:25px;gap:10px;align-items:center;flex-direction:row}.unified-brand{font-size:19px}.unified-right{width:auto;gap:12px;justify-content:flex-end}.unified-menu{display:grid}.unified-nav{position:absolute;top:calc(100% + 8px);left:0;right:0;padding:12px;background:var(--u-panel);border:1px solid var(--u-line);border-radius:12px;display:none;flex-direction:column;align-items:stretch;gap:2px;box-shadow:0 8px 24px #17251612}.unified-nav a{padding:0 14px;font-size:15px;line-height:44px}.unified-nav a[aria-current=page]:after{display:none}.unified-nav a[aria-current=page]{background:var(--u-tint);border-radius:7px}.menu-open .unified-nav{display:flex}.header-floating{padding-inline:12px}.personal-hero{padding-top:12px}.personal-hero h1{font-size:39px}.profile-introduction{padding-top:23px}}
@media(prefers-reduced-motion:reduce){.unified-header,.theme-changing,.theme-changing *{animation:none!important;transition:none!important}}