@font-face{font-family:Ouyang;src:url("../../assets/font/正欧阳询楷书+简繁.TTF") format("truetype");font-display:swap}
:root{--paper:#eee9dc;--ink:#172a31;--muted:#6a7778;--red:#a73d2e;--jade:#356d75;--gold:#c79a45;--night:#0d222d;--line:rgba(23,42,49,.15);--display:Ouyang,"STKaiti","KaiTi",serif;--body:"Songti SC","STSong",serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--body)}body:before{content:"";position:fixed;inset:0;z-index:-1;opacity:.22;background-image:repeating-linear-gradient(0deg,transparent 0 4px,rgba(35,45,38,.035) 4px 5px)}
.progress{position:fixed;top:0;left:0;z-index:30;height:3px;width:0;background:var(--red)}
.masthead{position:sticky;top:0;z-index:20;display:flex;height:74px;padding:0 clamp(20px,5vw,78px);align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(238,233,220,.88);backdrop-filter:blur(15px)}.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);text-decoration:none}.brand span{display:grid;width:36px;height:36px;place-items:center;border:1px solid var(--red);color:var(--red)}nav{display:flex;gap:25px}nav a,.home{color:var(--muted);font-size:12px;text-decoration:none}
.hero{display:grid;min-height:calc(100vh - 74px);padding:70px clamp(24px,7vw,120px);grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}.eyebrow,.intro>p,.essence>p,.sources>p{color:var(--red);font-size:12px;font-weight:700;letter-spacing:.18em}.hero h1{margin:14px 0 25px;font:clamp(78px,11vw,154px)/.9 var(--display);font-weight:400}.hero h1 em,.intro h2 em,.essence h2 em{color:var(--red);font-style:normal}.hero-copy>p:last-of-type{max-width:650px;color:#56666a;font-size:clamp(17px,1.5vw,21px);line-height:2}.hero-copy>a{display:inline-flex;margin-top:25px;padding:12px 18px;gap:25px;border:1px solid var(--line);text-decoration:none}.hero-coordinate{position:relative;width:min(540px,85vw);aspect-ratio:1;margin:auto;border:1px solid rgba(53,109,117,.3);border-radius:50%}.hero-coordinate:before,.hero-coordinate:after,.hero-rings{content:"";position:absolute;inset:12%;border:1px solid rgba(53,109,117,.25);border-radius:50%}.hero-coordinate:after{inset:28%}.hero-rings:before,.hero-rings:after{content:"";position:absolute;left:50%;top:0;width:1px;height:100%;background:rgba(53,109,117,.25)}.hero-rings:after{transform:rotate(90deg)}.hero-coordinate>b{position:absolute;inset:45%;display:grid;place-items:center;border-radius:50%;background:var(--red);color:white;font:26px var(--display)}.hero-coordinate>i{position:absolute;top:-36px;left:48%;color:var(--jade);font:30px var(--display)}.hero-coordinate>span{position:absolute;font:22px var(--display)}.hero-coordinate>span:nth-of-type(1){top:8%;left:48%}.hero-coordinate>span:nth-of-type(2){bottom:8%;left:48%}.hero-coordinate>span:nth-of-type(3){top:48%;right:8%}.hero-coordinate>span:nth-of-type(4){top:48%;left:8%}
.thesis{display:flex;padding:25px clamp(20px,6vw,90px);align-items:center;justify-content:space-between;gap:25px;border-block:1px solid var(--line);color:var(--muted)}.thesis strong{color:var(--ink);font:clamp(22px,3vw,38px) var(--display);font-weight:400}
.chapter{display:grid;min-height:100vh;padding:clamp(90px,10vw,160px) clamp(22px,6vw,100px);grid-template-columns:minmax(250px,.38fr) minmax(0,.62fr);gap:clamp(45px,7vw,110px);align-items:start}.intro{position:sticky;top:125px}.intro h2{margin:16px 0 24px;font:clamp(48px,6vw,88px)/1.15 var(--display);font-weight:400}.intro>span{display:block;max-width:420px;color:var(--muted);font-size:15px;line-height:1.85}.stage{min-width:0;padding:clamp(25px,4vw,54px);border:1px solid var(--line);background:rgba(255,255,255,.38)}.night,.dark{color:#e7e2d5;background:var(--night)}.night .intro>span,.dark .intro>span{color:#9fb0b6}.night .stage,.dark .stage{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.035)}.night input,.dark input{accent-color:var(--gold)}
.compass-stage{display:grid;grid-template-columns:1fr 180px;gap:35px}.compass{position:relative;width:min(480px,100%);aspect-ratio:1;margin:auto;border:2px solid var(--jade);border-radius:50%;background:repeating-conic-gradient(from -7.5deg,rgba(53,109,117,.08) 0 14deg,transparent 14deg 15deg)}.compass:before,.compass:after{content:"";position:absolute;inset:14%;border:1px solid var(--line);border-radius:50%}.compass:after{inset:35%}.compass>b{position:absolute;inset:43%;display:grid;place-items:center;border-radius:50%;background:var(--paper);font:25px var(--display)}.mountain-label{position:absolute;left:50%;top:50%;font:15px var(--display);transform-origin:0 0}.needle{position:absolute;z-index:2;left:50%;top:9%;width:3px;height:41%;background:linear-gradient(var(--red) 0 48%,var(--ink) 48%);transform-origin:50% 100%}.needle:after{content:"";position:absolute;top:-7px;left:-5px;border:6px solid transparent;border-bottom:12px solid var(--red)}.reading{display:flex;flex-direction:column;justify-content:center}.reading small{color:var(--muted)}.reading strong{margin:7px 0 20px;font:32px var(--display);font-weight:400}.reading p{color:var(--muted);line-height:1.7}.slider-label{grid-column:1/-1;display:flex;margin-top:22px;justify-content:space-between;color:var(--muted)}input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--red)}.discover{grid-column:1/-1;margin:22px 0 0;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);line-height:1.8}
canvas{display:block;width:100%;height:auto}.sky-stage canvas{background:radial-gradient(circle,#17394a,#091922);border:1px solid rgba(255,255,255,.12)}
.grid-stage{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center}.loshu{display:grid;grid-template-columns:repeat(3,1fr);aspect-ratio:1}.loshu button{border:1px solid var(--line);background:transparent;color:var(--ink);font:clamp(28px,4vw,52px) var(--display);cursor:pointer}.loshu button:hover,.loshu button.active{background:var(--red);color:white}.loshu small{display:block;font:11px var(--body)}.grid-reading strong{display:block;margin:12px 0 22px;font:42px var(--display);font-weight:400}.grid-reading p{color:var(--muted);line-height:1.8}
.layer-controls{display:flex;flex-wrap:wrap;gap:8px}.layer-controls button,.six-principles button{padding:10px 14px;border:1px solid rgba(255,255,255,.2);color:inherit;background:transparent;cursor:pointer}.layer-controls button.active{background:var(--gold);color:var(--night)}.database-disc{position:relative;width:min(520px,90%);aspect-ratio:1;margin:40px auto;border:1px solid rgba(255,255,255,.25);border-radius:50%}.database-disc:before{content:"";position:absolute;inset:23%;border:1px solid rgba(255,255,255,.15);border-radius:50%}.database-disc>b{position:absolute;inset:43%;display:grid;place-items:center;border-radius:50%;background:var(--red);font:24px var(--display)}#layer-ring span{position:absolute;left:50%;top:50%;font:14px var(--display);transform-origin:0 0}#layer-copy{text-align:center;color:var(--gold);font:26px var(--display)}
.hall{display:flex;min-height:360px;align-items:flex-end;justify-content:center;border-bottom:14px solid #8d6947;background:linear-gradient(#d7e0db 0 68%,#c5b99d 68%)}.bay{position:relative;height:250px;flex:1;max-width:110px;border-inline:6px solid #764933}.bay:before{content:"";position:absolute;top:0;left:-12px;width:calc(100% + 24px);height:13px;background:#68422f;box-shadow:0 -18px 0 #8e372b}.bay:after{content:"";position:absolute;inset:50px 13px 0;border:1px solid rgba(104,66,47,.45);background:rgba(255,255,255,.15)}
.body-stage{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.body-figure{position:relative;min-height:480px}.body-figure i{position:absolute;display:block;background:rgba(53,109,117,.16);border:2px solid var(--jade)}.body-figure .head{left:41%;top:3%;width:80px;height:90px;border-radius:50%}.body-figure .torso{left:34%;top:22%;width:140px;height:240px;border-radius:45% 45% 18% 18%}.body-figure .arm{left:16%;top:32%;width:310px;height:50px;border-radius:30px}.body-figure span{position:absolute;left:58%;top:31%;color:var(--red)}.body-figure b{position:absolute;left:58%;top:46%;padding-left:55px;font:24px var(--display)}.body-figure b:before{content:"";position:absolute;left:0;top:50%;width:42px;border-top:2px solid var(--red)}.body-copy strong{font:38px var(--display);font-weight:400}.body-copy p{color:var(--muted);line-height:2}
.map-chapter{background:#dcd4c2}.map-stage canvas{background:#e8dfca}.six-principles{display:grid;grid-template-columns:repeat(3,1fr);margin-top:25px}.six-principles button{border-color:var(--line);color:var(--ink)}.six-principles button.active{background:var(--red);color:white}.six-principles small{display:block;margin-top:5px}.map-stage>p{color:var(--jade);font:23px var(--display)}blockquote{margin:30px 0 0;padding:25px;border-left:3px solid var(--red);background:rgba(255,255,255,.25);font:19px/1.9 var(--display)}blockquote cite{display:block;color:var(--muted);font:12px var(--body)}
.earth-chapter{color:#e9e2d3;background:#102d38}.earth-chapter .intro>span{color:#9fafb3}.earth-stage{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.035)}.earth-stage canvas{background:#0b2029}.survey-pair{display:grid;grid-template-columns:1fr 1fr;margin-top:35px;border:1px solid rgba(255,255,255,.14)}.survey-pair article{padding:28px}.survey-pair article+article{border-left:1px solid rgba(255,255,255,.14)}.survey-pair small{color:var(--gold)}.survey-pair h3{font:30px var(--display);font-weight:400}.survey-pair p{color:#b8c5c8;line-height:1.85}
.essence{padding:clamp(100px,12vw,180px) clamp(22px,8vw,140px)}.essence h2{max-width:1100px;margin:18px 0 60px;font:clamp(48px,7vw,98px)/1.25 var(--display);font-weight:400}.answer-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)}.answer-grid div{min-height:150px;padding:27px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.answer-grid div:nth-child(3n){border-right:0}.answer-grid div:nth-last-child(-n+3){border-bottom:0}.answer-grid b{display:block;margin-bottom:18px;font:24px var(--display);font-weight:400}.answer-grid span{color:var(--muted)}
.sources{padding:90px clamp(22px,8vw,140px);background:#e2dccf}.sources h2{font:50px var(--display);font-weight:400}.sources>div{display:flex;flex-wrap:wrap;gap:12px}.sources a{padding:13px 17px;border:1px solid var(--line);text-decoration:none}.note{max-width:900px;margin-top:30px;color:var(--muted);line-height:1.8}footer{display:flex;min-height:150px;padding:30px clamp(22px,6vw,100px);align-items:center;justify-content:space-between;gap:25px;flex-wrap:wrap;background:#d8cfbd}footer b{font:26px var(--display);font-weight:400}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%}
@media(max-width:800px){.masthead nav{display:none}.home{font-size:0}.home:after{content:"华夏";font-size:12px}.hero{grid-template-columns:1fr;min-height:auto}.hero-coordinate{width:min(390px,80vw)}.thesis{flex-direction:column;text-align:center}.chapter{grid-template-columns:1fr;min-height:auto}.intro{position:static}.compass-stage,.grid-stage,.body-stage{grid-template-columns:1fr}.reading{text-align:center}.six-principles{grid-template-columns:1fr 1fr}.survey-pair,.answer-grid{grid-template-columns:1fr}.survey-pair article+article{border-left:0;border-top:1px solid rgba(255,255,255,.14)}.answer-grid div{border-right:0!important;border-bottom:1px solid var(--line)!important}.answer-grid div:last-child{border-bottom:0!important}footer{align-items:flex-start;flex-direction:column}.visitor-map{margin-left:0}}