:root{font-family:Inter,"Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;color:#252a32;background:#fff;font-synthesis:none;scroll-behavior:smooth}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit}::selection{background:#ffe29a;color:#222}
.topbar{height:66px;background:#f8f9fb;border-bottom:1px solid #e6e8eb;display:flex;align-items:center;justify-content:space-between;padding:0 max(28px,calc((100vw - 1120px)/2));gap:24px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}.brand-mark{width:33px;height:33px;display:grid;place-items:center;border:1.8px solid #222b37;border-radius:11px;font-weight:900;font-size:15px;letter-spacing:-.08em}.brand strong{display:block;font-size:16px;line-height:1.2;letter-spacing:.015em}.brand small{display:block;color:#777f8b;font-size:12px;margin-top:3px}.topnav{display:flex;align-items:center;gap:28px;color:#5c6470;font-size:14px}.topnav a:hover,.topnav a:focus-visible{color:#245ce0}.topnav .nav-active{color:#222b37;font-weight:650}.nav-divider{height:18px;width:1px;background:#d7dbe0}
.hero{height:400px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:#fafbfc;background-image:linear-gradient(to right,rgba(80,91,109,.105) 1px,transparent 1px),linear-gradient(to bottom,rgba(80,91,109,.105) 1px,transparent 1px);background-size:30px 30px;background-position:center 0;border-bottom:1px solid #f0f1f3}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,#fff 100%);pointer-events:none}.hero-inner{position:relative;text-align:center;transform:translateY(-10px)}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.27em;color:#7e8796;font-weight:700}.hero h1{font-size:clamp(60px,10vw,106px);line-height:1;margin:12px 0 9px;letter-spacing:-.085em;font-weight:850;color:#343a43;text-shadow:0 7px 18px #2029381b}.hero h1 span{color:#ffbc27}.hero .sub{font-size:13px;color:#858d99;font-weight:700;letter-spacing:.16em}.hero .motto{font-family:Georgia,"Noto Serif SC",serif;font-style:italic;font-size:23px;color:#30343b;margin:30px 0 0}
main{width:min(920px,calc(100% - 44px));margin:0 auto;padding:22px 0 70px}.section{padding-top:48px}.section-heading{font-size:20px;font-weight:700;letter-spacing:.005em;margin:0 0 20px;display:flex;align-items:center;gap:10px}.section-heading:before{content:"";height:20px;width:4px;border-radius:4px;background:#5d88fc;display:block}.about-layout{display:grid;grid-template-columns:minmax(0,1fr) 225px;gap:30px;align-items:start}.about-copy{font-size:16px;line-height:1.95;color:#4a505a;margin:0}.about-copy strong{color:#252a32}.accent-link{color:#376bf2;font-weight:650}.identity{border-radius:11px;background:linear-gradient(135deg,#eaf0ff,#ddd7f5);padding:20px;min-height:132px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.identity:after{content:"⌁";position:absolute;font-size:110px;font-weight:300;color:#6479bd45;right:13px;bottom:-44px;transform:rotate(-23deg)}.identity small{font-weight:700;color:#5669aa}.identity strong{font-size:20px;z-index:1}.identity span{font-size:13px;color:#606c83;z-index:1}
.pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}.pill{border:1px solid #e4e8f0;border-radius:99px;background:#fbfcff;color:#5b6777;font-size:13px;padding:7px 12px}
.contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.contact{background:#f5f6f8;border-radius:10px;min-height:85px;padding:14px 16px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.contact small{font-size:12px;color:#5876c2;font-weight:700}.contact strong{font-size:14px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:1}.contact .glyph{position:absolute;right:12px;bottom:5px;color:#c8cee2;font-size:35px;font-weight:700}.contact:not(.plain):hover{background:#eaf0ff}.contact.plain{cursor:default}
.projects{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.project{min-height:228px;border-radius:13px;overflow:hidden;position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:24px;color:#fff;isolation:isolate;box-shadow:0 10px 25px #26354c18}.project:before{content:"";position:absolute;z-index:-1;inset:0;opacity:.78;background-image:linear-gradient(to right,#ffffff12 1px,transparent 1px),linear-gradient(to bottom,#ffffff12 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(120deg,transparent,#000)}.project:nth-child(1){background:linear-gradient(130deg,#243451,#111a2c)}.project:nth-child(2){background:linear-gradient(130deg,#253d56,#0d202d)}.project:nth-child(3){background:linear-gradient(130deg,#28345a,#151927)}.project:nth-child(4){background:linear-gradient(130deg,#3a383c,#1c2029)}.project-label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#b7caef;font-weight:750}.project h3{font-size:23px;line-height:1.35;margin:14px 0 8px;letter-spacing:-.02em}.project p{font-size:14px;color:#d4dded;line-height:1.65;max-width:36ch;margin:0}.project-foot{border-top:1px solid #ffffff30;padding-top:13px;font-size:13px;color:#d5dceb}.project .ordinal{position:absolute;right:20px;top:10px;font-size:83px;font-weight:850;letter-spacing:-.08em;color:#ffffff10;line-height:1}
.notes{border-top:1px solid #e9ebef}.note{padding:18px 2px 20px;border-bottom:1px solid #e9ebef;display:grid;grid-template-columns:1fr auto;column-gap:20px}.note h3{font-size:16px;margin:0 0 6px;font-weight:650}.note p{font-size:14px;color:#818995;margin:0;line-height:1.6}.note .status{font-size:12px;color:#6d7eab;white-space:nowrap;padding-top:3px}.note .status:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#8da7ea;vertical-align:2px;margin-right:7px}
.closing{margin-top:50px;background:#f5f7fa;border-radius:14px;padding:28px 32px;display:flex;justify-content:space-between;gap:20px;align-items:center}.closing strong{font-size:17px}.closing p{color:#717a88;font-size:14px;margin:8px 0 0;line-height:1.6}.closing .signal{font-size:28px;color:#6c85c6;white-space:nowrap}
footer{border-top:1px solid #f0f1f3;max-width:920px;margin:0 auto;padding:25px 0 42px;color:#9ba2ac;font-size:13px;display:flex;justify-content:space-between;gap:15px}footer span:last-child{font-style:italic;font-family:Georgia,serif}
@media(max-width:720px){.topbar{padding:0 20px}.topnav{gap:14px}.topnav a{font-size:13px}.topnav a:nth-child(2),.nav-divider{display:none}.hero{height:330px}.hero .motto{font-size:19px}.section{padding-top:38px}.about-layout{grid-template-columns:1fr}.identity{min-height:112px}.contact-grid{grid-template-columns:repeat(2,1fr)}.projects{grid-template-columns:1fr}.project{min-height:210px}footer{margin:0 22px}.closing{padding:24px}}
@media(max-width:390px){.topnav a[href="/#contact"]{display:none}.hero h1{font-size:57px}.contact{padding:13px}.note{grid-template-columns:1fr}.note .status{margin-top:8px}}
@media(prefers-reduced-motion:no-preference){a, .contact{transition:color .18s,background .18s}.project{transition:transform .2s}.project:hover{transform:translateY(-3px)}}

/* ---- added beyond the design draft ---- */
.brand-suffix{color:#9198a3;font-weight:500}
.about-copy p{margin:0}
.project{text-decoration:none}
.note h3 a:hover,.note h3 a:focus-visible{color:#245ce0}
.note .date{font-size:12px;color:#8a929e;white-space:nowrap;padding-top:3px;font-variant-numeric:tabular-nums}
.more{margin:18px 0 0;font-size:14px}
.empty{color:#9ba2ac;font-size:14px}
main.page{padding-top:10px;min-height:60vh}
.entry{padding-top:48px}
.entry-head{padding-bottom:22px;margin-bottom:30px;border-bottom:1px solid #e9ebef}
.entry-head h1{font-size:clamp(28px,5vw,38px);line-height:1.25;letter-spacing:-.02em;margin:10px 0 12px;color:#252a32}
.entry-head time,.entry-meta{font-size:13px;color:#8a929e;margin:0}
.prose{font-size:16.5px;line-height:1.9;color:#3b414b;max-width:72ch}
.prose h2{font-size:22px;margin:2em 0 .7em}.prose h3{font-size:18px;margin:1.6em 0 .6em}
.prose a{color:#376bf2;text-decoration:underline;text-underline-offset:3px}
.prose img{max-width:100%;border-radius:10px}
.prose blockquote{margin:1.4em 0;padding:.2em 1.2em;border-left:4px solid #d7e0fb;color:#5c6470;background:#f8f9fc}
.prose code{font-family:"JetBrains Mono",Consolas,monospace;font-size:.9em;background:#f3f4f7;border-radius:5px;padding:.15em .4em}
.prose pre{background:#1e2633;color:#e6e9ef;border-radius:10px;padding:16px 18px;overflow-x:auto;line-height:1.6}
.prose pre code{background:none;padding:0;color:inherit}
.prose table{border-collapse:collapse;width:100%;font-size:15px}.prose th,.prose td{border:1px solid #e6e8eb;padding:8px 12px;text-align:left}
.notfound{text-align:center;padding:110px 0 60px}.notfound h1{font-size:32px;margin:14px 0 10px}.notfound p{color:#717a88}
.tag-cloud{margin:0 0 24px}.tag-cloud .pill:hover{border-color:#c5d3f7;color:#245ce0}.tag-cloud small{color:#9ba2ac;margin-left:2px}
.entry-tags{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-size:13px}.entry-tags a{color:#5876c2}.entry-tags a:hover{color:#245ce0}
.prose pre.chroma{background:#1e2633}
.list-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}.list-head .section-heading{margin:0}
.search-form{display:flex;border:1px solid #e4e8f0;border-radius:99px;overflow:hidden;background:#fbfcff}.search-form:focus-within{border-color:#5d88fc}
.search-form input{border:0;background:none;padding:8px 4px 8px 16px;font:inherit;font-size:14px;width:200px;outline:none;color:inherit}
.search-form button{border:0;background:none;padding:0 14px;font-size:18px;color:#5c6470;cursor:pointer}.search-form button:hover{color:#245ce0}
.search-count{font-size:14px;color:#818995;margin:0 0 12px}
.note mark{background:#ffe29a;color:inherit;border-radius:3px;padding:0 1px}.note .snippet{word-break:break-word}
@media(max-width:720px){.search-form,.search-form input{width:100%}}
.prose pre{tab-size:4}

/* ---- theme toggle + dark mode (data-theme is set by the inline script in <head>) ---- */
.theme-toggle{border:0;background:none;padding:4px;margin:-4px -4px -4px 0;color:inherit;cursor:pointer;font-size:17px;line-height:1;opacity:.75}.theme-toggle:hover{opacity:1;color:#245ce0}
:root[data-theme=dark]{color-scheme:dark;color:#dde3ec;background:#0f141b}
[data-theme=dark] ::selection{background:#6b5520;color:#fff}
[data-theme=dark] .topbar{background:#131922;border-color:#232b37}
[data-theme=dark] .brand-mark{border-color:#dde3ec}
[data-theme=dark] .brand small,[data-theme=dark] .brand-suffix{color:#8a94a3}
[data-theme=dark] .topnav{color:#9aa4b3}[data-theme=dark] .topnav .nav-active{color:#f1f4f8}[data-theme=dark] .nav-divider{background:#2c3543}
[data-theme=dark] .topnav a:hover,[data-theme=dark] .theme-toggle:hover{color:#8fb0ff}
[data-theme=dark] .hero{background-color:#11161e;background-image:linear-gradient(to right,rgba(160,175,200,.07) 1px,transparent 1px),linear-gradient(to bottom,rgba(160,175,200,.07) 1px,transparent 1px);border-color:#1b222c}
[data-theme=dark] .hero:before{background:linear-gradient(180deg,transparent 45%,#0f141b 100%)}
[data-theme=dark] .eyebrow,[data-theme=dark] .hero .sub{color:#8a94a3}
[data-theme=dark] .hero h1{color:#e8ecf2;text-shadow:0 7px 22px #0009}
[data-theme=dark] .hero .motto{color:#c9d0da}
[data-theme=dark] .about-copy{color:#b8c1ce}[data-theme=dark] .about-copy strong{color:#eef1f5}
[data-theme=dark] .accent-link{color:#8fb0ff}
[data-theme=dark] .identity{background:linear-gradient(135deg,#1c2640,#261f3d)}[data-theme=dark] .identity small{color:#9fb0e8}[data-theme=dark] .identity span{color:#9aa4b8}
[data-theme=dark] .pill{background:#161c25;border-color:#28313f;color:#a9b3c1}
[data-theme=dark] .contact{background:#161c25}[data-theme=dark] .contact small{color:#8fa7e6}[data-theme=dark] .contact .glyph{color:#2e3a50}[data-theme=dark] .contact:not(.plain):hover{background:#1c2536}
[data-theme=dark] .project{box-shadow:0 10px 25px #0006}
[data-theme=dark] .notes,[data-theme=dark] .note{border-color:#222a35}
[data-theme=dark] .note p,[data-theme=dark] .search-count{color:#8a94a3}
[data-theme=dark] .note .status{color:#8fa0cf}
[data-theme=dark] .note h3 a:hover{color:#8fb0ff}
[data-theme=dark] .note mark{background:#6b5520;color:#fff}
[data-theme=dark] .closing{background:#161c25}[data-theme=dark] .closing p{color:#8a94a3}
[data-theme=dark] footer{border-color:#1b222c;color:#7b8594}
[data-theme=dark] .entry-head{border-color:#222a35}[data-theme=dark] .entry-head h1{color:#eef1f5}
[data-theme=dark] .prose{color:#c3cad5}
[data-theme=dark] .prose a{color:#8fb0ff}
[data-theme=dark] .prose blockquote{background:#151b24;border-color:#34425e;color:#a3adbb}
[data-theme=dark] .prose code{background:#1c2330}
[data-theme=dark] .prose pre,[data-theme=dark] .prose pre.chroma{background:#161c26;box-shadow:inset 0 0 0 1px #242d3a}
[data-theme=dark] .prose th,[data-theme=dark] .prose td{border-color:#28313f}
[data-theme=dark] .prose img{opacity:.92}
[data-theme=dark] .entry-tags a{color:#8fa7e6}
[data-theme=dark] .tag-cloud .pill:hover{border-color:#3d5288;color:#8fb0ff}
[data-theme=dark] .search-form{background:#161c25;border-color:#28313f}[data-theme=dark] .search-form button{color:#9aa4b3}
[data-theme=dark] .notfound p{color:#8a94a3}

/* ---- comments ---- */
.comments{margin-top:56px;padding-top:8px;max-width:72ch}.comments .section-heading small{font-size:14px;color:#8a929e;font-weight:500}
.comment{padding:16px 0;border-bottom:1px solid #e9ebef}.comment.reply{margin:12px 0 0 22px;padding:12px 16px;border:0;border-left:3px solid #d7e0fb;background:#f8f9fc;border-radius:0 8px 8px 0}
.comment-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:14px}.comment-author{font-weight:650}a.comment-author:hover{color:#245ce0}
.comment-head time{font-size:12px;color:#9ba2ac}.owner-badge{font-size:11px;background:#fff4dc;color:#946200;border-radius:99px;padding:1px 8px}
.comment-text{margin-top:6px;font-size:15px;line-height:1.8;color:#3b414b;word-break:break-word}
.comment-notice{background:#e8f6ee;color:#1f7a45;border-radius:10px;padding:10px 14px;font-size:14px}
.comment-error{background:#fdeeee;color:#b23636;border-radius:10px;padding:10px 14px;font-size:14px;margin:0 0 14px}
.comment-form{margin-top:28px}.comment-form label{display:block;font-size:13px;font-weight:600;color:#4a505a;margin-bottom:14px}.comment-form label small{font-weight:400;color:#9ba2ac}
.comment-form input,.comment-form textarea{display:block;width:100%;margin-top:6px;border:1px solid #e4e8f0;border-radius:8px;padding:9px 11px;font:inherit;font-size:14px;font-weight:400;background:#fbfcff;color:inherit}
.comment-form input:focus,.comment-form textarea:focus{outline:2px solid #bfd0fb;border-color:#5d88fc}.comment-form textarea{resize:vertical;line-height:1.7}
.comment-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:0 12px}
.comment-submit{display:flex;justify-content:space-between;align-items:center;gap:12px}.comment-submit small{color:#9ba2ac;font-size:12px}
.comment-submit button{border:0;background:#376bf2;color:#fff;border-radius:9px;padding:9px 18px;font-weight:600;cursor:pointer}.comment-submit button:hover{background:#245ce0}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media(max-width:720px){.comment-fields{grid-template-columns:1fr}.comment.reply{margin-left:10px}}
[data-theme=dark] .comment{border-color:#222a35}[data-theme=dark] .comment.reply{background:#151b24;border-left-color:#34425e}
[data-theme=dark] .comment-text{color:#c3cad5}[data-theme=dark] .owner-badge{background:#3a2f12;color:#f0c35a}
[data-theme=dark] .comment-form label{color:#b8c1ce}[data-theme=dark] .comment-form input,[data-theme=dark] .comment-form textarea{background:#161c25;border-color:#28313f}
[data-theme=dark] .comment-notice{background:#12301f;color:#7fd3a0}[data-theme=dark] .comment-error{background:#3a1717;color:#f09a9a}