:root{color-scheme:light;--desk:#edf0e6;--ink:#293b37;--paper:#fbfaf5;--green:#416453;--serif:"Noto Serif SC","Songti SC","SimSun",serif;--sans:"Segoe UI","Microsoft YaHei",sans-serif;--hand:"LXGW WenKai","KaiTi",serif}
*{box-sizing:border-box}html{min-height:100%;scrollbar-width:thin;scrollbar-color:#a5b29e #e5e9de;scroll-behavior:auto}body{margin:0;color:var(--ink);font:14px var(--sans);overflow-x:hidden;background-color:var(--desk);background-image:linear-gradient(#748a6c27 1px,transparent 1px),linear-gradient(90deg,#748a6c27 1px,transparent 1px),linear-gradient(#748a6c18 1px,transparent 1px),linear-gradient(90deg,#748a6c18 1px,transparent 1px);background-size:32px 32px,32px 32px,160px 160px,160px 160px;background-position:-1px -1px;background-attachment:scroll}a{color:inherit;text-decoration:none}button{color:inherit;font:inherit;border:0;background:none;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid #577955;outline-offset:5px}[hidden]{display:none!important}
.site-nav{position:fixed;z-index:1000;inset:0 0 auto;height:78px;padding:0 38px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.site-nav>*{pointer-events:auto}.wordmark{font:italic 32px/1 Georgia,serif;color:var(--green)}.filters{display:flex;gap:22px;padding:12px 18px;background:#edf0e6e6;border-radius:2px;backdrop-filter:none}.filters button{font-size:12px;padding:5px 0;color:#89927f;border-bottom:1px solid transparent}.filters button[aria-pressed=true]{color:#3e5844;border-color:#667e5b}.nav-actions{display:flex;gap:18px;align-items:center;background:#edf0e6e6;padding:7px 10px;backdrop-filter:none}.back{font-size:12px}.favorites-filter{font-size:22px;white-space:nowrap}.favorites-filter span{font:11px var(--sans);vertical-align:middle}.favorites-filter[aria-pressed=true]{color:#a27e2e}.reset-layout{font:26px/1 Georgia;color:#73866c}
.intro{position:fixed;left:50%;top:50%;width:380px;transform:translate(-50%,-50%);z-index:0;text-align:center;pointer-events:none;transition:none}.intro h1{font:normal 88px/.95 Georgia,"Times New Roman",serif;letter-spacing:-.075em;margin:0 0 29px}.intro h1 span{color:#79927a}.intro-line{font:normal 44px/1.45 var(--serif);letter-spacing:.035em;margin:0 0 24px}.intro-description{font:17px/1.8 var(--hand);color:#65735e;margin:0}.reading .intro{opacity:1}.scene{position:relative;min-height:100vh;isolation:isolate;overflow-anchor:none}.reader-paper{position:absolute;z-index:200;background:var(--paper);box-shadow:0 1px 2px #34473518,4px 10px 14px -7px #34473533,16px 35px 45px -25px #34473540;transform-origin:50% 0;overflow:hidden}.reader-paper:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 49.8%,#bcb9a00c 50%,transparent 50.2%)}.reader-content{height:100%;display:flex;flex-direction:column;padding:96px 56px 48px;opacity:1}.reader-paper.settled .reader-content{opacity:1;transition:none}.reader-content h1{font:normal 32px/1.5 var(--serif);margin:0 0 23px;padding:0 0 24px;border-bottom:1px solid #76846530;outline:none}.article-body{font:16px/2.1 var(--serif);color:#485047;overflow-wrap:anywhere}.article-body p{margin:0 0 24px}.article-body .lead{font-size:18px;color:#5a7057}.article-body h3{font:normal 23px/1.6 var(--serif);margin:32px 0 18px}.article-body blockquote{font:23px/1.8 var(--hand);margin:30px 0;padding-left:20px;border-left:2px solid #9caf8d}.article-body figure{margin:25px 0;padding:16px;background:#e8eee4}.article-body figure svg{width:100%;height:100px;fill:none;stroke:#70846e}.article-body figcaption{display:none}.related-links{display:flex;gap:12px 20px;flex-wrap:wrap;border-top:1px solid #76846530;padding-top:22px;margin-top:26px;font:13px/1.7 var(--hand)}.related-links a{border-bottom:1px solid #8c9c8077;padding-bottom:3px}
.context-menu{position:fixed;z-index:1200;width:205px;background:#fbfaf2;box-shadow:1px 3px 6px #34473516,6px 12px 25px #34473525;padding:12px 0 6px;border:1px solid #b8bda34d}.menu-title{font:13px var(--hand);color:#89917c;padding:2px 17px 12px;border-bottom:1px solid #748a6c20;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.context-menu button{display:flex;align-items:center;gap:13px;padding:12px 17px;width:100%;text-align:left;font-size:13px}.context-menu button:hover,.context-menu button:focus-visible{background:#e9eddf;outline:none}.action-icon{font:20px Georgia;width:20px;text-align:center}.empty-state{position:fixed;left:50%;top:66%;transform:translateX(-50%);font:16px var(--hand);color:#8c947e}.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}.noscript{position:fixed;top:100px;left:24px;right:24px;background:white;padding:24px;z-index:1001}
@media(max-width:760px){.site-nav{padding:0 20px;height:66px}.filters{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);gap:23px;padding:12px 19px;box-shadow:0 2px 15px #3c4f3312;white-space:nowrap}.filters button{font-size:12px}.nav-actions{gap:10px;padding:6px}.intro{width:290px;top:37%}.intro h1{font-size:68px;margin-bottom:20px}.intro-line{font-size:34px;margin-bottom:20px}.intro-description{font-size:16px}.reader-content{padding:77px 26px 27px}.reader-content h1{font-size:25px;margin-bottom:17px;padding-bottom:18px}.article-body{font-size:15px;line-height:2}.article-body .lead{font-size:16px}.article-body h3{font-size:20px}.article-body blockquote{font-size:20px}.note .pin-tape{width:54px;margin-left:-27px;height:20px;top:-8px}.note .favorite-star{right:11px;top:10px;font-size:15px}.note .fold{width:22px;height:22px}.note .attachment-tape{height:20px;width:47px}.back{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* Let the inner article retain native vertical touch scrolling. Notes own dragging. */
body{touch-action:auto}.scene{touch-action:pan-y}
/* Horizontal circular desk; paper and grid share a camera translation. */
html,body{width:100%;height:100%;min-height:0;overflow:hidden;overscroll-behavior:none}body{background:var(--desk);touch-action:auto}.desk-grid{position:fixed;inset:0 -320px 0 0;pointer-events:none;background-color:var(--desk);background-image:linear-gradient(#748a6c22 1px,transparent 1px),linear-gradient(90deg,#748a6c22 1px,transparent 1px),linear-gradient(#748a6c14 1px,transparent 1px),linear-gradient(90deg,#748a6c14 1px,transparent 1px);background-size:32px 32px,32px 32px,160px 160px,160px 160px;background-position:-1px -1px;will-change:transform}.scene{position:fixed;inset:0;height:100svh;min-height:0;overflow:hidden;touch-action:pan-y}.reader-stage{position:absolute;z-index:200;isolation:isolate;transform-origin:0 0}.reader-stage .reader-paper{position:relative;width:100%;height:100%;z-index:0;transform-origin:0 0}.reader-content{padding:48px 40px 30px}.reader-stage.settled .reader-content{opacity:1;transition:none}.reader-content h1{font-size:28px;margin-bottom:18px;padding-bottom:18px}.article-body{font-size:16px}.article-body .lead{font-size:17px}.desk-controls{position:fixed;z-index:800;left:50%;bottom:20px;transform:translateX(-50%);display:flex;gap:20px;align-items:center;opacity:.8}.desk-controls button{font-size:21px;padding:4px 10px}.loop-track{width:100px;height:2px;background:#8e9e7850;position:relative}.loop-track span{position:absolute;left:0;top:-2px;width:8px;height:6px;background:#748d6e;border-radius:2px}.reading .desk-controls{opacity:0;pointer-events:none}.intro{z-index:0}.empty-state{z-index:0}
@media(max-width:760px){.reader-content{padding:36px 25px 26px}.reader-content h1{font-size:24px;margin-bottom:14px;padding-bottom:14px}.article-body{font-size:15px}.article-body .lead{font-size:16px}.intro{top:41%}.desk-controls{bottom:78px}.loop-track{width:100px}.desk-controls button{font-size:18px}.reading .filters{opacity:1}.reader-stage{z-index:200}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Persistent printed desk layer. Reading only occludes it with real paper. */
.desk-base{position:fixed;inset:0;z-index:0;pointer-events:none;isolation:isolate}.desk-base .intro{opacity:1;mix-blend-mode:multiply;transition:none}.desk-base .intro h1{color:#3e5b4a}.desk-base .intro-line{color:#485c4b}.reader-content{opacity:1!important;transition:none!important}

/* The page stays fixed. Only its typeset columns travel horizontally. */
.reader-paper{overflow:clip}.reader-content{gap:14px}.reader-viewport{position:relative;flex:1;min-height:0;width:100%;overflow:clip;touch-action:none;isolation:isolate}
.page-flow{position:absolute;inset:0;width:100%;height:100%;column-fill:auto;column-count:auto;column-gap:32px;will-change:transform;overflow:visible}
.page-flow h1{break-after:avoid}.page-flow h3{break-after:avoid;break-inside:avoid}.page-flow p{break-inside:avoid;orphans:3;widows:3}.page-flow figure,.page-flow blockquote{break-inside:avoid}.page-flow .related-links{break-inside:avoid}
.reader-pagination{display:flex;flex:none;align-items:center;justify-content:space-between;height:26px;color:#79846e;font:12px var(--sans);font-variant-numeric:tabular-nums}.reader-pagination button{padding:3px 12px;font:19px/1 Georgia}.reader-pagination button:first-child{margin-left:-12px}.reader-pagination button:last-child{margin-right:-12px}.reader-pagination button:disabled{opacity:.2;cursor:default}.page-number{letter-spacing:.14em}
.scene{overflow:clip}.reading .scene{touch-action:none}.note.is-tucked{z-index:199}
@media(max-width:760px){.reader-content{padding:34px 25px 24px;gap:12px}.reader-pagination{height:24px;font-size:11px}}

/* Cache the paper through the final frame; the content remains laid out once. */
.reader-stage{will-change:transform,opacity;contain:layout style}.reader-paper{box-shadow:2px 5px 10px #34473520,10px 22px 32px -16px #34473538}.page-flow{will-change:auto}.page-flow.is-paging{will-change:transform}

.desk-controls{transition:opacity .18s ease-out}

.reader-snapshot{z-index:195;pointer-events:none!important}

/* A quiet masthead and one continuous position marker. */
.site-nav .wordmark{order:2;margin-left:auto;width:152px;height:62px;display:flex;align-items:center}.wordmark img{display:block;width:100%;height:100%;object-fit:contain}.nav-actions{order:1;background:none;padding:0}.back{font:16px var(--hand)}.desk-controls{bottom:25px;pointer-events:none}.loop-track{width:100px;height:3px;border-radius:6px}.loop-track span{height:7px;border-radius:6px}.context-menu{border-radius:18px;overflow:hidden}.context-menu button{font:16px var(--hand)}
@media(max-width:760px){.site-nav .wordmark{width:126px;height:52px}.desk-controls{bottom:25px}.back{font-size:16px}}
.workshop-link{font:16px var(--hand);color:#697d61;padding:8px 0}.workshop-link:hover{color:#3b5d40}