@font-face {
  font-family: 'Home Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/home-sans-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Home Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/home-sans-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Home Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/home-sans-2.ttf) format('truetype');
}

@font-face{font-family:Moon;src:url('/assets/moon-sans-400.ttf')}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:95px}
body{margin:0;background:#101015;color:#f0ece4;font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Home Sans",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid #ad7fbb;outline-offset:6px}
button{border:0;background:none}
h1,h2,h3,p{margin:0}
::selection{background:#d9c5ea;color:#232028}
.skip,.sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
.skip:focus{width:auto;height:auto;clip-path:none;z-index:20;padding:12px;background:#fff;color:#111}
.scene-layer{position:fixed;inset:0;z-index:0;background:#101015}
.scene-poster,#moon-canvas,.scene-shade{position:absolute;width:100%;height:100%;inset:0}
.scene-poster{object-fit:cover}
.scene-ready .scene-poster{opacity:0}
.scene-shade{background:linear-gradient(180deg,#0f111742,transparent 25%,transparent 42%,#0e0d1880 75%,#101015 100%);pointer-events:none}
.header{position:fixed;inset:0 0 auto;z-index:8;display:flex;align-items:center;justify-content:space-between;padding:25px 5vw;transition:color .3s,background .3s}
.wordmark{font-size:22px;font-weight:600;letter-spacing:-1px}
.wordmark>span{font-size:10px;vertical-align:top;margin:2px 0 0 5px;display:inline-block}
.header nav{display:flex;gap:28px;align-items:center;font-size:14px;font-weight:500}
.header nav a{min-height:44px;display:grid;place-items:center}
.header button{width:44px;height:44px;border:1px solid #ffffff35;border-radius:50%;display:grid;place-items:center}
.header svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
.header.reading{color:#28252c;background:#f3f1ebed;backdrop-filter:blur(16px);border-bottom:1px solid #2924310d}
.header.reading button{border-color:#27232b2a}
.hero{height:210svh;position:relative}
.hero-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.hero-copy{position:absolute;left:10.5%;bottom:16%;max-width:80%}
.kicker{display:block;font-size:14px;line-height:1.5;letter-spacing:0;font-weight:500;margin-bottom:18px;color:#f5f5f7d9}
.hero h1{font-family:inherit;font-size:clamp(58px,7.6vw,130px);letter-spacing:-.055em;line-height:1.05;font-weight:600}
.hero h1 span{color:#beb6ce}
.hero-caption{font-size:18px;line-height:1.6;margin-top:22px;color:#f5f5f7d9;letter-spacing:0}
.reveal-copy{position:absolute;right:8%;top:37%;opacity:0}
.reveal-copy h2{font-size:clamp(32px,3.6vw,62px);font-weight:500;line-height:1.3;letter-spacing:-.025em}
.reveal-copy p{font-size:16px;line-height:1.6;color:#f5f5f7d9;margin-top:22px}
.hero-foot{position:absolute;bottom:32px;left:10.5%;right:5%;font-size:13px;line-height:1.5;letter-spacing:0;color:#f5f5f7c7}
.hero-foot span span{display:inline-block;margin-left:8px}
.ruler{position:fixed;left:27px;top:35%;width:26px;height:210px;z-index:9;color:#e9e6e3a3;pointer-events:none}
.ruler-word{writing-mode:vertical-rl;font-size:8px;letter-spacing:.16em;position:absolute;left:-12px;top:-5px}
.ticks{height:164px;margin-top:0;background:repeating-linear-gradient(to bottom,currentColor 0 1px,transparent 1px 9px);width:9px;position:relative}
.ticks i{position:absolute;left:-3px;top:calc(var(--progress,0)*160px);height:2px;width:21px;background:#e5d4ed}
.ticks b{position:absolute;left:14px;font-size:10px;line-height:1.4;font-weight:400;font-variant-numeric:tabular-nums}
.ticks b:nth-of-type(1){top:-7px}
.ticks b:nth-of-type(2){top:74px}
.ticks b:nth-of-type(3){bottom:-5px}
.ruler-phase{display:block;font-size:12px;margin-top:17px;white-space:nowrap}
.reading-mode .ruler{color:#807782}
.reading-mode .ticks i{background:#504056}
.content-width{max-width:1120px;margin:auto}
.writing{position:relative;background:#f3f1eb;color:#28252c;padding:106px 8% 85px;z-index:2;border-radius:32px 32px 0 0;margin-top:-32px}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:48px}
.section-index{font-size:10px;letter-spacing:.18em;color:#817b82;margin-bottom:22px}
.section-heading h2{font-size:clamp(32px,3.3vw,50px);line-height:1.2;letter-spacing:-.04em;font-weight:500}
.section-heading h2 span{font-size:13px;vertical-align:top;margin-left:14px;color:#8c848c;letter-spacing:0}
.section-heading>p{font-size:15px;line-height:1.6;color:#6e6871}
/* Article previews come from their documents, never decorative artwork. */
.article-list{list-style:none;padding:0;margin:0;border-top:1px solid #3023341a}
.article-list>li{border-bottom:1px solid #3023341a}
.article-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;padding:34px 0;transition:color .2s}
.article-row.has-image{grid-template-columns:minmax(0,1fr) 184px auto}
.article-copy{min-width:0}
.article-category{font-size:12px;line-height:1.5;color:#6e6573;font-weight:500}
.article-copy h3{font-size:clamp(21px,2.2vw,29px);font-weight:500;letter-spacing:-.025em;line-height:1.4;margin:8px 0 10px}
.article-copy p{font-size:15px;line-height:1.7;color:#706975;max-width:620px}
.article-copy time{display:block;font-size:12px;color:#79717d;margin-top:14px;font-variant-numeric:tabular-nums}
.article-image{display:block;width:184px;height:124px;object-fit:contain;object-position:center;border-radius:10px;background:#eae7e1}
.article-arrow{font-size:22px;color:#77667e;transition:transform .2s}
.article-row:hover{color:#66506f}.article-row:hover .article-arrow{transform:translate(2px,-2px)}
.writing-end{display:flex;justify-content:space-between;margin-top:55px;padding-top:24px;border-top:1px solid #30233417;font-size:13px;line-height:1.6;color:#706975}
.writing-end a{color:#413746}
.writing-end a span{margin-left:12px}
.elsewhere{position:relative;background:#e8e5de;color:#3e3742;padding:70px 8% 0;z-index:2}
.elsewhere-heading{text-align:center}
.elsewhere-heading h2{font-weight:400;font-size:27px;letter-spacing:-.035em}
.elsewhere-heading>p:last-child{font-size:15px;color:#706975;margin-top:14px}
.dock{display:flex;align-items:center;justify-content:center;gap:42px;margin:42px auto 65px;max-width:500px}
.dock>a,.dock>button{display:flex;flex-direction:column;align-items:center;gap:12px;padding:0;font-size:13px;line-height:1.5;color:#615a67}
.app-icon{width:65px;height:65px;border-radius:19px;display:grid;place-items:center;border:1px solid #fff7;box-shadow:0 6px 10px #37303910,inset 0 1px 1px #ffffff80;transition:transform .25s,box-shadow .25s}
.app-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.dock a:hover .app-icon,.dock button:hover .app-icon{transform:translateY(-7px);box-shadow:0 12px 18px #3730391e}
.paper-icon{background:linear-gradient(145deg,#fffbef,#ded8c9);color:#82735e}
.code-icon{background:linear-gradient(145deg,#55515b,#2d2934);color:#eee9e6;border-color:#ffffff26}
.zhihu-icon{background:linear-gradient(145deg,#e3e6e3,#c1cacb);color:#4f6870;font-size:31px;font-family:serif}
.tools-icon{background:linear-gradient(145deg,#e5dde8,#cdc0d1);color:#796181}
.footer{border-top:1px solid #29203414;padding:26px 0;display:flex;justify-content:space-between;font-size:12px;line-height:1.6;color:#706975;align-items:center}
.footer>a:first-child{font-size:16px;font-weight:500;color:#64576c;letter-spacing:-.04em}
dialog{border:0;padding:0;background:#f5f3ed;color:#2a2530}
dialog::backdrop{background:#141017a8;backdrop-filter:blur(8px)}
#reader{width:min(1100px,94vw);height:92svh;max-height:none;border-radius:17px;overflow:auto}
.reader-bar{position:sticky;top:0;background:#f5f3edef;backdrop-filter:blur(18px);display:flex;justify-content:space-between;align-items:center;padding:20px 32px;border-bottom:1px solid #33263e12;font-size:10px;color:#8b818f;z-index:2}
.reader-bar button{font-size:12px;color:#4a3c51;padding:0}
.reader-body{max-width:740px;padding:70px 42px 90px;margin:auto}
.reader-body h1{font-size:40px;line-height:1.4;font-weight:500;letter-spacing:-.04em}
.reader-meta{font-size:11px;color:#9a929a;margin:20px 0 42px}
.reader-lead{font-size:18px;line-height:1.9;color:#645a6b}
.reader-body h2{font-size:23px;font-weight:500;margin:50px 0 20px}
.reader-body p{margin-bottom:18px}
.reader-equation{font:italic 25px/1.7 Georgia,serif;background:#e9e5e1;padding:25px;border-radius:10px;text-align:center;margin:32px 0}
.reader-body .reader-preview-note{font-size:11px;color:#a298a2;border-top:1px solid #35283f1c;padding-top:28px;margin-top:60px}
#tools-dialog{border-radius:22px;width:min(460px,90vw);padding:35px}
#tools-close{float:right;font-size:22px}
#tools-dialog h2{font-weight:400;margin-bottom:20px}
#tools-dialog p{font-size:14px;color:#827685}
.reading-mode .scene-layer{pointer-events:none}

@media(max-width:760px){.header{padding:16px 24px}
.wordmark{font-size:19px}
.header nav{gap:20px}
.ruler{left:12px;width:20px}
.ticks{width:6px}
.ticks b{left:10px}
.ticks i{width:15px}
.hero{height:185svh}
.hero-copy{left:12%;bottom:18%;max-width:82%}
.hero h1{font-size:clamp(49px,10vw,72px)}
.hero-caption{font-size:15px;margin-top:18px}
.kicker{font-size:13px;letter-spacing:0;margin-bottom:16px}
.reveal-copy{right:7%;top:56%}
.reveal-copy h2{font-size:28px}
.reveal-copy p{font-size:14px}
.hero-foot{font-size:12px;left:12%;right:6%}
.writing{padding:70px 7% 55px}
.reading-mode .ruler{display:none}
.section-heading{margin-bottom:32px}
.section-heading>p{display:none}
.article-row{gap:16px;padding:26px 0}
.article-row.has-image{grid-template-columns:minmax(0,1fr) 96px}
.article-copy h3{font-size:19px;margin:6px 0 8px}
.article-copy p{font-size:13px;line-height:1.65}
.article-image{width:96px;height:84px;border-radius:7px}
.article-row.has-image .article-arrow{display:none}
.article-copy time{font-size:12px;margin-top:12px}
.writing-end{font-size:12px;gap:20px}
.writing-end>span{max-width:190px}
.elsewhere{padding:54px 7% 0}
.elsewhere-heading h2{font-size:23px}
.dock{gap:25px}
.app-icon{width:56px;height:56px;border-radius:17px}
.dock>a,.dock>button{font-size:12px}
.footer{flex-wrap:wrap;gap:22px}
.footer>span{order:3;width:100%;text-align:center}
.reader-body{padding:35px 25px}
.reader-body h1{font-size:30px}
.reader-lead{font-size:16px}
.reader-bar{padding:16px 20px}
.reader-bar>span:last-child{display:none}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{transition:none!important}
.hero{height:115svh}
.hero-copy{opacity:1!important}
.reveal-copy{display:none}
}