@font-face{font-family:Ouyang;src:url("../../assets/font/正欧阳询楷书+简繁.TTF") format("truetype");font-display:swap}
:root{--paper:#eee7d9;--paper2:#dfd4bf;--ink:#17292f;--muted:#6e7c7e;--red:#a83d30;--blue:#315f70;--gold:#d3a354;--night:#13272e;--line:rgba(23,41,47,.16);--display:Ouyang,"STKaiti","KaiTi",serif;--body:"Songti SC","STSong",serif;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;color:var(--ink);background:var(--paper);font-family:var(--body)}button,input{font:inherit}.grain{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.16;background:repeating-linear-gradient(7deg,rgba(73,54,32,.04) 0 1px,transparent 1px 5px);mix-blend-mode:multiply}.progress{position:fixed;left:0;top:0;z-index:60;height:3px;width:0;background:var(--red)}
.masthead{height:76px;padding:0 clamp(20px,5vw,76px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.12);background:var(--night);color:#e9e1d2;position:relative;z-index:10}.brand,.home,.masthead nav a{text-decoration:none;color:inherit}.brand{display:flex;align-items:center;gap:12px}.brand span{display:grid;place-items:center;width:38px;aspect-ratio:1;border:1px solid var(--gold);color:var(--gold);font:24px var(--display);transform:rotate(-3deg)}.brand b{font-weight:400;letter-spacing:.13em}.masthead nav{display:flex;gap:28px}.masthead nav a,.home{font-size:12px;color:#9cabb0;letter-spacing:.12em}
.hero{min-height:calc(100vh - 76px);display:grid;grid-template-columns:minmax(310px,.9fr) minmax(420px,1.15fr) minmax(320px,.86fr);background:var(--night);color:#ece5d7;overflow:hidden}.hero-copy{padding:clamp(70px,8vw,130px) clamp(26px,5vw,85px);align-self:center}.eyebrow,.chapter-no{margin:0 0 24px;color:var(--red);font-size:12px;font-weight:700;letter-spacing:.24em}.hero .eyebrow{color:var(--gold)}.hero h1{margin:0;font:clamp(56px,6.2vw,108px)/1.05 var(--display);font-weight:400}.hero h1 em{color:#e7b45f;font-style:normal}.hero-copy>p:last-of-type{max-width:530px;color:#9fb0b4;font-size:16px;line-height:1.95}.zone-tabs{display:grid;grid-template-columns:repeat(5,1fr);margin-top:42px;border:1px solid rgba(255,255,255,.14)}.zone-tabs button{min-height:74px;padding:12px 4px;border:0;border-right:1px solid rgba(255,255,255,.14);color:#8ea0a5;background:transparent;cursor:pointer}.zone-tabs button:last-child{border:0}.zone-tabs b,.zone-tabs span{display:block}.zone-tabs b{font:20px var(--display);font-weight:400}.zone-tabs span{margin-top:5px;font-size:10px}.zone-tabs button[aria-pressed=true]{color:var(--night);background:var(--gold)}
.face-stage{position:relative;display:flex;min-height:720px;align-items:center;justify-content:center;border-inline:1px solid rgba(255,255,255,.12);background:radial-gradient(circle at 50% 42%,#294a50 0,rgba(31,61,68,.45) 35%,transparent 67%),linear-gradient(135deg,#142b33,#0c2028)}.stage-heading{position:absolute;left:26px;right:26px;top:24px;display:flex;justify-content:space-between;color:#7f959b;font-size:11px;letter-spacing:.12em}.stage-heading b{color:#d8b169;font-weight:400}.face-svg{display:block;width:min(100%,590px);max-height:78vh;overflow:visible;--forehead:0;--glabella:0;--crow:0;--under-eye:0;--mouth-lines:0;--line-width:1;--exposure:0;--shadow-depth:0}.shoulders{fill:#273d42}.neck{fill:url(#neck)}.ear,.face-shape{fill:url(#skin);stroke:rgba(64,38,31,.18);stroke-width:1.5}.hair{fill:#17252a}.temple-shadow{fill:rgba(111,66,53,.07)}.exposure-wash{fill:#956551;opacity:var(--exposure)}.depth-shadows{fill:#64443d;opacity:var(--shadow-depth);filter:url(#soft);transition:opacity .55s}.brow path,.eye,.nose,.mouth,.lip-light,.wrinkles path{fill:none;stroke:#493732;stroke-linecap:round;stroke-linejoin:round}.brow path{stroke-width:7}.eye{fill:rgba(246,235,220,.88);stroke-width:3}.iris{fill:#344448}.nose{stroke-width:3;opacity:.82}.mouth{fill:none;stroke:#70453f;stroke-width:3}.lip-light{stroke:#b8796d;stroke-width:1.5;opacity:.6}.wrinkles{fill:none;stroke:#6d4b40;stroke-width:var(--line-width);transition:opacity .55s,stroke-width .55s}.forehead-lines{opacity:var(--forehead)}.glabella-lines{opacity:var(--glabella)}.crow-lines{opacity:var(--crow)}.under-eye-lines{opacity:var(--under-eye)}.mouth-lines{opacity:var(--mouth-lines)}.brow{transition:transform .55s}.mouth{transition:d .55s}.hotspots>*{fill:rgba(211,163,84,0);stroke:rgba(211,163,84,0);stroke-width:2;cursor:pointer;outline:none;transition:fill .25s,stroke .25s}.hotspots>*:hover,.hotspots>*:focus-visible,.hotspots>*.active{fill:rgba(211,163,84,.09);stroke:rgba(231,180,95,.65);stroke-dasharray:5 7}.touch-ring{fill:none;stroke:#e5b35f;stroke-width:1.5;opacity:.75;pointer-events:none;animation:ring 2.2s ease-in-out 3}.touch-ring text{fill:#e5b35f;stroke:none;font:18px var(--display)}.face-stage.touched .touch-ring{display:none}.face-note{position:absolute;left:26px;bottom:20px;margin:0;color:#708a91;font-size:11px}
.story-panel{padding:clamp(40px,4vw,68px) clamp(26px,3.6vw,60px);align-self:center}.story-head{display:flex;gap:18px;align-items:center}.story-head>span{display:grid;place-items:center;width:72px;aspect-ratio:1;border:1px solid #e0af5c;color:#e0af5c;font:38px var(--display);transform:rotate(-3deg)}.story-head small{color:#81979d;letter-spacing:.14em}.story-head h2{margin:7px 0 0;font:clamp(26px,2.4vw,42px) var(--display);font-weight:400;color:#f0e6d5}.story-lead{margin:32px 0;color:#a9b8bc;line-height:1.9}.age-line{display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center}.age-line button{padding:0;border:0;color:#748a90;background:none;cursor:pointer;text-align:left}.age-line button b,.age-line button span{display:block}.age-line button b{font:33px var(--display);font-weight:400}.age-line button span{font-size:10px}.age-line button.active{color:#e6b35d}.age-line i{height:1px;background:rgba(255,255,255,.16)}.depth-control{display:grid;grid-template-columns:1fr auto;gap:10px;margin:30px 0;color:#9aabb0;font-size:12px}.depth-control output{color:#e3b15d}.depth-control input{grid-column:1/3;width:100%;accent-color:var(--gold)}.cause-chain{margin:0;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.12)}.cause-chain li{display:grid;grid-template-columns:72px 1fr;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:12px}.cause-chain b{color:#d5a857;font-weight:400}.cause-chain span{color:#9faeb2}.story-panel blockquote{margin:28px 0 0;padding:20px 0 0;border-top:1px solid rgba(255,255,255,.12);color:#e6ddcf;font:18px/1.8 var(--display)}
.principle-strip{min-height:138px;padding:30px clamp(24px,7vw,120px);display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,56px);border-bottom:1px solid var(--line);color:var(--muted);letter-spacing:.1em}.principle-strip i{font-style:normal;color:#b7a887}.principle-strip strong{color:var(--red);font:28px var(--display);font-weight:400}
.habit-lab,.face-map,.sources{padding:clamp(90px,10vw,160px) clamp(20px,5vw,82px)}.section-head{max-width:1500px;margin:0 auto 58px;display:grid;grid-template-columns:220px minmax(360px,1fr) minmax(280px,500px);gap:40px;align-items:end}.section-head h2,.sources h2{margin:0;font:clamp(50px,6vw,92px)/1.05 var(--display);font-weight:400}.section-head h2 em{display:block;color:var(--red);font-style:normal}.section-head>p:last-child{margin:0;color:var(--muted);line-height:1.9}.habit-shell{max-width:1500px;margin:auto;display:grid;grid-template-columns:330px minmax(400px,1fr) 360px;border:1px solid var(--line);background:rgba(255,255,255,.22)}.habit-controls{padding:34px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:25px}.habit-controls label{display:grid;grid-template-columns:1fr auto;gap:10px;color:#45585d;font-size:13px}.habit-controls output{color:var(--red)}.habit-controls input{grid-column:1/3;width:100%;accent-color:var(--red)}.habit-controls button{margin-top:auto;padding:12px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}.future-face{position:relative;min-height:650px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#e9d9bf,transparent 65%)}.future-face .face-svg{width:min(90%,510px);max-height:600px}.year-dial{position:absolute;left:25px;right:25px;top:25px;display:flex;align-items:center;gap:14px;color:var(--muted);font-size:11px}.year-dial i{height:1px;flex:1;background:linear-gradient(90deg,var(--line),var(--red))}.year-dial strong{color:var(--red);font-weight:400}.habit-reading{padding:34px;display:flex;flex-direction:column;border-left:1px solid var(--line)}.habit-reading>span{color:var(--muted);font-size:11px;letter-spacing:.15em}.habit-reading>strong{margin:18px 0;font:35px/1.4 var(--display);font-weight:400;color:var(--red)}.habit-reading>p{color:var(--muted);line-height:1.9}.factor-bars{display:grid;gap:16px;margin:30px 0}.factor-bars p{margin:0;display:grid;grid-template-columns:76px 1fr;gap:12px;align-items:center;color:var(--muted);font-size:11px}.factor-bars i{height:5px;background:rgba(23,41,47,.09)}.factor-bars b{display:block;width:30%;height:100%;background:var(--blue);transition:width .45s}.habit-reading small{margin-top:auto;color:#899394;line-height:1.8}
.face-map{background:#ded5c3}.section-head.compact{grid-template-columns:220px 1fr}.map-grid{max-width:1500px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-top:2px solid var(--ink)}.map-grid article{min-height:260px;padding:30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.13)}.map-grid article:nth-child(3n){border-right:0}.map-grid article:nth-last-child(-n+3){border-bottom:0}.map-grid article>span{float:right;color:#b59867;font:56px var(--display)}.map-grid h3{margin:0 0 40px;font:30px var(--display);font-weight:400}.map-grid p{max-width:330px;color:var(--muted);line-height:2}.map-answer{color:#e9e1d3;background:var(--night)!important}.map-answer span{color:#e5b35f!important}.map-answer h3{color:#e8b65f}.map-answer p{color:#a6b5b9}
.ending{min-height:82vh;padding:110px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--night);color:#ece4d6}.ending p{color:#80959b;letter-spacing:.2em}.ending h2{margin:18px 0;font:clamp(30px,4vw,56px) var(--display);font-weight:400}.ending strong{color:#e4b15c;font:clamp(58px,9vw,142px)/1.1 var(--display);font-weight:400}.ending span{margin-top:45px;color:#a6b5b9;font:clamp(20px,2vw,30px)/1.8 var(--display)}
.sources{max-width:1700px;margin:auto}.sources h2{max-width:950px}.source-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:55px;border:1px solid var(--line)}.source-grid a{min-height:180px;padding:28px;display:flex;flex-direction:column;gap:20px;border-right:1px solid var(--line);color:inherit;text-decoration:none}.source-grid a:last-child{border:0}.source-grid b{font:24px var(--display);font-weight:400}.source-grid span{color:var(--muted);font-size:13px;line-height:1.85}footer{min-height:160px;padding:35px clamp(22px,6vw,100px);display:flex;align-items:center;justify-content:space-between;gap:25px;flex-wrap:wrap;border-top:1px solid var(--line);background:#dfd2bb}footer b{font:26px var(--display);font-weight:400}footer span{color:var(--muted)}footer a{color:var(--red);text-decoration:none}.visitor-map{width:214px;max-width:100%;overflow:hidden;margin-left:auto}.visitor-map iframe,.visitor-map img,.visitor-map canvas,.visitor-map div{max-width:100%}
@keyframes ring{0%,100%{opacity:.25;transform:scale(.95);transform-origin:298px 261px}50%{opacity:1;transform:scale(1.08);transform-origin:298px 261px}}@media(max-width:1250px){.hero{grid-template-columns:1fr 1.1fr}.story-panel{grid-column:1/3;display:grid;grid-template-columns:1fr 1fr;gap:20px 50px;border-top:1px solid rgba(255,255,255,.12)}.story-head,.story-lead{grid-column:1}.age-line,.depth-control,.cause-chain,.story-panel blockquote{grid-column:2}.story-head{grid-row:1}.story-lead{grid-row:2}.age-line{grid-row:1}.depth-control{grid-row:2}.cause-chain{grid-row:3}.story-panel blockquote{grid-row:4}.habit-shell{grid-template-columns:290px 1fr}.habit-reading{grid-column:1/3;border-left:0;border-top:1px solid var(--line)}.source-grid{grid-template-columns:1fr 1fr}.source-grid a:nth-child(2){border-right:0}.source-grid a:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:780px){.masthead{height:68px}.masthead nav{display:none}.home{font-size:0}.home:after{content:"华夏";font-size:12px}.hero{display:block}.hero-copy{padding-top:70px}.hero h1{font-size:60px}.zone-tabs{overflow-x:auto;grid-template-columns:repeat(5,82px)}.face-stage{min-height:620px;border:0;border-block:1px solid rgba(255,255,255,.12)}.face-svg{max-height:590px}.story-panel{display:block}.story-panel>*{margin-bottom:26px}.principle-strip{flex-wrap:wrap;gap:12px 18px}.section-head,.section-head.compact{display:block}.section-head h2{font-size:54px}.section-head>p:last-child{margin-top:25px}.habit-lab{padding-left:14px;padding-right:14px}.habit-shell{display:block}.habit-controls{border-right:0;border-bottom:1px solid var(--line)}.future-face{min-height:540px}.habit-reading{border-left:0}.map-grid{grid-template-columns:1fr}.map-grid article{min-height:220px;border-right:0;border-bottom:1px solid var(--line)!important}.map-grid article:last-child{border-bottom:0!important}.source-grid{grid-template-columns:1fr}.source-grid a{border-right:0!important;border-bottom:1px solid var(--line)!important}.source-grid a:last-child{border-bottom:0!important}.ending{min-height:70vh}.visitor-map{margin-left:0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}