:root { color-scheme: light; --bg:#FFFFFF; --ink:#272727; --muted:#707070; --line:#e5e5e5; --accent:#525252; --soft:#f5f5f5; --wash:#e7e7e7; --paper:#fafafa; --blue:#dedede; --peach:#e9e9e9; --stroke:#656565; --focus:#525252; }
:root[data-theme="dark"] { color-scheme:dark; --bg:#18181B; --ink:#e5e5e5; --muted:#ababab; --line:#363636; --accent:#c0c0c0; --soft:#242424; --wash:#333333; --paper:#282828; --blue:#3b3b3b; --peach:#424242; --stroke:#bababa; --focus:#d4d4d4; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased; }
button, a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; }
button, a { color:inherit; }
a { text-decoration:none; }
button { border:0; background:none; cursor:pointer; }
button:focus-visible, a:focus-visible { outline:2px solid var(--focus); outline-offset:5px; border-radius:3px; }
a:hover, button:hover { color:var(--accent); }
::selection { background:var(--wash); }
.wrap { width:min(936px, calc(100% - 72px)); margin-inline:auto; }
.skip { position:absolute; top:-100px; left:24px; padding:8px 16px; background:var(--bg); z-index:5; }
.skip:focus { top:8px; }
.header { min-height:100px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav { display:flex; align-items:center; gap:23px; font-size:12px; color:var(--muted); }
.nav-link { display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0; white-space:nowrap; }
.icon { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.github-icon { fill:currentColor; stroke:none; }
.nav-divider { width:1px; height:15px; background:var(--line); }
.lang { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.lang button { min-height:44px; padding:0 2px; color:var(--muted); font-size:12px; }
.lang button[aria-pressed="true"] { color:var(--ink); font-weight:650; }
.lang span { opacity:.55; }
.theme-toggle { display:grid; place-items:center; width:36px; height:44px; margin-left:-12px; padding:6px; }
.theme-toggle .icon { width:18px; height:18px; }
[data-theme="light"] .sun, [data-theme="dark"] .moon { display:none; }
.intro { display:flex; align-items:center; justify-content:space-between; gap:44px; padding:48px 0 49px; }
.intro-copy { max-width:620px; }
h1 { margin:0 0 19px; line-height:1.18; font-size:38px; letter-spacing:-1.7px; font-weight:660; }
.intro-text { font-size:16px; color:var(--muted); max-width:535px; line-height:1.85; margin:0; }
.section { margin-top:16px; }
.section + .section { margin-top:30px; }
.section-head { display:flex; align-items:baseline; gap:11px; padding:0 0 12px; border-bottom:1px solid var(--line); }
h2 { font-size:18px; margin:0; font-weight:620; letter-spacing:-.4px; }
.section-head span { font-size:10px; color:var(--muted); letter-spacing:.035em; }
.entry { display:flex; align-items:center; gap:25px; padding:20px 0; }
.entry + .entry { border-top:1px solid var(--line); }
.art { width:140px; height:89px; flex:0 0 140px; display:block; }
.drawing { fill:none; stroke:var(--stroke); stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.drawing .wash { fill:var(--wash); stroke:none; }
.drawing .paper { fill:var(--paper); }
.drawing .blue { fill:var(--blue); stroke:none; }
.drawing .peach { fill:var(--peach); stroke:none; }
.drawing .detail { stroke-width:1.1; }
.drawing .dotted { stroke-dasharray:3 5; }
.entry-copy { flex:1; min-width:0; }
h3 { margin:0 0 6px; font-size:17px; line-height:1.35; letter-spacing:-.35px; font-weight:610; }
.entry-copy p { margin:0; max-width:550px; font-size:13px; color:var(--muted); line-height:1.75; }
.entry-meta { margin-top:7px; color:var(--muted); font-size:10px; letter-spacing:.025em; }
.entry-action { min-width:70px; align-self:center; display:inline-flex; justify-content:flex-end; align-items:center; gap:6px; padding:8px 0 8px 9px; color:var(--muted); font-size:11px; white-space:nowrap; }
.entry-action .icon { width:13px; height:13px; }
.footer { display:flex; align-items:center; justify-content:space-between; gap:24px; border-top:1px solid var(--line); margin-top:30px; padding:22px 0 32px; color:var(--muted); font-size:10px; }
.footer-note { margin:0; max-width:580px; }
.footer-sign { white-space:nowrap; letter-spacing:.04em; }
.wechat-
.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; }
@media (min-width:1200px) { .intro { padding-top:55px; padding-bottom:55px; } }
@media (max-width:650px) {
.wrap { width:calc(100% - 40px); }
.header { min-height:84px; gap:12px; }
.nav { gap:14px; }
.nav-link .nav-label { display:none; }
.nav-divider { display:none; }
.theme-toggle { margin-left:-7px; width:30px; }
.intro { gap:17px; padding:38px 0 38px; align-items:flex-start; }
h1 { font-size:29px; letter-spacing:-1.1px; margin-bottom:15px; }
.intro-text { font-size:14px; line-height:1.85; }
.section { margin-top:10px; }
.section + .section { margin-top:27px; }
h2 { font-size:17px; }
.section-head { gap:9px; padding-bottom:10px; }
.section-head span { font-size:9px; }
.entry { gap:16px; padding:20px 0; position:relative; align-items:flex-start; }
.art { width:88px; height:77px; flex-basis:88px; margin-top:5px; }
h3 { font-size:16px; margin-bottom:6px; }
.entry-copy p { font-size:12px; line-height:1.75; }
.entry-meta { font-size:9px; margin-top:6px; }
.entry-action { min-width:0; width:40px; height:44px; padding:12px; position:absolute; right:-12px; top:6px; font-size:0; }
.entry-action .icon { width:14px; height:14px; }
.entry-copy h3 { padding-right:20px; }
.footer { align-items:flex-start; margin-top:22px; padding:20px 0 25px; font-size:9px; gap:20px; }
.footer-note { max-width:245px; }
}
@media (max-width:360px) { .wrap { width:calc(100% - 32px); } .nav { gap:11px; } .intro { gap:9px; } .portrait { width:83px; } h1 { font-size:26px; } .entry { gap:12px; } .art { width:72px; flex-basis:72px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
:root { --art-veil:rgba(255,255,255,.52); }
:root[data-theme="dark"] { --art-veil:rgba(24,24,27,.60); }
.wrap { width:70%; padding-inline:clamp(32px,5vw,88px); margin:0; position:relative; z-index:1; }
.wrap > .header, .wrap > main, .wrap > .footer { max-width:800px; margin-inline:auto; }
.header { min-height:100px; justify-content:flex-start; }
.nav { justify-content:flex-start; }
.intro { display:block; padding:52px 0 52px; }
.intro-copy { max-width:560px; }
h1 { font-size:48px; line-height:1.15; letter-spacing:-2.1px; margin:0 0 10px; }
.intro-text { max-width:460px; font-size:15px; line-height:1.9; }
.art { width:112px; flex-basis:112px; }
.entry { gap:19px; }
.entry-action { min-width:58px; }
.painting-panel { position:fixed; top:0; right:0; bottom:0; width:30%; height:100vh; overflow:hidden; z-index:0; pointer-events:none; background:var(--bg); }
.painting-panel img { display:block; width:100%; height:100%; object-fit:cover; object-position:left center; filter:saturate(.55); }
.painting-panel::before { content:""; position:absolute; inset:0; pointer-events:none; }
.painting-panel::before { background:var(--art-veil); z-index:1; }
@media (min-width:1101px) and (max-width:1199px) {
.wrap { padding-inline:32px; }
.art { width:88px; flex-basis:88px; }
.entry { gap:14px; }
.entry-action { min-width:45px; }
.entry-copy p { font-size:12px; }
.nav { gap:18px; }
}
@media (max-width:1100px), (orientation:portrait), (hover:none), (pointer:coarse) {
.painting-panel { display:none; }
.wrap { width:min(720px,calc(100% - 64px)); padding:0; margin-inline:auto; }
.header { min-height:90px; }
.intro { padding:36px 0 42px; }
.intro-text { max-width:510px; }
.art { width:112px; flex-basis:112px; }
}
@media (max-width:650px) {
.wrap { width:calc(100% - 40px); }
.header { min-height:80px; }
.nav { gap:21px; }
.nav-link .nav-label { display:inline; }
.nav-divider { display:block; }
.intro { padding:35px 0 40px; }
h1 { font-size:42px; letter-spacing:-1.8px; margin-bottom:9px; }
.intro-text { font-size:14px; max-width:390px; }
.entry { gap:16px; }
.art { width:88px; flex-basis:88px; }
.entry-action { min-width:0; }
}
@media (max-width:400px) {
.nav { gap:16px; }
.nav-divider { display:none; }
}
@media (max-width:360px) {
.wrap { width:calc(100% - 32px); }
.nav { gap:15px; }
.nav-link .nav-label { display:none; }
.entry { gap:12px; }
.art { width:72px; flex-basis:72px; }
}
.nav .nav-link { width:36px; justify-content:center; }
.nav .nav-link .icon { width:20px; height:20px; }
.entry-copy .project-tagline { color:var(--ink); font-weight:500; margin:0 0 5px; }
.source-link { display:inline-flex; align-items:center; gap:4px; min-height:28px; font-size:11px; }
.source-link .icon { width:11px; height:11px; }
.entry { padding-block:24px; }
.entry-meta { margin-top:6px; }
#wechat-qr { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; filter:none; opacity:1; }
.wechat-
@media (max-width:650px) { .entry { padding-block:21px; } .wechat- }
.entry { position:relative; isolation:isolate; }
.project-link::after { content:""; position:absolute; inset:0; z-index:1; border-radius:4px; }
.project-link:hover { color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
.project-link:focus-visible { outline:none; }
.project-link:focus-visible::after { outline:2px solid var(--focus); outline-offset:-3px; }
.project-actions { position:relative; z-index:2; display:flex; gap:2px; flex:0 0 auto; align-self:center; }
.project-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:7px; color:var(--muted); }
.project-icon .icon { width:18px; height:18px; }
.project-icon:hover { color:var(--ink); background:var(--soft); }
.project-icon:focus-visible { outline-offset:2px; border-radius:7px; }
@media (max-width:650px) {
.entry { display:grid; grid-template-columns:88px minmax(0,1fr); column-gap:16px; row-gap:8px; }
.entry > .art { grid-column:1; grid-row:1; }
.entry-copy { grid-column:2; grid-row:1; }
.entry-copy h3 { padding-right:0; }
.project-actions { grid-column:2; grid-row:2; justify-self:end; align-self:start; }
}
@media (max-width:360px) { .entry { grid-template-columns:72px minmax(0,1fr); column-gap:12px; } }
.header { min-height:calc(56px + env(safe-area-inset-top, 0px)); padding-top:env(safe-area-inset-top, 0px); }
.intro { padding:24px 0 30px; }
@media (max-width:650px) { .intro { padding:20px 0 28px; } }
.painting-panel picture { display:contents; }
.painting-panel img { opacity:0; }
.painting-panel.painting-ready img { opacity:1; }
.wechat-control { position:relative; display:inline-flex; align-items:center; }
.wechat-popover { position:absolute; top:calc(100% + 8px); left:var(--qr-left,0px); z-index:20; width:min(264px,calc(100vw - 24px),calc(100dvh - 80px)); padding:16px; border:1px solid #e5e5e5; border-radius:6px; background:#fff; box-shadow:0 6px 24px #00000014; }
.wechat-popover[hidden] { display:none; }
.wechat-popover::before { content:""; position:absolute; left:0; right:0; top:-10px; height:10px; }

.painting-credit { position:absolute; left:20px; right:20px; top:16px; text-align:right; z-index:2; margin:0; color:var(--ink); opacity:.55; font-size:11px; font-weight:400; line-height:1.5; letter-spacing:.01em; text-shadow:none; }

:root[data-theme="dark"] .painting-credit { opacity:.4; }

/* Writing shares the project layout, with a visible article link in both languages. */
:root { --light-path:#477fa5; }
:root[data-theme="dark"] { --light-path:#8bb8d6; }
.drawing .light-path { stroke:var(--light-path); }
.drawing .light-dot { fill:var(--light-path); stroke:none; }
.writing-link { font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "DejaVu Sans", sans-serif; display:inline-flex; align-items:center; min-height:44px; margin-top:4px; font-size:12px; color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
.writing-link:hover { color:var(--accent); }