:root{color-scheme:light;--bg:#faf9f6;--text:#292d29;--muted:#72746e;--line:#e5e5de;--hover:#efefe9;--accent:#4c6750;--panel:#fffefa}
:root[data-theme=dark]{color-scheme:dark;--bg:#191b19;--text:#e9eae4;--muted:#a1a69b;--line:#343830;--hover:#242822;--accent:#acc49e;--panel:#232620}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-size:16px;-webkit-font-smoothing:antialiased;transition:background .2s,color .2s}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:5px;border-radius:4px}.page{max-width:720px;margin:auto;padding:0 32px}.topbar{height:124px;display:flex;align-items:center;justify-content:space-between}.monogram{font:italic 32px Georgia,serif;letter-spacing:-3px}.monogram span{color:var(--accent)}nav{display:flex;align-items:center;gap:16px}nav button{min-height:40px;font-size:14px;padding:8px 0;color:var(--muted)}nav button:hover{color:var(--text)}nav button span{opacity:.35;margin:0 6px}.divider{width:1px;height:14px;background:var(--line)}.theme{width:28px;display:grid;place-items:center}.theme svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5}.intro{padding-top:35px;margin-bottom:80px}#avatar{display:block;border-radius:26px;object-fit:cover;margin-bottom:27px}.name-row{display:flex;gap:15px;align-items:baseline;margin-bottom:22px}h1{font-size:32px;line-height:1.3;letter-spacing:-1px;margin:0;font-weight:600}#other-name{font-family:Georgia,serif;font-size:22px;color:var(--muted)}p{line-height:1.95;margin:0 0 12px;max-width:620px}#more{color:var(--muted)}.socials{display:flex;gap:24px;flex-wrap:wrap;margin-top:27px}.socials a,.socials button{font-size:14px;color:var(--muted);padding:4px 0;border-bottom:1px solid transparent}.socials a:hover,.socials button:hover{color:var(--accent);border-color:var(--accent)}.project-section{margin-bottom:56px}.section-heading{display:flex;align-items:center;gap:12px}.section-heading h2{font-size:18px;font-weight:550;letter-spacing:.1px;margin:0}.count{font:12px ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:2px 5px}.section-note{font-size:14px;color:var(--muted);margin:8px 0 22px;line-height:1.7}.project{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 12px;margin:0 -12px;border-radius:9px;transition:background .15s}.project:hover{background:var(--hover)}.project h3{font-size:16px;line-height:1.55;font-weight:500;margin:0 0 5px}.project p{font-size:14px;color:var(--muted);line-height:1.8;margin:0}.project-icon{color:var(--muted);opacity:.5;flex-shrink:0;transition:opacity .15s}.project:hover .project-icon{opacity:1;color:var(--accent)}.project-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.25}footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:15px;padding:27px 0 44px;font-size:12px;color:var(--muted);letter-spacing:.15px}dialog{border:1px solid var(--line);border-radius:20px;padding:36px;background:var(--panel);color:var(--text);max-width:min(400px,calc(100vw - 32px));width:100%;text-align:center}dialog::backdrop{background:#0007;backdrop-filter:blur(5px)}dialog h2{font-size:20px;margin:0 0 18px}.close{position:absolute;right:12px;top:8px;font-size:26px;width:36px;height:36px;color:var(--muted)}dialog img{width:240px;max-width:100%;height:auto;border-radius:8px}dialog p{font-size:14px;color:var(--muted);margin-top:12px}.wechat-id{font:24px ui-monospace,monospace;margin:24px 0;user-select:all}.copy{background:var(--text);color:var(--bg);border-radius:8px;padding:10px 25px;font-size:14px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:11px 20px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s}#toast.visible{opacity:1}@media(max-width:600px){.page{padding:0 25px}.topbar{height:90px}.intro{padding-top:30px;margin-bottom:62px}h1{font-size:30px}.socials{gap:22px}.project{padding:16px 8px;margin:0 -8px;gap:12px}.project-section{margin-bottom:42px}.section-note{margin-bottom:16px}footer{padding-bottom:30px}#avatar{width:76px;height:76px;border-radius:24px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}
/* Editorial typography: serif display, calm and readable interface text. */
:root{--serif:"Noto Serif SC","Songti SC","STSong","SimSun",serif;--sans:"Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
body{font-family:var(--sans);cursor:default;caret-color:transparent}
h1{font-family:var(--serif);font-size:36px;font-weight:500;letter-spacing:.06em}
html[lang=en] h1{font-family:Georgia,"Times New Roman",serif;font-size:40px;letter-spacing:-.04em;font-weight:400}
#other-name{font-style:italic;font-size:24px}html[lang=en] #other-name{font-family:var(--serif);font-style:normal;font-size:22px}
#bio{font-family:var(--serif);font-size:17px;line-height:2;letter-spacing:.025em}
html[lang=en] #bio{font-family:Georgia,serif;font-size:19px;letter-spacing:0;line-height:1.85}
.project h3{font-family:var(--serif);font-size:17px;font-weight:500;line-height:1.7}
html[lang=en] .project h3{font-family:Georgia,serif;font-size:19px;font-weight:400}
button,a{cursor:pointer}input,textarea,[contenteditable=true]{caret-color:auto;cursor:text}.wechat-id{cursor:text;caret-color:auto}
.socials{gap:22px}.socials a,.socials button{display:inline-flex;align-items:center;gap:7px;min-height:36px}.socials svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;flex:none}
.project-tabs{display:flex;gap:32px;border-bottom:1px solid var(--line);margin-bottom:22px}.project-tabs button{position:relative;display:flex;align-items:center;gap:8px;padding:0 0 17px;min-height:44px;color:var(--muted);font-size:16px;transition:color .2s,transform .2s}.project-tabs small{font:11px ui-monospace,Consolas,monospace;opacity:.65}.project-tabs button[aria-selected=true]{color:var(--text)}.project-tabs button::after{content:"";position:absolute;height:2px;background:var(--accent);bottom:-1px;left:0;right:0;transform:scaleX(0);transform-origin:left;transition:transform .25s}.project-tabs button[aria-selected=true]::after{transform:scaleX(1)}.project-tabs button:hover{color:var(--accent)}.project-tabs button:active{transform:translateY(1px)}
.project-section[hidden]{display:none}.project-section{animation:panel-in .28s ease-out;margin-bottom:48px}.section-note{margin:0 0 18px}.project{transition:background .2s,transform .2s}.project:hover{transform:translateX(3px)}.project:active{transform:translateX(3px) scale(.992)}
#avatar{cursor:grab;user-select:none;-webkit-user-drag:none;transition:transform .55s cubic-bezier(.2,1.4,.4,1),box-shadow .25s}#avatar:hover{transform:rotate(-3deg);box-shadow:0 8px 24px #0000000a}#avatar.dragging{cursor:grabbing;transition:none}
.click-ring{position:fixed;z-index:100;pointer-events:none;width:8px;height:8px;border:1px solid var(--accent);border-radius:50%;animation:click-ring .45s ease-out forwards}
@keyframes click-ring{from{transform:translate(-50%,-50%) scale(.4);opacity:.35}to{transform:translate(-50%,-50%) scale(4);opacity:0}}
@keyframes panel-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){h1{font-size:32px}.project-tabs{gap:27px}.socials{gap:12px 18px}.socials a,.socials button{font-size:13px}.project h3{font-size:17px}#bio{font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}#avatar:hover,.project:hover,.project:active{transform:none}.click-ring{display:none}}
/* One Chinese type family throughout both language versions. */
:root{--serif:Georgia,"Noto Serif SC","Songti SC","STSong","SimSun",serif;--sans:var(--serif)}
body,button,#bio,#more,.project p,.section-note,.socials a,.socials button,.project-tabs button,footer,dialog,dialog p{font-family:var(--serif)}
#bio{font-size:16px;line-height:2;letter-spacing:0}html[lang=en] #bio{font-family:var(--serif);font-size:17px}
.socials{gap:12px 24px}footer{flex-wrap:wrap;line-height:1.9}.socials .social-icon{width:18px;height:18px;display:block;flex:none;background:currentColor;mask:var(--icon) center/contain no-repeat;-webkit-mask:var(--icon) center/contain no-repeat}
@media(max-width:600px){.socials{gap:6px 17px}.socials a,.socials button{font-size:13px}}
.socials .social-icon{background:none!important;mask:none!important;-webkit-mask:none!important;object-fit:contain;opacity:.64}
:root[data-theme=dark] .socials .social-icon{filter:invert(1);opacity:.72}
.socials #email{order:1}.socials #wechat{order:2}.socials #newsletter{order:3}.socials #xhs{order:4}
