/* Inline: css/01_原版基础样式.css */ /* --------------------- 段落 1 --------------------- */ :root{--ink:#14231f;--cream:#f2e9d5;--gold:#d9bc80;--red:#ac5847;--muted:#b9b6a7;--serif:"Noto Serif SC",serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#0e1919;color:var(--cream);font-family:var(--serif)}button,input,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #e8c88e;outline-offset:3px}.shell{height:100dvh;min-height:540px;overflow:hidden;position:relative;background:#0f1c1b}.atmosphere{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 85% at 74% 52%,#31585388,transparent 70%),linear-gradient(115deg,#101919,#203534 70%,#121a1b);transition:background 800ms}.atmosphere:after{content:"";position:absolute;inset:0;opacity:.19;background-image:url("../assets/images/image-24ec0ef96f.svg")}.shell[data-tone="paper"] .atmosphere{background:radial-gradient(circle at 73% 43%,#9d7e4e77,transparent 50%),linear-gradient(125deg,#382f26,#5b4935 65%,#262a24)}.shell[data-tone="night"] .atmosphere{background:radial-gradient(circle at 72% 35%,#4d607a88,transparent 48%),linear-gradient(130deg,#080e1b,#14253a 65%,#10141d)}.shell[data-tone="earth"] .atmosphere{background:radial-gradient(circle at 72% 50%,#9c774c88,transparent 50%),linear-gradient(120deg,#242926,#4f4533 65%,#20231f)}.shell[data-tone="fire"] .atmosphere{background:radial-gradient(circle at 70% 50%,#a2603b88,transparent 50%),linear-gradient(120deg,#1f2321,#3e3027 65%,#181d1c)}.shell:before{content:"";position:absolute;inset:21px;border:1px solid #d3bd8750;pointer-events:none;z-index:5}.brand{position:absolute;z-index:9;left:4.7vw;top:34px;display:flex;align-items:center;gap:14px;color:#e2ceb0;font-size:13px;letter-spacing:.32em}.seal{font-size:16px;letter-spacing:0;background:#a2473b;color:#fff0da;padding:8px;writing-mode:vertical-rl;line-height:1.1;box-shadow:0 4px 18px #070c0c66}.topright{position:absolute;right:5vw;top:43px;z-index:9;display:flex;gap:20px;align-items:center;font-size:11px;letter-spacing:.14em;color:#d7c5a4}.linkbtn{background:none;border:0;color:inherit;padding:5px}.linkbtn:hover{color:#fff}.bar{width:130px;height:2px;background:#d9bc8044;display:inline-block;vertical-align:middle;margin:0 9px}.bar i{display:block;height:100%;background:#e9c98f;transition:width .45s}.chapter{position:absolute;top:50%;left:4.7vw;transform:translateY(-50%);writing-mode:vertical-rl;z-index:7;font-size:11px;color:#d2b987b3;letter-spacing:.42em}.scene{position:absolute;inset:0;display:grid;grid-template-columns:minmax(320px,44%) 1fr;align-items:center;padding:115px 8.5vw 110px 10vw;gap:3vw;animation:enter .7s ease both;overflow:hidden}@keyframes enter{from{opacity:0;transform:translateY(16px);filter:blur(7px)}to{opacity:1;transform:none;filter:blur(0)}}.copy{position:relative;z-index:3;max-width:545px}.eyebrow{color:#dec28c;font-size:11px;letter-spacing:.3em;display:flex;align-items:center;gap:15px}.eyebrow:before{content:"";height:1px;width:32px;background:#dec28c}.copy h1{font-weight:400;font-size:clamp(52px,6vw,104px);line-height:1.13;letter-spacing:.08em;margin:25px 0 24px;text-shadow:0 8px 30px #07100ba0}.copy h1 em{font-size:.47em;display:block;font-style:normal;letter-spacing:.2em;color:#e5c797;margin-top:12px}.copy p{font-size:clamp(14px,1.2vw,18px);line-height:2;max-width:480px;color:#eee7d6d9;margin:0}.learning{margin-top:26px;display:flex;gap:13px;max-width:460px;border-top:1px solid #d3bd8766;padding-top:18px;color:#f1d9a9;font-size:14px;line-height:1.7}.learning strong{white-space:nowrap;font-weight:normal;color:#d6af6c}.scene-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:27px}.primary,.outline{border:1px solid #d8ba7a;padding:12px 23px;background:#d6b87d;color:#1b2926;letter-spacing:.14em;font-size:13px;transition:.25s}.outline{background:#19231e73;color:#e9d6af}.primary:hover,.outline:hover{transform:translateY(-3px);box-shadow:0 10px 25px #080d0c55}.visual{height:min(66vh,620px);min-height:330px;position:relative;display:grid;place-items:center;z-index:2}.art{position:relative;width:min(100%,650px);height:100%;display:grid;place-items:center}.halo{position:absolute;width:min(90%,540px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#e7ca8e33,#c5a97115 50%,transparent 72%);border:1px solid #e0c88a24;box-shadow:0 0 0 32px #d1b27308,0 0 0 82px #d1b27306;animation:breathe 8s ease-in-out infinite alternate}@keyframes breathe{to{transform:scale(1.07);opacity:.7}}.bigglyph{position:relative;font-size:clamp(160px,22vw,335px);color:#e8d6ae;text-shadow:0 9px 1px #a5845270,0 25px 60px #070c0b88;font-weight:400;line-height:1;animation:float 7s ease-in-out infinite}.bigglyph.small{font-size:clamp(135px,17vw,260px)}@keyframes float{50%{transform:translateY(-11px)}}.orbital{position:absolute;border:1px solid #e5c38444;border-radius:50%;width:65%;aspect-ratio:1;transform:rotateX(66deg) rotate(-27deg)}.orbital:after{content:"✦";position:absolute;right:12%;top:15%;font-size:23px;color:#e9ca8a}.artlabel{position:absolute;bottom:4%;right:7%;font-size:11px;color:#d1bb92;letter-spacing:.22em;writing-mode:vertical-rl}.landscape{position:absolute;inset:0;overflow:hidden;opacity:.8}.mountain{position:absolute;bottom:10%;width:110%;height:58%;left:-5%;background:linear-gradient(160deg,#cdb48773,#1a312f 65%);clip-path:polygon(0 85%,15% 63%,26% 72%,45% 22%,59% 59%,70% 44%,100% 94%,100% 100%,0 100%)}.mountain.two{transform:scale(1.25) translate(20%,24%);opacity:.55;filter:blur(2px)}.moon{position:absolute;right:19%;top:17%;width:120px;aspect-ratio:1;border-radius:50%;background:#f3ddb1;box-shadow:0 0 50px #f5dba577,0 0 140px #e1c08844}.river{position:absolute;bottom:4%;left:6%;width:110%;height:18%;border-top:2px solid #e4c98866;transform:rotate(-8deg);border-radius:50%;box-shadow:0 -20px 35px #e7ddc822}.paperart{width:min(85%,490px);height:78%;min-height:300px;background:linear-gradient(105deg,#e5d7b8,#f3e9d1 49%,#cdbb97);transform:rotate(-5deg);box-shadow:20px 28px 55px #050a0966, inset 0 0 0 13px #bca67e33;color:#483e2b;display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px solid #e0cea8}.paperart:before{content:"";position:absolute;inset:20px;border:1px solid #a7895980}.paperart .bigglyph{color:#443b2b;text-shadow:none;font-size:clamp(100px,15vw,220px)}.paperart small{font-size:12px;letter-spacing:.5em;z-index:1}.instrument{width:min(72%,400px);aspect-ratio:1;border:13px solid #b39059;border-radius:50%;box-shadow:0 22px 40px #03060699,inset 0 0 0 3px #eed4a1,inset 0 0 0 17px #87683e,0 0 0 12px #89734644;position:relative;background:radial-gradient(circle,#d0bc8c,#4d493b)}.instrument:after{content:"";position:absolute;inset:12%;border:1px solid #f5dfa48c;border-radius:50%}.compass-needle{position:absolute;left:50%;top:50%;width:8%;height:75%;transform:translate(-50%,-50%) rotate(15deg);z-index:2;filter:drop-shadow(3px 7px 5px #171d1c99);transition:transform .7s}.compass-needle:before{content:"";display:block;height:50%;background:#af5042;clip-path:polygon(50% 0,100% 100%,0 100%)}.compass-needle:after{content:"";display:block;height:50%;background:#222f2d;clip-path:polygon(0 0,100% 0,50% 100%)}.direction{position:absolute;color:#2f3027;font-size:19px;left:50%;transform:translateX(-50%)}.direction.n{top:8%}.direction.s{bottom:8%}.suspension-stage{position:relative;width:min(100%,760px);min-height:430px;height:100%;display:grid;grid-template-columns:minmax(300px,1.08fr) minmax(220px,.92fr);gap:20px;align-items:center;padding:18px 8px 62px}.suspension-hero{position:relative;min-height:400px;height:100%;border:1px solid #dfc58f44;border-radius:28px;background:radial-gradient(circle at 28% 18%,#f7edd4 0,#ecdfbf 36%,#c9b48c 100%);box-shadow:0 24px 50px #05090855,inset 0 0 0 1px #fff7e055;overflow:hidden}.suspension-hero:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 86% 18%,#fff9ea77,transparent 28%),url("../assets/images/image-6553a0c2ca.svg");opacity:.5;pointer-events:none}.suspension-painting{position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,#846f4b10 100%)}.suspension-painting:before{content:'';position:absolute;left:4%;bottom:8%;width:36%;height:34%;background:linear-gradient(180deg,#7f8d7d10,#7d674522),radial-gradient(circle at 25% 100%,#61705d55 0 28%,transparent 29%),radial-gradient(circle at 70% 100%,#6e745d40 0 33%,transparent 34%),linear-gradient(180deg,transparent 0 45%,#7f6a4620 46% 62%,transparent 63%);clip-path:polygon(0 100%,15% 62%,28% 68%,42% 38%,56% 74%,71% 56%,84% 81%,100% 70%,100% 100%)}.suspension-painting:after{content:'';position:absolute;right:4%;top:6%;width:26%;height:12%;background:radial-gradient(circle at 12% 58%,#b08a5440 0 18%,transparent 19%),radial-gradient(circle at 48% 42%,#b08a5433 0 16%,transparent 17%),radial-gradient(circle at 82% 64%,#b08a542c 0 15%,transparent 16%)}.suspension-model{position:absolute;left:50%;top:53%;width:min(92%,470px);height:min(84%,470px);transform:translate(-50%,-50%)}.suspension-base{position:absolute;left:50%;bottom:4%;width:82%;height:29%;transform:translateX(-50%) perspective(640px) rotateX(56deg);border-radius:18px;background:linear-gradient(145deg,#6a4323,#3b2312 42%,#8e643e 100%);box-shadow:0 24px 34px #2412066e}.suspension-base:before{content:'';position:absolute;inset:12px;background:radial-gradient(circle at 50% 48%,#7a522c 0 18%,transparent 19%),repeating-linear-gradient(90deg,#ffffff06 0 8px,#0000 8px 18px),linear-gradient(145deg,#8a6540,#4b2d18 45%,#6f4b2c 100%);border-radius:14px;border:2px solid #b98c55aa}.suspension-base:after{content:'';position:absolute;inset:0;border-radius:18px;box-shadow:inset 0 0 0 1px #eed3a34a,inset 0 -14px 24px #00000030}.suspension-dial{position:absolute;left:50%;bottom:16%;width:54%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,#ebdcc0 0 16%,#d4bd96 17% 58%,#a87c45 59% 64%,#ead9b5 65% 82%,#8c6438 83% 100%);box-shadow:0 18px 28px #130e0844}.suspension-dial:before{content:'';position:absolute;inset:8%;border-radius:50%;border:1px solid #8b6c4090;box-shadow:inset 0 0 0 1px #fff3d270}.suspension-dial:after{content:'';position:absolute;left:50%;top:50%;width:2px;height:74%;background:linear-gradient(#8f6f4533,#6e5332 14%,#715636 86%,#8f6f4533);transform:translate(-50%,-50%)}.dial-ring{position:absolute;inset:14%;border-radius:50%;border:1px solid #7b5d3870}.dial-cardinal{position:absolute;font-size:28px;color:#2f2418;font-weight:700;letter-spacing:.08em;text-shadow:0 1px 0 #fff4d3}.dial-cardinal.n{left:50%;top:9%;transform:translateX(-50%)}.dial-cardinal.s{left:50%;bottom:10%;transform:translateX(-50%)}.dial-cardinal.e{right:11%;top:50%;transform:translateY(-50%)}.dial-cardinal.w{left:11%;top:50%;transform:translateY(-50%)}.dial-ticks{position:absolute;inset:9%;border-radius:50%;background:repeating-conic-gradient(from 0deg,#7a5e3e 0 1deg,transparent 1deg 10deg)}.suspension-post{position:absolute;bottom:30%;width:13%;height:46%;border-radius:11px;background:linear-gradient(90deg,#3b2413,#81542e 36%,#57351b 68%,#a97944 100%);box-shadow:inset 0 0 0 2px #c79a60aa,inset 0 0 18px #00000024}.suspension-post.left{left:17%}.suspension-post.right{right:17%}.suspension-beam{position:absolute;left:50%;top:14%;width:59%;height:10%;transform:translateX(-50%);border-radius:11px;background:linear-gradient(180deg,#8f6036,#4b2e19 52%,#9d7142);box-shadow:inset 0 0 0 2px #d2a060aa}.beam-cap{position:absolute;top:18%;width:10%;height:64%;border-radius:9px;background:linear-gradient(180deg,#d3b47e,#8d6537);box-shadow:inset 0 0 0 1px #f3d89f}.beam-cap.left{left:2%}.beam-cap.right{right:2%}.suspension-thread{position:absolute;left:50%;top:23%;width:2px;height:36%;transform:translateX(-50%);transform-origin:top center;background:linear-gradient(180deg,#b69365,#dfcba6 50%,#96724a);box-shadow:0 0 0 1px #fff2d055}.suspension-pivot{position:absolute;left:50%;top:59%;width:18px;height:18px;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle at 30% 30%,#f6dfab,#a06a2b 72%);box-shadow:0 3px 7px #0b090622}.suspension-needle{position:absolute;left:50%;top:61.2%;width:40%;height:18px;transform:translateX(-50%) rotate(38deg);transform-origin:50% 50%;filter:drop-shadow(0 5px 8px #0000002e)}.needle-tail,.needle-head{position:absolute;top:50%;height:16px;transform:translateY(-50%)}.needle-tail{left:0;width:50%;background:linear-gradient(90deg,#5a5d61,#d0d2d6);clip-path:polygon(0 50%,20% 0,100% 18%,100% 82%,20% 100%)}.needle-head{right:0;width:50%;background:linear-gradient(90deg,#c6452a,#f18b72);clip-path:polygon(0 18%,80% 0,100% 50%,80% 100%,0 82%)}.needle-hub{position:absolute;left:50%;top:50%;width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fde7b8,#906125 75%);transform:translate(-50%,-50%);box-shadow:0 0 0 1px #f3d59b}.suspension-shadow{position:absolute;left:50%;top:66%;width:42%;height:18px;transform:translateX(-50%);background:radial-gradient(circle,#0000002e,transparent 68%);filter:blur(7px)}.model-callout{position:absolute;max-width:155px;padding:8px 10px;background:#fff8ebc8;border:1px solid #b89562b0;border-radius:14px;color:#463523;box-shadow:0 8px 18px #2414091c;font-size:12px;line-height:1.5;backdrop-filter:blur(5px)}.model-callout b{display:block;margin-bottom:2px;font-size:13px;color:#3f2817}.model-callout:after{content:'';position:absolute;width:44px;height:1px;background:#7d624191}.model-callout.thread{right:3%;top:26%}.model-callout.thread:after{left:-36px;top:50%}.model-callout.needle{right:2%;top:49%}.model-callout.needle:after{left:-48px;top:50%}.model-callout.dial{left:2%;bottom:20%}.model-callout.dial:after{right:-42px;top:50%}.suspension-side{position:relative;align-self:stretch;display:flex;flex-direction:column;gap:12px;padding:16px 0}.suspension-side h3{margin:0 0 2px;font-size:26px;font-weight:500;color:#4b2f17;letter-spacing:.16em}.suspension-side p{margin:0;color:#5a4734;font-size:13px;line-height:1.75}.principle-card{display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:start;padding:12px 13px;border-radius:18px;border:1px solid #d2b07d88;background:#f7ebd2cc;color:#4a3928;box-shadow:0 10px 24px #20110412;transition:transform .28s,box-shadow .28s,border-color .28s,background .28s}.principle-card:hover,.principle-card.active{transform:translateY(-2px);box-shadow:0 16px 26px #2011041f;border-color:#9d6a33;background:#fff4df}.principle-card button{all:unset;cursor:pointer;display:contents}.principle-num{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#9a6a37,#5f3918);color:#fff1d6;font-size:21px;box-shadow:inset 0 0 0 1px #e7c48e}.principle-copy b{display:block;font-size:15px;color:#3b2819;margin-bottom:4px}.principle-copy span{display:block;font-size:12px;line-height:1.65;color:#5f4c39}.suspension-caption{margin-top:auto;padding:10px 12px;border-left:3px solid #9a6a37;background:#efe0c1a8;font-size:12px;color:#5a4836;line-height:1.75}.controlpanel{position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);width:min(92%,430px);background:#11201fdc;border:1px solid #cdb78366;backdrop-filter:blur(12px);padding:15px 20px;color:#f1e4c9;z-index:3;text-align:center;box-shadow:0 16px 35px #070b0b55}.controlpanel label{font-size:12px;letter-spacing:.12em;display:block;margin-bottom:8px}.controlpanel input[type=range]{width:100%;accent-color:#e5c28a}.controlpanel output{display:block;font-size:12px;margin-top:8px;color:#dec28c}.sunart{position:relative;width:90%;height:85%;border-bottom:2px solid #cfb78480}.sunball{position:absolute;width:100px;aspect-ratio:1;border-radius:50%;background:#f5cc81;box-shadow:0 0 55px #eec381a3;left:48%;top:20%;transition:all .3s}.gnomon{position:absolute;bottom:0;left:50%;width:7px;height:40%;background:#d3c29c;transform:translateX(-50%);box-shadow:4px 5px 8px #060e0b88}.shadow{position:absolute;bottom:-4px;left:50%;height:8px;width:35%;background:linear-gradient(90deg,#171d1caa,transparent);transform-origin:left center;transform:rotate(15deg);transition:all .3s}.moonorbit{position:relative;width:min(75%,390px);aspect-ratio:1;border:1px dashed #d0b77c88;border-radius:50%;display:grid;place-items:center}.earth{width:45%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 30%,#4f8b91,#233b57 70%);box-shadow:0 0 25px #657c9944;font-size:75px;display:grid;place-items:center}.moonphase{position:absolute;top:-31px;left:50%;width:63px;aspect-ratio:1;border-radius:50%;background:#ebdbaf;box-shadow:0 0 22px #dfcf9e6b;transform:translateX(-50%);overflow:hidden}.moonphase:after{content:"";position:absolute;inset:0;border-radius:50%;background:#1a2734;transform:translateX(-80%);transition:transform .3s}.typegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:min(75%,320px);transform:rotate(-6deg)}.tile{aspect-ratio:1;background:linear-gradient(135deg,#d4b486,#76593d);border:4px solid #634832;box-shadow:8px 12px 12px #070b0a77,inset 0 0 15px #38281555;display:grid;place-items:center;font-size:clamp(42px,6vw,70px);color:#2e251e;transition:.3s}.tile:hover{transform:translateY(-12px) rotate(4deg)}.cutaway{width:min(90%,470px);height:76%;position:relative;border:1px solid #d7b67777;background:repeating-linear-gradient(0deg,#b3906d22 0 25px,#1c242200 25px 35px);clip-path:polygon(4% 6%,94% 4%,100% 92%,10% 100%);display:grid;place-items:center}.cutaway .bigglyph{font-size:clamp(150px,19vw,280px)}.marginmark{position:absolute;right:0;bottom:3%;writing-mode:vertical-rl;letter-spacing:.3em;color:#dec28c;font-size:12px}.scene[data-id="0"] .copy h1{font-size:clamp(63px,8.5vw,138px)}.scene[data-id="0"] .copy h1 em{font-size:.29em}.scene[data-id="24"] .copy h1{font-size:clamp(62px,7vw,115px)}.bottomnav{position:absolute;z-index:10;bottom:39px;left:10vw;right:8.5vw;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:11px;letter-spacing:.15em}.navcontrols{display:flex;align-items:center;gap:15px}.round{width:40px;height:40px;border:1px solid #dbbd846e;border-radius:50%;background:#15231f99;color:#e8d1a8;font-size:18px}.round:disabled{opacity:.3;cursor:default}.pageindex{font:13px "Noto Sans SC",sans-serif;color:#e8d1a8;min-width:60px;text-align:center}.hint{color:#d8c49ab8}.drawer{position:absolute;inset:0;z-index:20;background:#0d1716f5;overflow:auto;padding:85px 8vw;display:none}.drawer.open{display:block}.drawer h2{font-size:42px;font-weight:400;margin:0 0 30px}.drawerhead{display:flex;justify-content:space-between;align-items:center}.drawergrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:10px}.drawergrid button{text-align:left;border:1px solid #d2b9824c;background:#1d2a28;color:#ebdfc5;padding:15px;min-height:90px}.drawergrid button:hover,.drawergrid button.current{background:#69513a}.drawergrid span{display:block;color:#d3b882;font:12px "Noto Sans SC";margin-bottom:12px}.sources{font-size:12px;line-height:1.8;margin-top:38px;color:#d7c9aa}.sources a{color:#e5c589}.toast{position:absolute;z-index:15;left:50%;top:16%;transform:translateX(-50%);background:#e5c994;color:#1b2824;padding:13px 24px;box-shadow:0 16px 30px #050a0a66;opacity:0;pointer-events:none;transition:.4s;font-size:14px;max-width:85vw;text-align:center}.toast.show{opacity:1}.inlinegame{background:#14221fdc;border:1px solid #d8be8a66;padding:21px;color:#f1e3c9;width:min(100%,460px);box-shadow:0 20px 45px #080e0e77}.inlinegame h3{font-weight:400;font-size:19px;margin:0 0 12px}.inlinegame p{font-size:13px;line-height:1.75;margin:0 0 13px}.inlinegame button{border:1px solid #cdb27c;background:#293b34;color:#ecdcb9;margin:4px;padding:8px 12px;font-size:13px}.inlinegame button.selected{background:#ad7453}.inlinegame .feedback{color:#e3c48e;min-height:23px}.inlinegame textarea{width:100%;height:90px;background:#f4e7ce;color:#222b25;padding:10px;border:0;resize:vertical}.inlinegame input[type=text]{width:100%;background:#f4e7ce;color:#222b25;border:0;padding:8px;margin:4px 0}.visual:has(.inlinegame){align-items:center}.quizgrid{display:grid;gap:8px}.quizgrid button{text-align:left;margin:0}.stepper{display:flex;flex-wrap:wrap;gap:8px}.stepper button{font-size:23px;min-width:50px}.footnote{font-size:11px;color:#e9d6acaa;margin-top:15px;line-height:1.6}a{color:inherit}@media(max-width:850px){.shell{min-height:0}.shell:before{inset:10px}.brand{left:24px;top:22px}.topright{right:24px;top:29px}.topright .bar{width:45px}.chapter{display:none}.scene{grid-template-columns:1fr;grid-template-rows:auto minmax(200px,1fr);padding:82px 8vw 95px;gap:6px;overflow-y:auto;align-content:start}.copy h1{font-size:clamp(42px,9vw,75px);margin:14px 0 12px}.copy h1 em{margin-top:5px}.copy p{font-size:13px;line-height:1.65}.learning{margin-top:12px;padding-top:10px;font-size:12px}.visual{height:min(40vh,340px);min-height:210px}.bigglyph{font-size:clamp(145px,30vw,230px)}.paperart{height:90%;min-height:0}.paperart .bigglyph{font-size:clamp(105px,25vw,180px)}.instrument{width:min(58%,235px);border-width:8px}.suspension-stage{grid-template-columns:1fr;gap:12px;min-height:0;padding:0 0 66px}.suspension-hero{min-height:255px;border-radius:20px}.suspension-model{width:min(92%,320px);height:min(92%,320px);top:54%}.suspension-side{padding:0 2px 4px;gap:8px}.suspension-side h3{font-size:19px}.principle-card{padding:10px 11px;grid-template-columns:34px 1fr}.principle-num{width:30px;height:30px;font-size:17px}.principle-copy b{font-size:13px}.principle-copy span,.suspension-side p,.suspension-caption{font-size:11px;line-height:1.6}.model-callout{font-size:10px;max-width:102px;padding:6px 8px}.model-callout b{font-size:11px}.dial-cardinal{font-size:20px}.controlpanel{bottom:-8px;padding:9px}.controlpanel label,.controlpanel output{font-size:10px}.sunball{width:55px}.earth{font-size:40px}.moonphase{width:40px;top:-20px}.inlinegame{padding:10px 14px;max-height:100%;overflow:auto}.inlinegame h3{font-size:16px;margin-bottom:6px}.inlinegame p{font-size:11px}.inlinegame button{font-size:11px;padding:6px 9px}.inlinegame textarea{height:55px}.bottomnav{bottom:22px;left:8vw;right:8vw}.hint{display:none}.scene-actions{margin-top:15px}.primary,.outline{padding:9px 15px;font-size:11px}.drawer{padding:65px 7vw}.drawer h2{font-size:29px}}@media(max-width:850px) and (max-height:700px){.scene{padding-top:69px;padding-bottom:76px}.visual{height:29vh;min-height:145px}.copy h1{font-size:40px}.learning{display:none}.brand{top:18px}.topright{top:23px}.bottomnav{bottom:15px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}} /* V2: illustrated exhibits and deeper learning notes */ .microfact{margin-top:15px;padding:13px 15px;background:#e0c38a13;border-left:2px solid #c8a669;display:grid;gap:6px;max-width:485px;font-size:12px;line-height:1.65;color:#e6d6b8}.microfact b{font-size:10px;letter-spacing:.19em;color:#e7c68b;font-weight:normal}.microfact span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}@media(max-width:850px){.microfact{font-size:11px;padding:8px 11px;margin-top:8px}.microfact span{-webkit-line-clamp:2}} .exhibit{width:min(100%,590px);height:100%;position:relative;display:grid;place-items:center;filter:drop-shadow(0 20px 32px #050a0966)}.exhibit svg{width:100%;height:100%;max-height:560px;overflow:visible}.exhibit .caption{position:absolute;left:5%;bottom:4%;border-left:2px solid #d8bd82;padding:7px 0 7px 12px;font-size:11px;line-height:1.5;color:#e6d6b2;letter-spacing:.1em;background:#10201b88;max-width:75%}.exhibit .num{font:12px "Noto Sans SC";letter-spacing:.28em;fill:#e4c78a}.exhibit .fine{font:13px serif;fill:#e9d3a7}.exhibit .inkline{stroke:#dbbf8a;stroke-width:2;fill:none;stroke-linecap:round}.exhibit .darkline{stroke:#3c4438;stroke-width:2;fill:none}.exhibit .glow{filter:drop-shadow(0 0 15px #e8c88388)}.note-trigger{margin-top:15px;border:0;border-bottom:1px solid #e3c387;background:transparent;color:#e7ca94;padding:5px 0 8px;font-size:13px;letter-spacing:.1em}.note-trigger:hover{color:white}.notepanel{position:absolute;z-index:30;inset:0;background:#0c1714e8;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(12px)}.notepanel.open{display:flex}.note-sheet{width:min(700px,94vw);max-height:min(84dvh,760px);overflow-y:auto;color:#2a3029;background:linear-gradient(110deg,#f0e7d0,#d9c7a7);padding:clamp(23px,4vw,52px);box-shadow:0 28px 90px #030706a8;position:relative;border:1px solid #cbb384}.note-sheet:before{content:"";position:absolute;inset:12px;border:1px solid #896b4480;pointer-events:none}.note-sheet h2{font-weight:400;font-size:clamp(30px,4vw,48px);margin:7px 0 20px}.note-sheet p{font-size:15px;line-height:1.95;margin:0 0 18px}.note-sheet .note-kicker{font-size:11px;letter-spacing:.3em;color:#9c563f}.note-sheet .note-question{border-top:1px solid #a88c64;padding-top:17px;font-size:17px;color:#775341}.note-sheet .note-close{position:sticky;float:right;top:0;z-index:2;border:1px solid #917a5d;background:#e8dbc0;color:#332f28;padding:7px 13px}.note-sheet .note-source{font-size:11px;color:#716653;margin:15px 0 0}.note-sheet a{color:#775039}.scene:has(.note-trigger) .copy{max-height:calc(100dvh - 178px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#c2a36a transparent}.scene:has(.note-trigger) .copy::-webkit-scrollbar{width:3px}.scene:has(.note-trigger) .copy::-webkit-scrollbar-thumb{background:#c2a36a}.exhibit svg .slowspin{transform-origin:50% 50%;animation:slowspin 24s linear infinite}@keyframes slowspin{to{transform:rotate(360deg)}}@media(max-width:850px){.note-trigger{font-size:12px;margin-top:8px}.scene:has(.note-trigger) .copy{max-height:42dvh;overflow-y:auto}.exhibit .caption{bottom:0;font-size:9px;max-width:90%}.exhibit svg{max-height:300px}.note-sheet p{font-size:14px}.note-sheet{padding:30px 26px}}@media(max-width:850px) and (max-height:700px){.scene:has(.note-trigger) .copy{max-height:38dvh}.exhibit svg{max-height:160px}} /* Cinematic realtime scene layer */ #cinema{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.93;transition:opacity .6s}#stage .scene{z-index:2}.shell .atmosphere{opacity:.75}.shell[data-tone="paper"] .atmosphere,.shell[data-tone="earth"] .atmosphere{opacity:.56}.scene .copy{text-shadow:0 2px 12px #07110eb8}.scene .copy:before{content:"";position:absolute;z-index:-1;inset:-30px -14px -30px -30px;background:linear-gradient(90deg,#091511b8,#10201c91 65%,transparent);filter:blur(12px);pointer-events:none}.scene .copy h1{font-size:clamp(50px,5.7vw,91px);text-shadow:0 7px 26px #020807}.scene .copy p{max-width:470px}.cinema-stamp{align-self:end;justify-self:end;margin:0 6% 6% 0;border-left:2px solid #dcbf84;padding:10px 15px;color:#f4dcad;background:#10201b88;backdrop-filter:blur(10px);letter-spacing:.2em;font-size:12px;box-shadow:0 12px 25px #050c0b55}.scene:has(.cinema-stamp) .visual{display:flex;justify-content:flex-end;align-items:flex-end;pointer-events:none}.cinema-prompt{position:absolute;right:10%;top:19%;z-index:5;font:11px "Noto Sans SC";color:#e8d19fac;letter-spacing:.18em;pointer-events:none}.scene .visual:not(:has(.cinema-stamp)) .art{transform:scale(.86);filter:drop-shadow(0 25px 35px #040809aa)}.scene .visual:not(:has(.cinema-stamp)) .halo{opacity:.27}.scene .controlpanel{box-shadow:0 18px 50px #050a0ad9;background:#101b19ee}.scene .learning{background:#10211d66;padding:15px;border-top:1px solid #e4cb8d8c;backdrop-filter:blur(5px)}.microfact{background:#12241fd0;backdrop-filter:blur(12px)}.scene[data-id="0"] .visual,.scene[data-id="24"] .visual{opacity:0}.scene[data-id="0"] .copy,.scene[data-id="24"] .copy{max-width:650px}.scene[data-id="0"] .copy h1{font-size:clamp(68px,8vw,132px)}@media(max-width:850px){.scene .copy:before{inset:-10px -5px -15px -15px;opacity:.86}.scene .copy h1{font-size:clamp(40px,8vw,65px)}.cinema-prompt{display:none}.cinema-stamp{font-size:10px}.scene .visual:not(:has(.cinema-stamp)) .art{transform:scale(.78)}.scene .learning{padding:9px}.scene[data-id="0"] .copy h1{font-size:clamp(55px,11vw,88px)}} /* Song painting art direction: authored backgrounds, paper, vermilion and ink */ :root{--paper-ink:#292c25;--seal-red:#8e4235;--silk:#eee2c6;--gold-ink:#a37848} .shell{background:#ebdfc4;color:var(--paper-ink)}.shell .atmosphere{display:none}.shell:before{inset:17px;border:1px solid #8d6b4777;box-shadow:inset 0 0 0 6px #c6a87420;z-index:7}.shell:after{content:"";position:absolute;z-index:7;pointer-events:none;inset:26px;border:1px solid #715c3c30}.scene-painting{position:absolute;inset:-2%;z-index:1;background-size:cover;background-position:center;transition:background-image .25s,filter .8s;animation:paintingDrift 22s ease-in-out infinite alternate}.scene-painting:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#efe4cc6b 0%,#efe4cc31 39%,transparent 67%),linear-gradient(0deg,#d3bd916b,transparent 20%,transparent 80%,#ddc59f2b);pointer-events:none}.scene-painting[data-art="garden"]{background-image:url("../assets/images/image-e095611e36.webp")}.scene-painting[data-art="workshop"]{background-image:url("../assets/images/image-a57d31b6c3.webp")}.scene-painting[data-art="night"]{background-image:url("../assets/images/image-72bef6def3.webp")}.scene-painting[data-art="earth"]{background-image:url("../assets/images/image-82761f24df.webp")}.scene-painting[data-art="night"]:after{background:linear-gradient(90deg,#0e203472 0%,transparent 58%),linear-gradient(0deg,#07172c88,transparent 20%)}@keyframes paintingDrift{from{transform:scale(1.01) translateX(-.5%)}to{transform:scale(1.07) translateX(.8%)}} #cinema{z-index:2;opacity:.13;mix-blend-mode:multiply}#stage .scene{z-index:3}.scene{padding-left:11vw;gap:2vw}.scene .copy{color:#242b26;max-height:calc(100dvh - 185px);overflow:auto;scrollbar-width:thin;scrollbar-color:#9d7350 transparent}.scene .copy:before{inset:-30px -90px -30px -42px;background:linear-gradient(90deg,#f4e9d1d8,#f0e3c7b8 60%,transparent);filter:blur(18px)}.scene .copy h1{color:#222b25;font-weight:600;letter-spacing:.1em;font-family:"Noto Serif SC",serif;text-shadow:0 2px 0 #f9f0dc,0 7px 25px #ac906d66}.scene .copy h1 em{color:#79563b;font-size:.32em;letter-spacing:.28em}.scene .copy p{color:#303731;line-height:1.82;font-size:clamp(14px,1.1vw,17px);text-shadow:0 1px 0 #f7ecd0aa}.scene .eyebrow{color:#8b4c38;letter-spacing:.35em}.scene .eyebrow:before{background:#994b3a}.scene .learning{background:#f6ecda94;border-top:1px solid #a8754a;color:#313c32;backdrop-filter:blur(5px);max-width:460px;padding:12px}.scene .learning strong{color:#963f31}.scene .microfact{background:#f1e7d3d9;border-left:2px solid #ad7750;color:#47463a;max-width:470px;box-shadow:0 7px 19px #654d3522}.scene .microfact b{color:#8d4637}.scene .note-trigger{color:#8e4432;border-bottom-color:#a5734c}.scene .note-trigger:hover{color:#5c2c24}.brand{color:#433e30;letter-spacing:.28em;font-size:12px}.seal{background:#9d493b;border:2px solid #9d493b;box-shadow:inset 0 0 0 2px #f4e2c8,0 5px 14px #34251e4a}.topright{color:#493f30}.topright .bar{background:#654a3d33}.topright .bar i{background:#974d3c}.chapter{color:#956d50;writing-mode:vertical-rl}.bottomnav{color:#594b39}.hint{color:#604c39}.round{border-color:#8e5d44;color:#623f2f;background:#f2e4cacc}.round:hover{background:#923e32;color:#fff6e6}.pageindex{color:#5e4632}.primary,.outline{border:1px solid #9e5440;background:#964538;color:#fff2dc;box-shadow:0 5px 15px #3d291f38}.outline{background:#f3e3c9e6;color:#6e372c}.primary:hover,.outline:hover{box-shadow:0 10px 25px #3d291f55}.cinema-stamp{color:#692f28;background:#eee2c7cd;border:2px solid #a54c3d;box-shadow:inset 0 0 0 3px #f0dfbf,0 12px 30px #44341d3d;font-family:var(--serif);padding:10px 13px;writing-mode:vertical-rl;font-size:13px;line-height:1.5}.cinema-stamp small{font:9px "Noto Sans SC";letter-spacing:.12em;margin-top:8px}.cinema-prompt{color:#543b31a0;right:8%;top:18%}.scene .visual:not(:has(.cinema-stamp)) .art{filter:drop-shadow(0 18px 27px #3a292477);transform:scale(.78)}.scene .visual:not(:has(.cinema-stamp)) .halo{opacity:0}.scene .controlpanel{background:#eadbbfe6;border-color:#8d6a47;color:#2e3026;box-shadow:0 15px 35px #51433477}.scene .controlpanel label,.scene .controlpanel output{color:#473d31}.scene .controlpanel input{accent-color:#9b4739}.scene .inlinegame{background:#eee0c4ea;border-color:#a67b51;color:#3c3529}.scene .inlinegame .feedback{color:#964a36}.scene .inlinegame button{background:#f1e3c8;color:#523d2d;border-color:#a37453}.scene .inlinegame button:hover{background:#b15b42;color:white}.drawer{background:#ebe0c9;color:#302d28}.drawer h2{color:#382d27}.drawergrid button{background:#dfcfb3;color:#302f28;border-color:#a18565}.drawergrid button span{color:#8f493c}.drawergrid button:hover,.drawergrid button.current{background:#aa785a;color:#fff2da}.drawergrid button:hover span,.drawergrid button.current span{color:#fff2da}.sources{color:#5e4d3a}.sources a{color:#873f36}.toast{background:#9a4838;color:#fff4e1}.shell[data-tone="night"]{background:#122339}.shell[data-tone="night"] .scene .copy{color:#f0dfbe}.shell[data-tone="night"] .scene .copy:before{background:linear-gradient(90deg,#102137df,#102137c3 62%,transparent)}.shell[data-tone="night"] .scene h1{color:#f3e7cf;text-shadow:0 4px 24px #050c1a}.shell[data-tone="night"] .scene h1 em,.shell[data-tone="night"] .scene .eyebrow,.shell[data-tone="night"] .scene .note-trigger{color:#e9c78b}.shell[data-tone="night"] .scene p{color:#e4ddcb;text-shadow:none}.shell[data-tone="night"] .learning{background:#112640c7;color:#eee2cd;border-color:#d3ae70}.shell[data-tone="night"] .learning strong{color:#e6bd82}.shell[data-tone="night"] .microfact{background:#142b44e6;color:#e4dcc7;border-color:#d4ae71}.shell[data-tone="night"] .microfact b{color:#e7c489}.shell[data-tone="night"] .brand,.shell[data-tone="night"] .topright,.shell[data-tone="night"] .bottomnav,.shell[data-tone="night"] .hint,.shell[data-tone="night"] .pageindex,.shell[data-tone="night"] .chapter,.shell[data-tone="night"] .cinema-prompt{color:#e9dab8}.shell[data-tone="night"] .round{background:#12243ab8;color:#ead3a1;border-color:#d8bb7c}.shell[data-tone="night"] .cinema-stamp{background:#172b43c9;color:#e9c58c;border-color:#c79e6d}.shell[data-tone="night"] .controlpanel,.shell[data-tone="night"] .inlinegame{background:#11243be9;color:#eddfc5;border-color:#c7a970}.shell[data-tone="night"] .controlpanel label,.shell[data-tone="night"] .controlpanel output,.shell[data-tone="night"] .inlinegame .feedback{color:#e8d3a7}.shell[data-tone="night"] .inlinegame button{background:#273b4d;color:#efddb8;border-color:#b69a71}@keyframes inkWipe{0%{opacity:0;clip-path:circle(0 at 72% 50%)}35%{opacity:.88;clip-path:circle(90% at 72% 50%)}65%{opacity:.9;clip-path:circle(110% at 72% 50%)}100%{opacity:0;clip-path:circle(110% at 72% 50%)}} @media(max-width:850px){.scene-painting{background-position:62% center}.scene-painting:after{background:linear-gradient(180deg,#eee2cce8 0%,#eee2ccd0 47%,#eee2cc45 67%,transparent)}.scene-painting[data-art="night"]:after{background:linear-gradient(180deg,#102137ed 0%,#102137dc 49%,#10213766 72%,transparent)}.scene{padding:72px 8vw 82px}.scene .copy{max-height:48dvh}.scene .copy:before{inset:-15px -15px -20px -15px;background:linear-gradient(180deg,#efe3ccd9,#efe3ccc6)}.scene .copy h1{font-size:clamp(42px,9vw,68px)}.scene .copy p{font-size:13px}.scene .visual:not(:has(.cinema-stamp)) .art{transform:scale(.68)}.scene .controlpanel{bottom:0}.brand{left:20px;top:19px}.topright{right:20px;top:26px}.shell:before{inset:9px}.shell:after{inset:15px}.bottomnav{bottom:18px}.cinema-stamp{font-size:11px}.cinema-prompt{display:none}}@media(max-width:850px) and (max-height:700px){.scene .copy{max-height:43dvh}.scene .copy h1{font-size:38px}.scene .learning,.scene .microfact{display:none}}@media(prefers-reduced-motion:reduce){.scene-painting,.ink-transition{animation:none!important}} /* BEGIN SCENE 13 TOWER ONLY */ /* Only scene 14 / 木塔不倒 */ .tower-viewer canvas{transition:opacity .48s ease}.tower-viewer:not(.model-active) canvas{opacity:0}.tower-hero{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;z-index:1;pointer-events:none;opacity:1;transform:translateY(-4%) scale(var(--tower-scale,.8));filter:drop-shadow(0 18px 18px #130c0880);transition:opacity .48s ease,transform .22s ease}.tower-viewer.model-active .tower-hero{opacity:0}.tower-mode{position:absolute;right:26px;top:52px;z-index:4;border:1px solid #d7b77e;background:#3d2b1fda;color:#f7dfb2;padding:7px 11px;font-size:11px;letter-spacing:.08em;box-shadow:0 3px 14px #160e0b50}.tower-mode:hover{background:#9c6040}.tower-viewer.model-active .tower-mode{background:#835236}.tower-viewer:not(.model-active) .tower-side{opacity:.55}.tower-viewer:not(.model-active) .tower-caption{max-width:138px}@media(max-width:850px){.tower-mode{right:16px;top:36px;font-size:9px;padding:5px 7px}.tower-viewer:not(.model-active) .tower-caption{max-width:104px}}@media(prefers-reduced-motion:reduce){.tower-hero,.tower-viewer canvas{transition:none}} .scene[data-id="13"] .visual{height:min(79vh,760px);min-height:460px;overflow:visible}.scene[data-id="13"] .copy{max-width:455px}.scene[data-id="13"] .copy h1{font-size:clamp(49px,5.6vw,82px)}.scene[data-id="13"] .microfact{max-width:430px}.tower-viewer{width:100%;height:100%;position:relative;overflow:hidden;isolation:isolate;border:1px solid #c49b66;background:radial-gradient(ellipse at 53% 43%,#dcc196 0%,#826044 52%,#302920 100%);box-shadow:0 28px 52px #2f241e6b,inset 0 0 0 7px #261d1960,inset 0 0 0 8px #d5b68070;touch-action:none}.tower-viewer:before{content:"";position:absolute;inset:13px;border:1px solid #ead1a278;pointer-events:none;z-index:2}.tower-viewer:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#0f130a36,transparent 17% 83%,#0f130a38),linear-gradient(0deg,#21160e9e,transparent 29%);z-index:1}.tower-viewer canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:none}.tower-viewer canvas.dragging{cursor:grabbing}.tower-overline{position:absolute;top:26px;left:30px;z-index:3;font-size:12px;letter-spacing:.28em;color:#f0ddba;text-shadow:0 2px 5px #20150a}.tower-overline b{font-weight:normal;color:#ffe4af}.tower-topnote{position:absolute;top:27px;right:29px;z-index:3;color:#ead3a9;font:11px var(--serif);letter-spacing:.1em;text-shadow:0 2px 5px #1b150d}.tower-side{position:absolute;right:19px;top:50%;transform:translateY(-50%);z-index:4;display:flex;flex-direction:column;gap:6px}.tower-side button{width:32px;height:32px;border-radius:50%;border:1px solid #dfc394;background:#35251cc7;color:#f6e3bf;font:12px var(--serif);transition:.2s}.tower-side button.active,.tower-side button:hover{background:#ac6745;border-color:#f0d5a4}.tower-caption{position:absolute;left:28px;bottom:96px;z-index:3;color:#f4dfb7;max-width:62%;font-size:12px;line-height:1.65;text-shadow:0 2px 5px #1d120b}.tower-caption strong{display:block;font-size:18px;font-weight:normal;letter-spacing:.14em;color:#f8e5be}.tower-caption span{display:block;margin-top:5px}.tower-controls{position:absolute;left:18px;right:18px;bottom:18px;z-index:4;display:flex;gap:7px;align-items:center;padding:10px 11px;background:#201b17d9;backdrop-filter:blur(10px);border:1px solid #dab98670;color:#e9d2a7}.tower-controls button{background:#513b2b;color:#f2ddb7;border:1px solid #bb9666;padding:8px 11px;font-size:12px;line-height:1.15;white-space:nowrap}.tower-controls button:hover,.tower-controls button[aria-pressed="true"]{background:#a76646;color:#fff5db}.tower-controls .zoomlabel{font:11px "Noto Sans SC",sans-serif;min-width:38px;text-align:right;color:#e9cf9f}.tower-controls input[type="range"]{width:100%;min-width:55px;accent-color:#c88d5c}.tower-credit{position:absolute;left:30px;bottom:73px;z-index:3;color:#dec497a8;font-size:10px;letter-spacing:.05em;max-width:72%}.scene[data-id="13"] .cinema-prompt{display:none}@media(max-width:850px){.scene[data-id="13"] .visual{height:49dvh;min-height:290px;margin-top:3px}.scene[data-id="13"] .copy{max-height:32dvh;overflow:auto}.scene[data-id="13"] .copy h1{font-size:clamp(38px,8vw,58px)}.scene[data-id="13"] .copy p{font-size:12px}.tower-overline{top:15px;left:18px;font-size:10px}.tower-topnote{top:17px;right:18px;font-size:9px}.tower-side{right:13px;gap:3px}.tower-side button{width:26px;height:26px;font-size:10px}.tower-caption{left:18px;bottom:77px;max-width:60%;font-size:10px}.tower-caption strong{font-size:13px}.tower-credit{left:18px;bottom:62px;font-size:8px}.tower-controls{left:8px;right:8px;bottom:8px;padding:6px;gap:4px}.tower-controls button{font-size:10px;padding:6px 7px}.tower-controls .zoomlabel{font-size:9px;min-width:30px}}@media(max-width:850px) and (max-height:700px){.scene[data-id="13"] .visual{height:49dvh;min-height:220px}.scene[data-id="13"] .copy{max-height:25dvh}.tower-caption span,.tower-credit,.tower-topnote{display:none}.tower-caption{bottom:58px}.tower-controls{bottom:6px}} /* END SCENE 13 TOWER ONLY */ /* BEGIN SCENE 14 CANAL ONLY */ /* Scene 15 only — Canal lock */ .scene[data-id="14"]{grid-template-columns:minmax(270px,32%) minmax(0,1fr);padding:100px 4.6vw 92px 8vw;gap:2.5vw} .scene[data-id="14"] .copy{max-width:430px} .scene[data-id="14"] .copy h1{font-size:clamp(44px,4.7vw,70px);margin:18px 0 18px} .scene[data-id="14"] .copy p{font-size:clamp(13px,1.12vw,16px);line-height:1.85} .scene[data-id="14"] .learning{font-size:12px;gap:10px;margin-top:18px;padding-top:14px} .scene[data-id="14"] .visual{height:min(70vh,660px);min-height:430px;place-items:stretch} .canal-exhibit{height:100%;width:100%;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden;border:1px solid #c5a06a;background:#2b2921;box-shadow:0 24px 54px #080e0d91,inset 0 0 0 5px #2d211a80;position:relative} .canal-picture{position:relative;min-height:0;overflow:hidden;background:#b6a17b;isolation:isolate} .canal-world{display:block;width:100%;height:100%;position:absolute;inset:0;preserveAspectRatio:xMidYMid slice} .canal-bg{position:absolute;inset:0;width:100%;height:100%} .canal-world{z-index:1} .canal-boat{position:absolute;left:0;top:0;z-index:2;display:block;max-width:none;object-fit:contain;object-position:center;transform-origin:center center;will-change:transform;pointer-events:none;filter:drop-shadow(0 10px 8px #0c1c1780) drop-shadow(0 2px 2px #070d0b88)} .canal-world .label-plate{fill:#2a251fda;stroke:#e3c68e;stroke-width:2} .canal-world .label-text{font:22px var(--serif);fill:#f4e4c1;letter-spacing:2px} .canal-world .gate-leaf{fill:#4b3021;stroke:#dbad70;stroke-width:4;stroke-linejoin:round;filter:url(#gateShadow)} .canal-world .gate-board{stroke:#b77b48;stroke-width:5;opacity:.95} .canal-world .gate-side{fill:#241a14;stroke:#7f5736;stroke-width:2} .canal-world .gate-edge{fill:none;stroke:#e0b679;stroke-width:2;opacity:.88} .canal-world .gate-hinge{fill:#c59a5e;stroke:#4e3221;stroke-width:4} .canal-world .water-shimmer{fill:none;stroke:#e2efe0;stroke-width:3;stroke-linecap:round;stroke-dasharray:2 20;opacity:.62} .canal-world .gate-iron{stroke:#d4b17a;stroke-width:4;opacity:.88} .canal-world .lock-water{fill:#53a0a0;opacity:.19;transition:transform .4s ease,opacity .4s ease} .canal-world .waterline{fill:none;stroke:#d4e5d0;stroke-width:5;stroke-dasharray:32 18;opacity:.74} .canal-world .flow-path{fill:none;stroke:#d5f0db;stroke-width:11;stroke-linecap:round;stroke-dasharray:5 26;opacity:0;filter:url(#waterGlow)} .canal-world .flow-arrow{fill:#d9efe0;opacity:0;filter:url(#waterGlow)} .canal-world .sluice{fill:#4b3423;stroke:#e0b875;stroke-width:5} .canal-world .sluice-wheel{fill:none;stroke:#dfbc7d;stroke-width:5} .canal-world .level-tick{stroke:#fff1ca;stroke-width:4;opacity:.8} .canal-boat{filter:drop-shadow(0 12px 8px #09211c77);will-change:transform} .canal-tag{position:absolute;top:14px;z-index:3;padding:6px 10px;border:1px solid #edcf9a88;background:#221d18ad;color:#f4e4bf;letter-spacing:.12em;font-size:10px;backdrop-filter:blur(7px)} .canal-tag.up{left:14px}.canal-tag.mid{left:50%;transform:translateX(-50%)}.canal-tag.down{right:14px} .canal-control{padding:11px 14px 12px;color:#ead7b4;background:linear-gradient(130deg,#29231d,#1c201c);border-top:1px solid #d2af7b66} .canal-current{display:flex;align-items:center;gap:9px;margin-bottom:8px;min-height:24px} .canal-current .stepno{font:10px "Noto Sans SC",sans-serif;color:#d0a76c;letter-spacing:.16em;white-space:nowrap} .canal-current strong{font-size:14px;font-weight:normal;color:#f5e2bd;letter-spacing:.08em;white-space:nowrap} .canal-current span:last-child{font-size:10px;color:#c9b897;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .canal-level{margin-left:auto;padding:4px 8px;border:1px solid #b99a6870;color:#cce1d3;font-size:10px;white-space:nowrap} .canal-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} .canal-step{min-width:0;text-align:left;display:flex;align-items:center;gap:7px;padding:7px 8px;border:1px solid #9780575e;background:#292923;color:#cdbf9d;transition:background .25s,border-color .25s,color .25s} .canal-step i{flex:0 0 20px;height:20px;border:1px solid #b99b6b;border-radius:50%;display:grid;place-items:center;font:10px "Noto Sans SC",sans-serif;font-style:normal;color:#e9cd98} .canal-step span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px} .canal-step.active{background:#604633;border-color:#d3a56c;color:#fff0ce;box-shadow:inset 0 0 16px #d49e5530} .canal-step.active i{background:#cf9b5c;color:#201912;border-color:#f5d493} .canal-actions{display:flex;align-items:center;gap:6px;margin-top:8px} .canal-actions button{padding:6px 9px;border:1px solid #b28d5a;background:#453426;color:#f0ddb8;font-size:10px;white-space:nowrap;transition:.2s} .canal-actions button:hover,.canal-actions button[aria-pressed="true"]{background:#9c6844;color:#fff2d4} .canal-actions .play{background:#c89a60;color:#211c16;border-color:#edc887;font-weight:600} .canal-seek{appearance:none;flex:1;min-width:40px;height:3px;background:linear-gradient(90deg,#dcad69 var(--progress,0%),#80735a var(--progress,0%));margin:0 7px;cursor:pointer} .canal-seek::-webkit-slider-thumb{appearance:none;width:10px;height:10px;border-radius:50%;background:#f3d598;border:1px solid #473626} .canal-seek::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:#f3d598;border:1px solid #473626} @media(max-width:850px){ .scene[data-id="14"]{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);padding:82px 7vw 94px;gap:7px;align-content:start;overflow-y:auto} .scene[data-id="14"] .copy{max-width:650px} .scene[data-id="14"] .copy h1{font-size:clamp(38px,8vw,58px);margin:10px 0 8px} .scene[data-id="14"] .copy p{font-size:12px;line-height:1.58} .scene[data-id="14"] .learning{margin-top:8px;padding-top:8px;font-size:11px;line-height:1.45} .scene[data-id="14"] .visual{height:min(44vh,390px);min-height:300px;margin-top:4px} .canal-control{padding:8px 8px 9px} .canal-current{margin-bottom:6px;gap:6px} .canal-current strong{font-size:12px} .canal-current span:last-child{font-size:9px} .canal-level{font-size:9px;padding:3px 5px} .canal-step{padding:6px 5px;gap:4px} .canal-step i{flex-basis:17px;height:17px;font-size:9px} .canal-step span{font-size:9px} .canal-actions{gap:4px;margin-top:7px} .canal-actions button{padding:6px 6px;font-size:9px} .canal-tag{top:8px;padding:4px 6px;font-size:8px;letter-spacing:.06em} } @media(max-width:850px) and (max-height:700px){.scene[data-id="14"]{padding-top:68px;padding-bottom:77px}.scene[data-id="14"] .learning{display:none}.scene[data-id="14"] .visual{height:37vh;min-height:275px}.canal-control{padding:6px}.canal-current{margin-bottom:4px}.canal-actions{margin-top:5px}} @media(prefers-reduced-motion:reduce){.canal-step,.canal-world .lock-water{transition:none}} .canal-world #ripples{stroke-dasharray:2 18;transition:opacity .4s ease} .canal-world .waterline{stroke-linecap:round} .canal-world .flow-path{stroke-dasharray:5 26;transition:opacity .35s ease} .canal-world #sluiceWheel{transform-box:fill-box} .canal-world .gate-side{fill:#241a14;stroke:#7f5736;stroke-width:2;stroke-linejoin:round} .canal-world .gate-edge{fill:none;stroke:#e0b679;stroke-width:2;opacity:.88} .canal-world #ripples{stroke-dasharray:2 18} /* END SCENE 14 CANAL ONLY */ /* BEGIN SCENE 02 PROFILE ONLY */ /* Scene 02 only — Shen Kuo portrait page */ .scene[data-id="1"]{grid-template-columns:minmax(300px,42%) minmax(0,1fr);padding:104px 8.5vw 94px 10vw;gap:4vw} .scene[data-id="1"] .copy{max-width:520px} .scene[data-id="1"] .copy h1{font-size:clamp(50px,5.3vw,88px);margin:20px 0 19px} .scene[data-id="1"] .copy p{font-size:clamp(14px,1.16vw,17px);line-height:1.95;max-width:470px} .scene[data-id="1"] .learning{margin-top:22px;max-width:450px} .scene[data-id="1"] .visual{height:min(70vh,700px);min-height:390px;place-items:center} .shen-profile{position:relative;height:min(70vh,690px);min-height:390px;width:auto;max-width:100%;aspect-ratio:.85;background:#33271f;border:1px solid #d1ac67;box-shadow:0 26px 56px #080f0d88,inset 0 0 0 5px #241c1766;isolation:isolate} .shen-profile:before{content:"";position:absolute;inset:7px;border:1px solid #ead5a184;pointer-events:none;z-index:4} .shen-portrait{position:absolute;inset:15px;margin:0;overflow:hidden;background:#dfd0b3} .shen-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 48%;filter:saturate(.92) contrast(1.025)} .shen-portrait:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#19181120 0%,transparent 38%,#17150fd9 100%),linear-gradient(90deg,#1b181040,transparent 24% 82%,#20170b36);pointer-events:none} .shen-overline{position:absolute;z-index:2;top:26px;left:29px;color:#f3e4c3;font-size:10px;letter-spacing:.24em;text-shadow:0 2px 5px #21180f} .shen-overline i{font-style:normal;color:#e1ba73;margin:0 6px} .shen-topnote{position:absolute;z-index:2;top:23px;right:26px;padding:6px 9px;border:1px solid #efd69b99;background:#33291dc9;color:#f2dfba;font-size:9px;letter-spacing:.13em} .shen-caption{position:absolute;z-index:2;left:28px;right:90px;bottom:25px;display:flex;flex-direction:column;gap:4px;color:#f8ead0;text-shadow:0 2px 7px #100d0a} .shen-caption strong{font-size:22px;letter-spacing:.2em;font-weight:400} .shen-caption span{font-size:10px;letter-spacing:.17em;color:#e7d1a5} .shen-caption em{margin-top:5px;font-size:9px;font-style:normal;letter-spacing:.08em;color:#c9b897} .shen-seal{position:absolute;z-index:3;right:27px;bottom:28px;width:48px;height:54px;display:grid;place-items:center;text-align:center;border:1px solid #edb993;background:#873d31;color:#f3ddba;font-size:12px;line-height:1.3;letter-spacing:.08em;box-shadow:0 4px 14px #160d0b77} .shen-ribbon{position:absolute;z-index:3;right:-23px;top:33%;writing-mode:vertical-rl;padding:11px 7px;border:1px solid #cfb276;background:#2f332b;color:#e8d5ae;font-size:10px;letter-spacing:.22em;box-shadow:0 5px 16px #10100d4f} .shen-fields{position:absolute;z-index:3;left:28px;bottom:100px;display:flex;gap:6px;flex-wrap:wrap;max-width:78%} .shen-fields span{padding:4px 7px;border:1px solid #e8d1a277;background:#2d2a22a8;color:#f0dfc0;font-size:9px;letter-spacing:.1em;backdrop-filter:blur(3px)} .hui-corner{position:absolute;z-index:5;width:43px;height:43px;color:#e6c985;pointer-events:none} .hui-corner svg{display:block;width:100%;height:100%;overflow:visible} .hui-corner path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter} .hui-corner.tl{top:1px;left:1px} .hui-corner.tr{top:1px;right:1px;transform:scaleX(-1)} .hui-corner.bl{bottom:1px;left:1px;transform:scaleY(-1)} .hui-corner.br{bottom:1px;right:1px;transform:rotate(180deg)} @media(max-width:850px){ .scene[data-id="1"]{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);padding:82px 8vw 95px;gap:5px;overflow-y:auto;align-content:start} .scene[data-id="1"] .copy{max-width:700px} .scene[data-id="1"] .copy h1{font-size:clamp(42px,9vw,72px);margin:14px 0 10px} .scene[data-id="1"] .copy p{font-size:13px;line-height:1.68} .scene[data-id="1"] .learning{margin-top:12px;padding-top:10px;font-size:12px} .scene[data-id="1"] .visual{width:100%;height:min(49vh,390px);min-height:300px;margin:11px auto 0} .shen-profile{height:min(46vh,370px);min-height:285px} .shen-portrait{inset:11px} .shen-overline{top:21px;left:21px;font-size:9px} .shen-topnote{top:18px;right:19px;padding:5px 7px;font-size:8px} .shen-caption{left:21px;bottom:21px;right:72px} .shen-caption strong{font-size:18px} .shen-caption span{font-size:9px} .shen-caption em{font-size:8px} .shen-seal{right:20px;bottom:21px;width:42px;height:46px;font-size:11px} .shen-ribbon{right:-15px;padding:8px 5px;font-size:8px} .shen-fields{left:20px;bottom:82px;gap:4px} .shen-fields span{font-size:8px;padding:4px 5px} .hui-corner{width:34px;height:34px} } @media(max-width:420px){ .scene[data-id="1"] .visual{height:min(45vh,330px);min-height:270px} .shen-profile{height:min(42vh,310px);min-height:260px} .shen-ribbon{display:none} } @media(max-width:850px) and (max-height:700px){ .scene[data-id="1"]{padding-top:68px;padding-bottom:77px} .scene[data-id="1"] .visual{height:min(42vh,290px);min-height:250px} .shen-profile{height:min(40vh,275px);min-height:240px} } /* END SCENE 02 PROFILE ONLY */ /* BEGIN ORIENTATION EXPERIENCE ONLY */ /* Global mobile landscape and auspicious-cloud orientation curtain */ .orientation-curtain{display:none;position:absolute;inset:0;z-index:99;overflow:hidden;place-items:center;color:#f1e3c5;background:radial-gradient(ellipse at 50% 44%,#31504a 0%,#1b302c 49%,#101c1b 100%);animation:cloud-curtain-in .72s ease both} .orientation-curtain:before{content:"";position:absolute;inset:12px;border:1px solid #d8bb8066;box-shadow:inset 0 0 0 5px #d8bb8014;pointer-events:none} .orientation-curtain:after{content:"";position:absolute;inset:24px;border:1px solid #d8bb8030;pointer-events:none} .orientation-cloudscape{position:absolute;inset:0;width:100%;height:100%;opacity:.54;pointer-events:none} .orientation-cloudscape path{fill:none;stroke:#dfc38d;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .orientation-cloudscape .cloud-fill{fill:#e5c995;fill-opacity:.035;stroke-width:1.1} .cloud-drift-a{animation:cloud-drift-a 27s linear infinite} .cloud-drift-b{animation:cloud-drift-b 34s ease-in-out infinite alternate;opacity:.55} .cloud-drift-c{animation:cloud-drift-c 23s ease-in-out infinite alternate;opacity:.38} .orientation-frame{position:relative;z-index:1;width:min(84vw,400px);min-height:min(76vh,560px);padding:34px 27px 30px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(155deg,#20332fe8,#182722ee);border:1px solid #d7b7778a;box-shadow:0 24px 70px #070f0d88,inset 0 0 0 5px #dfc48d14} .orientation-frame:before{content:"";position:absolute;inset:8px;border:1px solid #c9ad7666;pointer-events:none} .orientation-frame:after{content:"";position:absolute;inset:15px 20px;border-top:1px solid #c9ad7630;border-bottom:1px solid #c9ad7630;pointer-events:none} .orientation-brand{display:flex;align-items:center;gap:9px;color:#f0dbac;font-size:12px;letter-spacing:.32em} .orientation-brand .seal{font-size:13px;padding:5px;writing-mode:vertical-rl} .orientation-brand small{font-size:9px;color:#cdb98e;letter-spacing:.2em} .orientation-rule{display:flex;align-items:center;gap:10px;margin:15px 0 2px;color:#d6bd8d;font-size:9px;letter-spacing:.28em} .orientation-rule:before,.orientation-rule:after{content:"";width:30px;height:1px;background:#d6bd8d70} .orientation-turn{width:144px;height:100px;margin:7px 0 2px;overflow:visible;filter:drop-shadow(0 5px 10px #07120e)} .orientation-turn .phone{fill:#1b2d28;stroke:#e4c98f;stroke-width:2.2;transform-box:fill-box;transform-origin:center;animation:turn-phone 2.8s cubic-bezier(.55,.05,.35,1) infinite} .orientation-turn .screen{fill:#d7c397;fill-opacity:.15;stroke:#d8c28f;stroke-width:1} .orientation-turn .orbit{fill:none;stroke:#cba96d;stroke-width:1.6;stroke-dasharray:3 5;opacity:.9} .orientation-turn .arrow{fill:#d8bb80} .orientation-title{margin:4px 0 9px;font-size:clamp(27px,7vw,36px);font-weight:400;letter-spacing:.22em;color:#f5e5c6;text-shadow:0 3px 14px #09110e} .orientation-instruction{max-width:285px;margin:0;color:#d9ceb4;font-size:12px;line-height:1.9;letter-spacing:.08em} .orientation-status{display:flex;align-items:center;gap:8px;margin-top:21px;color:#cfb782;font-size:9px;letter-spacing:.18em} .orientation-status i{width:6px;height:6px;border-radius:50%;background:#e4c685;box-shadow:0 0 10px #e4c685;animation:cloud-pulse 1.3s ease-in-out infinite alternate} .orientation-bottom{margin-top:13px;color:#a99f87;font-size:8px;letter-spacing:.15em} .orientation-corner{position:absolute;width:30px;height:30px;color:#e1c585;opacity:.84} .orientation-corner:before,.orientation-corner:after{content:"";position:absolute;border:1px solid currentColor} .orientation-corner:before{inset:0} .orientation-corner:after{inset:6px} .orientation-corner.tl{top:11px;left:11px} .orientation-corner.tr{top:11px;right:11px;transform:scaleX(-1)} .orientation-corner.bl{bottom:11px;left:11px;transform:scaleY(-1)} .orientation-corner.br{bottom:11px;right:11px;transform:rotate(180deg)} @keyframes cloud-curtain-in{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}} @keyframes cloud-drift-a{from{transform:translateX(-2%)}to{transform:translateX(2%)}} @keyframes cloud-drift-b{from{transform:translate3d(2%,-7px,0)}to{transform:translate3d(-2%,8px,0)}} @keyframes cloud-drift-c{from{transform:translate3d(-1%,5px,0)}to{transform:translate3d(2%,-8px,0)}} @keyframes turn-phone{0%,16%{transform:rotate(0deg)}52%,78%{transform:rotate(90deg)}100%{transform:rotate(90deg)}} @keyframes cloud-pulse{from{opacity:.45;transform:scale(.8)}to{opacity:1;transform:scale(1.2)}} @media(max-width:850px) and (orientation:portrait) and (pointer:coarse){.orientation-curtain{display:grid}} @media(prefers-reduced-motion:reduce){.orientation-curtain,.cloud-drift-a,.cloud-drift-b,.cloud-drift-c,.orientation-turn .phone,.orientation-status i{animation:none}} @media(orientation:landscape) and (max-width:1000px){ .shell{height:100dvh;min-height:0} .scene{grid-template-columns:minmax(0,42%) minmax(0,1fr);grid-template-rows:1fr;align-items:center;padding:52px 6vw 56px;gap:3vw;overflow:hidden} .scene .copy{max-width:none;align-self:center} .scene .eyebrow{font-size:8px;letter-spacing:.2em;gap:8px} .scene .eyebrow:before{width:20px} .scene .copy h1{font-size:clamp(28px,6.2vh,45px);line-height:1.08;letter-spacing:.07em;margin:9px 0} .scene .copy h1 em{font-size:.43em;letter-spacing:.13em;margin-top:5px} .scene .copy p{max-width:100%;font-size:clamp(10px,2.05vh,13px);line-height:1.55} .scene .learning{max-width:100%;margin-top:10px;padding-top:8px;gap:8px;font-size:clamp(8px,1.8vh,10px);line-height:1.45} .scene .visual{height:calc(100dvh - 112px);min-height:0;margin:0;overflow:hidden} .scene .art{height:100%} .brand{left:4vw;top:12px;gap:8px;font-size:9px;letter-spacing:.2em} .brand .seal{font-size:11px;padding:5px} .topright{right:4vw;top:15px;gap:8px;font-size:8px} .topright .bar{width:52px;margin:0 4px} .linkbtn{font-size:8px} .bottomnav{bottom:8px;left:6vw;right:6vw;gap:8px;font-size:9px} .bottomnav .hint{display:none} .navcontrols{gap:8px} .round{width:30px;height:30px;font-size:14px} .pageindex{min-width:46px;font-size:9px} .scene[data-id="0"] .copy h1,.scene[data-id="24"] .copy h1{font-size:clamp(32px,7vh,52px)} .scene[data-id="13"]{grid-template-columns:minmax(0,38%) minmax(0,1fr);padding:50px 5vw 52px;gap:2vw} .scene[data-id="13"] .copy h1{font-size:clamp(27px,5.8vh,42px)} .scene[data-id="13"] .visual{height:calc(100dvh - 106px);min-height:0;overflow:hidden} .scene[data-id="13"] .tower-controls{left:5%;right:5%;bottom:8px;padding:6px;gap:4px} .scene[data-id="13"] .tower-controls button{font-size:9px;padding:6px 7px} .scene[data-id="13"] .tower-caption{bottom:60px} .scene[data-id="14"]{grid-template-columns:minmax(245px,34%) minmax(0,1fr);grid-template-rows:1fr;padding:50px 4vw 52px;gap:2vw} .scene[data-id="14"] .copy h1{font-size:clamp(26px,5.6vh,40px);margin:7px 0} .scene[data-id="14"] .copy p{font-size:clamp(9px,1.8vh,11px);line-height:1.42} .scene[data-id="14"] .learning{margin-top:7px;padding-top:6px;font-size:8px} .scene[data-id="14"] .visual{height:calc(100dvh - 102px);min-height:0} .scene[data-id="14"] .canal-control{padding:6px 7px} .scene[data-id="14"] .canal-current{gap:5px;margin-bottom:4px} .scene[data-id="14"] .canal-current .stepno{font-size:8px} .scene[data-id="14"] .canal-current strong{font-size:10px} .scene[data-id="14"] .canal-current span:last-child{font-size:8px} .scene[data-id="14"] .canal-level{font-size:8px;padding:2px 4px} .scene[data-id="14"] .canal-step{padding:4px 3px;gap:3px} .scene[data-id="14"] .canal-step i{flex-basis:16px;height:16px;font-size:8px} .scene[data-id="14"] .canal-step span{font-size:8px} .scene[data-id="14"] .canal-actions{gap:3px;margin-top:4px} .scene[data-id="14"] .canal-actions button{padding:4px 5px;font-size:8px} .scene[data-id="14"] .canal-tag{top:5px;padding:3px 5px;font-size:7px} .scene[data-id="1"]{grid-template-columns:minmax(0,43%) minmax(0,1fr);grid-template-rows:1fr;padding:50px 5vw 54px;gap:2vw} .scene[data-id="1"] .copy h1{font-size:clamp(29px,6vh,43px);margin:7px 0} .scene[data-id="1"] .copy p{font-size:clamp(10px,2vh,12px);line-height:1.5} .scene[data-id="1"] .learning{margin-top:8px;padding-top:7px;font-size:9px} .scene[data-id="1"] .visual{height:calc(100dvh - 108px);min-height:0} .scene[data-id="1"] .shen-profile{height:min(72dvh,330px);min-height:0} .scene[data-id="1"] .shen-caption{left:18px;bottom:17px;right:60px} .scene[data-id="1"] .shen-caption strong{font-size:16px} .scene[data-id="1"] .shen-caption span{font-size:8px} .scene[data-id="1"] .shen-caption em{font-size:7px} .scene[data-id="1"] .shen-seal{right:15px;bottom:17px;width:38px;height:42px;font-size:9px} .scene[data-id="1"] .shen-ribbon{right:-12px;font-size:7px;padding:6px 4px} } @media(orientation:landscape) and (max-width:1000px) and (max-height:420px){ .scene{padding-top:46px;padding-bottom:48px} .scene .copy h1{font-size:clamp(25px,5.8vh,34px)} .scene .copy p{font-size:9px;line-height:1.42} .scene .learning{font-size:8px;margin-top:6px} .scene .visual{height:calc(100dvh - 96px)} .scene[data-id="13"] .visual,.scene[data-id="14"] .visual{height:calc(100dvh - 92px)} .scene[data-id="1"] .shen-profile{height:min(72dvh,290px)} } /* END ORIENTATION EXPERIENCE ONLY */ /* BEGIN SCENE 01 SCROLL OPENING ONLY */ .shell.scroll-active .brand, .shell.scroll-active .topright, .shell.scroll-active .chapter, .shell.scroll-active .bottomnav{opacity:0!important;visibility:hidden!important;pointer-events:none!important} .shell.scroll-active:before{opacity:.18} .scroll-opening{position:absolute;inset:0;z-index:8;display:grid;place-items:center;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse 72% 62% at 50% 46%,#333a2b 0%,#182622 62%,#0b1412 100%);color:#f3e3bf} .scroll-opening:before{content:"";position:absolute;inset:17px;border:1px solid #d7ba7950;box-shadow:inset 0 0 0 5px #d7ba7910;pointer-events:none} .scroll-opening:after{content:"";position:absolute;inset:27px;background:radial-gradient(ellipse at 50% 48%,transparent 35%,#07110e38 100%);pointer-events:none} .scroll-reel{position:relative;z-index:1;width:min(94vw,180vh,2048px);aspect-ratio:3/1;overflow:hidden;clip-path:inset(0 50% 0 50%);opacity:.28;transform:perspective(1200px) rotateX(10deg) scaleX(.035);filter:drop-shadow(0 24px 35px #0009);transform-origin:center} .scroll-inner{position:absolute;left:-2%;top:-2%;width:104%;height:104%;overflow:hidden;transform-origin:center;} .scroll-painting{display:block;width:100%;height:100%;object-fit:fill;user-select:none;pointer-events:none;-webkit-user-drag:none} .scroll-opening.is-playing .scroll-reel{animation:scroll-unfurl 1.18s cubic-bezier(.16,.78,.18,1) forwards} .scroll-opening.is-playing .scroll-inner{animation:scroll-landscape-breath 14s ease-in-out 1.05s infinite alternate} @keyframes scroll-unfurl{0%{clip-path:inset(0 50% 0 50%);opacity:.22;transform:perspective(1200px) rotateX(12deg) scaleX(.035);filter:blur(7px) drop-shadow(0 24px 35px #0009)}62%{opacity:1;filter:blur(.2px) drop-shadow(0 27px 43px #000a);transform:perspective(1200px) rotateX(1deg) scaleX(1.008)}100%{clip-path:inset(0);opacity:1;filter:blur(0) drop-shadow(0 22px 38px #0009);transform:perspective(1200px) rotateX(0) scaleX(1)}} @keyframes scroll-landscape-breath{0%{transform:scale(1.005) translate3d(.15%,0,0)}100%{transform:scale(1.026) translate3d(-.35%,-.25%,0)}} .scroll-ink-veil{position:absolute;z-index:3;display:block;pointer-events:none;opacity:.98;background:radial-gradient(ellipse 72% 66% at 50% 49%,#efe2c4 0%,#eee0c1 64%,#e8d7b2 83%,#e8d7b200 100%);filter:blur(.15px);transition:opacity .72s cubic-bezier(.18,.68,.24,1)} .scroll-ink-veil--title{left:17.5%;top:13%;width:65%;height:47%;mask-image:radial-gradient(ellipse at center,#000 69%,transparent 99%)} .scroll-ink-veil--english{left:29%;top:60.5%;width:42%;height:23%;mask-image:radial-gradient(ellipse at center,#000 67%,transparent 99%)} .scroll-opening.ink-title-on .scroll-ink-veil--title,.scroll-opening.ink-english-on .scroll-ink-veil--english{opacity:0} .scroll-air{position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow:visible;pointer-events:none} .scroll-air path{fill:none;stroke:#fff3d3;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;opacity:.28} .scroll-cloud-a{animation:scroll-cloud-drift 16s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center} .scroll-cloud-b{animation:scroll-cloud-drift 21s ease-in-out -6s infinite alternate-reverse;transform-box:fill-box;transform-origin:center;opacity:.62} @keyframes scroll-cloud-drift{0%{transform:translate3d(-1%,2px,0)}100%{transform:translate3d(1.5%,-3px,0)}} .scroll-bird{position:absolute;z-index:4;width:clamp(22px,3vw,46px);height:auto;overflow:visible;filter:drop-shadow(0 1px 1px #442e1b55);animation:scroll-bird-glide 11s ease-in-out infinite alternate} .scroll-bird .wing{fill:#30291f;transform-box:fill-box;transform-origin:50% 75%;animation:scroll-wingbeat .48s ease-in-out infinite alternate} .scroll-bird .wing.left{transform-origin:96% 90%}.scroll-bird .wing.right{transform-origin:4% 90%;animation-delay:-.07s} .scroll-bird.bird-a{left:12%;top:25%;animation-duration:13s} .scroll-bird.bird-b{left:82%;top:18%;width:clamp(19px,2.3vw,35px);animation-delay:-3s;animation-duration:15s} .scroll-bird.bird-c{left:86%;top:27%;width:clamp(15px,1.8vw,27px);animation-delay:-7s;animation-duration:17s} @keyframes scroll-wingbeat{0%{transform:rotate(22deg) scaleY(.7)}100%{transform:rotate(-19deg) scaleY(1.1)}} @keyframes scroll-bird-glide{0%{translate:-3px 3px}100%{translate:8px -7px}} .scroll-opening.is-closing .scroll-reel{animation:scroll-fold 880ms cubic-bezier(.7,.02,.32,1) forwards} .scroll-opening.is-closing .scroll-inner{animation:none} .scroll-opening.is-closing .scroll-ink-veil{opacity:1;transition:opacity .22s ease} @keyframes scroll-fold{0%{clip-path:inset(0);opacity:1;transform:perspective(1200px) rotateX(0) scaleX(1);filter:blur(0) drop-shadow(0 22px 38px #0009)}58%{opacity:.94;transform:perspective(1200px) rotateX(7deg) scaleX(.62)}100%{clip-path:inset(0 50% 0 50%);opacity:.04;transform:perspective(1200px) rotateX(13deg) scaleX(.035);filter:blur(5px) drop-shadow(0 24px 35px #0009)}} .scroll-kicker{position:absolute;z-index:2;top:7.5vh;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:13px;color:#d6be8e;font-size:10px;letter-spacing:.38em;text-shadow:0 2px 10px #070d0b} .scroll-kicker:before,.scroll-kicker:after{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,#d3b77c)} .scroll-kicker:after{transform:scaleX(-1)} .scroll-bottom-note{position:absolute;z-index:2;bottom:7vh;left:50%;transform:translateX(-50%);color:#c9b891;font-size:9px;letter-spacing:.29em;text-shadow:0 2px 12px #040a08;white-space:nowrap} .scroll-skip{position:absolute;right:5vw;bottom:5vh;z-index:6;border:0;border-bottom:1px solid #d6be8d88;padding:8px 2px;background:transparent;color:#e1cca4;font-size:10px;letter-spacing:.18em;opacity:.72;transition:opacity .2s,color .2s} .scroll-skip:hover{opacity:1;color:#fff3d4} .scroll-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} .scroll-chapter-wipe{position:absolute;inset:0;z-index:80;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,#d8c393 0%,#667465 24%,#233a32 57%,#0e1917 88%);clip-path:ellipse(0% 0% at 50% 50%);animation:scroll-ink-wash 1.28s cubic-bezier(.28,.08,.28,1) forwards} @keyframes scroll-ink-wash{0%{clip-path:ellipse(0% 0% at 50% 50%);opacity:.97;filter:blur(5px)}22%{clip-path:ellipse(63% 105% at 50% 50%);opacity:.98;filter:blur(0)}46%{clip-path:ellipse(130% 170% at 50% 50%);opacity:.98}100%{clip-path:ellipse(145% 190% at 50% 50%);opacity:0;filter:blur(17px)}} @media(max-width:850px) and (orientation:landscape){.scroll-opening:before{inset:9px}.scroll-opening:after{inset:15px}.scroll-reel{width:min(94vw,180vh,2048px)}.scroll-kicker{top:3.5vh;font-size:8px}.scroll-bottom-note{bottom:3.2vh;font-size:7px}.scroll-skip{right:4vw;bottom:3vh;font-size:8px}} @media(prefers-reduced-motion:reduce){.scroll-opening.is-playing .scroll-reel{animation:none;clip-path:none;opacity:1;transform:none;filter:drop-shadow(0 22px 38px #0009)}.scroll-opening.is-playing .scroll-inner,.scroll-opening.is-playing .scroll-cloud-a,.scroll-opening.is-playing .scroll-cloud-b,.scroll-opening.is-playing .scroll-bird,.scroll-opening.is-playing .scroll-bird .wing{animation:none}.scroll-opening.is-playing .scroll-ink-veil{display:none}.scroll-chapter-wipe{animation-duration:.45s}} /* END SCENE 01 SCROLL OPENING ONLY */ /* Local webfonts: Noto CJK Simplified Chinese subsets, SIL Open Font License 1.1. */ @font-face{font-family:"Noto Serif SC";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/NotoSerifSC-Regular.woff2") format("woff2")} @font-face{font-family:"Noto Serif SC";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/NotoSerifSC-Bold.woff2") format("woff2")} @font-face{font-family:"Noto Sans SC";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/NotoSansSC-Regular.woff2") format("woff2")} @font-face{font-family:"Noto Sans SC";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/NotoSansSC-Bold.woff2") format("woff2")} body,.book-scene,.scroll-opening{font-family:"Noto Serif SC",serif} /* 卷首：器物由纸、木轴与装裱层构成，山水只是一层画心。 */ .shell.scroll-active,.shell.book-active{background:#0d1c1a} .shell.book-active .brand,.shell.book-active .topright,.shell.book-active .chapter,.shell.book-active .bottomnav{opacity:0!important;visibility:hidden!important;pointer-events:none!important} .scroll-opening{background:radial-gradient(ellipse 72% 66% at 50% 44%,#294039 0%,#142923 56%,#091713 100%);font-family:"Noto Serif SC",serif} .scroll-opening:before{inset:18px;border-color:#bc9c5e5c;box-shadow:inset 0 0 0 5px #d2b4770b} .scroll-opening:after{inset:28px;background:radial-gradient(ellipse at 50% 43%,transparent 22%,#07120d85 100%)} .scroll-stars{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .scroll-stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#f6e3af;opacity:.12;box-shadow:0 0 9px 1px #e8d29a6c;animation:star-pulse var(--d,4s) ease-in-out var(--delay,0s) infinite alternate} .scroll-stars i:nth-child(9n){width:3px;height:3px;box-shadow:0 0 15px 3px #d6bd7a68} @keyframes star-pulse{from{opacity:.08;transform:scale(.65)}to{opacity:.68;transform:scale(1.18)}} .scroll-reel,.scroll-opening.is-playing .scroll-reel{z-index:2;width:min(92vw,1460px);height:min(51vh,560px);min-height:260px;aspect-ratio:auto;overflow:visible;clip-path:none;opacity:1;filter:none;transform:perspective(1300px) rotateX(3deg);animation:none;margin-top:-8vh} .scroll-reel:before{content:"";position:absolute;left:7%;right:7%;bottom:-21px;height:35px;background:#020907b8;filter:blur(19px);border-radius:50%} .scroll-paper{position:absolute;inset:4.5% 1.7%;overflow:hidden;clip-path:inset(0 50% 0 50%);background:#e8d6ab;border-top:9px solid #9b7a4c;border-bottom:9px solid #87643c;box-shadow:inset 0 0 0 2px #e7c88a,inset 0 0 0 14px #a77c426b,inset 0 0 60px #60411e79,0 24px 35px #020906a6;transform-origin:center} .scroll-paper:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#5134198a 0%,transparent 5%,transparent 95%,#50351b91 100%),repeating-linear-gradient(90deg,#76532b15 0 1px,transparent 1px 83px),radial-gradient(ellipse at center,transparent 42%,#71492336 100%);mix-blend-mode:multiply} .scroll-paper:after{content:"";position:absolute;inset:6px;z-index:3;border:1px solid #a27c4780;pointer-events:none} .scroll-landscape{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 49%;filter:saturate(.74) sepia(.15) contrast(.91);user-select:none;pointer-events:none} .scroll-gild{position:absolute;left:0;right:0;height:10px;z-index:2;background:repeating-linear-gradient(90deg,#3d2b20 0 3px,#ad814b 3px 8px,#563a23 8px 11px,#d5ae70 11px 13px);opacity:.72} .scroll-gild--top{top:0}.scroll-gild--bottom{bottom:0} .scroll-mist{position:absolute;z-index:2;left:-8%;width:82%;height:25%;background:radial-gradient(ellipse at 38% 50%,#fffaf1b8,transparent 71%);filter:blur(20px);opacity:0;pointer-events:none} .scroll-mist--a{bottom:10%;animation:mist-sail 18s ease-in-out infinite alternate}.scroll-mist--b{top:13%;left:47%;width:62%;opacity:.26;animation:mist-sail 23s ease-in-out -5s infinite alternate-reverse} .scroll-opening.is-playing .scroll-mist{opacity:.42;transition:opacity 2.2s 1s}.scroll-opening.is-closing .scroll-mist{opacity:0;transition:opacity .6s} @keyframes mist-sail{to{transform:translateX(16%) translateY(-7px) scale(1.07)}} .scroll-roller{position:absolute;z-index:6;top:0;bottom:0;left:50%;width:clamp(27px,3.2vw,49px);border-radius:24px;background:linear-gradient(90deg,#190e09 0%,#4e2917 11%,#a56b35 25%,#e4bb73 39%,#9b592c 55%,#4c2918 76%,#180d09 100%);border:1px solid #d7a762a8;box-shadow:inset 4px 0 7px #f4ce8d4a,inset -7px 0 9px #130802c9,7px 9px 16px #040806a8;transform:translateX(-50%)} .scroll-roller:before,.scroll-roller:after{content:"";position:absolute;left:50%;width:135%;height:28px;border-radius:50% 50% 35% 35%;transform:translateX(-50%);background:radial-gradient(ellipse at 32% 28%,#e9c987,#8c552c 48%,#25120c 83%);border:1px solid #d1a46b;box-shadow:0 4px 8px #050807a8} .scroll-roller:before{top:-15px}.scroll-roller:after{bottom:-15px;transform:translateX(-50%) rotate(180deg)} .scroll-roller>i{position:absolute;inset:11% 22%;border-left:1px solid #e2c0798e;border-right:1px solid #2a160db5;background:repeating-linear-gradient(0deg,transparent 0 21px,#e9c7895a 21px 23px,transparent 23px 45px)} .scroll-roller--right{filter:brightness(.88)} .scroll-opening.is-playing .scroll-paper{animation:paper-unfurl 2.8s cubic-bezier(.29,.04,.18,1) forwards} .scroll-opening.is-playing .scroll-roller--left{animation:roller-left 2.8s cubic-bezier(.29,.04,.18,1) forwards} .scroll-opening.is-playing .scroll-roller--right{animation:roller-right 2.8s cubic-bezier(.29,.04,.18,1) forwards} @keyframes paper-unfurl{0%{clip-path:inset(0 50% 0 50%);filter:brightness(.64)}18%{clip-path:inset(0 42% 0 42%)}78%{filter:brightness(.95)}100%{clip-path:inset(0 0 0 0);filter:brightness(1)}} @keyframes roller-left{from{left:50%;transform:translateX(-50%) rotate(0)}to{left:1.7%;transform:translateX(-50%) rotate(-720deg)}} @keyframes roller-right{from{left:50%;transform:translateX(-50%) rotate(0)}to{left:98.3%;transform:translateX(-50%) rotate(720deg)}} .scroll-opening.is-closing .scroll-paper{animation:paper-fold 1.42s cubic-bezier(.63,0,.45,1) forwards} .scroll-opening.is-closing .scroll-roller--left{animation:roller-left-fold 1.42s cubic-bezier(.63,0,.45,1) forwards} .scroll-opening.is-closing .scroll-roller--right{animation:roller-right-fold 1.42s cubic-bezier(.63,0,.45,1) forwards} @keyframes paper-fold{from{clip-path:inset(0);filter:brightness(1)}to{clip-path:inset(0 50% 0 50%);filter:brightness(.5)}} @keyframes roller-left-fold{from{left:1.7%;transform:translateX(-50%) rotate(-720deg)}to{left:50%;transform:translateX(-50%) rotate(0)}} @keyframes roller-right-fold{from{left:98.3%;transform:translateX(-50%) rotate(720deg)}to{left:50%;transform:translateX(-50%) rotate(0)}} .scroll-title-group{position:absolute;z-index:5;left:27%;right:27%;top:19%;bottom:15%;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center} .scroll-title{margin:0;white-space:nowrap;font-family:"Kaiti SC","Noto Serif SC",serif;font-weight:600;font-size:clamp(44px,6.6vw,116px);letter-spacing:.11em;color:#211f18;text-shadow:1px 2px 1px #f6e9c4a3,2px 5px 8px #352d2247;opacity:0;filter:blur(11px);transform:translateY(8px)} .scroll-subtitle{font-family:"Noto Serif SC",serif;text-transform:uppercase;letter-spacing:.31em;color:#4b4031;font-size:clamp(10px,1.15vw,18px);margin-top:13px;opacity:0;filter:blur(8px)} .scroll-opening.is-playing .scroll-title{animation:ink-arrive 1.25s ease 2.35s forwards}.scroll-opening.is-playing .scroll-subtitle{animation:ink-arrive 1s ease 3.15s forwards} .scroll-opening.is-closing .scroll-title,.scroll-opening.is-closing .scroll-subtitle{opacity:0;transition:opacity .55s;animation:none} @keyframes ink-arrive{to{opacity:.94;filter:blur(0);transform:translateY(0)}} .scroll-bird{z-index:4;opacity:0}.scroll-opening.is-playing .scroll-bird{opacity:.78;transition:opacity 1.1s 2.1s}.scroll-opening.is-closing .scroll-bird{opacity:0;transition:opacity .5s} .scroll-bird.bird-a{left:14%;top:34%;animation:bird-range-a 7s ease-in-out infinite alternate}.scroll-bird.bird-b{left:76%;top:23%;animation:bird-range-b 8.7s ease-in-out -2s infinite alternate}.scroll-bird.bird-c{left:83%;top:38%;animation:bird-range-c 9.5s ease-in-out -4s infinite alternate} @keyframes bird-range-a{to{translate:32px -15px}}@keyframes bird-range-b{to{translate:-34px 14px}}@keyframes bird-range-c{to{translate:-22px -19px}} .scroll-kicker{top:5vh;color:#d9c496;font-size:11px;letter-spacing:.24em}.scroll-bottom-note{display:none} .scroll-observatory{position:absolute;z-index:3;bottom:6vh;left:50%;transform:translateX(-50%);width:min(80vw,1040px);height:clamp(80px,12vh,126px);display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;border-top:1px solid #d6bf8266;border-bottom:1px solid #d6bf824d;background:linear-gradient(90deg,transparent,#0d221cbb 13%,#0d221cbb 87%,transparent);box-shadow:0 13px 38px #030a075c;color:#d8c99d} .scroll-observatory article{display:flex;align-items:center;gap:13px;justify-content:center;min-width:0;border-right:1px solid #d4bc7652;padding:0 12px}.scroll-observatory article:last-child{border-right:0} .scroll-observatory svg{width:66px;height:66px;flex:none;stroke:#d8bc78;fill:none;stroke-width:1.25;filter:drop-shadow(0 0 6px #d3b87844)} .scroll-observatory b{display:block;font-size:13px;font-weight:400;letter-spacing:.18em}.scroll-observatory small{display:block;color:#a8ab91;font-size:9px;margin-top:6px;letter-spacing:.08em;white-space:nowrap} .scroll-observatory:before{content:"";position:absolute;left:49.8%;top:-30px;width:1px;height:30px;background:linear-gradient(transparent,#d5c07f8c)} .scroll-skip{bottom:2vh;right:3vw;z-index:9} /* 第二幕：纸纹为图像资产，书页文字与燃烧均为浏览器真实图层。 */ .book-scene{position:absolute;inset:0;z-index:8;display:grid;place-items:center;overflow:hidden;color:#3b2b1c;background:radial-gradient(ellipse at 50% 47%,#70553b 0%,#3c2b21 50%,#171812 100%);animation:book-enter .9s ease both} .book-scene:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(2deg,#140d0870 0 2px,transparent 2px 13px),linear-gradient(95deg,#1a1712bb,transparent 28%,#0a0e0b55 78%,#100d0b);opacity:.18;pointer-events:none} @keyframes book-enter{from{opacity:0;filter:blur(8px);transform:scale(1.025)}to{opacity:1;filter:blur(0);transform:scale(1)}} .book-topline{position:absolute;top:4.5vh;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.26em;color:#d9c596;white-space:nowrap} .book-volume{position:relative;width:min(86vw,1240px);height:min(74vh,720px);min-height:340px;transform:perspective(1300px) rotateX(2deg) rotateZ(-.6deg);background:#e8d4aa var(--book-paper) center / 100% 100% no-repeat;border:9px solid #593c26;border-radius:5px 9px 10px 5px;box-shadow:0 0 0 5px #a07646,0 0 0 11px #342419,22px 34px 60px #0a0b08bc,inset 0 0 25px #5634156d;isolation:isolate} .book-volume:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,transparent 44%,#7244213b 100%),linear-gradient(90deg,#28140823,transparent 6%,transparent 46%,#311a1440 50%,transparent 54%,transparent 94%,#27130645);mix-blend-mode:multiply} .book-volume:after{content:"";position:absolute;inset:12px;z-index:4;border:1px solid #7e5d3670;pointer-events:none;box-shadow:inset 0 0 0 9px #e5c99820} .book-gutter{position:absolute;z-index:3;top:2%;bottom:2%;left:50%;width:2px;transform:translateX(-50%);background:linear-gradient(90deg,#76502d,#251b16 50%,#e8d19d);box-shadow:-10px 0 19px #4a331f55,9px 0 17px #faf0d277;pointer-events:none} .book-leaf{position:absolute;inset:5% auto 5% 3%;width:44%;display:flex;gap:18px;flex-direction:row-reverse;align-items:stretch;writing-mode:vertical-rl;text-orientation:mixed;color:#30291f;text-shadow:0 1px 0 #fff6db5c;z-index:3} .book-leaf--right{left:auto;right:3%;width:44%} .book-leaf h1{font-size:clamp(29px,3vw,47px);line-height:1.25;font-weight:500;letter-spacing:.19em;margin:8% 0 0;color:#3c2e21} .book-leaf p{font-size:clamp(14px,1.32vw,21px);line-height:1.85;letter-spacing:.1em;margin:4% 0 0;max-height:90%;font-weight:400} .book-leaf .book-rubric{font-size:11px;letter-spacing:.28em;color:#9b5a3e;border-right:1px solid #8e684584;padding-right:10px;white-space:nowrap} .book-leaf .book-small{font-size:13px;letter-spacing:.12em;color:#68513b} .book-seal{position:absolute;right:8%;bottom:9%;border:2px solid #8d4231;color:#8d4231;font-size:16px;line-height:1.1;padding:5px;writing-mode:vertical-rl;opacity:.78;z-index:5;transform:rotate(-7deg)} .book-caption{position:absolute;z-index:3;bottom:3.3vh;left:50%;transform:translateX(-50%);color:#d8c29a;letter-spacing:.12em;font-size:11px;white-space:nowrap} .book-burn-now,.book-skip{position:absolute;bottom:3vh;z-index:9;background:#1c1c16a6;color:#f0dbb0;border:1px solid #d6b7797f;padding:8px 13px;font-size:11px;letter-spacing:.1em} .book-burn-now{left:4vw}.book-skip{right:4vw} .book-burn-now:hover,.book-skip:hover{background:#60462d} .book-burn-layer{z-index:81!important;pointer-events:none!important;animation:none!important;--burn-r:0px;mask-image:radial-gradient(circle at 50% 50%,transparent 0,transparent calc(var(--burn-r) - 12px),#000 calc(var(--burn-r) + 6px));-webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 0,transparent calc(var(--burn-r) - 12px),#000 calc(var(--burn-r) + 6px))} .book-burn-layer .book-burn-now,.book-burn-layer .book-skip,.book-burn-layer .book-caption{display:none} .book-ember-canvas{position:absolute;inset:0;z-index:82;width:100%;height:100%;pointer-events:none} @media(max-width:850px){.scroll-reel,.scroll-opening.is-playing .scroll-reel{width:93vw;min-height:0;height:52vh;margin-top:-5vh}.scroll-title{font-size:clamp(34px,7vw,67px)}.scroll-subtitle{font-size:9px;margin-top:5px;letter-spacing:.12em}.scroll-observatory{height:18vh;bottom:4vh;width:86vw}.scroll-observatory svg{width:39px;height:39px}.scroll-observatory article{gap:5px;padding:0 5px}.scroll-observatory b{font-size:9px}.scroll-observatory small{font-size:7px;white-space:normal}.scroll-kicker{top:2vh;font-size:8px}.scroll-skip{bottom:1.5vh;font-size:8px}.book-volume{width:88vw;height:78vh;min-height:0;border-width:5px}.book-leaf{gap:7px}.book-leaf h1{font-size:24px}.book-leaf p{font-size:12px;line-height:1.65}.book-leaf .book-rubric{font-size:8px}.book-leaf .book-small{font-size:9px}.book-seal{font-size:10px}.book-topline{top:1.5vh;font-size:8px}.book-caption{bottom:2vh;font-size:8px}.book-burn-now,.book-skip{bottom:1.5vh;padding:5px 7px;font-size:8px}} @media(max-width:850px) and (orientation:landscape) and (max-height:420px){.scroll-reel,.scroll-opening.is-playing .scroll-reel{height:53vh}.scroll-observatory{height:18vh;bottom:3vh}.scroll-title{font-size:clamp(32px,6.7vw,57px)}.book-volume{height:75vh}.book-leaf p{font-size:10px;line-height:1.55}.book-leaf h1{font-size:19px}.book-leaf .book-small{display:none}.book-topline{display:none}} @media(prefers-reduced-motion:reduce){.scroll-opening.is-playing .scroll-paper{clip-path:none;animation:none}.scroll-opening.is-playing .scroll-roller--left{left:1.7%;animation:none}.scroll-opening.is-playing .scroll-roller--right{left:98.3%;animation:none}.scroll-opening.is-playing .scroll-title,.scroll-opening.is-playing .scroll-subtitle{opacity:1;filter:none;transform:none;animation:none}.scroll-stars i,.scroll-mist,.scroll-bird{animation:none!important}.book-scene{animation:none}} /* 木轴只沿纸面移动，轴上的纹理转动；整根轴保持竖直。 */ @keyframes roller-left{from{left:50%;transform:translateX(-50%)}to{left:1.7%;transform:translateX(-50%)}} @keyframes roller-right{from{left:50%;transform:translateX(-50%)}to{left:98.3%;transform:translateX(-50%)}} @keyframes roller-left-fold{from{left:1.7%;transform:translateX(-50%)}to{left:50%;transform:translateX(-50%)}} @keyframes roller-right-fold{from{left:98.3%;transform:translateX(-50%)}to{left:50%;transform:translateX(-50%)}} .scroll-opening.is-playing .scroll-roller>i{animation:spool-grain 2.8s ease-out forwards} .scroll-opening.is-closing .scroll-roller>i{animation:spool-grain 1.42s ease-in reverse} @keyframes spool-grain{from{background-position-y:0}to{background-position-y:115px}} .book-leaf{display:block;writing-mode:vertical-rl;padding:7% 5%;inset:5% auto 5% 3%;width:44%;height:90%;overflow:hidden} .book-leaf--right{left:auto;right:3%} .book-leaf .book-rubric{display:block;margin:0 0 17px;padding:0 0 0 7px} .book-leaf h1{display:block;margin:0 13px 0 20px;font-size:36px;line-height:1.3} .book-leaf p{display:block;margin:0 12px 0 0;font-size:19px;line-height:1.8;max-height:100%} .book-leaf .book-small{font-size:13px} @media(max-width:850px){.book-leaf{padding:4% 3%}.book-leaf .book-rubric{margin-bottom:8px}.book-leaf h1{font-size:21px;margin:0 5px 0 9px}.book-leaf p{font-size:11px;line-height:1.55;margin-right:5px}.book-leaf .book-small{display:none}} @media(max-width:850px) and (orientation:landscape) and (max-height:420px){.book-leaf h1{font-size:19px}.book-leaf p{font-size:10px;line-height:1.45}} .book-marginalia{position:absolute;z-index:3;left:8%;bottom:12%;width:27%;height:34%;stroke:#66533b;fill:none;stroke-width:1.4;opacity:.23;pointer-events:none} .book-marginalia circle.dot{fill:#66533b;stroke:none} .book-marginalia text{fill:#66533b;stroke:none;font:11px "Noto Serif SC",serif;letter-spacing:.15em} @media(max-width:850px){.book-marginalia{left:8%;bottom:10%;width:25%;height:31%;opacity:.18}} :root{--hui-pattern:url("../assets/images/image-1a2abe879a.svg");--cloud-pattern:url("../assets/images/image-ca0c6f39f5.svg");--wood-pattern:url("../assets/images/image-ca9d0c8e8a.svg");} /* 丝绫装裱：回纹、云雷纹与木轴暗刻都独立于画心。 */ .scroll-gild{height:20px;opacity:1;background-color:#233a33;background-image:var(--hui-pattern);background-repeat:repeat-x;background-size:72px 20px;border-top:1px solid #d9c189a8;border-bottom:1px solid #715332;box-shadow:0 2px 5px #3a2c1c68} .scroll-gild--top{top:0}.scroll-gild--bottom{bottom:0;transform:scaleY(-1)} .scroll-silk{position:absolute;z-index:3;top:0;bottom:0;width:clamp(26px,3.1vw,49px);background-color:#29473c;background-image:var(--cloud-pattern);background-size:38px 54px;border-left:2px solid #ad8d5c;border-right:2px solid #ad8d5c;box-shadow:inset 0 0 16px #102821ad,0 0 10px #38291777} .scroll-silk--left{left:0}.scroll-silk--right{right:0;transform:scaleX(-1)} .scroll-silk:after{content:"";position:absolute;inset:0 5px;border-left:1px solid #e6cc9280;border-right:1px solid #e6cc9252} .scroll-paper:before{background:linear-gradient(90deg,#5134199c 0%,transparent 6%,transparent 94%,#50351b9c 100%),repeating-linear-gradient(93deg,#76532b10 0 1px,transparent 1px 37px),radial-gradient(ellipse at 51% 45%,transparent 37%,#65442044 100%)} .scroll-roller>i{background-image:var(--wood-pattern),repeating-linear-gradient(0deg,transparent 0 21px,#e9c7895a 21px 23px,transparent 23px 45px);background-size:28px 86px,auto;background-repeat:repeat-y;opacity:.82} .scroll-roller{box-shadow:inset 4px 0 7px #f4ce8d4a,inset -7px 0 9px #130802c9,7px 9px 16px #040806a8,0 0 0 3px #6e462a} /* 各章用不同的展签结构，正文在页面内完整排开，不嵌小滚动窗。 */ .scene[data-form] .copy,.scene[data-form]:has(.note-trigger) .copy,.scene[data-id="13"] .copy{max-height:none!important;overflow:visible!important;scrollbar-width:none!important} .scene[data-form] .copy:before{background:linear-gradient(90deg,#efe3c2b8 0%,#efe3c281 68%,transparent);filter:blur(22px);inset:-20px -26px -20px -24px} .scene[data-form] .microfact{display:none!important} .scene[data-form] .copy p{max-width:34em} .scene[data-form] .learning{margin-top:20px;padding:11px 0 0;background:none;border-top:1px solid #a47e5b;backdrop-filter:none;box-shadow:none} .scene[data-form] .note-trigger{align-self:flex-start;margin-top:15px;padding:4px 0 6px;font-size:12px} .scene[data-form="archive"] .copy{border-left:3px double #9e5940;padding-left:26px} .scene[data-form="archive"] .copy h1{font-size:clamp(52px,5.7vw,88px);margin:17px 0 15px} .scene[data-form="archive"] .copy:after{content:"人物 · 见闻";position:absolute;left:-18px;bottom:2px;writing-mode:vertical-rl;font-size:9px;letter-spacing:.25em;color:#925b43;background:#ead8b9;padding:5px 2px} .scene[data-form="atlas"] .copy{padding:17px 0 14px 30px;border-left:1px solid #cfb17a} .scene[data-form="atlas"] .copy:before{background:linear-gradient(90deg,#0d243bdc,#132c43bd 70%,transparent)} .scene[data-form="atlas"] .copy:after{content:"✦";position:absolute;top:-20px;left:19px;color:#f2d394;font-size:20px;text-shadow:0 0 13px #e5c47c} .scene[data-form="atlas"] .learning{border-color:#bda272;background:none} .scene[data-form="workshop"] .copy{padding:20px 28px 18px 25px;border-top:3px solid #8f5840;border-bottom:1px solid #876448;background:linear-gradient(100deg,#f0e2c9bd,#f0e2c96b 72%,transparent);clip-path:polygon(0 0,100% 0,100% 96%,96% 100%,0 100%)} .scene[data-form="workshop"] .copy:before{display:none} .scene[data-form="workshop"] .copy h1{margin:12px 0 15px} .scene[data-form="workshop"] .eyebrow:before{width:20px} .scene[data-form="field"] .copy{padding:12px 22px 15px 28px;border-left:10px solid transparent;border-image:repeating-linear-gradient(180deg,#6d6550 0 12px,#a7855e 12px 18px,#d5b98e 18px 24px) 1;background:linear-gradient(90deg,#e5d6b8bc,#e5d6b885 70%,transparent)} .scene[data-form="field"] .copy:before{display:none} .scene[data-form="field"] .learning{border-top:1px dashed #937356} .scene[data-form="source"] .copy{padding:21px 31px 20px;background:#efe1c4d8;box-shadow:5px 9px 20px #34271a32;clip-path:polygon(0 0,97% 0,100% 5%,100% 100%,0 100%)} .scene[data-form="source"] .copy:before{display:none} .scene[data-form="source"] .copy h1{font-size:clamp(48px,5vw,74px)} .scene[data-form="source"] .eyebrow{letter-spacing:.17em} .scene[data-form="finale"] .copy{padding:19px 26px;border-top:1px solid #9a7854;border-bottom:1px solid #9a7854;background:linear-gradient(90deg,#eadbc0a8,#eadbc06b,transparent)} .scene[data-form="finale"] .copy:before{display:none} .scene[data-form="finale"] .copy h1{margin:13px 0} .shell[data-tone="night"] .scene[data-form] .copy:before{background:linear-gradient(90deg,#0e2138e8,#11283bbb 70%,transparent)} .shell[data-tone="night"] .scene[data-form="workshop"] .copy,.shell[data-tone="night"] .scene[data-form="finale"] .copy{background:linear-gradient(90deg,#172e43dc,#172e43a5,transparent);color:#f5e8ce;border-color:#d1ad74} @media(max-width:1000px) and (orientation:landscape){.scene[data-form] .copy h1,.scene[data-form="source"] .copy h1,.scene[data-form="archive"] .copy h1{font-size:clamp(30px,5.4vh,45px);margin:7px 0}.scene[data-form] .copy h1 em{margin-top:2px}.scene[data-form] .copy p{font-size:clamp(10px,2.2vh,13px);line-height:1.42}.scene[data-form] .learning{margin-top:8px;padding-top:5px;font-size:10px}.scene[data-form] .note-trigger{margin-top:7px;font-size:10px}.scene[data-form="workshop"] .copy,.scene[data-form="source"] .copy,.scene[data-form="finale"] .copy{padding:9px 14px}.scene[data-form="archive"] .copy,.scene[data-form="atlas"] .copy,.scene[data-form="field"] .copy{padding-left:17px}.scene[data-form="archive"] .copy:after{display:none}} @media(max-width:850px) and (orientation:portrait){.scene[data-form] .copy{max-height:none!important}.scene[data-form] .copy h1{font-size:clamp(36px,8vw,54px)}.scene[data-form] .copy p{font-size:13px}.scene[data-form] .learning{display:flex}.scene[data-form="workshop"] .copy,.scene[data-form="source"] .copy,.scene[data-form="finale"] .copy{padding:15px 18px}} /* The embedded serif is also used for titles and controls on devices without a Chinese system font. */ :root{--serif:"Noto Serif SC",serif} .scene .copy h1,.scene .copy h1 em,.scene .copy p,.scene .copy .learning,.scene .copy .eyebrow,.scene .copy .footnote,.scene .copy .note-trigger,.bottomnav,.topright,.chapter,.brand,.visual{font-family:var(--serif)} /* Night chapter text keeps the pale metal ink legible against painted skies. */ .shell[data-tone="night"] .scene[data-form] .copy h1,.shell[data-tone="night"] .scene[data-form] .copy h1 em{color:#f2d69c;text-shadow:0 2px 8px #0a1b2c,0 8px 24px #0a1b2c} .shell[data-tone="night"] .scene[data-form] .copy p{color:#eee1c4;text-shadow:0 1px 5px #10263a} .shell[data-tone="night"] .scene[data-form] .copy .learning,.shell[data-tone="night"] .scene[data-form] .copy .learning span{color:#efdbaf} .shell[data-tone="night"] .scene[data-form] .copy .eyebrow,.shell[data-tone="night"] .scene[data-form] .copy .learning strong,.shell[data-tone="night"] .scene[data-form] .note-trigger{color:#e6b780} /* READER_V6_CSS_BEGIN */ /* 梦溪阅读版：墨青、纸灰、古铜。背景只保留低饱和的画面与明暗层次。 */ :root{--reader-ink:#263a37;--reader-muted:#667066;--reader-paper:#e4ddce;--reader-bronze:#a98054;--reader-night:#172d30;--reader-top:82px;--reader-bottom:90px;--reader-side:7vw} html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:manipulation} body{background:#172d30} #shell{height:var(--view-height,100dvh);min-height:0;width:100%;color:var(--reader-ink)} #shell:before,#shell:after,#shell .atmosphere,#cinema,.cinema-prompt,.cinema-stamp,.scroll-stars,.halo,.orbital,.artlabel,.marginmark{display:none!important} #shell .scene-painting{inset:0;animation:none;transform:none;filter:saturate(.64) contrast(.91) brightness(.97) sepia(.09);transition:filter .5s;background-position:64% center} #shell .scene-painting:after{background:linear-gradient(90deg,#e4ddceed 0%,#e4ddceca 23%,#e4ddce65 48%,transparent 72%);mix-blend-mode:normal} #shell .scene-painting[data-art="night"]{filter:saturate(.62) contrast(.89) brightness(.88)} #shell .scene-painting[data-art="night"]:after{background:linear-gradient(90deg,#182d34e8 0%,#182d34b5 27%,#182d3433 54%,transparent 74%)} #shell .brand{left:var(--reader-side);top:25px;gap:10px;font-size:12px;letter-spacing:.23em;color:#334740} #shell .brand .seal{border:0;box-shadow:none;background:none;color:#334740;font-size:19px;padding:0 10px 0 0;writing-mode:horizontal-tb;line-height:1.2;letter-spacing:0} #shell .topright{right:var(--reader-side);top:29px;color:#465549;font-size:12px;gap:16px;letter-spacing:0} #shell .topright .bar,#shell .chapter{display:none!important} #shell .topright{display:none!important} #shell .linkbtn{padding:5px 0;font-size:12px;letter-spacing:.04em} #shell[data-palette="night"] .brand,#shell[data-palette="night"] .brand .seal,#shell[data-palette="night"] .topright{color:#e4ddce} #shell #stage .scene[data-form]{inset:var(--reader-top) var(--reader-side) var(--reader-bottom);padding:0!important;display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:4.5vw;align-items:center;overflow:visible;animation:none;transform:none;filter:none} #shell #stage .scene[data-form] .copy{align-self:center;max-width:570px;width:100%;height:auto;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;clip-path:none!important;max-height:none!important;overflow:visible!important;color:var(--reader-ink);text-shadow:none;scrollbar-width:none} #shell #stage .scene[data-form] .copy:before,#shell #stage .scene[data-form] .copy:after{display:none!important} .reader-heading{margin:0 0 23px} #shell #stage .reader-heading .eyebrow{font-size:12px;line-height:1.3;letter-spacing:.05em;color:#788075;gap:9px;margin:0 0 14px} #shell #stage .reader-heading .eyebrow:before{content:none} .reader-count{font-family:"Noto Serif SC",serif;font-size:15px;font-style:italic;font-variant-numeric:tabular-nums;color:#66776d;margin-right:9px} #shell #stage .scene[data-form] .copy h1{font:540 clamp(40px,4.9vw,72px)/1.16 var(--serif);letter-spacing:.025em;margin:0!important;color:#263a37;text-shadow:none!important;text-wrap:balance;word-break:keep-all;overflow-wrap:normal} #shell #stage .scene[data-form] .copy h1.reader-long{font-size:clamp(36px,4.1vw,60px)} #shell #stage .scene[data-form] .reader-deck{font-size:clamp(16px,1.5vw,21px);line-height:1.6;font-weight:400;letter-spacing:.04em;color:#647466;margin:10px 0 0!important;max-width:none} #shell #stage .scene[data-form] .scene-summary{font-size:clamp(15px,1.16vw,18px);line-height:1.95;max-width:32em;letter-spacing:.02em;color:#36453e;text-shadow:none;margin:0!important;text-wrap:pretty;word-break:normal} #shell #stage .scene[data-form] .copy .learning{display:grid!important;grid-template-columns:auto minmax(0,1fr);gap:12px;margin:20px 0 0!important;padding:0!important;max-width:100%;background:none!important;border:0!important;box-shadow:none;color:#47554a;font-size:14px;line-height:1.75} #shell #stage .scene[data-form] .copy .learning strong{font-weight:500;color:#71674c;white-space:nowrap} #shell #stage .scene[data-form] .copy .learning span{color:#47554a} #shell #stage .scene[data-form] .note-trigger{display:inline-flex;gap:8px;align-items:center;min-height:34px;margin-top:21px;padding:0;border:0;border-bottom:1px solid #9b9a8177;background:none;font-size:12px;color:#596b60;line-height:1.4;letter-spacing:.04em} #shell #stage .scene[data-form] .note-trigger:before{content:"札";display:grid;place-items:center;width:20px;height:20px;color:#6a786b;font-size:13px} #shell #stage .scene[data-form] .microfact,#shell #stage .scene[data-form] .footnote{display:none!important} #shell #stage .scene[data-form] .scene-actions{margin-top:18px;gap:10px} #shell #stage .scene[data-form] .scene-actions button{padding:8px 14px;font-size:12px;transform:none;box-shadow:none} #shell[data-palette="night"] #stage .scene[data-form] .copy h1{color:#e9e1d0} #shell[data-palette="night"] #stage .scene[data-form] .scene-summary{color:#deded1} #shell[data-palette="night"] #stage .scene[data-form] .reader-deck,#shell[data-palette="night"] #stage .scene[data-form] .eyebrow,#shell[data-palette="night"] #stage .scene[data-form] .reader-count{color:#b7c4b6} #shell[data-palette="night"] #stage .scene[data-form] .copy .learning,#shell[data-palette="night"] #stage .scene[data-form] .copy .learning span{color:#d2d6c4} #shell[data-palette="night"] #stage .scene[data-form] .copy .learning strong,#shell[data-palette="night"] #stage .scene[data-form] .note-trigger{color:#c6b799} #shell #stage .scene[data-form] .visual{height:100%!important;min-height:0!important;max-height:100%;width:100%;margin:0!important;overflow:visible;align-self:stretch;place-items:center} #shell #stage .scene[data-form] .art{height:100%;width:100%;max-height:100%} #shell #stage .scene[data-form] .controlpanel{bottom:2px;max-width:380px;padding:12px 16px;box-shadow:0 5px 17px #2a302822;backdrop-filter:none;background:#e5deccd9;border:0;color:#35443b} #shell #stage .scene[data-form] .controlpanel label,#shell #stage .scene[data-form] .controlpanel output{font-size:12px;color:#35443b;letter-spacing:0} #shell #stage .scene[data-form] .controlpanel input{accent-color:#617469} #shell #stage .scene[data-form] .sunart{height:72%;border:0} #shell #stage .scene[data-form] .sunball{box-shadow:none;width:70px;background:#d8c295} #shell #stage .scene[data-form] .paperart{width:min(74%,430px);height:76%;min-height:0;max-height:100%;transform:rotate(-3deg);box-shadow:10px 17px 30px #26332a30} #shell #stage .scene[data-form] .paperart .bigglyph{font-size:clamp(86px,14vw,205px);animation:none} #shell #stage .scene[data-form] .instrument{max-height:70%;width:auto;max-width:72%;height:70%;aspect-ratio:1;box-shadow:0 7px 17px #172e262e,inset 0 0 0 3px #d1c59f,inset 0 0 0 17px #877455} #shell #stage .scene[data-form] .tower-viewer,#shell #stage .scene[data-form] .canal-exhibit{height:100%;min-height:0;max-height:100%;box-shadow:0 6px 20px #26372d35} #shell #stage .scene[data-form] .tower-hero{object-fit:contain} #shell #stage .scene[data-form] .tower-caption{bottom:82px} #shell #stage .scene[data-form] .inlinegame{max-width:100%;width:100%;padding:20px;background:#e4ddcee6;border:0;box-shadow:0 8px 24px #21382d30;color:#35433a} #shell #stage .scene[data-form] .inlinegame p{font-size:15px;line-height:1.7;color:#35433a} #shell #stage .scene[data-form] .inlinegame input,#shell #stage .scene[data-form] .inlinegame textarea{color:#35433a;background:#efe9da;width:100%;font-size:14px} #shell #stage .scene[data-form] .inlinegame textarea{height:82px;min-height:0;resize:none} #shell #stage .scene[data-form] .quizgrid button,#shell #stage .scene[data-form] .inlinegame button{font-size:13px;min-height:32px;background:#7b8974;color:#fffaf0;border:0;padding:6px 12px} /* 书签续读与罗盘目录，全部使用点击；正文页没有方向箭头或滑动手势。 */ #shell .bottomnav{position:absolute;inset:auto var(--reader-side) 20px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;min-height:48px;letter-spacing:0;color:#45594d} #shell .bottomnav .hint,#prev,#next,#pageIndex{display:none!important} .bookmark-nav{border:0;background:none;padding:4px 0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;color:inherit;font-size:13px;text-align:left;line-height:1.3;min-height:44px} .bookmark-nav span{font-size:10px;color:#7b8474;letter-spacing:.08em} .bookmark-nav--next{justify-self:end;padding:9px 20px 11px 16px;background:#e0d7bdc9;color:#374b3f;min-width:150px;box-shadow:0 3px 11px #34432b1c;clip-path:polygon(0 0,100% 0,100% 100%,calc(100% - 10px) calc(100% - 10px),calc(100% - 20px) 100%,0 100%)} .bookmark-nav:disabled{visibility:hidden} .chapter-dial{border:1px solid #7b8b74;background:#ddd5bb9e;color:#4b6455;position:relative;width:48px;height:48px;border-radius:50%;padding:0;display:grid;place-items:center;flex:none;box-shadow:none} .chapter-dial:before{content:"";position:absolute;inset:4px;border:1px solid #8e9b7b5e;border-radius:50%} .chapter-dial small{font-size:10px;position:absolute;bottom:-16px;white-space:nowrap} .dial-number{font-family:"Noto Serif SC",serif;font-size:16px;font-style:italic} #shell[data-palette="night"] .bottomnav{color:#dedbca} #shell[data-palette="night"] .bookmark-nav span{color:#bbc6b7} #shell[data-palette="night"] .bookmark-nav--next{background:#c0c6ac;color:#30423d} #shell[data-palette="night"] .bookmark-nav--next span{color:#5e6e5b} #shell[data-palette="night"] .chapter-dial{background:#a4b29740;color:#dddac5;border-color:#acb49e} .leaf-turn{position:absolute;z-index:78;inset:0;pointer-events:none;opacity:0;overflow:hidden;perspective:1200px} .leaf-turn-sheet{position:absolute;inset:-3%;background:#d9d5c6;box-shadow:-12px 0 40px #102b2638;transform-origin:right center;transform:translateX(100%) skewY(-2deg)} .leaf-turn.play{opacity:1} .leaf-turn.play .leaf-turn-sheet{animation:quiet-leaf-turn 900ms cubic-bezier(.4,0,.28,1) both} @keyframes quiet-leaf-turn{0%{transform:translateX(101%) skewY(-2deg)}45%{transform:translateX(0) skewY(0)}55%{transform:translateX(0) skewY(0)}100%{transform:translateX(-102%) skewY(2deg)}} #shell .drawer{z-index:100;inset:0;background:#e4ddcef7;overflow:visible!important;padding:40px var(--reader-side);color:#2e4339;backdrop-filter:blur(15px)} #shell .drawerhead{margin:0 0 22px;align-items:center} #shell .drawerhead h2{font-size:32px;line-height:1.2;margin:0;font-weight:500} #shell .drawerhead button{font-size:12px;padding:8px 12px;background:none;color:#526552;border:1px solid #a4aa93} #shell .drawergrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px;width:100%;max-width:1200px;margin:0 auto} #shell .drawergrid button{background:#d6d5c388;border:0;border-left:2px solid #b8bea7;color:#2d4539;min-height:74px;font-size:16px;padding:12px 14px;line-height:1.4;box-shadow:none} #shell .drawergrid button.current{background:#75846d;color:#fff8e6;border-color:#52684d} #shell .drawergrid span{font:10px/1.3 var(--serif);color:#77816d;margin:0 0 6px} #shell .drawergrid button.current span{color:#e2e6d4} #shell .drawer .sources{display:none} #shell .notepanel{inset:0;z-index:110;overflow:visible;align-items:center;justify-content:center;background:#142c2a99;padding:30px} #shell .notepanel.open{display:flex} #shell .notepanel .note-sheet{width:min(820px,91vw);max-width:820px;max-height:none!important;height:auto;overflow:visible!important;padding:32px 40px;background:#e7e1d2;border:0;box-shadow:0 20px 70px #0c211c55;color:#32493d} #shell .note-close{position:relative;float:right;top:auto;right:auto;border:0;background:none;color:#566c59;padding:4px;font-size:12px} #shell .note-kicker{font-size:11px;color:#79846e;letter-spacing:.02em} #shell .note-sheet h2{font:500 33px/1.4 var(--serif);margin:14px 0 17px;color:#32493d;letter-spacing:.02em} .note-tabs{display:flex;gap:20px;margin-bottom:18px} .note-tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:5px 0;color:#7a8470;font-size:12px} .note-tabs button[aria-selected="true"]{color:#34573e;border-color:#667d5e} #shell .note-page{font-size:17px;line-height:1.95;color:#3b5043;margin:0;min-height:124px;text-wrap:pretty} #shell .note-source{font-size:11px;line-height:1.6;margin-top:18px;color:#77866c} #shell .note-source a{color:#587153} /* 同一条进度约束纸面、绢边和两根木轴，不再分别运行开合关键帧。 */ #shell .scroll-opening{background:#192e2c;display:grid;place-items:center} #shell .scroll-opening:before,#shell .scroll-opening:after{display:none} #shell .scroll-opening .scroll-reel,#shell .scroll-opening.is-playing .scroll-reel,#shell .scroll-opening.is-closing .scroll-reel{width:min(88vw,1400px);height:min(52vh,550px);min-height:0;margin-top:-8vh;transform:none;animation:none!important;filter:none;clip-path:none} #shell .scroll-opening .scroll-paper,#shell .scroll-opening .scroll-roller,#shell .scroll-opening .scroll-roller>i{animation:none!important;transition:none!important} #shell .scroll-opening .scroll-paper{inset:4.5% 1.7%;filter:none!important;border-width:5px;box-shadow:inset 0 0 0 2px #c4ab79,0 16px 30px #061e1880} #shell .scroll-roller{width:clamp(23px,2.6vw,39px);transform:translateX(-50%)!important;top:0;bottom:0;left:50%;border:1px solid #9c774d;border-radius:18px;box-shadow:inset 4px 0 7px #d0b1814d,inset -6px 0 9px #130e09ab,4px 7px 12px #07171470} #shell .scroll-roller:before,#shell .scroll-roller:after{height:20px;width:127%} #shell .scroll-roller:before{top:-10px}#shell .scroll-roller:after{bottom:-10px} #shell .scroll-opening .scroll-silk{width:clamp(20px,2.3vw,33px);box-shadow:inset 0 0 10px #10282166} .scroll-curl{position:absolute;z-index:7;top:0;bottom:0;width:25px;pointer-events:none;background:linear-gradient(90deg,#241e175c,#e4d1a544,transparent)} .scroll-curl--right{transform:scaleX(-1)} #shell .scroll-title-group{left:20%;right:20%;top:15%;bottom:14%} #shell .scroll-opening .scroll-title,#shell .scroll-opening .scroll-subtitle{animation:none!important;transition:none!important;transform:none!important;filter:none!important;text-shadow:none!important} #shell .scroll-title{font-size:clamp(42px,6vw,96px);font-weight:570;letter-spacing:.06em;color:#27332b} #shell .scroll-subtitle{font-size:clamp(10px,1vw,15px);letter-spacing:.15em;text-transform:none;color:#55614f;margin-top:15px} #shell .scroll-landscape{animation:none;filter:saturate(.6) contrast(.92) sepia(.12)} #shell .scroll-mist{transition:none!important;opacity:0} #shell .scroll-opening .scroll-bird{transition:none!important;opacity:0} #shell .scroll-observatory{bottom:6vh;left:50%;width:min(72vw,1020px);height:11vh;min-height:60px;border:0;box-shadow:none;background:none;color:#bac6ad;gap:24px} #shell .scroll-observatory:before{display:none} #shell .scroll-observatory article{border:0;padding:0;gap:12px} #shell .scroll-observatory svg{width:43px;height:43px;stroke:#b3bea2;filter:none} #shell .scroll-observatory b{font-size:13px;font-weight:400} #shell .scroll-observatory small{font-size:10px} #shell .scroll-kicker{top:5vh;color:#a7b9a2;font-size:12px;letter-spacing:.13em} #shell .scroll-kicker:before,#shell .scroll-kicker:after{display:none} #shell .scroll-skip{background:none;border:0;color:#adbea7;font-size:11px;bottom:3vh;right:6vw;letter-spacing:.03em} /* 烧的是书页：预热变褐、局部炭化、纸边消耗与脱灰各自可见。 */ #shell .book-scene{background:none;animation:none!important} #shell .book-scene:before{background:#3a3d30;opacity:1;transition:opacity .7s;z-index:-1} #shell .book-volume{transform:none!important;width:min(85vw,1240px);height:72vh;min-height:0;border-width:5px;box-shadow:0 0 0 4px #887655,0 0 0 8px #353c2d,12px 23px 42px #18251c55;filter:saturate(.75) contrast(.95)} #shell .book-volume:after{border:0;box-shadow:none} #shell .book-leaf{overflow:visible!important;padding:5% 3%;height:90%;writing-mode:vertical-rl} #shell .book-leaf h1{font-size:clamp(26px,2.5vw,38px);font-weight:500;letter-spacing:.07em} #shell .book-leaf p{font-size:clamp(15px,1.4vw,20px);line-height:1.8;letter-spacing:.02em} #shell .book-caption{font-size:10px;color:#b8c2aa;bottom:3vh} #shell .book-topline{color:#b4c0a9;top:4.5vh;font-size:11px} #shell .book-burn-now,#shell .book-skip{background:#b7bea2;color:#2e4437;border:0;bottom:3vh;font-size:12px;padding:8px 15px;letter-spacing:.04em} #shell .book-burn-layer{mask:none!important;-webkit-mask:none!important;background:none!important} #shell .book-burn-layer:before{opacity:0!important} #shell .book-burn-layer .book-volume{filter:none!important} #shell .book-burn-layer .book-topline{display:none} #shell .book-ember-canvas{z-index:82;touch-action:none} /* 小屏会明确采用阅读尺寸，标题和留白让出空间给完整正文。 */ @media(max-height:700px){:root{--reader-top:62px;--reader-bottom:74px;--reader-side:6vw} #shell .brand{top:20px}#shell .topright{top:22px} #shell #stage .scene[data-form]{gap:3vw;grid-template-columns:minmax(0,45%) minmax(0,1fr)} #shell #stage .scene[data-form] .copy h1{font-size:clamp(32px,4.5vw,55px)} .reader-heading{margin-bottom:16px}#shell #stage .reader-heading .eyebrow{margin-bottom:10px} #shell #stage .scene[data-form] .scene-summary{font-size:14px;line-height:1.8} #shell #stage .scene[data-form] .copy .learning{font-size:12px;margin-top:14px!important} #shell #stage .scene[data-form] .note-trigger{margin-top:14px} } @media(max-width:1050px) and (orientation:landscape), (max-height:510px){ :root{--reader-top:46px;--reader-bottom:57px;--reader-side:5.5vw} #shell .brand{top:13px;font-size:9px;gap:6px}#shell .brand .seal{font-size:15px;padding-right:4px} #shell .topright{top:13px;font-size:9px;gap:12px}#shell .linkbtn{font-size:10px} #shell #stage .scene[data-form]{grid-template-columns:minmax(0,47%) minmax(0,1fr);gap:4vw} #shell #stage .scene[data-form] .copy h1,#shell #stage .scene[data-form] .copy h1.reader-long{font-size:clamp(24px,4vw,35px);line-height:1.15;letter-spacing:.01em} #shell #stage .reader-heading .eyebrow{font-size:9px;line-height:1.25;margin-bottom:7px}.reader-count{font-size:11px} .reader-heading{margin-bottom:13px} #shell #stage .scene[data-form] .reader-deck{font-size:12px;line-height:1.45;margin-top:5px!important} #shell #stage .scene[data-form] .scene-summary{font-size:12.5px;line-height:1.65;letter-spacing:0} #shell #stage .scene[data-form] .copy .learning{font-size:11px;line-height:1.55;gap:8px;margin-top:12px!important} #shell #stage .scene[data-form] .note-trigger{font-size:10px;min-height:24px;margin-top:10px} #shell #stage .scene[data-form] .note-trigger:before{font-size:11px;width:15px;height:15px} #shell .bottomnav{bottom:9px;min-height:33px;gap:12px} .bookmark-nav{font-size:10px;min-height:34px;gap:2px}.bookmark-nav span{font-size:8px} .bookmark-nav--next{min-width:120px;padding:6px 16px 7px 12px} .chapter-dial{width:33px;height:33px}.dial-number{font-size:13px}.chapter-dial small{display:none} #shell #stage .scene[data-form] .scene-actions{margin-top:10px} #shell #stage .scene[data-form] .scene-actions button{font-size:10px;padding:5px 8px} #shell #stage .scene[data-form] .controlpanel{padding:7px 9px;bottom:0;max-width:290px;width:98%} #shell #stage .scene[data-form] .controlpanel label,#shell #stage .scene[data-form] .controlpanel output{font-size:9px;line-height:1.45;margin:3px 0} #shell #stage .scene[data-form] .sunball{width:40px} #shell #stage .scene[data-form] .paperart small{font-size:8px;letter-spacing:.1em} #shell #stage .scene[data-form] .paperart .bigglyph{font-size:clamp(70px,11vw,125px)} #shell #stage .scene[data-form] .inlinegame{padding:12px} #shell #stage .scene[data-form] .inlinegame h3{font-size:15px;margin:0 0 6px} #shell #stage .scene[data-form] .inlinegame p{font-size:11px;margin:4px 0;line-height:1.45} #shell #stage .scene[data-form] .inlinegame input,#shell #stage .scene[data-form] .inlinegame textarea{font-size:11px;padding:6px;margin-top:5px} #shell #stage .scene[data-form] .inlinegame textarea{height:59px} #shell #stage .scene[data-form] .inlinegame button,#shell #stage .scene[data-form] .quizgrid button{font-size:10px;min-height:25px;padding:4px 7px} #shell #stage .scene[data-form] .tower-controls{bottom:6px;padding:5px;gap:4px} #shell #stage .scene[data-form] .tower-controls button{font-size:9px;padding:4px 6px} #shell #stage .scene[data-form] .tower-caption{bottom:47px;max-width:115px} #shell #stage .scene[data-form] .canal-current{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px;align-items:center} #shell #stage .scene[data-form] .canal-current .stepno{font-size:7px;letter-spacing:0} #shell #stage .scene[data-form] .canal-current strong{font-size:10px;letter-spacing:0} #shell #stage .scene[data-form] #canalStepCopy{grid-column:1/-1;grid-row:2;font-size:10px;line-height:1.4} #shell #stage .scene[data-form] .canal-current .canal-level{font-size:7px;grid-column:3;grid-row:1;letter-spacing:0;padding:3px} #shell .drawer{padding:17px 5.5vw} #shell .drawerhead{margin-bottom:12px}#shell .drawerhead h2{font-size:20px} #shell .drawerhead button{font-size:10px;padding:5px 9px} #shell .drawergrid{gap:5px}#shell .drawergrid button{min-height:43px;font-size:11px;padding:5px 8px} #shell .drawergrid span{font-size:7px;margin-bottom:3px} #shell .notepanel{padding:14px}#shell .notepanel .note-sheet{padding:19px 27px;width:90vw} #shell .note-sheet h2{font-size:23px;margin:7px 0 10px}.note-tabs{gap:19px;margin-bottom:10px} #shell .note-page{font-size:14px;line-height:1.8;min-height:80px}.note-tabs button{font-size:11px;padding:4px 0} #shell .note-source{font-size:9px;margin-top:11px} #shell .scroll-opening .scroll-reel,#shell .scroll-opening.is-playing .scroll-reel,#shell .scroll-opening.is-closing .scroll-reel{width:87vw;height:52vh;margin-top:-7vh} #shell .scroll-title{font-size:clamp(29px,5.3vw,53px)}#shell .scroll-subtitle{font-size:8px;margin-top:5px} #shell .scroll-observatory{width:73vw;height:13vh;min-height:0;bottom:5vh;gap:10px} #shell .scroll-observatory article{gap:6px}#shell .scroll-observatory svg{width:29px;height:29px} #shell .scroll-observatory b{font-size:9px}#shell .scroll-observatory small{font-size:7px} #shell .scroll-kicker{top:5vh;font-size:9px}#shell .scroll-skip{bottom:3vh;font-size:9px} #shell .book-volume{width:87vw;height:73vh;border-width:4px} #shell .book-leaf{padding:3.5% 2.5%} #shell .book-leaf h1{font-size:22px;margin:0 7px 0 11px} #shell .book-leaf p{font-size:11px;line-height:1.6;margin-right:7px} #shell .book-leaf .book-rubric{font-size:8px;margin-bottom:6px} #shell .book-topline{font-size:8px;top:3.5vh}#shell .book-caption{display:none} #shell .book-burn-now,#shell .book-skip{font-size:10px;padding:6px 12px;bottom:3vh} } @media(max-height:345px){:root{--reader-top:37px;--reader-bottom:46px;--reader-side:4.5vw} #shell .brand{top:9px}#shell .topright{top:9px} #shell #stage .scene[data-form]{grid-template-columns:minmax(0,51%) minmax(0,1fr);gap:3vw} #shell #stage .reader-heading .eyebrow{display:none}.reader-heading{margin-bottom:8px} #shell #stage .scene[data-form] .copy h1,#shell #stage .scene[data-form] .copy h1.reader-long{font-size:25px} #shell #stage .scene[data-form] .reader-deck{font-size:11.5px;line-height:1.4} #shell #stage .scene[data-form] .scene-summary{font-size:11.8px;line-height:1.6} #shell #stage .scene[data-form] .copy .learning{font-size:10.5px;margin-top:8px!important;gap:6px} #shell #stage .scene[data-form] .note-trigger{min-height:21px;margin-top:6px} #shell .bottomnav{bottom:5px}.bookmark-nav{font-size:9px}.bookmark-nav span{font-size:7px} #shell .drawergrid button{min-height:37px;font-size:10px}#shell .drawergrid span{font-size:6.5px} #shell .notepanel .note-sheet{padding:13px 22px}#shell .note-page{font-size:13px;min-height:76px} #shell .note-sheet h2{font-size:21px;margin:5px 0 7px} #shell #stage .scene[data-form] .scene-actions{margin-top:7px} } /* 浏览器工具栏会继续压缩横屏可用高度，保留正文尺寸并收紧标题留白。 */ @media(max-height:300px){:root{--reader-top:33px;--reader-bottom:42px} #shell #stage .scene[data-form]{grid-template-columns:minmax(0,55.5%) minmax(0,1fr);gap:3vw} #shell #stage .scene[data-form] .copy h1,#shell #stage .scene[data-form] .copy h1.reader-long{font-size:23px;line-height:1.1} .reader-heading{margin-bottom:5px} #shell #stage .scene[data-form] .reader-deck{margin-top:3px!important;font-size:11px;line-height:1.35} #shell #stage .scene[data-form] .scene-summary{line-height:1.55} #shell #stage .scene[data-form] .copy .learning{line-height:1.45;margin-top:6px!important} #shell #stage .scene[data-form] .note-trigger{margin-top:4px;min-height:20px} #shell #stage .scene[data-form] .scene-actions{margin-top:4px} #shell #stage .scene[data-form] .inlinegame{padding:8px} #shell #stage .scene[data-form] .inlinegame textarea{height:43px} #shell #stage .scene[data-form] .inlinegame h3{margin-bottom:4px} #shell .drawer{padding:12px 5.5vw}#shell .drawerhead{margin-bottom:8px} #shell .drawergrid button{padding:4px 7px;min-height:33px}#shell .drawergrid span{margin-bottom:2px} #shell .notepanel .note-sheet{padding:10px 22px} #shell .note-sheet h2{font-size:19px;margin:4px 0 5px} .note-tabs{margin-bottom:6px}.note-tabs button{padding:2px 0} #shell .note-page{font-size:12.5px;line-height:1.65;min-height:65px} #shell .note-source{margin-top:6px} } /* 横屏提示只出现在识别为手机的竖屏，不会遮住窄窗口的电脑。 */ #shell .orientation-curtain{display:none!important} html[data-device="phone"][data-layout="portrait"] #shell .orientation-curtain{display:grid!important;z-index:150} @media(prefers-reduced-motion:reduce){.leaf-turn.play .leaf-turn-sheet{animation:none}#shell .scroll-bird,#shell .scroll-mist{animation:none!important}} /* Blender camera render; text, cloud and birds retain their responsive positions. */ #shell .scroll-reel.is-blender>.scroll-paper,#shell .scroll-reel.is-blender>.scroll-roller{display:none!important} .blender-reel-stage{position:absolute;left:50%;top:50%;width:min(100%,calc(52vh * 2.392523));aspect-ratio:1024/428;transform:translate(-50%,-50%);background-position:center;background-size:100% 100%;background-repeat:no-repeat} .blender-reel-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 1%,#000 99%,transparent)} .blender-scroll-life{position:absolute;inset:14.7% 8.2% 15.2%;overflow:hidden;pointer-events:none} #shell .blender-scroll-life .scroll-title-group{left:14%;right:14%;top:6%;bottom:8%} #shell .blender-scroll-life .scroll-title{font-size:clamp(33px,5.6vw,88px)} #shell .blender-scroll-life .scroll-mist{filter:blur(12px)} @media(max-width:1050px) and (orientation:landscape),(max-height:510px){ #shell .blender-scroll-life .scroll-title{font-size:clamp(25px,4.5vw,45px)} #shell .blender-scroll-life .scroll-subtitle{font-size:8px;margin-top:5px} } @media(prefers-reduced-motion:reduce){#shell .blender-scroll-life .scroll-mist,#shell .blender-scroll-life .scroll-bird{animation:none!important}} #shell .scroll-reel.is-blender:before,#shell .scroll-reel.is-blender:after{display:none!important} /* READER_V6_CSS_END */ /* ---- extracted style block boundary ---- */ /* Inline: css/02_三维展品样式.css */ /* --------------------- id="blenderCompass3DStyles" --------------------- */ .blender-compass-3d{position:absolute;inset:0;z-index:4;display:block;width:100%;height:100%;background:transparent;--poster-color:transparent;opacity:0;transition:opacity .55s ease;touch-action:pan-y} .suspension-hero.model-ready .blender-compass-3d{opacity:1} .suspension-hero.model-ready .suspension-model{opacity:0;pointer-events:none} .suspension-hero.model-ready .model-callout{opacity:0;pointer-events:none} .suspension-model,.model-callout{transition:opacity .4s ease} .blender-model-badge{position:absolute;z-index:7;left:16px;top:16px;padding:7px 10px;border:1px solid #8f6a3b66;border-radius:999px;background:#fff7e8b8;color:#4c321e;font:600 10px/1.2 "Noto Sans SC",sans-serif;letter-spacing:.12em;backdrop-filter:blur(8px);box-shadow:0 6px 18px #3a210d14} .blender-model-status{position:absolute;z-index:7;left:50%;bottom:15px;transform:translateX(-50%);min-width:190px;text-align:center;padding:7px 12px;border-radius:999px;background:#3d291cd9;color:#f6e7c7;font-size:10px;letter-spacing:.08em;box-shadow:0 8px 22px #24120733;transition:opacity .35s} .suspension-hero.model-ready .blender-model-status{opacity:.88} .suspension-hero.model-error .blender-model-status{background:#6a352bd9} @media(max-width:850px){.blender-model-badge{left:9px;top:9px;font-size:9px;padding:5px 8px}.blender-model-status{bottom:8px;font-size:9px;min-width:155px}.suspension-hero.model-ready .model-callout{display:none}} /* --------------------- id="mengxi-v10-css" --------------------- */ /* ===== MENGXI V10: 宋韵展柜 + 可扭动的九宫魔方 ===== */ #shell{--cubeGold:#dcbd80} #shell .scene[data-id="9"],#shell .scene[data-id="10"]{ grid-template-columns:minmax(235px,26%) minmax(0,1fr)!important; padding-left:max(46px,5.2vw)!important;padding-right:max(42px,5vw)!important;gap:2vw!important; } #shell .scene[data-id="9"] .visual,#shell .scene[data-id="10"] .visual{min-height:490px;height:min(74vh,700px);width:100%;overflow:visible} #shell .scene[data-id="9"] .visual .art,#shell .scene[data-id="10"] .visual .art{width:100%;max-width:none;min-width:0} #shell .scene[data-id="9"] .suspension-stage,#shell .scene[data-id="10"] .suspension-stage{width:100%;max-width:none;grid-template-columns:minmax(330px,1.12fr) minmax(210px,.75fr);padding:12px 2px 70px;gap:14px} #shell .scene[data-id="9"] .copy,#shell .scene[data-id="10"] .copy{max-width:none;padding:15px 8px 16px 0} #shell .scene[data-id="9"] .copy p,#shell .scene[data-id="10"] .copy p{font-size:clamp(12px,1vw,15px);line-height:1.82} #shell .scene[data-id="9"] .copy h1,#shell .scene[data-id="10"] .copy h1{font-size:clamp(35px,3.1vw,60px);margin:10px 0 18px} #shell .scene[data-id="9"] .suspension-hero,#shell .scene[data-id="10"] .suspension-hero{min-height:390px;background:radial-gradient(circle at 40% 16%,#efe4ca 0,#cfb99a 55%,#9e8065 100%);border-radius:7px;border:1px solid #c9a573aa;box-shadow:inset 0 1px 0 #fff9deaa,inset 0 -34px 48px #30201620,0 28px 56px #0007} #shell .scene[data-id="9"] .suspension-hero:after,#shell .scene[data-id="10"] .suspension-hero:after{content:"";pointer-events:none;position:absolute;inset:8px;border:1px solid #fff3d34a;z-index:5} #shell .scene[data-id="9"] .blender-compass-3d,#shell .scene[data-id="10"] .blender-compass-3d{z-index:4;touch-action:none;outline-offset:-8px} #shell .scene[data-id="9"] .suspension-painting,#shell .scene[data-id="10"] .suspension-painting{opacity:.28;pointer-events:none} #shell .scene[data-id="9"] .suspension-side,#shell .scene[data-id="10"] .suspension-side{overflow:auto;scrollbar-width:thin;max-height:100%;padding:8px 4px 12px;color:#35271d} #shell .suspension-side h3{color:#f0d6a7;text-shadow:0 3px 12px #0008} #shell .suspension-side>p{color:#ddc9a8} #shell .principle-card{border-radius:5px;background:linear-gradient(126deg,#ecdfc5ee,#cfbda1ee);border:1px solid #bd996f99;box-shadow:0 8px 15px #0003;cursor:pointer} #shell .principle-card.active{background:linear-gradient(126deg,#fff3d8,#dcc09a);border-color:#ecd09d} #shell .principle-card button{display:contents} #shell .suspension-caption{background:#15211dcc;color:#e8d0a6;border-left-color:#cba36e;border-radius:0} #shell .scene[data-id="9"] .controlpanel,#shell .scene[data-id="10"] .controlpanel{ bottom:0!important;width:min(93%,480px);padding:10px 17px;background:linear-gradient(140deg,#1a2722f2,#29342bdc);border-radius:6px;border-color:#e0bf8655;backdrop-filter:blur(12px) } #shell .controlpanel input[type="range"]{accent-color:#e6b873} #shell .controlpanel button{min-height:30px;border-radius:3px;font-size:11px!important;padding:5px 10px!important} #shell .controlpanel output{min-height:16px;line-height:1.5} .v10-compass-extra{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin:5px 0} .v10-compass-extra button{background:#435448;color:#fff4d9;border:1px solid #a79569;border-radius:3px;cursor:pointer} .v10-compass-extra button:focus-visible{outline:2px solid #f1d396} .v10-model-caption{position:absolute;left:14px;top:51px;z-index:7;color:#5a4229;background:#fbefdbb8;padding:8px 10px;font-size:10px;line-height:1.5;pointer-events:none;border-left:2px solid #8c6b43;box-shadow:0 8px 20px #6d4e2d18} #shell .blender-model-badge{background:#29241fdf;color:#edce9b;border-color:#d7ac6844;border-radius:2px;letter-spacing:.09em} #shell .blender-model-status{background:#3c3028ce;border-radius:2px;max-width:90%;padding:7px 9px} /* 叙事魔方：9 个实体面片依序旋转，非简单位移切页 */ .v10-cube-caption{position:absolute;top:max(38px,7vh);text-align:center;font-size:11px;letter-spacing:.47em;color:#e0c790a8;z-index:2} .v10-cube-story{position:absolute;bottom:max(38px,8vh);text-align:center;color:#eddbb9;font-size:clamp(12px,1.6vw,17px);letter-spacing:.24em;z-index:2;text-shadow:0 4px 20px #000} .v10-cube-stage{position:relative;transform-style:preserve-3d;perspective:1400px;transform:rotateY(14deg) rotateX(-7deg) scale(.87);transition:transform 1.15s cubic-bezier(.18,.69,.2,1);filter:drop-shadow(25px 27px 35px #000b)} .v10-cube-grid{--cellW:clamp(82px,19vw,300px);--cellH:clamp(65px,11.8vw,190px);width:calc(var(--cellW)*3);height:calc(var(--cellH)*3);display:grid;grid-template-columns:repeat(3,var(--cellW));grid-template-rows:repeat(3,var(--cellH));transform-style:preserve-3d} .v10-cubelet{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(0);transition:transform .87s cubic-bezier(.17,.78,.21,1);transition-delay:var(--delay)} .v10-cubeface{position:absolute;inset:0;backface-visibility:hidden;border:1px solid #d3b88382;box-shadow:inset 0 0 0 1px #35251480,inset 0 0 28px #090c0e88;background-size:300% 300%;background-repeat:no-repeat;background-position:var(--posX) var(--posY);display:block} .v10-face-front{transform:translateZ(calc(var(--cellW)/2));background-image:var(--oldArt)} .v10-face-next{transform:rotateY(90deg) translateZ(calc(var(--cellW)/2));background-image:var(--newArt)} .v10-face-edge{background:linear-gradient(135deg,#947447,#1c291f);transform:rotateY(-90deg) translateZ(calc(var(--cellW)/2))} .v10-face-top{background:linear-gradient(150deg,#a38a5c,#202c26);transform:rotateX(90deg) translateZ(calc(var(--cellH)/2))} /* 轻触或扭动右下角实体魔方导航 */ .floral-chapter-nav{position:absolute;right:clamp(16px,4vw,70px);bottom:clamp(23px,5vh,63px);width:76px;height:80px;z-index:26;display:flex;flex-direction:column;align-items:center;gap:2px;color:#eed3a5;background:none;border:0;cursor:grab;touch-action:none;user-select:none;filter:drop-shadow(0 6px 15px #02060799)} .floral-chapter-nav:active{cursor:grabbing} .floral-chapter-nav:focus-visible{outline:1px solid #eed098;outline-offset:6px} .v10-mini-perspective{display:block;width:44px;height:42px;perspective:200px} .v10-mini-cube{--rY:-34deg;--rX:-20deg;position:relative;width:35px;height:35px;margin:auto;transform-style:preserve-3d;transform:rotateX(var(--rX)) rotateY(var(--rY));transition:transform .35s cubic-bezier(.18,.7,.3,1)} .v10-mini-face{position:absolute;inset:0;display:grid;place-items:center;color:#221a13;font:bold 17px/1 serif;border:1px solid #e8d3a1aa;background:linear-gradient(135deg,#efdeb5,#92724b);box-shadow:inset 0 0 8px #0005;backface-visibility:hidden} .v10-mini-front{transform:translateZ(17.5px)}.v10-mini-right{transform:rotateY(90deg) translateZ(17.5px)}.v10-mini-left{transform:rotateY(-90deg) translateZ(17.5px)}.v10-mini-back{transform:rotateY(180deg) translateZ(17.5px)}.v10-mini-top{transform:rotateX(90deg) translateZ(17.5px)}.v10-mini-bottom{transform:rotateX(-90deg) translateZ(17.5px)} .v10-mini-label{display:block;text-align:center;font-size:9px;white-space:nowrap;letter-spacing:.17em;text-shadow:0 2px 10px #000} #shell .bottomnav{padding-right:78px} @media(max-width:1120px){#shell .scene[data-id="9"],#shell .scene[data-id="10"]{padding:62px 3.5vw 68px 6vw!important;grid-template-columns:31% minmax(0,69%)!important;gap:10px!important}#shell .scene[data-id="9"] .suspension-stage,#shell .scene[data-id="10"] .suspension-stage{grid-template-columns:minmax(0,1fr) minmax(175px,.72fr);gap:10px}#shell .suspension-side .principle-card{padding:8px;gap:6px}} @media(max-width:800px) and (orientation:landscape){ #shell .scene[data-id="9"],#shell .scene[data-id="10"]{padding:42px 3vw 55px 4vw!important;grid-template-columns:25% minmax(0,75%)!important;overflow:hidden} #shell .scene[data-id="9"] .visual,#shell .scene[data-id="10"] .visual{height:100%;min-height:0} #shell .scene[data-id="9"] .suspension-stage,#shell .scene[data-id="10"] .suspension-stage{height:100%;min-height:0;grid-template-columns:minmax(0,1.2fr) minmax(115px,.8fr);padding-bottom:42px;gap:5px} #shell .scene[data-id="9"] .suspension-hero,#shell .scene[data-id="10"] .suspension-hero{min-height:0;max-height:100%;border-radius:3px} #shell .scene[data-id="9"] .suspension-side,#shell .scene[data-id="10"] .suspension-side{display:flex;max-height:100%;padding:0 3px;gap:4px} #shell .suspension-side>p,#shell .suspension-caption{display:none} #shell .suspension-side h3{font-size:15px!important;margin:0} #shell .principle-card{padding:4px 6px!important;grid-template-columns:19px 1fr!important} #shell .principle-card .principle-num{width:18px;height:18px;font-size:11px} #shell .principle-card b{font-size:10px}.principle-card .principle-copy span{display:none} #shell .scene[data-id="9"] .controlpanel,#shell .scene[data-id="10"] .controlpanel{padding:3px 6px!important;bottom:0!important;max-width:98%;width:100%} #shell .controlpanel label{display:none!important}#shell .controlpanel input[type="range"]{height:10px} #shell .controlpanel .stepper{display:none!important}.v10-compass-extra{gap:4px;margin:1px 0}.v10-compass-extra button{min-height:20px!important;padding:2px 5px!important;font-size:9px!important} #shell .scene[data-id="9"] .copy h1,#shell .scene[data-id="10"] .copy h1{font-size:21px;line-height:1.2;margin:3px 0 7px} #shell .scene[data-id="9"] .copy p,#shell .scene[data-id="10"] .copy p{font-size:10px;line-height:1.55} #shell .scene[data-id="9"] .learning,#shell .scene[data-id="10"] .learning{display:none} .v10-model-caption{display:none}.floral-chapter-nav{right:12px;bottom:12px;transform:scale(.75);transform-origin:bottom right} .v10-cube-grid{--cellW:clamp(65px,18vw,156px);--cellH:clamp(50px,10.4vw,98px)} } @media(max-height:480px) and (orientation:landscape){#shell .scene[data-id="9"],#shell .scene[data-id="10"]{padding-top:30px!important;padding-bottom:46px!important}.v10-cube-caption{top:12px}.v10-cube-story{bottom:12px}} @media(orientation:portrait) and (max-width:850px){#shell .scene[data-id="9"],#shell .scene[data-id="10"]{display:flex;flex-direction:column;overflow-y:auto;padding:64px 7vw 95px!important;gap:12px!important}#shell .scene[data-id="9"] .visual,#shell .scene[data-id="10"] .visual{min-height:650px;height:auto}#shell .scene[data-id="9"] .suspension-stage,#shell .scene[data-id="10"] .suspension-stage{display:flex;flex-direction:column;gap:10px}#shell .scene[data-id="9"] .suspension-hero,#shell .scene[data-id="10"] .suspension-hero{width:100%;min-height:350px}#shell .scene[data-id="9"] .suspension-side,#shell .scene[data-id="10"] .suspension-side{max-height:none;overflow:visible}} @media(prefers-reduced-motion:reduce){.floral-chapter-nav .v10-mini-cube{transition:none}.v10-cube-transition,.v10-cubelet,.v10-cube-stage{transition:none!important}} /* --------------------- id="v10-offline-renderer-css" --------------------- */ /* V10 offline renderer / exhibition layout polishing */ #shell .scene[data-id="9"] .suspension-stage,#shell .scene[data-id="10"] .suspension-stage{grid-template-rows:minmax(0,1fr) auto;padding-bottom:4px!important;align-content:stretch} #shell .scene[data-id="9"] .suspension-hero,#shell .scene[data-id="10"] .suspension-hero{min-height:0;max-height:none;align-self:stretch} #shell .scene[data-id="9"] .suspension-side,#shell .scene[data-id="10"] .suspension-side{min-height:0;overflow:auto} #shell .scene[data-id="9"] .suspension-stage>.controlpanel,#shell .scene[data-id="10"] .suspension-stage>.controlpanel{position:relative!important;grid-column:1/-1;grid-row:2;left:auto!important;bottom:auto!important;transform:none!important;width:100%!important;max-width:none;margin:0!important;padding:8px 14px!important;max-height:110px;overflow:auto} #shell .scene[data-id="9"] .suspension-stage>.controlpanel label,#shell .scene[data-id="10"] .suspension-stage>.controlpanel label{margin:0 0 2px} #shell .scene[data-id="9"] .suspension-stage>.controlpanel input[type="range"],#shell .scene[data-id="10"] .suspension-stage>.controlpanel input[type="range"]{height:12px} #shell .scene[data-id="9"] .suspension-stage>.controlpanel .stepper,#shell .scene[data-id="10"] .suspension-stage>.controlpanel .stepper{margin-top:0!important} #shell .suspension-hero .blender-compass-3d{cursor:grab;outline:none} #shell .suspension-hero:before{pointer-events:none} #shell .suspension-hero{background:radial-gradient(ellipse at 49% 22%,#fff4dcc4,#c8b69a 70%,#a18a6f 100%)} #shell .suspension-hero.model-ready .blender-compass-3d{opacity:1} #shell .suspension-hero .v10-model-caption{font-size:10px;padding:5px 7px;top:46px;left:12px;max-width:210px} #shell .model-callout{transition:opacity .3s} @media(max-width:800px) and (orientation:landscape){#shell .scene[data-id="9"] .suspension-stage,#shell .scene[data-id="10"] .suspension-stage{grid-template-rows:minmax(0,1fr) auto;padding-bottom:0!important}#shell .scene[data-id="9"] .suspension-stage>.controlpanel,#shell .scene[data-id="10"] .suspension-stage>.controlpanel{max-height:44px!important;overflow:hidden;padding:0 4px!important}#shell .scene[data-id="9"] .suspension-stage>.controlpanel output,#shell .scene[data-id="10"] .suspension-stage>.controlpanel output{display:none}#shell .scene[data-id="9"] .suspension-stage>.controlpanel input,#shell .scene[data-id="10"] .suspension-stage>.controlpanel input{display:none}#shell .suspension-hero .v10-model-caption{display:none}} /* --------------------- id="v10-final-fallback-materials" --------------------- */ /* V10 final: higher-fidelity CSS fallback and legible display panels */ #shell .scene[data-id="9"] .suspension-side,#shell .scene[data-id="10"] .suspension-side{background:linear-gradient(145deg,#152420e8,#1f3029ec);padding:16px!important;border:1px solid #b28c5877;box-shadow:0 18px 32px #0004;scrollbar-color:#c8a36d transparent} #shell .suspension-side h3,#shell .suspension-side>p{color:#f4deb8!important} #shell .suspension-side>p{font-size:12px;line-height:1.7} #shell .suspension-side .principle-card{background:#eedfc2!important;padding:8px 9px!important;box-shadow:inset 0 1px 0 #fff7d9,0 5px 10px #0002} #shell .suspension-side .principle-card.active{background:#f8ebce!important;box-shadow:inset 0 1px 0 #fff,0 0 0 1px #ecc790b0} #shell .suspension-side .principle-copy span{color:#66503b} #shell .suspension-side .principle-copy b{color:#3f281b} #shell .suspension-post{background-image:linear-gradient(90deg,#180e0570,transparent 28%,#f3c88722 39%,#07060466),url("../assets/images/image-e09e05f83e.png");background-size:100% 100%,180% 130%;background-position:center;box-shadow:inset 1px 0 2px #edca8a88,inset -6px 0 10px #17090277,0 10px 17px #1c0d0b55} #shell .suspension-beam{background-image:linear-gradient(180deg,#ecd1a555,#2b170e48 63%,#0705046b),url("../assets/images/image-0a5e29fcac.png");background-size:100% 100%,100% 170%;box-shadow:inset 0 2px 2px #f8dbb080,inset 0 -5px 11px #150b0677,0 8px 12px #170b064f} #shell .suspension-base{background-image:linear-gradient(145deg,#a4774959,#120a0655),url("../assets/images/image-e09e05f83e.png");background-size:100% 100%,130% 150%} #shell .suspension-dial{background-image:url("../assets/images/image-c7542997b0.png");background-size:100% 100%;box-shadow:inset 0 0 13px #76512f70,0 13px 16px #11090744;border:8px solid #b88b51} #shell .suspension-dial .dial-ticks,#shell .suspension-dial .dial-cardinal,#shell .suspension-dial .dial-ring{display:none} @media(max-width:800px) and (orientation:landscape){#shell .scene[data-id="9"] .suspension-side,#shell .scene[data-id="10"] .suspension-side{padding:4px!important}} /* --------------------- id="v10-final-phone-layout" --------------------- */ /* Responsive exhibition viewport: narrow landscape tablets/phones */ @media(orientation:landscape) and (max-height:570px) and (max-width:1180px){ #shell #stage .scene[data-id="9"],#shell #stage .scene[data-id="10"]{ position:absolute!important;inset:0!important;display:grid!important; grid-template-columns:minmax(0,28%) minmax(0,72%)!important; grid-template-rows:minmax(0,1fr)!important; padding:clamp(24px,6vh,37px) 3.5vw clamp(28px,8vh,41px) 5vw!important; gap:12px!important;align-items:stretch!important;overflow:hidden!important; } #shell #stage .scene[data-id="9"] .copy,#shell #stage .scene[data-id="10"] .copy{height:100%;min-height:0;padding:0 2px!important;overflow:hidden} #shell #stage .scene[data-id="9"] .copy h1,#shell #stage .scene[data-id="10"] .copy h1{font-size:clamp(19px,3vw,30px)!important;line-height:1.14;margin:4px 0 9px!important} #shell #stage .scene[data-id="9"] .copy h1 em,#shell #stage .scene[data-id="10"] .copy h1 em{font-size:.48em;margin:2px 0} #shell #stage .scene[data-id="9"] .copy p,#shell #stage .scene[data-id="10"] .copy p{font-size:10px!important;line-height:1.5!important;max-height:43%;overflow:hidden} #shell #stage .scene[data-id="9"] .copy .learning,#shell #stage .scene[data-id="10"] .copy .learning{display:none!important} #shell #stage .scene[data-id="9"] .visual,#shell #stage .scene[data-id="10"] .visual{height:100%!important;max-height:100%!important;min-height:0!important;align-self:stretch;overflow:visible} #shell #stage .scene[data-id="9"] .visual .art,#shell #stage .scene[data-id="10"] .visual .art{height:100%!important;min-height:0!important;width:100%!important} #shell #stage .scene[data-id="9"] .suspension-stage,#shell #stage .scene[data-id="10"] .suspension-stage{ display:grid!important;position:relative!important;inset:auto!important;width:100%!important;height:100%!important;min-height:0!important; grid-template-columns:minmax(0,1.18fr) minmax(110px,.82fr)!important; grid-template-rows:minmax(0,1fr) auto!important; gap:5px!important;padding:0!important;align-items:stretch!important; } #shell #stage .scene[data-id="9"] .suspension-hero,#shell #stage .scene[data-id="10"] .suspension-hero{ display:block!important;position:relative!important;height:100%!important;min-height:0!important;max-height:100%!important;overflow:hidden!important; } #shell #stage .scene[data-id="9"] .suspension-side,#shell #stage .scene[data-id="10"] .suspension-side{ display:flex!important;min-height:0!important;height:100%!important;max-height:100%!important;overflow:hidden!important; flex-direction:column;gap:4px!important;padding:7px!important;border:1px solid #c3a07366; } #shell .suspension-side h3{font-size:13px!important;letter-spacing:.07em;margin:0!important} #shell .suspension-side>p,#shell .suspension-side .suspension-caption{display:none!important} #shell .suspension-side .principle-card{padding:4px 5px!important;grid-template-columns:19px minmax(0,1fr)!important;gap:5px!important;min-height:0} #shell .suspension-side .principle-num{width:18px;height:18px;font-size:11px} #shell .suspension-side .principle-copy b{font-size:10px;margin:0} #shell .suspension-side .principle-copy span{display:none!important} #shell #stage .scene[data-id="9"] .suspension-stage>.controlpanel,#shell #stage .scene[data-id="10"] .suspension-stage>.controlpanel{ position:relative!important;grid-row:2;grid-column:1/-1;min-height:0!important;max-height:47px!important;width:100%!important; padding:2px 7px!important;overflow:hidden!important; } #shell .suspension-stage>.controlpanel label,#shell .suspension-stage>.controlpanel input,#shell .suspension-stage>.controlpanel output,#shell .suspension-stage>.controlpanel .stepper{display:none!important} #shell .suspension-stage>.controlpanel .v10-compass-extra{display:flex;flex-wrap:nowrap;margin:0!important;gap:4px} #shell .suspension-stage>.controlpanel .v10-compass-extra button{font-size:9px!important;padding:2px 4px!important;min-height:22px!important;white-space:nowrap} #shell .suspension-model{width:min(93%,285px);height:92%!important;top:54%} #shell .model-callout{display:none!important} #shell .v10-model-caption{display:none!important} #shell .blender-model-badge{top:5px;left:5px;font-size:8px} #shell .blender-model-status{bottom:5px;min-width:0;font-size:8px;max-width:95%} #shell .bottomnav{bottom:8px!important} } /* --------------------- id="mengxi-v11-immersive" --------------------- */ /* ================================================================ MENGXI V11: immersive full-viewport RUBIK page transition Nine flush-fitting cells; three precisely synchronized row turns. The entire page, not a floating miniature, is the cube face. ================================================================ */ #shell .v11-cube-overprint i{font-style:normal;color:#f1c789;padding:0 9px} @media(max-width:850px){} @media(max-width:580px){} @media(prefers-reduced-motion:reduce){} /* Museum exhibit integrated into the illustrated stage: no framed scroll box. */ #shell #stage .scene[data-id="9"] .suspension-stage, #shell #stage .scene[data-id="10"] .suspension-stage{ height:100%!important;max-height:100%!important;min-height:0!important; grid-template-rows:minmax(0,1fr) auto!important; gap:clamp(7px,1vw,15px)!important; padding:3px 0 4px!important; overflow:visible!important; } #shell #stage .scene[data-id="9"] .suspension-hero, #shell #stage .scene[data-id="10"] .suspension-hero{ background:transparent!important;box-shadow:none!important;border:none!important; border-radius:0!important;overflow:hidden!important; } #shell .suspension-hero::before{display:none!important} #shell .suspension-hero .v10-model-caption{ background:#eee0c8b8!important;backdrop-filter:blur(5px);border:0!important; font-size:13px!important;line-height:1.6!important;color:#312a22!important; padding:7px 11px!important; } #shell #stage .scene[data-id="9"] .suspension-side, #shell #stage .scene[data-id="10"] .suspension-side{ border:0!important;border-left:1px solid #9783638f!important;border-radius:0!important; background:transparent!important;box-shadow:none!important;backdrop-filter:none!important; overflow:visible!important;max-height:none!important;min-height:0!important; padding:6px 0 3px clamp(8px,1.4vw,24px)!important; gap:clamp(5px,.6vw,9px)!important; align-self:stretch; } #shell .suspension-side h3{font-size:clamp(20px,1.8vw,28px)!important;color:#3f473a!important;text-shadow:0 1px 0 #fff8df9c} #shell .suspension-side>p{font-size:clamp(12px,1vw,15px)!important;color:#405045!important;line-height:1.55!important} #shell .suspension-side .principle-card, #shell .suspension-side .principle-card.active{ background:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important; padding:clamp(3px,.45vw,7px) 3px!important;transform:none!important; transition:color .2s,border-color .2s!important; grid-template-columns:clamp(28px,2.6vw,40px) 1fr!important; gap:clamp(5px,.55vw,10px)!important; border-bottom:1px solid #98856c55!important; } #shell .suspension-side .principle-card:hover,#shell .suspension-side .principle-card.active{border-bottom-color:#97643a!important} #shell .suspension-side .principle-num{ box-shadow:none!important;background:#57412a!important; width:clamp(27px,2.5vw,36px)!important;height:clamp(27px,2.5vw,36px)!important; color:#f5e8cf!important;border-radius:50%!important; font-size:clamp(15px,1.3vw,19px)!important; } #shell .suspension-side .principle-copy b{font-size:clamp(13px,1.08vw,17px)!important;color:#2e3d30!important;line-height:1.36!important} #shell .suspension-side .principle-copy span{font-size:clamp(12px,.92vw,14px)!important;color:#566357!important;line-height:1.4!important} #shell .suspension-caption{border:0!important;background:transparent!important; font-size:12px!important;line-height:1.4!important;color:#596858!important;padding:0!important} /* Controls read as part of exhibit plinth, not an independently scrolling box. */ #shell #stage .scene[data-id="9"] .suspension-stage>.controlpanel, #shell #stage .scene[data-id="10"] .suspension-stage>.controlpanel{ background:linear-gradient(90deg,#e9decae8,#ded2bce8)!important;color:#34483c!important; border:0!important;border-top:1px solid #95876d99!important; box-shadow:none!important;backdrop-filter:none!important; border-radius:0!important; max-height:none!important;min-height:0!important; overflow:visible!important; padding:clamp(5px,.75vw,11px) clamp(7px,1vw,15px)!important; display:flex!important;align-items:center!important;justify-content:space-between!important; gap:clamp(7px,1vw,16px)!important;flex-wrap:nowrap!important; } #shell .suspension-stage>.controlpanel label{font-size:13px!important;color:#394b3c!important;max-width:230px;line-height:1.4;margin:0!important} #shell .suspension-stage>.controlpanel input[type=range]{width:clamp(75px,8vw,170px)!important;flex:1 1 88px;min-width:50px!important} #shell .suspension-stage>.controlpanel .stepper{flex-wrap:nowrap!important;white-space:nowrap} #shell .suspension-stage>.controlpanel .stepper button, #shell .suspension-stage .v10-compass-extra button{ border:0!important;border-bottom:1px solid #7a6852!important;background:none!important; box-shadow:none!important;color:#405348!important;border-radius:0!important; font-size:clamp(11px,.9vw,13px)!important;padding:6px 4px!important;margin:0!important; white-space:nowrap; } #shell .suspension-stage .v10-compass-extra{display:flex;align-items:center;flex-wrap:nowrap;gap:clamp(2px,.45vw,9px);margin:0!important} #shell .suspension-stage>.controlpanel output{font-size:clamp(11px,.85vw,13px)!important;color:#53624c!important;max-width:240px;line-height:1.3} /* Footer, direction labels, small museum captions: legibility first. */ #shell .bottomnav{font-size:14px!important;letter-spacing:.05em!important} #shell .bottomnav .hint{font-size:14px!important;line-height:1.5!important;opacity:1!important;color:#57675a!important} #shell .bottomnav .pageindex,#shell .pageindex{font-size:15px!important;font-weight:600!important} #shell .topright,#shell .topright .linkbtn,#shell .topright #progressNum{font-size:13px!important} #shell .v10-mini-label{font-size:12px!important;letter-spacing:.02em!important} #shell .exhibit .caption{font-size:14px!important;line-height:1.5!important} #shell .exhibit .fine{font-size:15px!important} #shell .note-source{font-size:13px!important;line-height:1.5!important} #shell .chapter{font-size:13px!important} #shell .controlpanel output{font-size:13px} #shell #stage .scene[data-form] .reader-deck{font-size:clamp(17px,1.5vw,22px)!important} #shell #stage .scene[data-form] .scene-summary{font-size:clamp(15px,1.3vw,19px)!important} /* Drop independent scrolling for display panels; keep ordinary scene layout. */ #shell #stage .scene .copy{scrollbar-width:none!important} #shell #stage .scene[data-form] .copy{overflow:visible!important;max-height:none!important} #shell .inlinegame{overflow:visible!important;max-height:none!important} @media(orientation:landscape) and (max-height:590px){ #shell #stage .scene[data-id="9"] .suspension-stage, #shell #stage .scene[data-id="10"] .suspension-stage{gap:4px!important;padding:0!important} #shell #stage .scene[data-id="9"] .suspension-side, #shell #stage .scene[data-id="10"] .suspension-side{gap:3px!important;padding:0 0 0 10px!important} #shell .suspension-side h3{font-size:clamp(15px,1.65vw,19px)!important;margin:0!important} #shell .suspension-side>p,#shell .suspension-caption{display:none!important} #shell .suspension-side .principle-card, #shell .suspension-side .principle-card.active{padding:2px!important;gap:5px!important;grid-template-columns:23px 1fr!important} #shell .suspension-side .principle-num{width:21px!important;height:21px!important;font-size:12px!important} #shell .suspension-side .principle-copy b{font-size:12px!important} #shell .suspension-side .principle-copy span{font-size:11px!important;line-height:1.25!important} #shell #stage .scene[data-id="9"] .suspension-stage>.controlpanel, #shell #stage .scene[data-id="10"] .suspension-stage>.controlpanel{padding:2px 5px!important;max-height:none!important;min-height:29px!important;gap:6px!important} #shell .suspension-stage>.controlpanel label,#shell .suspension-stage>.controlpanel output{display:none!important} #shell .suspension-stage>.controlpanel input[type=range]{height:13px!important;width:80px!important} #shell .suspension-stage .v10-compass-extra button{font-size:10.5px!important;padding:4px 1px!important} #shell .bottomnav .hint{font-size:12px!important} #shell .v10-mini-label{font-size:11px!important} #shell #stage .scene[data-id="9"] .copy p,#shell #stage .scene[data-id="10"] .copy p{font-size:12px!important;line-height:1.45!important} } @media(max-width:870px) and (orientation:landscape){ #shell .suspension-side .principle-copy span{display:none!important} #shell #stage .scene[data-id="9"] .suspension-hero,#shell #stage .scene[data-id="10"] .suspension-hero{min-width:0!important} #shell .suspension-hero .v10-model-caption{display:none!important} #shell .suspension-stage .v10-compass-extra button:nth-child(1),#shell .suspension-stage .v10-compass-extra button:nth-child(4){display:none!important} #shell .bottomnav .hint{display:none!important} } /* Final V11 exhibit readability + full-width control plinth */ #shell #stage .scene[data-id="9"] .suspension-side, #shell #stage .scene[data-id="10"] .suspension-side{ background:linear-gradient(90deg,#e6deccd9 0%,#e9dfcddc 86%,#e2d8c4aa 100%)!important; border-left:1px solid #a68d6880!important; padding:14px 12px 14px 18px!important; border-radius:0!important; overflow:visible!important; max-height:none!important; justify-content:center!important; } #shell #stage .scene[data-id="9"] .suspension-side h3, #shell #stage .scene[data-id="10"] .suspension-side h3{color:#30473b!important} #shell #stage .scene[data-id="9"] .suspension-side>p, #shell #stage .scene[data-id="10"] .suspension-side>p{color:#405448!important} #shell #stage .scene[data-id="9"] .suspension-stage>#interaction.controlpanel, #shell #stage .scene[data-id="10"] .suspension-stage>#interaction.controlpanel{ width:100%!important;min-width:0!important;max-width:none!important; grid-column:1 / -1!important;grid-row:2!important; display:grid!important; grid-template-columns:minmax(0,1fr) minmax(100px,.6fr)!important; grid-template-rows:auto auto auto!important; justify-items:stretch!important;justify-content:stretch!important; align-items:center!important;gap:4px 12px!important; padding:9px 15px!important;min-height:0!important; overflow:visible!important; background:#e6dccac9!important; } #shell .suspension-stage>#interaction.controlpanel label{grid-column:1;grid-row:1;max-width:none!important;font-size:14px!important;white-space:normal!important} #shell .suspension-stage>#interaction.controlpanel input[type="range"]{grid-column:2;grid-row:1;width:100%!important;max-width:none!important;height:16px!important;display:block!important} #shell .suspension-stage>#interaction.controlpanel .stepper{grid-column:1;grid-row:2;justify-content:flex-start!important;gap:15px!important} #shell .suspension-stage>#interaction.controlpanel .v10-compass-extra{grid-column:2;grid-row:2;justify-content:flex-end!important;gap:8px!important} #shell .suspension-stage>#interaction.controlpanel output{grid-column:1/-1;grid-row:3;max-width:none!important;font-size:13px!important;display:block!important;line-height:1.2!important} #shell .model-callout{border:0!important;border-radius:0!important; background:linear-gradient(90deg,#efdfc3d9,#ede0c4aa)!important; box-shadow:none!important;backdrop-filter:none!important; font-size:12px!important;line-height:1.35!important; padding:5px 7px!important; } #shell .model-callout b{font-size:13px!important} @media(orientation:landscape) and (max-height:590px){ #shell #stage .scene[data-id="9"] .suspension-side, #shell #stage .scene[data-id="10"] .suspension-side{ background:linear-gradient(90deg,#ebe2cfda,#e8ddc6c9)!important; padding:6px 7px!important; justify-content:space-around!important; } #shell #stage .scene[data-id="9"] .suspension-stage>#interaction.controlpanel, #shell #stage .scene[data-id="10"] .suspension-stage>#interaction.controlpanel{ grid-template-columns:minmax(70px,1fr) auto auto!important; grid-template-rows:minmax(24px,auto)!important; width:100%!important;min-width:0!important;max-width:none!important; padding:3px 7px!important; gap:5px!important;min-height:0!important; } #shell .suspension-stage>#interaction.controlpanel label, #shell .suspension-stage>#interaction.controlpanel output{display:none!important} #shell .suspension-stage>#interaction.controlpanel input[type="range"]{ display:block!important;grid-column:1;grid-row:1;height:18px!important; min-width:50px!important; } #shell .suspension-stage>#interaction.controlpanel .stepper{grid-column:2;grid-row:1;display:flex!important;gap:3px!important;margin:0!important} #shell .suspension-stage>#interaction.controlpanel .v10-compass-extra{grid-column:3;grid-row:1;display:flex!important;gap:3px!important} #shell .suspension-stage>#interaction.controlpanel button{padding:4px 3px!important;font-size:11px!important} #shell .suspension-hero .model-callout{display:none!important} } /* Final typographic legibility: real bookmark footer (not just legacy bottomnav). */ #shell .bookmark-nav span{font-size:13px!important;color:#506355!important;letter-spacing:.04em!important} #shell .bookmark-nav b{font-size:clamp(14px,1.05vw,17px)!important;line-height:1.3!important;font-weight:600!important;color:#294439!important} #shell .chapter-dial small{font-size:12px!important;line-height:1.35!important} #shell .dial-number{font-size:17px!important} #shell .floral-chapter-nav .v10-mini-label{font-size:12px!important;font-weight:600!important;text-shadow:0 1px 5px #212b22!important} #shell .blender-model-status,#shell .blender-model-badge{font-size:12px!important;line-height:1.3!important} #shell .suspension-hero .v10-model-caption{font-size:12px!important} @media(orientation:landscape) and (max-height:590px){ #shell .bookmark-nav span{font-size:12px!important} #shell .bookmark-nav b{font-size:14px!important} #shell .chapter-dial small{font-size:11px!important} #shell .floral-chapter-nav .v10-mini-label{font-size:11px!important} #shell .suspension-stage>#interaction.controlpanel button{font-size:12px!important;line-height:1.2!important} } /* --------------------- id="mengxi-v13-real-3d" --------------------- */ /* 2026-10-12: mechanical 3D Rubik page-turn. No filter/backdrop-filter on 3-D parents. */ @keyframes v13CameraRide{ 0%{transform:translate3d(0px,0px,calc(0px - var(--v13-half))) rotateX(0deg) rotateY(0deg)} 13%{transform:translate3d(calc(0px - var(--v13-kick-x)),calc(0px - var(--v13-kick-y)),calc(0px - var(--v13-half) - 62px)) rotateX(-3deg) rotateY(var(--v13-yaw))} 48%{transform:translate3d(var(--v13-kick-x),var(--v13-kick-y),calc(0px - var(--v13-half) + 80px)) rotateX(4deg) rotateY(var(--v13-yaw-end))} 78%{transform:translate3d(calc(0px - var(--v13-kick-x) / 3),calc(var(--v13-kick-y) / 3),calc(0px - var(--v13-half) - 25px)) rotateX(-1.5deg) rotateY(2deg)} 100%{transform:translate3d(0px,0px,calc(0px - var(--v13-half))) rotateX(0deg) rotateY(0deg)} } /* For the downward-turning row, the incoming face occupies the bottom surface, so the TOP is the contrasting brass/smoked-wood edge; no second overlapping face. */ /* The material catch-light sweeps over the complete viewport; it is *outside* 3D subtree. */ @keyframes v13CatchLight{0%,100%{background-position:100% 0;opacity:0}27%,74%{opacity:.48}90%{background-position:0 0;opacity:.08}} @media(max-width:850px){ } @media(prefers-reduced-motion:reduce){ } /* ---- extracted style block boundary ---- */ /* Inline: css/03_纹饰与书卷样式.css */ /* --------------------- id="mengxi-v14-open-font-typography" --------------------- */ :root{--mengxi-body-font:"Noto Serif SC",serif;--mengxi-display-font:"Noto Serif SC",serif;--mengxi-ui-font:"Noto Sans SC",sans-serif} body,#shell,#shell button,#shell input,#shell textarea,#shell select{font-family:var(--mengxi-body-font)} /* 书法仅用于文化氛围更强的一级标题，避免长正文采用不易阅读的笔触。 */ #shell .scroll-title,#shell #stage .scene .copy h1,#shell .drawerhead h2,#shell .scroll-kicker{font-family:var(--mengxi-display-font)!important;font-weight:400!important;letter-spacing:.055em} #shell #stage .scene .copy h1 em{font-family:var(--mengxi-body-font)!important;letter-spacing:.095em;font-weight:500!important} /* 笔记、工具说明、操作按钮等保持清楚的宋体或设备字体。 */ #shell .copy p,#shell .learning,#shell .principle-copy,#shell .suspension-caption,#shell .suspension-side p,#shell .note-page,#shell .controlpanel,#shell .topright,#shell .bottomnav,#shell .v11-cube-overprint,#shell .v10-cube-story{font-family:var(--mengxi-body-font)!important} #shell .bottomnav .pageindex,#shell .bottomnav .hint{font-size:clamp(13px,1.04vw,15px)!important;letter-spacing:.075em!important} #shell .v10-mini-label{font-size:12px!important;letter-spacing:.045em!important} #shell .scroll-subtitle{font-family:"Noto Serif SC",serif!important} @media(max-width:850px) and (orientation:landscape){ #shell .bottomnav .pageindex,#shell .bottomnav .hint{font-size:13px!important} #shell .v10-mini-label{font-size:10px!important} } /* --------------------- id="mengxi-v15-shoujin" --------------------- */ /* V15: 仅替换“梦溪 / 梦 溪 格 物 志”为瘦金感烫金标题，其余不动 */ #shell .brand .shoujin-mark, #shell .orientation-brand .shoujin-mark, #shell .brand .shoujin-title, #shell .orientation-brand .shoujin-title{ position:relative; display:inline-block; color:transparent!important; background-image: linear-gradient(180deg,#fff8dd 0%,#f8e7b4 12%,#e6c97b 30%,#c5963f 48%,#fff1bf 58%,#bf8a2d 76%,#f6d894 100%), linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,0) 28%,rgba(255,255,255,.38) 42%,rgba(255,255,255,0) 60%); background-size:100% 100%, 220% 100%; background-position:0 0, 100% 0; -webkit-background-clip:text; background-clip:text; text-shadow: 0 1px 0 rgba(255,247,220,.48), 0 2px 0 rgba(120,73,17,.18), 0 7px 18px rgba(40,24,5,.30), 0 0 18px rgba(231,190,92,.18); -webkit-text-stroke:.45px rgba(107,64,18,.50); filter:drop-shadow(0 3px 6px rgba(20,12,0,.18)); animation:shoujinSheen 6.8s ease-in-out infinite; } #shell .brand .shoujin-mark, #shell .orientation-brand .shoujin-mark{ font-family:"Noto Serif SC",serif!important; font-weight:700!important; font-style:normal; letter-spacing:.08em!important; transform:skewX(-10deg) scaleX(.88) scaleY(1.08); transform-origin:center center; } #shell .brand .shoujin-title, #shell .orientation-brand .shoujin-title{ font-family:"Noto Serif SC",serif!important; font-weight:700!important; letter-spacing:.24em!important; transform:skewX(-11deg) scaleX(.84) scaleY(1.10); transform-origin:left center; } #shell .brand .shoujin-title::after, #shell .orientation-brand .shoujin-title::after, #shell .brand .shoujin-mark::after, #shell .orientation-brand .shoujin-mark::after{ content:""; position:absolute; inset:-12% -4%; background:linear-gradient(108deg,rgba(255,255,255,0) 18%,rgba(255,250,225,.34) 33%,rgba(255,230,160,.62) 41%,rgba(255,250,225,.18) 52%,rgba(255,255,255,0) 64%); mix-blend-mode:screen; opacity:.82; transform:translateX(-120%) skewX(-18deg); animation:shoujinGlint 7.4s ease-in-out infinite; pointer-events:none; } #shell .brand .shoujin-mark{font-size:1.12em!important} #shell .brand .shoujin-title{font-size:1.28em!important} #shell .orientation-brand .shoujin-mark{font-size:1.06em!important} #shell .orientation-brand .shoujin-title{font-size:1.20em!important} @keyframes shoujinSheen{ 0%,18%,100%{background-position:0 0, 130% 0} 42%{background-position:0 0, -30% 0} 54%{background-position:0 0, 110% 0} } @keyframes shoujinGlint{ 0%,25%,100%{transform:translateX(-120%) skewX(-18deg);opacity:0} 36%{opacity:.22} 48%{transform:translateX(132%) skewX(-18deg);opacity:.84} 62%{opacity:0} } @media(max-width:850px){ #shell .brand .shoujin-title,#shell .orientation-brand .shoujin-title{letter-spacing:.18em!important} #shell .brand .shoujin-title{font-size:1.15em!important} } /* --------------------- id="mengxi-v17-visible-motifs" --------------------- */ #shell .brand .shoujin-mark, #shell .orientation-brand .shoujin-mark, #shell .brand .shoujin-title, #shell .orientation-brand .shoujin-title{font-family:"Noto Serif SC",serif!important;font-weight:700!important;letter-spacing:.24em!important;color:#ead9b2!important;text-shadow:0 1px 0 rgba(255,248,230,.35),0 2px 10px rgba(71,42,13,.25),0 0 1px rgba(71,42,13,.55)!important;background:none!important;-webkit-text-stroke:0!important;filter:none!important;animation:none!important} #shell .brand .shoujin-mark,#shell .orientation-brand .shoujin-mark{letter-spacing:.12em!important} #shell .brand .shoujin-title,#shell .orientation-brand .shoujin-title{transform:none!important} #shell .brand .shoujin-mark::after,#shell .orientation-brand .shoujin-mark::after,#shell .brand .shoujin-title::after,#shell .orientation-brand .shoujin-title::after{display:none!important} #shell .drawer{background:radial-gradient(circle at 15% 10%, rgba(255,250,239,.48), transparent 24%),radial-gradient(circle at 82% 14%, rgba(176,118,50,.18), transparent 22%),linear-gradient(180deg,rgba(244,232,205,.96),rgba(231,212,174,.96) 54%,rgba(216,191,146,.97) 100%)!important;color:#442e1b!important;overflow:auto!important} #shell .drawer::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.52;background-image:url("../assets/images/image-4a7cd0568f.svg");background-size:220px 220px;mix-blend-mode:multiply} #shell .drawer::after{content:"";position:absolute;inset:18px;pointer-events:none;border:1px solid rgba(143,101,54,.46);box-shadow:inset 0 0 0 1px rgba(255,250,236,.58), inset 0 0 28px rgba(122,84,39,.10)} #shell .drawer h2{color:#5a381f!important;letter-spacing:.18em} #shell .drawerhead{padding-bottom:18px;border-bottom:1px solid rgba(141,105,65,.35);margin-bottom:18px} #shell .drawergrid{gap:14px!important} #shell .drawergrid button{position:relative;overflow:hidden;border:1px solid rgba(142,101,54,.40)!important;background:linear-gradient(180deg,rgba(252,246,233,.82),rgba(235,220,190,.92))!important;color:#4d3621!important;box-shadow:0 8px 18px rgba(121,84,41,.12), inset 0 0 0 1px rgba(255,251,239,.58)} #shell .drawergrid button::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;background-image:url("../assets/images/image-cd5afbbb48.svg");background-size:96px 96px} #shell .drawergrid button:hover,#shell .drawergrid button.current{background:linear-gradient(180deg,rgba(249,236,204,.98),rgba(227,198,144,.95))!important} #shell .drawergrid span{color:#8e6439!important} #shell .sources,#shell .sources a,#shell .drawer .outline{color:#6c4623!important} /* --------------------- id="mengxi-v19-model-boards" --------------------- */ #shell #stage .scene[data-id="15"] .copy,#shell #stage .scene[data-id="16"] .copy{max-width:29%!important;min-width:270px!important} #shell #stage .scene[data-id="15"] .visual,#shell #stage .scene[data-id="16"] .visual{flex:1.18!important;min-width:0!important} #shell #stage .scene[data-id="15"] .art,#shell #stage .scene[data-id="16"] .art{padding:14px!important;background:linear-gradient(180deg,#eadfc8,#dbc59d)!important;border:1px solid rgba(120,84,37,.25)!important;box-shadow:0 18px 42px rgba(63,38,16,.13)!important} #shell #stage .scene[data-id="15"] .art>.orbital,#shell #stage .scene[data-id="15"] .art>.bigglyph,#shell #stage .scene[data-id="15"] .art>.halo,#shell #stage .scene[data-id="15"] .art>.artlabel,#shell #stage .scene[data-id="16"] .art>.landscape,#shell #stage .scene[data-id="16"] .art>.halo,#shell #stage .scene[data-id="16"] .art>.artlabel{display:none!important} #shell .boardhost{display:block!important;width:100%!important;margin-top:0!important} #shell .model-board{display:flex;flex-direction:column;gap:12px;height:min(100%,720px);color:#4d341d} #shell .terrain-header,#shell .inklab-titlebar{display:flex;justify-content:space-between;align-items:end;gap:14px;padding:10px 14px;border-radius:14px;background:linear-gradient(180deg,rgba(251,246,235,.84),rgba(238,223,194,.88));border:1px solid rgba(118,81,41,.18)} #shell .terrain-badge,#shell .inklab-mark{display:inline-flex;align-items:center;padding:8px 16px;border-radius:999px;background:#47321e;color:#ecd5a0;font-weight:700;letter-spacing:.08em} #shell .terrain-scale{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;flex:1}#shell .terrain-scale span{font-size:14px;text-align:center;color:#6b4a2b} #shell .terrain-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} #shell .terrain-stage,#shell .ink-step{border:1px solid rgba(117,78,39,.18);background:linear-gradient(180deg,#faf3e4,#ebd8b2);border-radius:16px;padding:10px;text-align:left;color:#53381f;box-shadow:0 6px 14px rgba(74,49,24,.08)} #shell .terrain-stage.active,#shell .ink-step.active{background:linear-gradient(180deg,#f0d89a,#dbb465);transform:translateY(-1px);box-shadow:0 8px 20px rgba(82,57,22,.12)} #shell .terrain-stage b,#shell .ink-step .lab{display:block;font-size:16px;margin-top:8px}#shell .terrain-stage span{display:block;font-size:13px;line-height:1.4;color:#7a5733;margin-top:4px} #shell .terrain-mini{position:relative;height:100px;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#dce7eb,#f6e6bf 42%,#95b785 78%,#5b7551 100%)} #shell .terrain-mini .riverline{position:absolute;left:44%;top:40%;width:16%;height:62%;background:linear-gradient(180deg,#9ad3ea,#4c8fc7);clip-path:polygon(37% 0,62% 0,78% 18%,58% 34%,74% 49%,44% 67%,62% 100%,24% 100%,12% 66%,34% 48%,18% 28%,31% 12%);filter:drop-shadow(0 0 6px rgba(255,255,255,.5));opacity:.92}.terrain-mini .peak{position:absolute;bottom:18%;background:linear-gradient(180deg,#66865e,#425442);clip-path:polygon(50% 0,100% 100%,0 100%)}.terrain-mini .peak.a{left:7%;width:36%;height:62%}.terrain-mini .peak.b{left:30%;width:38%;height:78%}.terrain-mini .peak.c{right:8%;width:30%;height:58%} #shell .terrain-mini.stage1 .peak.b{transform:scaleX(.92)}#shell .terrain-mini.stage1 .riverline{left:46%;width:14%} #shell .terrain-mini.stage2 .peak.a{height:66%;left:3%}#shell .terrain-mini.stage2 .peak.b{width:28%;left:38%}#shell .terrain-mini.stage2 .peak.c{height:70%;right:2%;width:26%}#shell .terrain-mini.stage2 .riverline{left:48%;width:12%} #shell .terrain-mini.stage3 .peak.a{width:24%;left:8%;height:76%}#shell .terrain-mini.stage3 .peak.b{width:18%;left:34%;height:88%}#shell .terrain-mini.stage3 .peak.c{width:22%;right:5%;height:74%}#shell .terrain-mini.stage3::after{content:"";position:absolute;right:28%;bottom:18%;width:16%;height:54%;background:linear-gradient(180deg,#6f8d60,#435543);clip-path:polygon(50% 0,100% 100%,0 100%)}#shell .terrain-mini.stage3 .riverline{left:50%;width:10%} #shell .terrain-main,#shell .inklab-main{display:grid;grid-template-columns:minmax(360px,1.2fr) minmax(260px,.8fr);gap:12px;min-height:0;flex:1} #shell .terrain-view{position:relative;overflow:hidden;border-radius:18px;min-height:360px;border:1px solid rgba(110,74,37,.18);background:linear-gradient(180deg,#d7e5ea,#f6e7c3 34%,#8ab19c 76%,#627453 100%);box-shadow:inset 0 0 0 1px rgba(255,250,236,.45),0 12px 28px rgba(58,38,16,.1)} #shell .terrain-sky{position:absolute;inset:0 0 44% 0;background:radial-gradient(circle at 78% 22%,rgba(254,221,168,.6),transparent 16%),linear-gradient(180deg,rgba(255,255,255,.32),transparent 44%)} #shell .terrain-mist{position:absolute;left:-4%;right:-4%;bottom:22%;height:30%;background:radial-gradient(circle at 20% 50%,rgba(255,255,255,.6),transparent 18%),radial-gradient(circle at 60% 60%,rgba(255,255,255,.44),transparent 22%),radial-gradient(circle at 82% 40%,rgba(255,255,255,.5),transparent 18%);filter:blur(8px);opacity:.72;animation:mistFloat 8s ease-in-out infinite alternate} @keyframes mistFloat{from{transform:translateX(-6px)}to{transform:translateX(9px)}} #shell .terrain-river{position:absolute;left:41%;top:39%;width:18%;height:66%;background:linear-gradient(180deg,#acdff2,#5ca1cb 40%,#3c7db3 100%);clip-path:polygon(36% 0,66% 0,82% 14%,62% 28%,78% 42%,48% 56%,69% 74%,55% 100%,18% 100%,6% 82%,24% 60%,10% 40%,27% 20%);filter:drop-shadow(0 0 12px rgba(255,255,255,.56));transition:all .45s ease} #shell .terrain-peak{position:absolute;bottom:17%;background:linear-gradient(180deg,#7ea16b,#55684f 60%,#3d493b);clip-path:polygon(50% 0,100% 100%,0 100%);box-shadow:inset 0 -12px 20px rgba(23,41,24,.18),0 12px 20px rgba(53,39,18,.1);transition:all .45s ease} #shell .terrain-peak::after{content:"";position:absolute;left:12%;right:12%;top:10%;bottom:12%;background:linear-gradient(90deg,rgba(255,255,255,.25),transparent 45%);clip-path:inherit;opacity:.28}.terrain-peak.p1{left:4%;width:24%;height:56%}.terrain-peak.p2{left:18%;width:30%;height:70%}.terrain-peak.p3{left:38%;width:26%;height:78%}.terrain-peak.p4{right:18%;width:28%;height:66%}.terrain-peak.p5{right:4%;width:26%;height:52%} #shell .terrain-view.stage1 .terrain-river{left:43%;width:15%;top:37%}#shell .terrain-view.stage1 .p3{transform:scaleX(.9)} #shell .terrain-view.stage2 .terrain-river{left:45%;width:12%;top:35%;height:68%}#shell .terrain-view.stage2 .p1{left:2%;width:22%;height:62%}#shell .terrain-view.stage2 .p2{left:14%;width:22%;height:76%}#shell .terrain-view.stage2 .p3{left:41%;width:18%;height:86%}#shell .terrain-view.stage2 .p4{right:16%;width:20%;height:72%}#shell .terrain-view.stage2 .p5{right:2%;width:20%;height:66%} #shell .terrain-view.stage3 .terrain-river{left:48%;width:9%;top:34%;height:70%}#shell .terrain-view.stage3 .p1{left:6%;width:15%;height:74%}#shell .terrain-view.stage3 .p2{left:22%;width:14%;height:84%}#shell .terrain-view.stage3 .p3{left:40%;width:12%;height:94%}#shell .terrain-view.stage3 .p4{right:22%;width:13%;height:78%}#shell .terrain-view.stage3 .p5{right:6%;width:15%;height:72%}#shell .terrain-view.stage3::after{content:"";position:absolute;right:34%;bottom:17%;width:11%;height:62%;background:linear-gradient(180deg,#87ab72,#566b4d 60%,#404d3e);clip-path:polygon(50% 0,100% 100%,0 100%);box-shadow:0 12px 20px rgba(53,39,18,.1)} #shell .terrain-side,#shell .inklab-side{display:flex;flex-direction:column;gap:12px;min-width:0} #shell .board-toolbar{display:flex;flex-direction:column;gap:8px;background:rgba(249,244,232,.72);padding:12px 14px;border-radius:14px;border:1px solid rgba(120,84,37,.14)}#shell .board-toolbar label{font-size:15px!important;color:#5b3d22!important;font-weight:700!important} #shell .museum-note{background:rgba(250,246,237,.84);padding:16px 18px;border-radius:16px;border:1px solid rgba(120,84,37,.15);box-shadow:inset 0 0 0 1px rgba(255,250,241,.6)}#shell .museum-note h3{margin:0 0 8px;font-size:26px!important;color:#4d2f19!important}#shell .museum-note p{margin:0 0 10px;font-size:18px!important;line-height:1.65!important;color:#5e4228!important}.museum-tip{font-size:16px!important;color:#7a5630!important} #shell .inklab-submark{color:#69492a;font-size:15px;letter-spacing:.08em} #shell .inklab-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}#shell .ink-step{display:flex;flex-direction:column;gap:4px;align-items:flex-start;padding:11px 9px!important}#shell .ink-step .num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:#4e331d;color:#f2ddb0;font-weight:700} #shell .inklab-stage{position:relative;border-radius:18px;min-height:390px;border:1px solid rgba(110,74,37,.18);background:linear-gradient(180deg,#dfd0b4,#b28b62 44%,#805831);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,250,236,.45),0 12px 28px rgba(58,38,16,.1)} #shell .ink-scene{position:relative;min-height:390px;background:radial-gradient(circle at 70% 12%,rgba(255,231,183,.3),transparent 18%),linear-gradient(180deg,#ede0c9 0,#c9b293 25%,#89603e 80%,#623c1f 100%)} #shell .oil-ground{position:absolute;left:0;right:0;bottom:0;height:28%;background:linear-gradient(180deg,#55351d,#2e1a12)} #shell .tool{position:absolute;transition:all .45s ease,opacity .35s ease}.tool.barrel{left:8%;bottom:20%;width:16%;height:22%;background:linear-gradient(180deg,#7d5632,#4e311b);border-radius:12px 12px 18px 18px;box-shadow:inset 0 0 0 5px rgba(41,22,10,.35)}.tool.barrel::before,.tool.barrel::after{content:"";position:absolute;left:0;right:0;height:8%;background:rgba(35,18,8,.45)}.tool.barrel::before{top:24%}.tool.barrel::after{top:58%} .tool.bucket{left:28%;bottom:18%;width:13%;height:18%;border:6px solid #6a4727;border-top-width:10px;border-bottom-left-radius:14px;border-bottom-right-radius:14px;background:linear-gradient(180deg,transparent 0 32%,#161311 32% 100%)}.tool.bucket::before{content:"";position:absolute;left:18%;right:18%;top:-24%;height:30%;border:5px solid #6a4727;border-bottom:none;border-radius:999px 999px 0 0} .tool.filter{left:39%;bottom:23%;width:18%;height:20%;background:linear-gradient(180deg,#d8c9b1,#bba98b);clip-path:polygon(14% 0,86% 0,68% 100%,32% 100%);box-shadow:0 10px 16px rgba(0,0,0,.18)}.tool.filter::before{content:"";position:absolute;left:-16%;top:-8%;width:132%;height:18%;background:#6c4a2b;border-radius:12px} .tool.cauldron{left:44%;bottom:21%;width:21%;height:20%;background:radial-gradient(circle at 50% 30%,#40352f,#181313 72%);border-radius:22% 22% 34% 34%/30% 30% 62% 62%;box-shadow:0 10px 16px rgba(0,0,0,.18)}.tool.cauldron::before,.tool.cauldron::after{content:"";position:absolute;top:28%;width:16%;height:16%;border:3px solid #31241e;border-radius:999px}.tool.cauldron::before{left:-10%}.tool.cauldron::after{right:-10%} .tool.fire{left:47%;bottom:14%;width:15%;height:15%;background:radial-gradient(circle at 50% 90%,#ffb65c 0 20%,transparent 21%),linear-gradient(180deg,#ffd17c,#ff8b3d 55%,#c24b17);clip-path:polygon(50% 0,69% 26%,84% 54%,66% 100%,46% 66%,26% 100%,13% 56%,31% 28%);filter:drop-shadow(0 0 12px rgba(255,130,40,.45));opacity:0} .tool.bowl{left:62%;bottom:19%;width:18%;height:8%;background:radial-gradient(circle at 50% 20%,#2a2322,#050404 78%);border-radius:0 0 999px 999px/0 0 100% 100%;box-shadow:0 10px 16px rgba(0,0,0,.18);opacity:.2}.tool.bowl::before{content:"";position:absolute;left:14%;right:14%;top:-70%;height:140%;border:4px solid #241a16;border-bottom-width:8px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.06))} .tool.mortar{left:70%;bottom:18%;width:18%;height:16%;background:radial-gradient(circle at 50% 18%,#5b5049,#2e2723 80%);border-radius:48% 48% 38% 38%/36% 36% 62% 62%;box-shadow:0 10px 16px rgba(0,0,0,.18);opacity:0}.tool.mortar::before{content:"";position:absolute;left:14%;right:14%;top:16%;height:36%;border-radius:999px;background:#191515} .tool.inkdish{right:6%;bottom:14%;width:22%;height:14%;background:radial-gradient(circle at 52% 45%,#171312 0 35%,#090707 36% 60%,#312824 61% 100%);border-radius:999px/65%;box-shadow:0 10px 16px rgba(0,0,0,.18);opacity:0} .tool.pestle{right:10%;bottom:18%;width:5%;height:25%;background:linear-gradient(180deg,#8f643b,#5d3b22);border-radius:999px;transform:rotate(36deg);transform-origin:50% 85%;opacity:0} .tool.smoke{left:48%;bottom:33%;width:18%;height:28%;background:radial-gradient(circle at 36% 70%,rgba(255,255,255,.65),transparent 20%),radial-gradient(circle at 56% 40%,rgba(255,255,255,.58),transparent 18%),radial-gradient(circle at 70% 18%,rgba(255,255,255,.42),transparent 15%);filter:blur(8px);opacity:0;animation:smokeUp 4.4s ease-in-out infinite alternate} .tool.droplet{left:19%;bottom:28%;width:7%;height:13%;background:linear-gradient(180deg,#161413,#040404);clip-path:polygon(50% 0,82% 42%,74% 80%,50% 100%,26% 80%,18% 42%);filter:drop-shadow(0 0 8px rgba(0,0,0,.24));opacity:1}.tool.droplet::after{content:"";position:absolute;left:20%;top:18%;width:18%;height:24%;background:rgba(255,255,255,.18);border-radius:999px} @keyframes smokeUp{from{transform:translateY(4px)}to{transform:translateY(-8px)}}@keyframes swayPestle{from{transform:rotate(28deg)}to{transform:rotate(42deg)}}@keyframes shimmerInk{from{filter:brightness(.95)}to{filter:brightness(1.08)}}@keyframes flameFlick{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(.97)}} #shell .ink-scene.step0 .tool.barrel,#shell .ink-scene.step0 .tool.bucket,#shell .ink-scene.step0 .tool.droplet{opacity:1}#shell .ink-scene.step0 .tool.filter,#shell .ink-scene.step0 .tool.cauldron,#shell .ink-scene.step0 .tool.fire,#shell .ink-scene.step0 .tool.smoke,#shell .ink-scene.step0 .tool.mortar,#shell .ink-scene.step0 .tool.inkdish,#shell .ink-scene.step0 .tool.pestle,#shell .ink-scene.step0 .tool.bowl{opacity:.12} #shell .ink-scene.step1 .tool.barrel{left:10%;opacity:.45}#shell .ink-scene.step1 .tool.bucket{left:24%;opacity:.65}#shell .ink-scene.step1 .tool.filter{left:38%;opacity:1}#shell .ink-scene.step1 .tool.bowl{left:45%;bottom:14%;opacity:.85}#shell .ink-scene.step1 .tool.droplet{left:46%;bottom:33%;opacity:.75} #shell .ink-scene.step2 .tool.cauldron{left:38%;bottom:20%;width:28%;height:24%;opacity:1}#shell .ink-scene.step2 .tool.fire{left:44%;bottom:12%;width:18%;height:18%;opacity:1;animation:flameFlick 1s infinite}#shell .ink-scene.step2 .tool.smoke{opacity:.4}#shell .ink-scene.step2 .tool.bucket,#shell .ink-scene.step2 .tool.filter,#shell .ink-scene.step2 .tool.barrel{opacity:.16} #shell .ink-scene.step3 .tool.cauldron{left:37%;width:24%;height:22%;opacity:.95}#shell .ink-scene.step3 .tool.fire{left:43%;bottom:12%;width:18%;height:18%;opacity:.92;animation:flameFlick .95s infinite}#shell .ink-scene.step3 .tool.smoke{left:42%;bottom:31%;width:26%;height:34%;opacity:.86}#shell .ink-scene.step3 .tool.bowl{left:68%;bottom:16%;width:17%;opacity:.92}#shell .ink-scene.step3 .tool.droplet{opacity:.18} #shell .ink-scene.step4 .tool.mortar{left:37%;bottom:18%;width:24%;height:22%;opacity:1}#shell .ink-scene.step4 .tool.pestle{left:48%;bottom:26%;width:6%;height:29%;opacity:1;animation:swayPestle .9s ease-in-out infinite alternate}#shell .ink-scene.step4 .tool.bowl{left:14%;bottom:16%;opacity:.35}#shell .ink-scene.step4 .tool.cauldron,#shell .ink-scene.step4 .tool.fire,#shell .ink-scene.step4 .tool.smoke{opacity:.14} #shell .ink-scene.step5 .tool.inkdish{right:10%;bottom:15%;width:28%;height:18%;opacity:1;animation:shimmerInk 1.2s ease-in-out infinite alternate}#shell .ink-scene.step5 .tool.pestle{right:18%;bottom:20%;width:6%;height:31%;opacity:1;animation:swayPestle .9s ease-in-out infinite alternate}#shell .ink-scene.step5 .tool.bowl{left:18%;bottom:16%;width:17%;opacity:.25}#shell .ink-scene.step5 .tool.mortar{opacity:.2} @media (max-width: 1180px){#shell #stage .scene[data-id="15"],#shell #stage .scene[data-id="16"]{grid-template-columns:1fr!important}#shell #stage .scene[data-id="15"] .copy,#shell #stage .scene[data-id="16"] .copy{max-width:none!important}#shell .terrain-main,#shell .inklab-main{grid-template-columns:1fr!important}#shell .terrain-grid{grid-template-columns:repeat(2,1fr)}#shell .inklab-steps{grid-template-columns:repeat(3,1fr)}} @media (orientation:landscape) and (max-height:700px){#shell .terrain-mini{height:76px}#shell .terrain-view{min-height:250px}#shell .inklab-stage{min-height:275px}#shell .museum-note h3{font-size:22px!important}#shell .museum-note p{font-size:15px!important;line-height:1.5!important}#shell .terrain-stage b,#shell .ink-step .lab{font-size:14px}#shell .terrain-stage span,#shell .terrain-scale span{font-size:12px}} /* --------------------- id="mengxi-v20-no-window" --------------------- */ /* V20: two no-window full-page museum scenes */ #shell #stage .scene[data-id="15"],#shell #stage .scene[data-id="16"]{position:absolute!important;inset:0!important;display:block!important;padding:0!important;gap:0!important;width:100%!important;height:100%!important;overflow:hidden!important;background:#e5d5b4!important;filter:none!important} #shell #stage .scene[data-id="15"]>.copy,#shell #stage .scene[data-id="16"]>.copy{display:none!important} #shell #stage .scene[data-id="15"]>.visual,#shell #stage .scene[data-id="16"]>.visual{position:absolute!important;inset:0!important;display:block!important;padding:0!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;z-index:2!important} #shell #stage .scene[data-id="15"] .art,#shell #stage .scene[data-id="16"] .art{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;min-height:0!important;margin:0!important;padding:0!important;box-shadow:none!important;border:0!important;border-radius:0!important;background:none!important;overflow:hidden!important} #shell #stage .scene[data-id="15"] .art>.halo,#shell #stage .scene[data-id="16"] .art>.halo,#shell #stage .scene[data-id="15"] .art>.artlabel,#shell #stage .scene[data-id="16"] .art>.artlabel{display:none!important} #shell .mx20-immersive{position:absolute;inset:0;isolation:isolate;overflow:hidden;color:#3c2919;background:radial-gradient(ellipse 60% 72% at 34% 45%,#f1e3c7 0%,#e1d0b0 59%,#bda582 100%);font-family:"Noto Serif SC",serif;box-sizing:border-box} #shell .mx20-immersive.ink{background:radial-gradient(ellipse 60% 80% at 35% 52%,#b19b7b 0%,#725d4d 63%,#342e2a 100%);color:#f2e1bc} #shell .mx20-paper-grain{position:absolute;inset:0;pointer-events:none;opacity:.44;z-index:3;background-image:url("../assets/images/image-03f8fe2af3.svg");mix-blend-mode:multiply} #shell .mx20-immersive::before{content:"";position:absolute;inset:23px;border:1px solid #ad865d5c;box-shadow:inset 0 0 0 2px #f8e9c446;pointer-events:none;z-index:5} #shell .mx20-immersive::after{content:"";position:absolute;inset:36px;border:1px solid #b89b7555;pointer-events:none;z-index:5} #shell .mx20-immersive.ink::before,#shell .mx20-immersive.ink::after{border-color:#c9a56a55} #shell .mx20-heading{position:absolute;top:11%;left:7%;z-index:10;width:min(35%,490px);pointer-events:none;text-shadow:0 2px 8px #ecdcb46b} #shell .mx20-eyebrow{font-size:clamp(12px,.95vw,17px);letter-spacing:.22em;opacity:.85;color:#80582d} #shell .mx20-immersive.ink .mx20-eyebrow{color:#e6be7d} #shell .mx20-heading h1{font-family:"Noto Serif SC",serif!important;font-size:clamp(38px,4.2vw,74px)!important;letter-spacing:.15em!important;line-height:1.15!important;margin:14px 0 16px!important;font-weight:700!important;color:#3b2b1e!important} #shell .mx20-immersive.ink .mx20-heading h1{color:#f3d8a0!important;text-shadow:0 2px 14px #27160ab8} #shell .mx20-heading p{font-size:clamp(15px,1.06vw,19px)!important;line-height:1.75!important;margin:0!important;letter-spacing:.04em;max-width:470px;color:#61492e} #shell .mx20-immersive.ink .mx20-heading p{color:#ebd7b2} #shell .mx20-model{position:absolute;z-index:2;left:-2%;top:15%;width:84%;height:66%;touch-action:none} #shell .mx20-model::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 46% 27% at 44% 82%,#62553a3a,transparent 82%);pointer-events:none} #shell .mx20-model canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;outline:none} #shell .mx20-model canvas:active{cursor:grabbing} #shell .mx20-immersive.ink .mx20-model{left:5%;top:12%;width:78%;height:72%} #shell .model-fallback{position:absolute;left:12%;bottom:18%;color:#543c25;max-width:380px;line-height:1.6} #shell .mx20-notes{position:absolute;top:31%;right:5.6%;width:25%;z-index:10;text-align:left;pointer-events:none;text-shadow:0 1px 8px #d1bb9433} #shell .mx20-seal{display:inline-block;background:#34291c;color:#d5b17b;padding:6px 11px;writing-mode:vertical-rl;position:absolute;right:-8px;top:-85px;line-height:1.2;font-size:15px;letter-spacing:.23em;border:1px solid #b58e5a;box-shadow:inset 0 0 0 2px #2e2014,0 3px 8px #40321e30} #shell .mx20-immersive.ink .mx20-seal{background:#1b1818;color:#f3cf96} #shell .mx20-notes h2{font-size:clamp(19px,2.0vw,34px)!important;line-height:1.55!important;margin:0 0 16px!important;letter-spacing:.07em!important;font-weight:600!important;color:#56381f!important} #shell .mx20-immersive.ink .mx20-notes h2{color:#efce97!important} #shell .mx20-notes p{font-size:clamp(15px,1.04vw,20px)!important;line-height:1.8!important;max-width:380px;margin:0!important;letter-spacing:.04em;color:#604a34} #shell .mx20-immersive.ink .mx20-notes p{color:#f0dbc2} #shell .mx20-notes .mx20-source{font-size:clamp(12px,.85vw,15px)!important;line-height:1.75!important;color:#896c4c;opacity:.9;margin-top:15px!important} #shell .mx20-immersive.ink .mx20-source{color:#c5a87e} #shell .mx20-timeline{position:absolute;left:6%;right:6%;bottom:8.6%;z-index:12;display:flex;align-items:end;gap:32px} #shell .mx20-track{display:flex;gap:10px;flex:1;align-items:stretch;position:relative;padding-top:13px;border-top:2px solid #a78459a6} #shell .mx20-track::before{content:"";position:absolute;top:-4px;left:0;right:0;height:5px;background:linear-gradient(90deg,#927044,transparent 76%);opacity:.48;pointer-events:none} #shell .mx20-track button{all:unset;cursor:pointer;min-width:0;display:flex;align-items:start;flex-direction:column;gap:2px;flex:1;max-width:180px;text-align:left;outline-offset:4px;transition:transform .22s,color .2s;color:#675039;letter-spacing:.02em} #shell .mx20-track button:focus-visible{outline:2px solid #9e692e} #shell .mx20-track button.active{transform:translateY(-4px);color:#3e2b1e;font-weight:700} #shell .mx20-track button i{font-style:normal;font-size:18px;line-height:1.3;color:#9a7038} #shell .mx20-track button span{font-size:clamp(13px,.88vw,17px);line-height:1.32;white-space:nowrap} #shell .mx20-immersive.ink .mx20-track{border-color:#ad8556a3} #shell .mx20-immersive.ink .mx20-track button{color:#dcc19c} #shell .mx20-immersive.ink .mx20-track button.active{color:#f6e2ba} #shell .mx20-action{display:flex;align-items:center;gap:12px;flex-shrink:0} #shell .mx20-action>button{all:unset;cursor:pointer;font-family:inherit;font-size:clamp(13px,.88vw,16px);color:#4e3520;border-bottom:1px solid #7d6038;padding:6px 3px} #shell .mx20-action>button:hover{color:#a0722e} #shell .mx20-immersive.ink .mx20-action>button{color:#e6c999;border-color:#b69361} #shell .mx20-slider-label{display:flex;flex-direction:column;align-items:start;gap:8px;font-size:13px;color:#775b38;white-space:nowrap} #shell .mx20-immersive.ink .mx20-slider-label{color:#eed1a2} #shell .mx20-slider-label input{width:125px;accent-color:#9e692b;cursor:pointer} #shell .mx20-ornament{position:absolute;z-index:4;pointer-events:none;color:#8a6740b3;font-size:36px}.mx20-ornament.left{left:5%;top:5%}.mx20-ornament.right{right:5%;bottom:21%} #shell .mx20-side-caption{position:absolute;right:4.5%;top:12%;z-index:8;writing-mode:vertical-rl;letter-spacing:.3em;font-size:14px;color:#94764e;pointer-events:none} #shell .mx20-immersive.ink .mx20-side-caption{color:#e9cb9a} @media(max-width:1100px){#shell .mx20-heading{top:10%;left:6%;width:43%}#shell .mx20-notes{right:5%;top:32%;width:30%}#shell .mx20-model{width:92%;left:-9%}#shell .mx20-track button span{white-space:normal}#shell .mx20-timeline{left:5%;right:5%;gap:20px}} @media(orientation:landscape) and (max-height:650px){#shell .mx20-immersive::before{inset:10px}#shell .mx20-immersive::after{inset:19px}#shell .mx20-heading{top:7%;left:6%}#shell .mx20-heading h1{font-size:clamp(30px,4vw,51px)!important;margin:3px 0 4px!important}#shell .mx20-heading p{font-size:12px!important;line-height:1.5!important}#shell .mx20-eyebrow{font-size:11px}#shell .mx20-model{top:12%;height:71%;left:-8%;width:94%}#shell .mx20-immersive.ink .mx20-model{left:-3%;top:6%;width:93%;height:76%}#shell .mx20-notes{right:5%;top:26%;width:29%}#shell .mx20-notes h2{font-size:clamp(15px,2.1vw,24px)!important;margin-bottom:4px!important}#shell .mx20-notes p{font-size:12px!important;line-height:1.45!important}#shell .mx20-notes .mx20-source{font-size:10px!important;margin-top:5px!important}#shell .mx20-timeline{bottom:7%;gap:12px}#shell .mx20-track{gap:5px;padding-top:8px}#shell .mx20-track button i{font-size:11px}#shell .mx20-track button span{font-size:10px;line-height:1.1}#shell .mx20-action{gap:7px}#shell .mx20-action>button{font-size:10px;padding:3px 0}#shell .mx20-slider-label{font-size:9px;gap:2px}#shell .mx20-slider-label input{width:78px}#shell .mx20-side-caption{display:none}} @media(orientation:landscape) and (max-width:950px){#shell .mx20-ornament{display:none}#shell .mx20-heading{width:50%}#shell .mx20-notes{top:27%;right:4%;width:32%}#shell .mx20-model{width:97%;left:-15%}#shell .mx20-immersive.ink .mx20-model{left:-9%}#shell .mx20-track button span{font-size:10px}} @media(prefers-reduced-motion:reduce){#shell .mx20-immersive *,#shell .mx20-immersive *::before,#shell .mx20-immersive *::after{animation:none!important;transition:none!important}} #shell #stage section.scene[data-id="15"] .art,#shell #stage section.scene[data-id="16"] .art{transform:none!important;transform-origin:center center!important;filter:none!important;clip-path:none!important;max-width:none!important;max-height:none!important} #shell #stage section.scene[data-id="15"] .mx20-immersive,#shell #stage section.scene[data-id="16"] .mx20-immersive{transform:none!important;filter:none!important} #shell:has(.mx20-immersive) .bookmark-nav,#shell:has(.mx20-immersive) .chapter-dial,#shell:has(.mx20-immersive) .floral-chapter-nav,#shell:has(.mx20-immersive) .brand,#shell:has(.mx20-immersive) .bottomnav,#shell:has(.mx20-immersive) .topright{display:none!important} #shell .mx20-page-nav{position:absolute;right:6%;bottom:3.5%;z-index:14;display:flex;align-items:center;gap:16px;font-size:14px;letter-spacing:.07em;color:#705337} #shell .mx20-page-nav button{all:unset;cursor:pointer;border-bottom:1px solid #9a784b;line-height:1.6;padding:0 1px;font-size:14px} #shell .mx20-page-nav button:hover{color:#a87530} #shell .mx20-immersive.ink .mx20-page-nav{color:#e3c79e} #shell .mx20-immersive.ink .mx20-page-nav button{border-bottom-color:#b69662} #shell .mx20-timeline{bottom:12.5%} @media(orientation:landscape) and (max-height:650px){#shell .mx20-timeline{bottom:11.5%}#shell .mx20-page-nav{bottom:2%;right:5%;gap:10px;font-size:10px}#shell .mx20-page-nav button{font-size:11px}#shell .mx20-immersive .mx20-source{display:none!important}} /* --------------------- id="mengxi-v21-cube-motion-system" --------------------- */ #shell .v21-face{position:absolute;box-sizing:border-box;backface-visibility:hidden;background-repeat:no-repeat;background-size:300% 300%;background-position:var(--posX) var(--posY);box-shadow:inset 0 0 0 1px #0d121220,inset 0 0 26px #0005} #shell .v21-front,#shell .v21-back,#shell .v21-next-x,#shell .v21-next-y{inset:0;width:100%;height:100%} #shell .v21-front{background-image:var(--old-image);transform:translateZ(calc(var(--depth)/2))} #shell .v21-back{background:linear-gradient(140deg,#2d2923,#101917 72%,#65533c);transform:rotateY(180deg) translateZ(calc(var(--depth)/2))} #shell .v21-next-x{background-image:var(--new-image);transform:rotateX(var(--incomingX,-90deg)) translateZ(calc(var(--depth)/2));box-shadow:inset 0 0 0 1px #f1d7ae22,inset 0 0 30px #0005} #shell .v21-next-y{background-image:var(--new-image);transform:rotateY(var(--incomingY,-90deg)) translateZ(calc(var(--depth)/2));box-shadow:inset 0 0 0 1px #f1d7ae22,inset 0 0 30px #0005} #shell .v21-top,#shell .v21-bottom{left:0;width:100%;height:var(--depth)} #shell .v21-top{top:50%;margin-top:calc(var(--depth)/-2);background:linear-gradient(165deg,#c2a06c 0%,#655038 23%,#252d27 67%,#a18b62 100%);transform:translateY(calc(var(--cellH)/-2)) rotateX(90deg);box-shadow:inset 0 0 22px #0008,inset 0 0 0 2px #edc78a39} #shell .v21-bottom{top:50%;margin-top:calc(var(--depth)/-2);background:linear-gradient(180deg,#14201a,#6b573c 56%,#3e362b);transform:translateY(calc(var(--cellH)/2)) rotateX(-90deg)} #shell .v21-left,#shell .v21-right{top:0;left:50%;width:var(--depth);height:100%;margin-left:calc(var(--depth)/-2);background:linear-gradient(120deg,#2d3129 0%,#967b52 17%,#4b4331 50%,#171d19 84%,#9b7648 100%);box-shadow:inset 0 0 24px #0008,inset 0 0 0 2px #e3b97952} #shell .v21-left{transform:translateX(calc(var(--cellW)/-2)) rotateY(-90deg)} #shell .v21-right{transform:translateX(calc(var(--cellW)/2)) rotateY(90deg)} @keyframes v21RowsStage{0%{transform:translate3d(0,0,0) rotateY(7deg) rotateX(-4deg) scale(1.02)}48%{transform:translate3d(0,-8px,0) rotateY(-4deg) rotateX(5deg) scale(1.03)}100%{transform:translate3d(0,0,0) rotateY(-2deg) rotateX(2deg) scale(1)}} @keyframes v21ColsStage{0%{transform:translate3d(0,0,0) rotateY(-8deg) rotateX(5deg) scale(1.02)}48%{transform:translate3d(0,6px,0) rotateY(4deg) rotateX(-4deg) scale(1.03)}100%{transform:translate3d(0,0,0) rotateY(2deg) rotateX(-1deg) scale(1)}} @keyframes v21WaveStage{0%{transform:translate3d(0,0,0) rotateY(10deg) rotateX(-7deg) scale(1.04)}50%{transform:translate3d(0,-10px,0) rotateY(-10deg) rotateX(6deg) scale(1.06)}100%{transform:translate3d(0,0,0) rotateY(0deg) rotateX(0deg) scale(1)}} @keyframes v21BurstStage{0%{transform:translate3d(0,0,0) rotateY(-10deg) rotateX(-5deg) scale(1.01)}38%{transform:translate3d(0,0,0) rotateY(6deg) rotateX(3deg) scale(1.08)}100%{transform:translate3d(0,0,0) rotateY(0deg) rotateX(0deg) scale(1)}} @media(max-width:850px){} @media(max-width:580px){} @media(prefers-reduced-motion:reduce){} /* --------------------- id="mengxi-v22-ornament-and-transition" --------------------- */ :root{--mx22-cloud:url("../assets/images/image-b5378e6c28.svg");--mx22-hui:url("../assets/images/image-6a5b405cc6.svg");--mx22-floral:url("../assets/images/image-a93fdd065c.svg");--mx22-brocade:url("../assets/images/image-0b45737f85.svg");--mx22-corner:url("../assets/images/image-ab916fecb0.svg");} #shell .drawer{background:linear-gradient(180deg,rgba(19,27,24,.97),rgba(11,18,17,.98))!important;} #shell .drawer::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--mx22-brocade),linear-gradient(180deg,rgba(236,223,196,.06),rgba(167,124,65,.06));background-size:220px 220px,100% 100%;background-repeat:repeat,repeat;mix-blend-mode:screen;opacity:.52} #shell .drawer::after{content:"";position:absolute;inset:18px;border:1px solid rgba(208,174,111,.26);box-shadow:inset 0 0 0 1px rgba(250,239,217,.05);pointer-events:none} #shell .scene{position:relative;overflow:hidden} #shell .scene::before{content:"";position:absolute;inset:18px 18px auto 18px;height:150px;pointer-events:none;background-image:var(--mx22-cloud),var(--mx22-hui);background-size:180px 120px,96px 96px;background-position:center top,right 14px top 14px;background-repeat:repeat-x,no-repeat;opacity:.46;mix-blend-mode:soft-light} #shell .scene::after{content:"";position:absolute;inset:auto 18px 18px auto;width:120px;height:120px;pointer-events:none;background-image:var(--mx22-corner);background-size:120px 120px;background-repeat:no-repeat;opacity:.46;filter:drop-shadow(0 4px 10px rgba(0,0,0,.08))} #shell .scene .copy{position:relative} #shell .scene .copy::before{content:"";position:absolute;left:-20px;top:-18px;width:112%;height:115%;pointer-events:none;background-image:linear-gradient(180deg,rgba(255,250,240,.07),rgba(255,245,221,0) 26%),var(--mx22-floral);background-repeat:no-repeat,repeat;background-size:100% 100%,120px 120px;background-position:0 0,18px 26px;opacity:.20;mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 100%)} #shell .scene .copy h1{position:relative;padding-bottom:.22em} #shell .scene .copy h1::after{content:"";position:absolute;left:0;bottom:0;width:min(260px,38vw);height:14px;background-image:linear-gradient(90deg,rgba(204,166,97,.65),rgba(204,166,97,0)),var(--mx22-cloud);background-size:100% 3px,140px 14px;background-position:0 100%,0 0;background-repeat:no-repeat,repeat-x;opacity:.84} #shell .learning{position:relative;border-top:1px solid rgba(214,185,131,.28)!important;padding-top:16px!important} #shell .learning::before{content:"";position:absolute;left:0;top:-10px;width:58px;height:20px;background-image:var(--mx22-hui);background-size:58px 20px;background-repeat:no-repeat;opacity:.56} #shell .drawergrid button{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(31,42,39,.94),rgba(24,31,29,.96))!important} #shell .drawergrid button::before{content:"";position:absolute;inset:0;background-image:var(--mx22-floral);background-size:120px 120px;background-repeat:repeat;opacity:.14;pointer-events:none} #shell .drawergrid button.current,#shell .drawergrid button:hover{background:linear-gradient(180deg,rgba(105,81,58,.95),rgba(76,56,39,.95))!important} /* V22: replace the heavy cube with a refined nine-panel brocade transition. */ #shell .v22-face{position:absolute;inset:0;backface-visibility:hidden;background-repeat:no-repeat;background-size:300% 300%;background-position:var(--posX) var(--posY)} #shell .v22-front{background-image:linear-gradient(180deg,rgba(255,244,224,.08),rgba(0,0,0,.05)),var(--old-image);transform:translateZ(calc(var(--depth)/2));box-shadow:inset 0 0 0 1px rgba(246,223,177,.16), inset 0 0 28px rgba(0,0,0,.12)} #shell .v22-nextX{background-image:linear-gradient(180deg,rgba(255,248,233,.08),rgba(0,0,0,.04)),var(--new-image);transform:rotateX(var(--incomingX,-18deg)) translateZ(calc(var(--depth)/2));box-shadow:inset 0 0 0 1px rgba(246,223,177,.14)} #shell .v22-nextY{background-image:linear-gradient(180deg,rgba(255,248,233,.08),rgba(0,0,0,.04)),var(--new-image);transform:rotateY(var(--incomingY,-18deg)) translateZ(calc(var(--depth)/2));box-shadow:inset 0 0 0 1px rgba(246,223,177,.14)} #shell .v22-top,#shell .v22-bottom{left:0;width:100%;height:var(--depth);background:linear-gradient(180deg,#c3a173,#6d553c 45%,#2a2f2a);opacity:.82} #shell .v22-top{top:50%;margin-top:calc(var(--depth)/-2);transform:translateY(calc(var(--cellH)/-2)) rotateX(90deg)} #shell .v22-bottom{top:50%;margin-top:calc(var(--depth)/-2);transform:translateY(calc(var(--cellH)/2)) rotateX(-90deg)} #shell .v22-left,#shell .v22-right{top:0;left:50%;width:var(--depth);height:100%;margin-left:calc(var(--depth)/-2);background:linear-gradient(180deg,#b18f63,#4b3e31 58%,#1d2420);opacity:.82} #shell .v22-left{transform:translateX(calc(var(--cellW)/-2)) rotateY(-90deg)} #shell .v22-right{transform:translateX(calc(var(--cellW)/2)) rotateY(90deg)} @keyframes v22stageA{0%{transform:rotateY(4deg) rotateX(-2deg) scale(1.01)}50%{transform:rotateY(-2deg) rotateX(1deg) scale(1.025)}100%{transform:rotateY(0) rotateX(0) scale(1)}} @keyframes v22stageB{0%{transform:rotateY(-5deg) rotateX(3deg) scale(1.01)}50%{transform:rotateY(2deg) rotateX(-1deg) scale(1.022)}100%{transform:rotateY(0) rotateX(0) scale(1)}} @keyframes v22stageC{0%{transform:rotateY(6deg) rotateX(-4deg) scale(1.02)}45%{transform:rotateY(-4deg) rotateX(3deg) scale(1.03)}100%{transform:rotateY(0) rotateX(0) scale(1)}} @keyframes v22stageD{0%{transform:rotateY(-4deg) rotateX(-2deg) scale(1.015)}40%{transform:rotateY(3deg) rotateX(2deg) scale(1.05)}100%{transform:rotateY(0) rotateX(0) scale(1)}} @keyframes v22sheen{0%,100%{background-position:100% 0;opacity:0}25%{opacity:.38}85%{background-position:0 0;opacity:.08}} @media(max-width:850px){#shell .scene::before{inset:10px 10px auto 10px;height:92px;opacity:.36}#shell .scene::after{width:86px;height:86px;background-size:86px 86px;inset:auto 10px 10px auto;opacity:.34}} @media(max-width:580px){} @media(prefers-reduced-motion:reduce){} /* ===== V26 shared ornament refinement: desktop/mobile drawers, transition patterns, auspicious-cloud controls ===== */ #shell{ --mx26-cloudline:url("../assets/images/image-aa49af8432.svg"); --mx26-cloudline-light:url("../assets/images/image-0daa291533.svg"); --mx26-baoxiang:url("../assets/images/image-589f4fecc1.svg"); } /* Desktop also gets the lighter ornamental catalogue treatment. */ html:not([data-device="phone"][data-layout="portrait"]) #shell .drawer{ background: radial-gradient(circle at 50% -120px,rgba(220,192,131,.12),transparent 220px), linear-gradient(180deg,rgba(18,29,26,.98),rgba(11,18,17,.99))!important; } html:not([data-device="phone"][data-layout="portrait"]) #shell .drawer::before{ background-image:var(--mx22-brocade),var(--mx26-cloudline),linear-gradient(180deg,rgba(236,223,196,.05),rgba(167,124,65,.05))!important; background-size:220px 220px,180px 40px,100% 100%!important; background-position:0 0,0 16px,0 0!important; background-repeat:repeat,repeat-x,repeat!important; opacity:.5!important; } html:not([data-device="phone"][data-layout="portrait"]) #shell .drawer .drawerhead{ position:relative;padding:0 0 18px!important;margin-bottom:18px!important;border-bottom:1px solid rgba(205,171,109,.18)!important; } html:not([data-device="phone"][data-layout="portrait"]) #shell .drawer .drawerhead::before, html:not([data-device="phone"][data-layout="portrait"]) #shell .drawer .drawerhead::after{ content:"";position:absolute;top:-6px;width:92px;height:92px;pointer-events:none;opacity:.22;background-image:var(--mx26-baoxiang);background-size:92px 92px;background-repeat:no-repeat; } html:not([data-device="phone"][data-layout="portrait"]) #shell .drawer .drawerhead::before{left:-24px} html:not([data-device="phone"][data-layout="portrait"]) #shell .drawer .drawerhead::after{right:-24px;transform:scaleX(-1)} html:not([data-device="phone"][data-layout="portrait"]) #shell .drawergrid button{ border-radius:18px!important; background:linear-gradient(180deg,rgba(31,42,39,.94),rgba(24,31,29,.98))!important; box-shadow:0 12px 20px rgba(0,0,0,.18), inset 0 0 0 1px rgba(246,229,191,.05)!important; } html:not([data-device="phone"][data-layout="portrait"]) #shell .drawergrid button::before{ background-image:var(--mx22-floral),var(--mx26-cloudline)!important; background-size:120px 120px,170px 36px!important; background-position:0 0,center calc(100% - 10px)!important; background-repeat:repeat,repeat-x!important; opacity:.16!important; } html:not([data-device="phone"][data-layout="portrait"]) #shell .drawergrid button::after{ content:"";position:absolute;left:12px;right:12px;top:10px;height:1px;background:linear-gradient(90deg,transparent,rgba(233,206,145,.45),transparent);opacity:.65;pointer-events:none; } /* Shared 祥云纹饰 for sliders and buttons, both desktop and mobile. */ #shell .controlpanel button, #shell .suspension-stage .v10-compass-extra button, #shell .scene-actions .primary, #shell .scene-actions .outline, #shell .scroll-skip{ position:relative;overflow:hidden;border-radius:14px!important; } #shell .controlpanel button::before, #shell .suspension-stage .v10-compass-extra button::before, #shell .scene-actions .primary::before, #shell .scene-actions .outline::before, #shell .scroll-skip::before{ content:"";position:absolute;left:8px;right:8px;top:4px;height:12px;pointer-events:none;opacity:.36; background-image:var(--mx26-cloudline-light);background-size:140px 12px;background-repeat:repeat-x;background-position:center top; } #shell .controlpanel button::after, #shell .suspension-stage .v10-compass-extra button::after, #shell .scene-actions .primary::after, #shell .scene-actions .outline::after, #shell .scroll-skip::after{ content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 52%);opacity:.48; } #shell .controlpanel input[type="range"], #shell .suspension-stage>#interaction.controlpanel input[type="range"]{ position:relative; accent-color:#799b92; } #shell .controlpanel input[type="range"]::-webkit-slider-runnable-track, #shell .suspension-stage>#interaction.controlpanel input[type="range"]::-webkit-slider-runnable-track{ height:8px;border-radius:999px;border:1px solid rgba(130,97,61,.25); background: url("../assets/images/image-6d8646b606.svg") center/200px 12px repeat-x, linear-gradient(90deg,rgba(251,245,231,.94),rgba(229,214,182,.96)); box-shadow:inset 0 0 0 1px rgba(255,251,242,.32); } #shell .controlpanel input[type="range"]::-moz-range-track, #shell .suspension-stage>#interaction.controlpanel input[type="range"]::-moz-range-track{ height:8px;border-radius:999px;border:1px solid rgba(130,97,61,.25); background:linear-gradient(90deg,rgba(251,245,231,.94),rgba(229,214,182,.96)); } #shell .controlpanel input[type="range"]::-webkit-slider-thumb, #shell .suspension-stage>#interaction.controlpanel input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;margin-top:-7px;border:1px solid rgba(111,83,51,.34); background: radial-gradient(circle at 50% 50%,#fff9ea 0 30%,transparent 31%), conic-gradient(from 0deg,#b55d45 0 55deg,#f0c566 55deg 120deg,#538b8b 120deg 190deg,#f7ecd8 190deg 250deg,#406f86 250deg 315deg,#c46849 315deg 360deg); box-shadow:0 2px 10px rgba(34,23,13,.18); } #shell .controlpanel input[type="range"]::-moz-range-thumb, #shell .suspension-stage>#interaction.controlpanel input[type="range"]::-moz-range-thumb{ width:18px;height:18px;border-radius:50%;border:1px solid rgba(111,83,51,.34); background:conic-gradient(from 0deg,#b55d45 0 55deg,#f0c566 55deg 120deg,#538b8b 120deg 190deg,#f7ecd8 190deg 250deg,#406f86 250deg 315deg,#c46849 315deg 360deg); } /* Transition: vary the ornament language by mode for both desktop and mobile, with richer layered beauty. */ @keyframes mx26CloudSweep{0%{transform:translateY(-20px);opacity:0}35%{opacity:.75}100%{transform:translateY(0);opacity:.55}} @keyframes mx26FloralPulse{0%{transform:translate(-50%,-50%) scale(.28) rotate(-25deg);opacity:0}40%{opacity:.84}100%{transform:translate(-50%,-50%) scale(1) rotate(24deg);opacity:.72}} @keyframes mx26FloralRotate{0%{transform:translate(-50%,-50%) scale(.24) rotate(-68deg);opacity:0}44%{opacity:.88}100%{transform:translate(-50%,-50%) scale(1) rotate(58deg);opacity:.76}} @keyframes mx26InnerSeal{0%{transform:translate(-50%,-50%) scale(.1) rotate(0deg);opacity:0}52%{opacity:.94}100%{transform:translate(-50%,-50%) scale(1) rotate(18deg);opacity:.86}} @keyframes mx26RibbonRise{0%{transform:translateY(14px);opacity:0}40%{opacity:.8}100%{transform:translateY(0);opacity:.52}} /* ---- extracted style block boundary ---- */ /* Inline: css/04_手机响应式样式.css */ /* 梦溪格物志 · 参赛手机适配补丁 只调整响应式布局、可读性与触控操作；不改章节、文案、插图或模型数据。 横屏仍为首选沉浸模式，竖屏则提供整页连续阅读。 */ html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; } #shell button,#shell input,#shell textarea{ -webkit-tap-highlight-color:transparent; } #shell button:focus-visible,#shell input:focus-visible,#shell textarea:focus-visible{outline:2px solid #e9c787;outline-offset:3px;} /* 手机横屏：兼顾小屏、浏览器工具栏、刘海 / 系统手势区域 */ @media (orientation:landscape) and (pointer:coarse) and (max-width:1050px){ :root{--reader-side:max(4vw,env(safe-area-inset-left,0px));--reader-top:clamp(46px,11.5vh,70px);--reader-bottom:clamp(52px,13vh,72px)} #shell{height:100dvh!important;min-height:0!important} #shell .brand{left:max(4vw,env(safe-area-inset-left,0px))!important;top:clamp(9px,2vh,17px)!important} #shell .topright{right:max(4vw,env(safe-area-inset-right,0px))!important;top:clamp(9px,2vh,17px)!important} #shell #stage .scene[data-form]{inset:var(--reader-top) var(--reader-side) var(--reader-bottom)!important;gap:clamp(12px,2.5vw,28px)!important;grid-template-columns:minmax(0,48%) minmax(0,1fr)!important} #shell #stage .scene[data-form] .copy{max-width:none!important;min-width:0!important} #shell #stage .scene[data-form] .copy h1{font-size:clamp(27px,4.5vw,48px)!important;letter-spacing:.07em!important;line-height:1.12!important} #shell #stage .scene[data-form] .copy .reader-deck{font-size:clamp(12.5px,1.65vw,15px)!important;line-height:1.44!important} #shell #stage .scene[data-form] .scene-summary{font-size:clamp(12px,1.57vw,14px)!important;line-height:1.52!important} #shell #stage .scene[data-form] .copy .learning{font-size:clamp(11.5px,1.35vw,13px)!important;line-height:1.43!important;margin-top:clamp(5px,1.5vh,12px)!important} #shell #stage .scene[data-form] .eyebrow{font-size:clamp(9px,1.2vw,11px)!important} #shell #stage .scene[data-form] .visual{min-width:0!important;max-width:100%!important} #shell .bottomnav{left:max(4vw,env(safe-area-inset-left,0px))!important;right:max(4vw,env(safe-area-inset-right,0px))!important;bottom:max(8px,env(safe-area-inset-bottom,0px))!important;min-height:37px!important;display:flex!important;align-items:center!important;justify-content:space-between!important} #shell .bottomnav .bookmark-nav{min-height:42px!important;min-width:76px!important;padding:5px 10px!important;display:flex;align-items:center;justify-content:center;gap:5px} #shell .bottomnav .chapter-dial{min-width:42px!important;min-height:42px!important;display:flex!important;align-items:center;justify-content:center;flex-direction:column} #shell .bottomnav .bookmark-nav span{font-size:clamp(10px,1.25vw,12px)!important;line-height:1.12!important} #shell .bottomnav .bookmark-nav b{font-size:clamp(9px,1.1vw,11px)!important;line-height:1.12!important} #shell .bottomnav .chapter-dial small{font-size:9px!important} #shell .scene button,#shell .scene [role=button],#shell .drawer button,#shell .note-tabs button{touch-action:manipulation} #shell .scene input[type=range]{min-height:30px!important;accent-color:#b48b51} #shell .scene input[type=range]::-webkit-slider-thumb{width:20px;height:20px} #shell .scene canvas{max-width:100%;touch-action:none} #shell .scene .art .controlpanel{max-width:100%;min-width:0} #shell .notepanel .note-sheet{max-height:calc(100dvh - 25px)!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch} #shell .drawer{padding:clamp(12px,3vw,25px) max(5vw,env(safe-area-inset-left,0px))!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch} #shell .drawerhead{margin-bottom:8px!important} #shell .drawer h2{font-size:clamp(22px,3.5vw,30px)!important} #shell .drawergrid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:9px!important} #shell .drawergrid button{min-height:46px!important;padding:9px 8px!important;font-size:clamp(11px,1.65vw,14px)!important;line-height:1.25!important} #shell .drawergrid span{font-size:10px!important;margin-bottom:4px!important} #shell .floral-chapter-nav{display:none!important} /* Keep the two model-centric scenes full-screen, with smaller decorative chrome and larger controls. */ #shell .mx20-timeline{left:4%!important;right:4%!important} #shell .mx20-action>button,#shell .mx20-page-nav button{min-height:32px;display:inline-flex;align-items:center} #shell .mx20-track button{min-height:36px} } @media (orientation:landscape) and (pointer:coarse) and (max-height:370px){ :root{--reader-top:37px;--reader-bottom:48px} #shell #stage .scene[data-form] .copy h1{font-size:clamp(24px,4vw,32px)!important} #shell #stage .scene[data-form] .reader-deck{font-size:12px!important;line-height:1.32!important} #shell #stage .scene[data-form] .scene-summary{font-size:11.5px!important;line-height:1.4!important} #shell #stage .scene[data-form] .copy .learning{font-size:11px!important;line-height:1.36!important} #shell .bottomnav .bookmark-nav{min-height:39px!important} } /* 手机竖屏：一屏一个视觉单元，文字整页自然延展，避免窗口式内滚动。 章节标题、文字、图片、模型及顺序原样保留。 */ html[data-device="phone"][data-layout="portrait"] #shell{height:100dvh!important;min-height:0!important;width:100%!important;overflow:hidden!important} html[data-device="phone"][data-layout="portrait"] #shell .orientation-curtain{display:none!important} html[data-device="phone"][data-layout="portrait"] #shell .brand{position:absolute!important;top:max(10px,env(safe-area-inset-top,0px))!important;left:18px!important;font-size:10px!important;z-index:25!important} html[data-device="phone"][data-layout="portrait"] #shell .brand .seal{font-size:14px!important} html[data-device="phone"][data-layout="portrait"] #shell .topright{position:absolute!important;top:max(11px,env(safe-area-inset-top,0px))!important;right:16px!important;z-index:25!important} html[data-device="phone"][data-layout="portrait"] #shell .topright .bar{width:42px!important} html[data-device="phone"][data-layout="portrait"] #shell .topright #mapbtn{min-height:40px!important;padding:6px 8px!important;font-size:12px!important} html[data-device="phone"][data-layout="portrait"] #shell #stage{position:absolute!important;inset:60px 0 calc(70px + env(safe-area-inset-bottom,0px))!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior-y:contain!important;-webkit-overflow-scrolling:touch!important;touch-action:pan-y!important;scrollbar-width:thin;scrollbar-color:rgba(189,158,107,.38) transparent;z-index:1!important} html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene, html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene[data-form]{position:relative!important;inset:auto!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;grid-template-columns:none!important;grid-template-rows:none!important;gap:20px!important;width:100%!important;height:auto!important;max-width:100%!important;min-height:calc(100% - 12px)!important;padding:20px 20px 38px!important;overflow:visible!important;transform:none!important;animation:none!important;filter:none!important;box-sizing:border-box!important} html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene .copy, html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene[data-form] .copy{position:relative!important;display:block!important;align-self:auto!important;flex:none!important;max-width:100%!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;padding:0!important;margin:0!important;overflow:visible!important;transform:none!important} html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene .copy h1, html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene[data-form] .copy h1{font-size:clamp(31px,8vw,43px)!important;line-height:1.2!important;letter-spacing:.07em!important;margin:8px 0 14px!important;max-width:100%!important;white-space:normal!important} html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene .copy h1 em{font-size:.52em!important;line-height:1.5!important;margin-top:5px!important;white-space:normal!important} html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene .copy p, html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene[data-form] .reader-deck, html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene[data-form] .scene-summary{font-size:clamp(15px,4vw,17px)!important;line-height:1.75!important;letter-spacing:.02em!important;white-space:normal!important;max-width:100%!important} html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene .copy .learning{font-size:14px!important;line-height:1.55!important;margin-top:14px!important;gap:7px!important;max-width:100%!important} html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene .copy .eyebrow{font-size:11px!important;letter-spacing:.11em!important} html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene .copy .scene-actions{display:flex!important;flex-wrap:wrap!important;gap:12px!important;margin:16px 0 6px!important} html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene .copy .scene-actions button{min-height:44px!important} html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene .copy .note-trigger{min-height:44px!important;padding:10px 0!important;font-size:14px!important;margin-top:6px!important} html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene .visual{position:relative!important;inset:auto!important;align-self:center!important;display:grid!important;place-items:center!important;flex:none!important;width:100%!important;max-width:100%!important;min-width:0!important;height:min(83vw,380px)!important;min-height:245px!important;max-height:none!important;overflow:visible!important;padding:0!important;transform:none!important} html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene .visual>.art{position:relative!important;inset:auto!important;display:grid!important;width:100%!important;height:100%!important;max-width:100%!important;min-height:0!important;transform:none!important;overflow:visible!important;box-shadow:none!important} html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene .footnote{position:static!important;font-size:12px!important;line-height:1.6!important;margin-top:12px!important} html[data-device="phone"][data-layout="portrait"] #shell .bottomnav{position:absolute!important;left:0!important;right:0!important;bottom:0!important;height:calc(61px + env(safe-area-inset-bottom,0px))!important;padding:8px 18px calc(7px + env(safe-area-inset-bottom,0px))!important;display:flex!important;justify-content:space-between!important;align-items:center!important;box-sizing:border-box!important;background:linear-gradient(180deg,rgba(20,33,30,.92),rgba(13,27,24,.98))!important;border-top:1px solid rgba(206,174,116,.28)!important;z-index:30!important;gap:7px!important} html[data-device="phone"][data-layout="portrait"] #shell .bottomnav .bookmark-nav{min-height:44px!important;min-width:80px!important;padding:6px 9px!important;display:flex!important;align-items:center;justify-content:center;gap:6px;font-size:12px!important} html[data-device="phone"][data-layout="portrait"] #shell .bottomnav .bookmark-nav span{font-size:13px!important;line-height:1.2!important} html[data-device="phone"][data-layout="portrait"] #shell .bottomnav .bookmark-nav b{font-size:11px!important;line-height:1.2!important} html[data-device="phone"][data-layout="portrait"] #shell .bottomnav .chapter-dial{min-width:44px!important;min-height:44px!important;display:flex!important;flex-direction:column!important;justify-content:center;align-items:center} html[data-device="phone"][data-layout="portrait"] #shell .bottomnav .chapter-dial .dial-number{font-size:13px!important} html[data-device="phone"][data-layout="portrait"] #shell .bottomnav .chapter-dial small{font-size:10px!important} html[data-device="phone"][data-layout="portrait"] #shell .floral-chapter-nav{display:none!important} html[data-device="phone"][data-layout="portrait"] #shell .drawer{position:absolute!important;inset:0!important;z-index:45!important;padding:75px 19px 85px!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important} html[data-device="phone"][data-layout="portrait"] #shell .drawer .drawerhead{display:flex!important;align-items:center!important;gap:14px!important} html[data-device="phone"][data-layout="portrait"] #shell .drawer h2{font-size:26px!important;margin-bottom:15px!important} html[data-device="phone"][data-layout="portrait"] #shell .drawergrid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important} html[data-device="phone"][data-layout="portrait"] #shell .drawergrid button{min-height:76px!important;padding:13px 12px!important;font-size:14px!important;line-height:1.35!important} html[data-device="phone"][data-layout="portrait"] #shell .drawergrid span{font-size:11px!important;margin-bottom:8px!important} html[data-device="phone"][data-layout="portrait"] #shell .notepanel{position:absolute!important;inset:0!important;z-index:55!important;display:none;align-items:flex-start!important;overflow-y:auto!important;padding:70px 12px 76px!important;-webkit-overflow-scrolling:touch!important} html[data-device="phone"][data-layout="portrait"] #shell .notepanel.open{display:flex!important} html[data-device="phone"][data-layout="portrait"] #shell .notepanel .note-sheet{width:100%!important;max-width:100%!important;max-height:none!important;overflow:visible!important;padding:25px 23px!important} html[data-device="phone"][data-layout="portrait"] #shell .note-page{font-size:15px!important;line-height:1.75!important} html[data-device="phone"][data-layout="portrait"] #shell .note-tabs button{min-height:40px!important} html[data-device="phone"][data-layout="portrait"] #shell .scene canvas{max-width:100%!important;touch-action:none} html[data-device="phone"][data-layout="portrait"] #shell .scene .inlinegame{max-width:100%!important;width:100%!important;box-sizing:border-box!important} html[data-device="phone"][data-layout="portrait"] #shell .scene input[type=range]{width:100%!important;max-width:100%!important;min-height:34px!important;accent-color:#b5894e} html[data-device="phone"][data-layout="portrait"] #shell .scene button{touch-action:manipulation} html[data-device="phone"][data-layout="portrait"] #shell .scene::before,#shell .scene::after{pointer-events:none!important} /* Blender/Canvas scene #16/#17: switch from landscape-only overlay coordinates to a natural reading flow. */ html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="15"], html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="16"]{position:relative!important;inset:auto!important;display:block!important;height:auto!important;min-height:820px!important;padding:0!important;overflow:visible!important;background:#dccaac!important} html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="15"]>.visual, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="16"]>.visual{position:relative!important;inset:auto!important;display:block!important;width:100%!important;height:auto!important;min-height:820px!important;max-height:none!important;padding:0!important} html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="15"] .art, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="16"] .art{position:relative!important;inset:auto!important;display:block!important;width:100%!important;height:auto!important;min-height:820px!important;max-width:none!important;overflow:visible!important;padding:0!important} html[data-device="phone"][data-layout="portrait"] #shell #stage .mx20-immersive{position:relative!important;inset:auto!important;display:block!important;width:100%!important;height:830px!important;min-height:830px!important;padding:0!important;overflow:hidden!important;transform:none!important} html[data-device="phone"][data-layout="portrait"] #shell .mx20-heading{position:absolute!important;top:6%!important;left:8%!important;width:84%!important;max-width:none!important} html[data-device="phone"][data-layout="portrait"] #shell .mx20-heading h1{font-size:clamp(35px,10vw,48px)!important;margin:8px 0!important} html[data-device="phone"][data-layout="portrait"] #shell .mx20-heading p{font-size:15px!important;line-height:1.55!important;max-width:100%!important} html[data-device="phone"][data-layout="portrait"] #shell .mx20-model, html[data-device="phone"][data-layout="portrait"] #shell .mx20-immersive.ink .mx20-model{position:absolute!important;top:22%!important;left:0!important;width:100%!important;height:37%!important;max-height:330px!important;min-height:265px!important} html[data-device="phone"][data-layout="portrait"] #shell .mx20-notes{position:absolute!important;top:57%!important;left:9%!important;right:9%!important;width:82%!important} html[data-device="phone"][data-layout="portrait"] #shell .mx20-notes h2{font-size:20px!important;line-height:1.35!important;margin-bottom:6px!important} html[data-device="phone"][data-layout="portrait"] #shell .mx20-notes p{font-size:14px!important;line-height:1.5!important} html[data-device="phone"][data-layout="portrait"] #shell .mx20-notes .mx20-source{font-size:12px!important;margin-top:7px!important;line-height:1.4!important} html[data-device="phone"][data-layout="portrait"] #shell .mx20-seal{right:0!important;top:-28px!important;font-size:11px!important;writing-mode:horizontal-tb!important} html[data-device="phone"][data-layout="portrait"] #shell .mx20-side-caption{display:none!important} html[data-device="phone"][data-layout="portrait"] #shell .mx20-timeline{position:absolute!important;left:8%!important;right:8%!important;bottom:8.7%!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important} html[data-device="phone"][data-layout="portrait"] #shell .mx20-track{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;max-width:none!important;padding-top:8px!important} html[data-device="phone"][data-layout="portrait"] #shell .mx20-track button{display:flex!important;flex-direction:row!important;align-items:center!important;gap:7px!important;min-height:38px!important;max-width:none!important} html[data-device="phone"][data-layout="portrait"] #shell .mx20-track button span{font-size:13px!important;white-space:normal!important} html[data-device="phone"][data-layout="portrait"] #shell .mx20-track button i{font-size:14px!important} html[data-device="phone"][data-layout="portrait"] #shell .mx20-action{justify-content:space-between!important;width:100%!important;gap:10px!important;flex-wrap:wrap!important} html[data-device="phone"][data-layout="portrait"] #shell .mx20-action>button{min-height:42px!important;font-size:13px!important} html[data-device="phone"][data-layout="portrait"] #shell .mx20-slider-label{flex:1!important;min-width:100px!important;font-size:12px!important} html[data-device="phone"][data-layout="portrait"] #shell .mx20-slider-label input{width:100%!important;min-height:22px!important} html[data-device="phone"][data-layout="portrait"] #shell .mx20-page-nav{position:absolute!important;right:8%!important;bottom:2%!important;display:flex!important;gap:12px!important;font-size:12px!important} html[data-device="phone"][data-layout="portrait"] #shell .mx20-page-nav button{min-height:40px!important;font-size:12px!important} /* Respect accessibility preferences; keep animations but reduce costly decorative motion on phones. */ @media(prefers-reduced-motion:reduce){#shell .scene{animation:none!important;scroll-behavior:auto!important}#shell .scene .art::after{animation:none!important}} /* Model chapters already contain their own heading and narration. Avoid displaying an extra copy of the original copy block in portrait (no content is deleted). */ html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="15"]>.copy, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="16"]>.copy{display:none!important} html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="15"], html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="16"]{min-height:830px!important} @media(orientation:landscape) and (pointer:coarse) and (max-width:1050px){ html[data-device="phone"] #shell:has(.mx20-immersive) #stage{inset:0!important;height:100%!important;min-height:0!important} html[data-device="phone"] #shell #stage section.scene[data-id="15"], html[data-device="phone"] #shell #stage section.scene[data-id="16"]{inset:0!important;left:0!important;top:0!important;right:0!important;bottom:0!important;width:100%!important;height:100%!important} html[data-device="phone"] #shell #stage section.scene[data-id="15"]>.visual, html[data-device="phone"] #shell #stage section.scene[data-id="16"]>.visual{inset:0!important;width:100%!important;height:100%!important} html[data-device="phone"] #shell #stage section.scene[data-id="15"] .art, html[data-device="phone"] #shell #stage section.scene[data-id="16"] .art{inset:0!important;width:100%!important;height:100%!important} } /* Cinematic opening, portrait: retain original reel animation, but use space vertically. */ html[data-device="phone"][data-layout="portrait"] #shell .scroll-opening{inset:0!important;overflow:hidden!important} html[data-device="phone"][data-layout="portrait"] #shell .scroll-kicker{top:9%!important;font-size:12px!important;letter-spacing:.19em!important;white-space:nowrap} html[data-device="phone"][data-layout="portrait"] #shell .scroll-opening .scroll-reel{width:100vw!important;height:min(33vh,260px)!important;min-height:0!important;max-height:none!important;margin-top:-14vh!important;aspect-ratio:auto!important} html[data-device="phone"][data-layout="portrait"] #shell .blender-reel-stage{width:100%!important;height:auto!important;max-height:100%!important;aspect-ratio:1024/428} html[data-device="phone"][data-layout="portrait"] #shell .scroll-title-group{left:9%!important;right:9%!important;top:9%!important;bottom:9%!important} html[data-device="phone"][data-layout="portrait"] #shell .scroll-title{font-size:clamp(30px,8vw,44px)!important;letter-spacing:.09em!important} html[data-device="phone"][data-layout="portrait"] #shell .scroll-subtitle{font-size:10px!important;margin-top:6px!important;letter-spacing:.12em!important} html[data-device="phone"][data-layout="portrait"] #shell .scroll-observatory{left:50%!important;bottom:8%!important;width:min(86vw,400px)!important;height:auto!important;min-height:150px!important;display:grid!important;grid-template-columns:1fr!important;gap:3px!important;padding:8px 14px!important;border-top:1px solid #d6bf825c!important;border-bottom:1px solid #d6bf825c!important;background:linear-gradient(90deg,transparent,#0c211bd9 15%,#0c211bd9 85%,transparent)!important} html[data-device="phone"][data-layout="portrait"] #shell .scroll-observatory article{display:flex!important;justify-content:flex-start!important;text-align:left!important;padding:2px 8px!important;gap:15px!important;border:0!important} html[data-device="phone"][data-layout="portrait"] #shell .scroll-observatory svg{width:34px!important;height:34px!important;flex:none!important} html[data-device="phone"][data-layout="portrait"] #shell .scroll-observatory b{font-size:13px!important;letter-spacing:.10em!important} html[data-device="phone"][data-layout="portrait"] #shell .scroll-observatory small{font-size:10.5px!important;letter-spacing:.02em!important;line-height:1.2!important;margin-top:3px!important;white-space:normal!important} html[data-device="phone"][data-layout="portrait"] #shell .scroll-bottom-note{display:none!important} html[data-device="phone"][data-layout="portrait"] #shell .scroll-skip{right:6%!important;bottom:3%!important;padding:10px 5px!important;min-height:42px!important;font-size:12px!important;opacity:1!important} /* ===== V25 portrait refinement: opening scroll, floral transitions, suspension compass, and patterned drawer ===== */ html[data-device="phone"][data-layout="portrait"] #shell{ --mx-mobile-paper:#efe5d2; --mx-mobile-paper-2:#e8dcc6; --mx-mobile-ink:#1f332d; --mx-mobile-gold:#c5a063; --mx-mobile-gold-deep:#9f7440; --mx-mobile-red:#9d5d47; --mx-mobile-teal:#4a8175; --mx-mobile-sky:#97c4c8; } html[data-device="phone"][data-layout="portrait"] #shell .brand, html[data-device="phone"][data-layout="portrait"] #shell .topright{backdrop-filter:blur(8px);text-shadow:0 1px 8px rgba(10,18,16,.4)} html[data-device="phone"][data-layout="portrait"] #shell .brand{padding:4px 10px 4px 0;border-radius:20px} html[data-device="phone"][data-layout="portrait"] #shell .brand .seal{box-shadow:0 10px 18px rgba(39,26,17,.18)!important} html[data-device="phone"][data-layout="portrait"] #shell .bottomnav{ background: radial-gradient(circle at 50% -26px,rgba(231,213,174,.18),transparent 56px), linear-gradient(180deg,rgba(18,36,32,.92),rgba(10,24,21,.98))!important; } html[data-device="phone"][data-layout="portrait"] #shell .bottomnav::before{ content:"";position:absolute;left:18px;right:18px;top:8px;height:1px; background:linear-gradient(90deg,transparent,rgba(213,179,118,.16) 12%,rgba(213,179,118,.56) 50%,rgba(213,179,118,.16) 88%,transparent); pointer-events:none; } /* Opening scroll: keep the animation in portrait and enrich the composition. */ html[data-device="phone"][data-layout="portrait"] #shell .scroll-opening{ background: radial-gradient(ellipse 94% 54% at 50% 0%,rgba(232,206,141,.12),transparent 56%), radial-gradient(ellipse 70% 45% at 50% 82%,rgba(31,64,57,.42),transparent 64%), linear-gradient(180deg,#15302c 0%,#102420 46%,#0b1816 100%)!important; } html[data-device="phone"][data-layout="portrait"] #shell .scroll-opening::before{ inset:14px!important;border:1px solid rgba(212,185,123,.5)!important; box-shadow:inset 0 0 0 4px rgba(214,190,131,.08),0 0 0 1px rgba(255,248,232,.05)!important; } html[data-device="phone"][data-layout="portrait"] #shell .scroll-opening::after{ inset:24px!important; background: radial-gradient(circle at 50% 48%,transparent 35%,rgba(5,12,10,.18) 78%,rgba(7,14,12,.42) 100%), conic-gradient(from 0deg at 50% 18%,rgba(225,197,131,.06),transparent 30deg,rgba(225,197,131,.03) 65deg,transparent 110deg,rgba(225,197,131,.06) 180deg,transparent 230deg,rgba(225,197,131,.03) 290deg,transparent 360deg)!important; } html[data-device="phone"][data-layout="portrait"] #shell .scroll-opening .scroll-reel{ width:min(92vw,460px)!important;height:min(34vh,240px)!important;margin-top:-13.5vh!important; filter:drop-shadow(0 18px 26px rgba(0,0,0,.42))!important; } html[data-device="phone"][data-layout="portrait"] #shell .scroll-paper{ border-radius:8px;overflow:hidden;box-shadow:0 12px 24px rgba(16,7,2,.22), inset 0 0 0 1px rgba(255,251,240,.18); } html[data-device="phone"][data-layout="portrait"] #shell .scroll-title-group{ display:flex;align-items:flex-start;justify-content:flex-end;flex-direction:column; text-shadow:0 2px 14px rgba(6,12,10,.28),0 8px 24px rgba(18,8,2,.18)!important; } html[data-device="phone"][data-layout="portrait"] #shell .scroll-title{font-size:clamp(31px,9vw,48px)!important} html[data-device="phone"][data-layout="portrait"] #shell .scroll-subtitle{font-size:11px!important;color:#f7ead0!important} html[data-device="phone"][data-layout="portrait"] #shell .scroll-kicker{ top:7.5%!important;color:#ddc18e!important;gap:9px!important; } html[data-device="phone"][data-layout="portrait"] #shell .scroll-kicker::before, html[data-device="phone"][data-layout="portrait"] #shell .scroll-kicker::after{width:24px!important} html[data-device="phone"][data-layout="portrait"] #shell .scroll-observatory{ width:min(88vw,412px)!important;bottom:7.4%!important;border-radius:22px!important; padding:12px 16px!important;backdrop-filter:blur(6px); background: linear-gradient(180deg,rgba(11,35,29,.9),rgba(11,31,26,.88))!important; box-shadow:0 14px 28px rgba(0,0,0,.23), inset 0 0 0 1px rgba(214,191,130,.13); } html[data-device="phone"][data-layout="portrait"] #shell .scroll-observatory::before, html[data-device="phone"][data-layout="portrait"] #shell .scroll-observatory::after{ content:"";position:absolute;width:76px;height:76px;top:-18px;pointer-events:none;opacity:.2; background: radial-gradient(circle at center,transparent 0 20%,rgba(255,223,163,.3) 20% 24%,transparent 24% 30%,rgba(255,223,163,.16) 30% 44%,transparent 44%), conic-gradient(from 0deg,#b85d44 0 22deg,#f2c768 22deg 46deg,#3b7990 46deg 70deg,#f6ebd2 70deg 92deg,#2d6477 92deg 118deg,#f0c35b 118deg 144deg,#b85d44 144deg 166deg,transparent 166deg 360deg); mask:radial-gradient(circle at center,#000 0 58%,transparent 59%); } html[data-device="phone"][data-layout="portrait"] #shell .scroll-observatory::before{left:-14px} html[data-device="phone"][data-layout="portrait"] #shell .scroll-observatory::after{right:-14px;transform:scaleX(-1)} html[data-device="phone"][data-layout="portrait"] #shell .scroll-skip{ border:1px solid rgba(214,192,140,.35)!important;border-radius:999px!important;padding:10px 14px!important; background:rgba(9,23,20,.35)!important;box-shadow:0 6px 14px rgba(0,0,0,.12); } html[data-device="phone"][data-layout="portrait"] #shell .scroll-opening .scroll-stars{opacity:.88!important} html[data-device="phone"][data-layout="portrait"] #shell .scroll-opening .scroll-stars i{box-shadow:0 0 8px rgba(255,236,193,.25)} html[data-device="phone"][data-layout="portrait"] #shell .scroll-opening .scroll-bird{filter:drop-shadow(0 2px 4px rgba(64,40,22,.24))} /* Drawer / chapter catalogue: echo the user-provided ornamental references without overfilling the page. */ html[data-device="phone"][data-layout="portrait"] #shell .drawer{ background: radial-gradient(circle at 50% -80px,rgba(214,189,128,.18),transparent 180px), linear-gradient(180deg,rgba(248,242,230,.98),rgba(235,225,207,.98))!important; color:#294239!important; } html[data-device="phone"][data-layout="portrait"] #shell .drawer::before, html[data-device="phone"][data-layout="portrait"] #shell .drawer::after{ content:"";position:absolute;width:164px;height:164px;pointer-events:none;opacity:.18; background: radial-gradient(circle at center,transparent 0 16%,rgba(203,162,101,.45) 16% 20%,transparent 20% 28%,rgba(71,129,121,.38) 28% 40%,transparent 40%), conic-gradient(from 0deg,#b96446 0 24deg,#f2ca6c 24deg 52deg,#5b8790 52deg 82deg,#f7efde 82deg 108deg,#2f6780 108deg 138deg,#efbf58 138deg 164deg,#c66a4f 164deg 190deg,transparent 190deg 360deg); mask:radial-gradient(circle at center,#000 0 55%,transparent 57%); } html[data-device="phone"][data-layout="portrait"] #shell .drawer::before{left:-58px;top:56px} html[data-device="phone"][data-layout="portrait"] #shell .drawer::after{right:-58px;bottom:110px;transform:scaleX(-1) rotate(24deg)} html[data-device="phone"][data-layout="portrait"] #shell .drawer .drawerhead{position:relative;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid rgba(153,119,74,.22)!important} html[data-device="phone"][data-layout="portrait"] #shell .drawer h2{font-size:28px!important;color:#1f3a33!important;letter-spacing:.08em!important} html[data-device="phone"][data-layout="portrait"] #shell .drawergrid{gap:12px!important} html[data-device="phone"][data-layout="portrait"] #shell .drawergrid button{ position:relative;border:1px solid rgba(157,122,79,.28)!important;border-radius:18px!important; background: linear-gradient(180deg,rgba(255,251,243,.95),rgba(240,232,216,.95))!important; color:#274238!important;box-shadow:0 12px 18px rgba(114,83,42,.08), inset 0 0 0 1px rgba(255,255,255,.42); } html[data-device="phone"][data-layout="portrait"] #shell .drawergrid button::before{ content:"";position:absolute;inset:8px;pointer-events:none;border-radius:13px; background: linear-gradient(90deg,transparent,rgba(199,162,97,.14),transparent), radial-gradient(circle at left top,rgba(77,127,125,.12),transparent 32%), radial-gradient(circle at right bottom,rgba(189,96,67,.12),transparent 35%); } html[data-device="phone"][data-layout="portrait"] #shell .drawergrid span{color:#9f7441!important;letter-spacing:.12em!important} html[data-device="phone"][data-layout="portrait"] #shell .drawergrid button strong, html[data-device="phone"][data-layout="portrait"] #shell .drawergrid button b{color:#224036!important} /* Two suspension-compass scenes: remove overlap and make the model readable on portrait phones. */ html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"], html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"]{ padding:18px 16px 34px!important;gap:16px!important; background: radial-gradient(circle at 50% -20%,rgba(233,213,166,.22),transparent 35%), linear-gradient(180deg,rgba(246,240,228,.95),rgba(231,222,203,.94))!important; } html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"]>.copy, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"]>.copy{ background:rgba(255,251,242,.74)!important;border:1px solid rgba(157,126,84,.16)!important;border-radius:18px!important; padding:14px 14px 10px!important;box-shadow:0 10px 18px rgba(94,65,31,.06); } html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .copy p, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .copy p{font-size:16px!important;line-height:1.72!important;color:#334339!important} html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .visual, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .visual{ height:auto!important;min-height:0!important;display:block!important;padding:0!important; } html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .art, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .art{ display:block!important;height:auto!important;min-height:0!important; } html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .suspension-stage, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .suspension-stage{ display:flex!important;flex-direction:column!important;gap:14px!important;padding:0 0 8px!important;min-height:0!important;height:auto!important; } html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .suspension-hero, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .suspension-hero{ min-height:344px!important;height:344px!important;border-radius:22px!important;border:1px solid rgba(157,126,84,.2)!important; background: radial-gradient(circle at 78% 18%,rgba(255,249,235,.74),transparent 28%), linear-gradient(180deg,#f0e4c9 0%,#e9dbc0 54%,#d4be95 100%)!important; box-shadow:0 14px 24px rgba(75,52,27,.12), inset 0 0 0 1px rgba(255,255,255,.28)!important; } html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .suspension-model, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .suspension-model{width:min(96%,420px)!important;height:min(86%,350px)!important;top:55%!important} html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .blender-compass-3d, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .blender-compass-3d{border-radius:22px!important} html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .blender-model-badge, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .blender-model-badge{ top:12px!important;left:12px!important;right:auto!important;bottom:auto!important;z-index:6!important; border-radius:999px!important;padding:8px 12px!important;font-size:12px!important;line-height:1!important; background:rgba(52,44,38,.78)!important;color:#f5e4bf!important;backdrop-filter:blur(8px)!important; } html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .blender-model-status, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .blender-model-status{ left:12px!important;right:12px!important;bottom:10px!important;top:auto!important;z-index:6!important; font-size:12px!important;line-height:1.4!important;border-radius:14px!important;padding:9px 12px!important; color:#31463f!important;background:rgba(255,248,234,.72)!important;backdrop-filter:blur(8px)!important; } html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .model-callout, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .model-callout{display:none!important} html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .suspension-side, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .suspension-side{ width:100%!important;max-width:none!important;border:none!important;border-radius:18px!important;padding:14px 14px 10px!important; background:linear-gradient(180deg,rgba(251,248,241,.94),rgba(240,233,218,.94))!important;box-shadow:0 12px 18px rgba(82,58,26,.08)!important; gap:10px!important; } html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .suspension-side h3, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .suspension-side h3{font-size:20px!important;margin:0!important;color:#284338!important} html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .suspension-side>p, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .suspension-side>p{font-size:14px!important;line-height:1.58!important;color:#42544b!important;display:block!important;margin:0 0 2px!important} html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .suspension-caption, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .suspension-caption{display:block!important;font-size:12px!important;line-height:1.45!important;color:#607061!important} html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .principle-card, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .principle-card{ border-radius:16px!important;border:1px solid rgba(169,140,95,.16)!important;padding:7px 8px!important;background:rgba(255,255,255,.72)!important; } html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .principle-card.active, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .principle-card.active{ background:linear-gradient(90deg,rgba(248,240,224,.94),rgba(255,251,244,.94))!important;border-color:rgba(153,111,56,.38)!important; } html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .principle-num, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .principle-num{width:28px!important;height:28px!important;font-size:14px!important} html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .principle-copy b, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .principle-copy b{font-size:14px!important;line-height:1.35!important} html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .principle-copy span, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .principle-copy span{font-size:12px!important;line-height:1.4!important;display:block!important} html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] #interaction.controlpanel, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] #interaction.controlpanel{ width:100%!important;display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto auto auto auto!important; gap:10px!important;padding:14px!important;border-radius:18px!important;background:rgba(255,251,243,.95)!important; box-shadow:0 12px 18px rgba(86,62,31,.08)!important; } html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] #interaction.controlpanel label, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] #interaction.controlpanel label{ display:block!important;grid-column:1!important;grid-row:1!important;max-width:none!important;font-size:14px!important;color:#37493f!important;line-height:1.52!important; } html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] #interaction.controlpanel input[type="range"], html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] #interaction.controlpanel input[type="range"]{grid-column:1!important;grid-row:2!important;height:18px!important} html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] #interaction.controlpanel .stepper, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] #interaction.controlpanel .stepper{ grid-column:1!important;grid-row:3!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin:0!important; } html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] #interaction.controlpanel .stepper button, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] #interaction.controlpanel .stepper button{ min-height:42px!important;padding:10px 8px!important;border-radius:14px!important;font-size:13px!important;line-height:1.2!important; } html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] #interaction.controlpanel output, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] #interaction.controlpanel output{ display:block!important;grid-column:1!important;grid-row:4!important;font-size:13px!important;line-height:1.55!important;color:#59695e!important;max-width:none!important; } /* Portrait page transition: central rotating baoxiang-style medallions inspired by the supplied patterns. */ @keyframes mxMobileFloralA{0%{transform:translate(-50%,-50%) scale(.4) rotate(-34deg);opacity:0}40%{opacity:.8}100%{transform:translate(-50%,-50%) scale(1) rotate(68deg);opacity:.58}} @keyframes mxMobileFloralB{0%{transform:translate(-50%,-50%) scale(.2) rotate(52deg);opacity:0}36%{opacity:.9}100%{transform:translate(-50%,-50%) scale(1) rotate(-74deg);opacity:.74}} @keyframes mxMobileFloralC{0%{transform:translate(-50%,-50%) scale(.1) rotate(-18deg);opacity:0}55%{opacity:.96}100%{transform:translate(-50%,-50%) scale(1) rotate(22deg);opacity:.92}} /* ===== V26 portrait refinement: compass readability and richer mobile aesthetics ===== */ html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"], html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"]{ display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto auto auto!important; } html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] > .visual, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] > .visual{order:1!important} html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] > .copy, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] > .copy{order:2!important;margin-top:2px!important;padding-top:0!important} html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] > .copy .eyebrow, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] > .copy .eyebrow{font-size:10px!important;letter-spacing:.22em!important;margin-bottom:4px!important} html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] > .copy h1, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] > .copy h1{font-size:30px!important;line-height:1.18!important;margin:8px 0 8px!important} html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] > .copy p, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] > .copy p{font-size:14px!important;line-height:1.58!important;max-width:none!important} html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .suspension-hero, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .suspension-hero{min-height:320px!important;height:320px!important} html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .suspension-model, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .suspension-model{top:53%!important;width:min(94%,390px)!important;height:min(84%,314px)!important} html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .blender-model-status, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .blender-model-status{font-size:11px!important;line-height:1.38!important;padding:7px 10px!important;background:rgba(255,248,234,.62)!important} html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .suspension-side, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .suspension-side{order:2!important} html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] #interaction.controlpanel, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] #interaction.controlpanel{order:3!important;padding:12px 12px 14px!important;gap:9px!important} html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] #interaction.controlpanel label, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] #interaction.controlpanel label{font-size:13px!important;line-height:1.45!important} html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] #interaction.controlpanel .stepper, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] #interaction.controlpanel .stepper{grid-template-columns:1fr 1fr!important} html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] #interaction.controlpanel .v10-compass-extra, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] #interaction.controlpanel .v10-compass-extra{ display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin:0!important; } html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] #interaction.controlpanel .v10-compass-extra button, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] #interaction.controlpanel .v10-compass-extra button{ min-height:42px!important;padding:10px 6px!important;font-size:12px!important;line-height:1.2!important;border-radius:14px!important; } html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] #interaction.controlpanel output, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] #interaction.controlpanel output{font-size:12px!important;line-height:1.5!important} html[data-device="phone"][data-layout="portrait"] #shell .drawergrid button::before{ background: linear-gradient(90deg,transparent,rgba(199,162,97,.14),transparent), radial-gradient(circle at left top,rgba(77,127,125,.12),transparent 32%), radial-gradient(circle at right bottom,rgba(189,96,67,.12),transparent 35%), var(--mx26-cloudline-light) center calc(100% - 10px)/160px 16px repeat-x!important; } html[data-device="phone"][data-layout="portrait"] #shell .suspension-hero .v10-model-caption{display:none!important} /* ---- extracted style block boundary ---- */ /* Inline: css/05_双端精修样式.css */ /* 《梦溪格物志》全端精修：CSS presentation layer only. No text, art, scene order or scene interaction data is changed. Priority: desktop immersive composition + mobile legibility and touch + tablet breathing room. */ :root { --mx-responsive-gutter: clamp(22px, 4.5vw, 100px); } html,body { width:100%; max-width:100%; } #shell :is(button,input,[role="button"]) { -webkit-tap-highlight-color:transparent; } #shell :is(button,input,[role="button"]):focus-visible { outline:2px solid #caa56b; outline-offset:4px; } #shell .drawergrid button { text-wrap:pretty; } #shell .scene .visual canvas { max-width:100%; } /* Desktop / laptop: fix the original full-viewport-width bug behind an inset scene. Give both title block and models the correctly centered space of the exhibit. */ @media (min-width:1101px) and (min-height:640px) { #shell #stage section.scene[data-form]:not([data-id="15"]):not([data-id="16"]) { left:var(--reader-side)!important;right:var(--reader-side)!important; top:var(--reader-top)!important;bottom:var(--reader-bottom)!important; width:calc(100% - var(--reader-side) - var(--reader-side))!important;height:auto!important;max-width:none!important; grid-template-columns:minmax(0,43%) minmax(0,1fr)!important; gap:clamp(34px,4.3vw,90px)!important; align-items:center!important;min-height:0!important; } #shell #stage section.scene[data-form]:not([data-id="15"]):not([data-id="16"]) .copy { width:100%!important;max-width:min(100%,600px)!important; min-width:0!important;align-self:center!important; } #shell #stage section.scene[data-form]:not([data-id="15"]):not([data-id="16"]) .visual { width:100%!important;max-width:100%!important;min-width:0!important; height:min(68vh,700px)!important;min-height:400px!important; max-height:100%!important;align-self:center!important; display:grid!important;place-items:center!important; } #shell #stage section.scene[data-form]:not([data-id="15"]):not([data-id="16"]) .visual .art { max-width:100%!important;max-height:100%!important; } #shell #stage section.scene[data-form] .copy h1 { font-size:clamp(43px,4.5vw,74px)!important; line-height:1.17!important; letter-spacing:.035em!important; } #shell #stage section.scene[data-form] .copy h1.reader-long { font-size:clamp(38px,4.0vw,61px)!important; } #shell #stage section.scene[data-form] .copy .scene-summary { line-height:1.92!important; font-size:clamp(15px,1.14vw,19px)!important; } #shell #stage section.scene[data-form] .copy .learning { line-height:1.65!important; } #shell #stage section.scene[data-form] .copy .note-trigger { min-height:34px!important; } #shell .drawergrid button { min-height:70px!important; } } /* Wide displays: cap line width rather than letting exhibits disperse across huge monitors. */ @media (min-width:1700px) and (min-height:750px) { :root { --reader-side:max(6.0vw,calc((100vw - 1710px)/2)); --reader-top:clamp(95px,9.5vh,142px); --reader-bottom:clamp(96px,10.5vh,142px); } #shell #stage section.scene[data-form] .visual { height:min(70vh,830px)!important; } #shell #stage section.scene[data-form] .copy h1 { font-size:clamp(58px,4.1vw,84px)!important; } } /* Laptop screens with shorter height: prioritize readable text while protecting bottom navigation. */ @media (min-width:1101px) and (max-height:760px) { :root { --reader-top:clamp(61px,9vh,78px); --reader-bottom:clamp(62px,9.5vh,82px); } #shell #stage section.scene[data-form]:not([data-id="15"]):not([data-id="16"]) .visual { min-height:0!important;height:100%!important; } #shell #stage section.scene[data-form] .copy h1 { font-size:clamp(37px,4.15vw,63px)!important; } #shell #stage section.scene[data-form] .reader-deck { font-size:clamp(14px,1.30vw,18px)!important; } #shell #stage section.scene[data-form] .scene-summary { font-size:clamp(13px,1.05vw,17px)!important;line-height:1.62!important; } } /* Tablet landscape: leave real safe margins; retain immersive two-column content. */ @media (min-width:760px) and (max-width:1100px) and (orientation:landscape) and (min-height:600px) { :root { --reader-side:clamp(25px,4.0vw,45px); --reader-top:clamp(68px,9vh,84px); --reader-bottom:clamp(70px,10vh,92px); } #shell #stage section.scene[data-form]:not([data-id="15"]):not([data-id="16"]) { left:var(--reader-side)!important;right:var(--reader-side)!important;top:var(--reader-top)!important;bottom:var(--reader-bottom)!important; width:calc(100% - var(--reader-side) - var(--reader-side))!important;height:auto!important;max-width:none!important; grid-template-columns:minmax(0,45%) minmax(0,1fr)!important;gap:25px!important; } #shell #stage section.scene[data-form]:not([data-id="15"]):not([data-id="16"]) .visual { height:100%!important;min-height:0!important;width:100%!important; } #shell #stage section.scene[data-form] .copy h1 { font-size:clamp(33px,4vw,48px)!important; } #shell #stage section.scene[data-form] .scene-summary { font-size:clamp(13px,1.5vw,16px)!important;line-height:1.7!important; } } /* Compact landscape phones: fixed left and right inset should not still leave width=100vw. */ @media (orientation:landscape) and (pointer:coarse) and (max-width:1050px) { #shell #stage section.scene[data-form]:not([data-id="15"]):not([data-id="16"]) { width:calc(100% - var(--reader-side) - var(--reader-side))!important;height:auto!important;min-height:0!important; left:var(--reader-side)!important;right:var(--reader-side)!important; top:var(--reader-top)!important;bottom:var(--reader-bottom)!important; grid-template-columns:minmax(0,47%) minmax(0,1fr)!important; gap:clamp(12px,2.7vw,24px)!important; } #shell #stage section.scene[data-form]:not([data-id="15"]):not([data-id="16"]) .visual { width:100%!important;height:100%!important;min-height:0!important;max-height:100%!important; } #shell #stage section.scene[data-form] .copy h1 { font-size:clamp(23px,4vw,38px)!important;line-height:1.18!important; } #shell #stage section.scene[data-form] .scene-summary { font-size:clamp(12px,1.6vw,15px)!important;line-height:1.52!important; } #shell #stage section.scene[data-form] .copy .learning { font-size:clamp(11px,1.42vw,13.5px)!important;line-height:1.5!important; } #shell .drawergrid button{ min-height:50px!important; } #shell .topright #mapbtn{min-height:40px!important;padding:8px 10px!important} #shell .bottomnav .bookmark-nav{min-height:44px!important;min-width:72px!important} #shell .bottomnav .chapter-dial{min-height:44px!important;min-width:44px!important} #shell :is(.scene button,.drawer button,.mx20-track button){touch-action:manipulation} #shell .mx20-track button {min-height:43px!important;} #shell .mx20-action>button,#shell .mx20-page-nav button{min-height:40px!important;} } /* Portrait phones: stable reading canvas, large touch targets and comfortable breathing room. Content is scrollable at the page level, never inside a little caption panel. */ html[data-device="phone"][data-layout="portrait"] #shell #stage { top:calc(65px + env(safe-area-inset-top,0px))!important; bottom:calc(76px + env(safe-area-inset-bottom,0px))!important; scrollbar-gutter:stable; background:transparent!important; } html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene[data-form]:not([data-id="15"]):not([data-id="16"]) { padding:clamp(21px,5vw,30px) clamp(21px,6.2vw,30px) 48px!important; gap:clamp(22px,6vw,34px)!important; } html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene[data-form] .copy .eyebrow {font-size:12px!important;letter-spacing:.13em!important} html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene[data-form] .copy h1 {font-size:clamp(32px,8.3vw,45px)!important;line-height:1.20!important;letter-spacing:.045em!important;margin:10px 0 15px!important} html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene[data-form] .copy .reader-deck {font-size:clamp(16px,4.15vw,18px)!important;line-height:1.7!important} html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene[data-form] .copy .scene-summary {font-size:clamp(15.5px,4.1vw,18px)!important;line-height:1.82!important} html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene[data-form] .copy .learning {font-size:14px!important;line-height:1.68!important;margin-top:18px!important} html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene[data-form] .visual {min-height:270px!important;height:min(91vw,425px)!important;} html[data-device="phone"][data-layout="portrait"] #shell .bottomnav {min-height:68px!important;height:calc(68px + env(safe-area-inset-bottom,0px))!important;box-shadow:0 -9px 26px #0a1d1950!important;} html[data-device="phone"][data-layout="portrait"] #shell .bottomnav .bookmark-nav{min-width:94px!important;min-height:46px!important;color:#f2e7d4!important} html[data-device="phone"][data-layout="portrait"] #shell .bottomnav .bookmark-nav span{font-size:13px!important;color:inherit!important} html[data-device="phone"][data-layout="portrait"] #shell .bottomnav .bookmark-nav b{font-size:11px!important;color:#d5c19a!important} html[data-device="phone"][data-layout="portrait"] #shell .bottomnav .chapter-dial{min-width:50px!important;min-height:50px!important;} html[data-device="phone"][data-layout="portrait"] #shell .drawergrid button{min-height:85px!important;} html[data-device="phone"][data-layout="portrait"] #shell .topright #mapbtn{min-height:44px!important;} html[data-device="phone"][data-layout="portrait"] #shell .scene input[type="range"]{min-height:42px!important;} /* Mobile 3D exhibits: allocate dedicated vertical sections; never overlay steps on captions. */ html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="15"], html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="16"] {min-height:1030px!important;} html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="15"]>.visual, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="16"]>.visual, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="15"] .art, html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="16"] .art {min-height:1030px!important;} html[data-device="phone"][data-layout="portrait"] #shell #stage .mx20-immersive {height:1030px!important;min-height:1030px!important;} html[data-device="phone"][data-layout="portrait"] #shell .mx20-heading{top:5.5%!important;left:8%!important;width:84%!important;} html[data-device="phone"][data-layout="portrait"] #shell .mx20-heading p{font-size:clamp(15px,4vw,17px)!important;line-height:1.62!important;} html[data-device="phone"][data-layout="portrait"] #shell .mx20-model, html[data-device="phone"][data-layout="portrait"] #shell .mx20-immersive.ink .mx20-model{top:19%!important;height:35%!important;max-height:none!important;min-height:315px!important;} html[data-device="phone"][data-layout="portrait"] #shell .mx20-notes{top:56%!important;} html[data-device="phone"][data-layout="portrait"] #shell .mx20-notes h2{font-size:clamp(20px,5.4vw,24px)!important;} html[data-device="phone"][data-layout="portrait"] #shell .mx20-notes p{font-size:clamp(14px,3.8vw,16px)!important;line-height:1.68!important;} html[data-device="phone"][data-layout="portrait"] #shell .mx20-timeline{bottom:10.2%!important;gap:15px!important;} html[data-device="phone"][data-layout="portrait"] #shell .mx20-track{gap:10px!important;} html[data-device="phone"][data-layout="portrait"] #shell .mx20-track button{min-height:44px!important;} html[data-device="phone"][data-layout="portrait"] #shell .mx20-action>button{min-height:44px!important;} html[data-device="phone"][data-layout="portrait"] #shell .mx20-page-nav{bottom:2.5%!important;} /* Small-width 320-360 screens need fewer columns and no content clipping. */ @media (max-width:360px) and (orientation:portrait){ html[data-device="phone"] #shell .brand{left:11px!important} html[data-device="phone"] #shell .topright{right:9px!important} html[data-device="phone"] #shell #stage>.scene[data-form]{padding-inline:17px!important} html[data-device="phone"] #shell #stage>.scene[data-form] .copy h1{font-size:31px!important} html[data-device="phone"] #shell .bottomnav{padding-inline:10px!important} html[data-device="phone"] #shell .bottomnav .bookmark-nav{min-width:79px!important;padding-inline:6px!important} } @media(prefers-reduced-motion:reduce){#shell *{scroll-behavior:auto!important}} /* Input labels must remain legible on phones; preserve all control functions. */ @media (orientation:landscape) and (pointer:coarse) and (max-width:1050px){ #shell .scene .controlpanel {max-width:100%!important;min-width:0!important;padding:9px 12px!important;} #shell .scene .controlpanel label, #shell .scene .controlpanel output {font-size:clamp(12px,1.58vw,15px)!important;line-height:1.35!important;} #shell .scene .controlpanel input[type="range"] {height:34px!important;min-height:34px!important;} #shell .scene .controlpanel button {min-height:40px!important;} } /* ---- extracted style block boundary ---- */ /* Inline: css/06_科学展品样式.css */ /* V23 core demo refinements. Only sections 06 (sun) and 17 (terrain) are enhanced. */ #shell:has(#stage .scene[data-id="5"]) .scene-painting{ background:none!important; background-image:linear-gradient(116deg,#e5dac0 0%,#eadbbd 40%,#b7cbd0 75%,#d4b790 100%)!important; filter:none!important;opacity:1!important; } #shell:has(#stage .scene[data-id="5"]) .scene-painting::after{ background:linear-gradient(90deg,#ece2cf 0%,#e9dcc8 28%,#d4c7b661 51%,transparent 79%)!important; mix-blend-mode:normal!important; } #shell #stage .scene[data-id="5"] .copy{z-index:10!important} #shell #stage .scene[data-id="5"] .copy h1{color:#3e3021!important;text-shadow:none!important} #shell #stage .scene[data-id="5"] .copy h1 em{color:#795d32!important} #shell #stage .scene[data-id="5"] .copy p{color:#554b3c!important} #shell #stage .scene[data-id="5"] .eyebrow,#shell #stage .scene[data-id="5"] .learning,#shell #stage .scene[data-id="5"] .learning span{color:#6f5634!important} #shell #stage .scene[data-id="5"] .visual{overflow:visible!important} #shell #stage .scene[data-id="5"] .art{width:100%!important;height:100%!important;max-width:none!important;display:block!important;overflow:visible!important;transform:none!important} #shell #stage .scene[data-id="5"] .halo,#shell #stage .scene[data-id="5"] .artlabel{display:none!important} #shell .mx23-sun{position:absolute;inset:2% -3% 17% -4%;border:1px solid #b08d63aa;border-radius:4px;overflow:hidden;isolation:isolate;box-shadow:0 16px 46px #68543920,inset 0 0 0 5px #f4e5c24b;background:#cbbe9e} #shell .mx23-sun::after{content:"";position:absolute;inset:11px;border:1px solid #f6e9c662;pointer-events:none} #shell .mx23-sun canvas{display:block;width:100%;height:100%} #shell .mx23-sun-title{position:absolute;left:20px;top:16px;pointer-events:none;display:flex;align-items:center;gap:8px;z-index:3;font-size:12px;letter-spacing:.12em;color:#544128;background:#f3e8d2cb;padding:5px 8px} #shell .mx23-sun-title b{font-size:17px;font-weight:600} #shell .mx23-sun-controls{position:absolute;left:0;right:0;bottom:0;z-index:4;margin:0!important;padding:12px 16px 14px;background:linear-gradient(180deg,#f2e9d9f2,#efe1c5f9);color:#594329!important;box-shadow:0 -7px 22px #826c4b1f;display:grid;grid-template-columns:1fr;gap:8px;border-top:1px solid #a8875a55;min-width:0} #shell .mx23-sun-toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px} #shell .mx23-sun-toolbar label{display:flex;flex-direction:column;gap:4px;color:#675035;font-size:12px!important;letter-spacing:.03em} #shell .mx23-sun-toolbar select{appearance:auto;min-width:0;max-width:100%;height:34px;line-height:34px;padding:0 8px;border:1px solid #b89b6e;background:#fbf3e3;color:#47351f;border-radius:3px;cursor:pointer;font-size:14px!important} #shell .mx23-sun-slide{display:grid;grid-template-columns:1fr;gap:2px} #shell .mx23-sun-slide>label{display:flex;justify-content:space-between;align-items:center;font-size:13px!important;color:#594229} #shell .mx23-sun-slide output{font-weight:700;font-variant-numeric:tabular-nums;font-size:18px!important;color:#6f441e} #shell .mx23-sun-slide input{height:29px!important;width:100%;cursor:pointer;accent-color:#a06e34;margin:0} #shell .mx23-sun-measures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #bb9e755c;padding-top:7px;gap:6px} #shell .mx23-sun-measures>span{display:flex;flex-direction:column;font-size:11px!important;color:#775c3b;gap:2px} #shell .mx23-sun-measures b{font-size:clamp(14px,1.3vw,21px);white-space:nowrap;color:#3d3b30;font-variant-numeric:tabular-nums} #shell .mx23-sun-note{margin:0!important;max-width:none!important;font-size:11px!important;line-height:1.5!important;color:#7d6141!important} /* Terrain - organic exhibition, better tonal depth and clearer device controls. */ #shell .mx20-immersive.terrain{background:radial-gradient(ellipse 62% 72% at 35% 41%,#f1e5c9 0%,#e6d4b0 53%,#bba481 100%)!important} #shell .mx20-immersive.terrain .mx20-model{filter:drop-shadow(0 30px 26px #6959402e)!important;left:-3%;width:86%;height:69%;top:12%} #shell .mx20-immersive.terrain .mx20-notes{right:5.6%;top:30%} #shell .mx20-immersive.terrain .mx20-track{border-color:#a38b65a8} #shell .mx20-immersive.terrain .mx20-track button.active{color:#71491f} #shell .mx20-immersive.terrain::before{border-color:#95714477!important} @media (min-width:1150px) and (min-height:700px){ #shell #stage .scene[data-id="5"] .copy{max-width:480px!important} #shell #stage .scene[data-id="5"] .art{min-height:550px!important} #shell .mx23-sun{inset:0 -2% 25% -4%} #shell .mx23-sun-controls{bottom:0;left:-4%;right:-2%} #shell .mx20-immersive.terrain .mx20-model{height:70%;top:13%} } @media (max-width:1100px) and (orientation:landscape){ #shell .mx23-sun{inset:0 -5% 29% -2%} #shell .mx23-sun-controls{left:-2%;right:-5%;bottom:0;padding:6px 10px;gap:4px} #shell .mx23-sun-toolbar label{font-size:10px!important} #shell .mx23-sun-toolbar select{height:29px;font-size:12px!important} #shell .mx23-sun-measures b{font-size:13px} #shell .mx23-sun-slide output{font-size:14px!important} #shell .mx23-sun-note{display:none} } @media (orientation:landscape) and (max-height:480px){ #shell .mx23-sun{inset:-4% -4% 32% -4%} #shell .mx23-sun-title{top:8px;left:8px} #shell .mx23-sun-controls{padding:5px 9px;gap:1px} #shell .mx23-sun-toolbar label{gap:1px} #shell .mx23-sun-toolbar select{height:26px;line-height:26px} #shell .mx23-sun-slide label{font-size:11px!important} #shell .mx23-sun-measures{padding-top:2px} #shell .mx23-sun-measures>span{font-size:9px!important} #shell .mx23-sun-slide input{height:20px!important} } @media(orientation:portrait) and (max-width:850px){ #shell #stage .scene[data-id="5"] .visual{width:100%!important;min-height:660px!important;height:660px!important;overflow:visible!important} #shell #stage .scene[data-id="5"] .art{width:100%!important;height:660px!important;min-height:660px!important} #shell .mx23-sun{inset:0 0 235px 0!important;position:absolute} #shell .mx23-sun-controls{bottom:0;left:0;right:0;padding:14px 15px 13px;gap:10px;box-sizing:border-box} #shell .mx23-sun-title{top:12px;left:11px} #shell .mx23-sun-measures b{font-size:19px} #shell .mx23-sun-toolbar label{font-size:13px!important} #shell .mx23-sun-slide label{font-size:14px!important} #shell .mx23-sun-note{font-size:12px!important} #shell .mx20-immersive.terrain .mx20-model{left:0;top:17%;width:100%;height:53%} } /* Exhibition-integrated surface: remove panel/window framing. */ #shell .mx23-sun{border:0!important;border-radius:0!important;box-shadow:none!important} #shell .mx23-sun::after{border-color:rgba(155,124,74,.18)!important} #shell .mx23-sun-controls{box-shadow:none!important;border-top-color:#ac916355!important} #shell .mx20-immersive.terrain .mx20-model canvas{mask-image:linear-gradient(to bottom,#000 0%,#000 73%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 73%,transparent 100%)} @media(orientation:portrait) and (max-width:850px){ html[data-device="phone"][data-layout="portrait"] #shell #stage .scene[data-id="5"] .visual{ display:block!important;flex:0 0 720px!important;min-height:720px!important;height:720px!important;width:100%!important;max-width:none!important;overflow:visible!important} html[data-device="phone"][data-layout="portrait"] #shell #stage .scene[data-id="5"] .visual .art{ display:block!important;position:relative!important;min-height:720px!important;height:720px!important;overflow:visible!important} html[data-device="phone"][data-layout="portrait"] #shell #stage .scene[data-id="5"] .mx23-sun{ position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:auto!important; width:100%!important;height:426px!important;min-height:426px!important;max-height:none!important} html[data-device="phone"][data-layout="portrait"] #shell #stage .scene[data-id="5"] .mx23-sun-controls{ position:absolute!important;top:426px!important;left:0!important;right:0!important;bottom:auto!important;min-height:280px!important;box-sizing:border-box!important; background:linear-gradient(180deg,#f3e9d8,#e9dabf)!important} html[data-device="phone"][data-layout="portrait"] #shell .mx23-sun-title{font-size:12px!important} html[data-device="phone"][data-layout="portrait"] #shell .mx23-sun-title b{font-size:16px!important} html[data-device="phone"][data-layout="portrait"] #shell .mx23-sun-measures{gap:7px} html[data-device="phone"][data-layout="portrait"] #shell .mx23-sun-measures b{font-size:17px!important} } @media (orientation:landscape) and (max-width:1050px) and (max-height:480px){ #shell #stage .scene[data-id="5"] .mx23-sun{inset:-4% -4% 1% -4%!important;height:auto!important} #shell #stage .scene[data-id="5"] .mx23-sun-controls{padding:3px 8px 5px!important;gap:2px!important;left:-4%!important;right:-4%!important} #shell #stage .scene[data-id="5"] .mx23-sun-toolbar label{display:flex;flex-direction:row;align-items:center;gap:6px;white-space:nowrap;font-size:10px!important} #shell #stage .scene[data-id="5"] .mx23-sun-toolbar select{width:100%;max-width:100%;height:25px;font-size:11px!important} #shell #stage .scene[data-id="5"] .mx23-sun-slide label{font-size:10px!important} #shell #stage .scene[data-id="5"] .mx23-sun-slide input{height:17px!important} #shell #stage .scene[data-id="5"] .mx23-sun-measures{gap:4px!important;padding-top:1px!important} #shell #stage .scene[data-id="5"] .mx23-sun-measures>span{display:flex;flex-direction:row;gap:4px;white-space:nowrap;align-items:center;font-size:9px!important} #shell #stage .scene[data-id="5"] .mx23-sun-measures b{font-size:12px!important} } /* ---- extracted style block boundary ---- */ /* Inline: css/07_三维材质样式.css */ /* V24: large continuous render stage / atmosphere, not a gallery card */ #shell .mx20-immersive.terrain{ background: radial-gradient(ellipse 40% 32% at 76% 18%,rgba(250,234,193,.77),transparent 82%), radial-gradient(ellipse 67% 34% at 38% 75%,rgba(107,132,108,.18),transparent 85%), linear-gradient(180deg,#e5e8df 0%,#e5dec7 34%,#e0ccb0 76%,#d2b792 100%)!important; } #shell .mx20-immersive.ink{ background: radial-gradient(ellipse 52% 55% at 37% 42%,rgba(192,150,101,.25),transparent 78%), radial-gradient(ellipse 39% 23% at 85% 8%,rgba(238,182,106,.12),transparent), linear-gradient(180deg,#413b33 0%,#6e5b49 53%,#4e453a 100%)!important; } #shell .mx20-immersive.terrain .mx20-model::after{ content:"";position:absolute;left:4%;right:9%;bottom:5%;height:22%;pointer-events:none; background:radial-gradient(ellipse at 55% 50%,rgba(248,240,219,.28),transparent 74%); filter:blur(14px);opacity:.9; } #shell .mx20-immersive .mx20-model canvas{filter:contrast(1.085) saturate(.94) drop-shadow(0px 22px 22px rgba(26,38,25,.12));} #shell .mx20-immersive.ink .mx20-model canvas{filter:contrast(1.08) saturate(.83) drop-shadow(0px 14px 22px rgba(9,8,7,.27));} #shell .mx20-immersive.terrain .mx20-heading{text-shadow:0 1px 18px rgba(245,233,209,.58)} #shell .mx20-immersive.ink .mx20-heading{text-shadow:0 2px 13px rgba(16,12,11,.46)} #shell .mx20-immersive .mx20-notes{background:none!important;border:none!important;box-shadow:none!important} @media(orientation:portrait) and (max-width:700px){ #shell .mx20-immersive.terrain .mx20-model canvas{filter:contrast(1.07) saturate(.91)} #shell .mx20-immersive.ink .mx20-model canvas{filter:contrast(1.06) saturate(.87)} } @media(prefers-reduced-motion:reduce){#shell .mx20-model::after{filter:none}} /* ---- extracted style block boundary ---- */ /* Inline: css/08_展陈最终修饰.css */ /* Exhibition-integrated surface: remove panel/window framing. */ #shell .mx23-sun{border:0!important;border-radius:0!important;box-shadow:none!important} #shell .mx23-sun::after{border-color:rgba(155,124,74,.18)!important} #shell .mx23-sun-controls{box-shadow:none!important;border-top-color:#ac916355!important} #shell .mx20-immersive.terrain .mx20-model canvas{mask-image:linear-gradient(to bottom,#000 0%,#000 73%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 73%,transparent 100%)} @media(orientation:portrait) and (max-width:850px){ html[data-device="phone"][data-layout="portrait"] #shell #stage .scene[data-id="5"] .visual{ display:block!important;flex:0 0 720px!important;min-height:720px!important;height:720px!important;width:100%!important;max-width:none!important;overflow:visible!important} html[data-device="phone"][data-layout="portrait"] #shell #stage .scene[data-id="5"] .visual .art{ display:block!important;position:relative!important;min-height:720px!important;height:720px!important;overflow:visible!important} html[data-device="phone"][data-layout="portrait"] #shell #stage .scene[data-id="5"] .mx23-sun{ position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:auto!important; width:100%!important;height:426px!important;min-height:426px!important;max-height:none!important} html[data-device="phone"][data-layout="portrait"] #shell #stage .scene[data-id="5"] .mx23-sun-controls{ position:absolute!important;top:426px!important;left:0!important;right:0!important;bottom:auto!important;min-height:280px!important;box-sizing:border-box!important; background:linear-gradient(180deg,#f3e9d8,#e9dabf)!important} html[data-device="phone"][data-layout="portrait"] #shell .mx23-sun-title{font-size:12px!important} html[data-device="phone"][data-layout="portrait"] #shell .mx23-sun-title b{font-size:16px!important} html[data-device="phone"][data-layout="portrait"] #shell .mx23-sun-measures{gap:7px} html[data-device="phone"][data-layout="portrait"] #shell .mx23-sun-measures b{font-size:17px!important} } @media (orientation:landscape) and (max-width:1050px) and (max-height:480px){ #shell #stage .scene[data-id="5"] .mx23-sun{inset:-4% -4% 1% -4%!important;height:auto!important} #shell #stage .scene[data-id="5"] .mx23-sun-controls{padding:3px 8px 5px!important;gap:2px!important;left:-4%!important;right:-4%!important} #shell #stage .scene[data-id="5"] .mx23-sun-toolbar label{display:flex;flex-direction:row;align-items:center;gap:6px;white-space:nowrap;font-size:10px!important} #shell #stage .scene[data-id="5"] .mx23-sun-toolbar select{width:100%;max-width:100%;height:25px;font-size:11px!important} #shell #stage .scene[data-id="5"] .mx23-sun-slide label{font-size:10px!important} #shell #stage .scene[data-id="5"] .mx23-sun-slide input{height:17px!important} #shell #stage .scene[data-id="5"] .mx23-sun-measures{gap:4px!important;padding-top:1px!important} #shell #stage .scene[data-id="5"] .mx23-sun-measures>span{display:flex;flex-direction:row;gap:4px;white-space:nowrap;align-items:center;font-size:9px!important} #shell #stage .scene[data-id="5"] .mx23-sun-measures b{font-size:12px!important} } /* ---- extracted style block boundary ---- */ /* Inline: css/09_V27_全站祥云控件与指南针防遮挡.css */ /* 梦溪格物志 V27 ｜统一祥云交互与双端分层美化：全局控件，不改章节内容 */ :root{--mx27-cloud:url("../assets/images/image-672ea4d0dd.svg");--mx27-cloud-light:url("../assets/images/image-cacc716310.svg");--mx27-knob:url("../assets/images/image-12a9122844.svg");} /* Each interactive button reads as an engraved silk/china control, not a heavy software panel. */ #shell :is(.scene-actions button,.controlpanel button,.suspension-stage .v10-compass-extra button, .mx20-action button,.mx20-page-nav button,.mx20-track button,.mx23-controls button, .sun-panel button,.solstice-panel button,.note-trigger,.scroll-skip,.drawerhead button){ position:relative;isolation:isolate;touch-action:manipulation; transition:transform .22s ease,background-color .22s ease,border-color .22s ease,box-shadow .22s ease; } #shell :is(.scene-actions button,.controlpanel button,.suspension-stage .v10-compass-extra button, .mx20-action button,.mx20-page-nav button,.mx23-controls button,.sun-panel button,.solstice-panel button){ border-radius:11px!important; border-color:rgba(159,115,66,.49)!important; background-image:var(--mx27-cloud-light),linear-gradient(180deg,rgba(255,246,219,.18),rgba(32,57,48,.04))!important; background-size:140px 21px,100% 100%!important; background-position:center 3px,center!important; background-repeat:repeat-x,no-repeat!important; box-shadow:inset 0 1px 0 rgba(255,250,236,.25),0 3px 10px rgba(24,22,17,.13)!important; } #shell :is(.scene-actions button,.controlpanel button,.suspension-stage .v10-compass-extra button,.mx20-action button,.mx20-page-nav button,.mx20-track button,.mx23-controls button,.sun-panel button,.solstice-panel button):active{transform:translateY(1px) scale(.985)!important} #shell :is(.scene-actions button,.controlpanel button,.mx20-action button,.mx20-track button,.mx23-controls button,.sun-panel button,.solstice-panel button):focus-visible{outline:2px solid #d7a75c!important;outline-offset:3px!important} /* Sliders in every chapter, including terrain/sundial/ink and magnetic needle. */ #shell input[type="range"]{appearance:none!important;-webkit-appearance:none!important;accent-color:#a68051!important;background:transparent!important; min-height:28px!important;max-width:100%!important;touch-action:pan-y!important;cursor:pointer;} #shell input[type="range"]::-webkit-slider-runnable-track{height:9px!important;border-radius:999px!important;border:1px solid rgba(132,103,65,.37)!important; background-image:var(--mx27-cloud),linear-gradient(90deg,rgba(250,242,224,.95),rgba(216,198,164,.94))!important; background-size:175px 30px,100% 100%!important;background-position:center!important;background-repeat:repeat-x,no-repeat!important; box-shadow:inset 0 1px 3px rgba(76,52,29,.13)!important;} #shell input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none!important;appearance:none!important;width:26px!important;height:26px!important; margin-top:-9px!important;border:none!important;border-radius:50%!important;background:var(--mx27-knob) center/100% 100% no-repeat!important; box-shadow:0 2px 8px rgba(33,29,21,.24)!important;} #shell input[type="range"]::-moz-range-track{height:9px;border:1px solid rgba(132,103,65,.37);border-radius:999px; background:linear-gradient(90deg,rgba(250,242,224,.95),rgba(216,198,164,.94));} #shell input[type="range"]::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;background:var(--mx27-knob) center/100% 100% no-repeat;} /* The catalogue is patterned on both widescreen and phones, but each menu card remains legible. */ #shell .drawergrid button{min-height:70px;isolation:isolate;} #shell .drawergrid button::after{content:"";position:absolute;right:14px;bottom:7px;width:110px;height:24px; background:var(--mx27-cloud-light) center/130px 22px repeat-x;opacity:.24;pointer-events:none;} #shell .drawerhead::after{content:"";position:absolute;left:0;bottom:-1px;width:140px;height:15px;background:var(--mx27-cloud-light) left center/140px 20px no-repeat;opacity:.26;pointer-events:none;} /* A light rhythmic fabric border around the transition, not a pile of stickers. */ /* Keep 'compass museum exhibit' readable on smartphones: model stage first, descriptions entirely below it. */ html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]){ display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:15px!important;padding:14px 14px 26px!important; } html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"])>.visual{ order:0!important;display:block!important;width:100%!important;height:auto!important;min-height:0!important;flex:none!important;} html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"])>.copy{ order:1!important;flex:none!important;width:100%!important;max-width:100%!important;transform:none!important;margin:0!important; border:1px solid rgba(162,127,77,.17)!important;background:rgba(254,248,234,.87)!important;padding:15px!important;border-radius:16px!important;} html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]) .suspension-stage{ display:flex!important;flex-direction:column!important;align-items:stretch!important;padding:0!important;gap:12px!important;height:auto!important;min-height:0!important;} html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]) .suspension-hero{ display:block!important;flex:none!important;position:relative!important;min-height:370px!important;height:370px!important;max-width:100%!important; isolation:isolate;overflow:hidden!important;border-radius:18px!important;} html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]) .suspension-model{ top:51%!important;left:50%!important;width:97%!important;height:89%!important;max-height:348px!important; transform:translate(-50%,-50%)!important;} html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]) .blender-model-badge{ top:10px!important;left:10px!important;bottom:auto!important;right:auto!important;max-width:calc(100% - 20px)!important; padding:5px 8px!important;font-size:10px!important;white-space:normal!important;} html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]) .blender-model-status{ left:9px!important;right:9px!important;bottom:9px!important;top:auto!important;max-width:none!important; font-size:11px!important;line-height:1.35!important;padding:6px 9px!important;pointer-events:none!important;} html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]) :is(.model-callout,.v10-model-caption){display:none!important;} html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]) .suspension-side{ position:relative!important;order:1!important;max-width:none!important;overflow:visible!important; padding:14px!important;border-radius:16px!important;} html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]) #interaction.controlpanel{ position:relative!important;order:2!important;display:flex!important;flex-direction:column!important;gap:11px!important; width:100%!important;min-height:0!important;max-height:none!important;overflow:visible!important;padding:14px!important; border:1px solid rgba(157,120,66,.15)!important;border-radius:16px!important;} html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]) #interaction.controlpanel>*{ display:block!important;position:static!important;width:100%!important;max-width:100%!important;margin:0!important;flex:none!important;} html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]) #interaction.controlpanel .stepper, html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]) #interaction.controlpanel .v10-compass-extra{ display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;} html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]) #interaction.controlpanel button{ min-height:43px!important;padding:10px 7px!important;font-size:12px!important;line-height:1.25!important;white-space:normal!important;} html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]) #interaction.controlpanel label, html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]) #interaction.controlpanel output{ display:block!important;font-size:13px!important;line-height:1.52!important;text-wrap:pretty!important;} html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]) .copy :is(p,.learning){ font-size:14px!important;line-height:1.72!important;color:#394e43!important;} /* Mobile controls throughout the other 23 scenes keep a minimum comfortable touch height. */ html[data-device="phone"][data-layout="portrait"] #shell #stage :is(.scene-actions button,.controlpanel button,.mx20-track button,.mx20-action button,.sun-panel button){ min-height:42px!important;} @media(max-width:900px) and (orientation:landscape){ #shell .controlpanel button{min-height:34px!important} } @media(prefers-reduced-motion:reduce){} #shell .scroll-opening>.scroll-skip{position:absolute!important;z-index:20!important;left:auto!important;top:auto!important;right:5%!important;bottom:2.4%!important;transform:none!important;white-space:nowrap!important;min-height:36px!important;padding:7px 15px!important;line-height:1.2!important;} html[data-device="phone"][data-layout="portrait"] #shell .scroll-opening>.scroll-skip{right:7%!important;bottom:2%!important;min-height:34px!important;padding:7px 13px!important;background:rgba(12,31,27,.85)!important;color:#f2d8a8!important;box-shadow:0 4px 12px #0005!important;} /* ---- extracted style block boundary ---- */ /* Inline: css/10_V28_宝相花与传统配色.css */ /* V28 – Chinese Color Atlas-informed palette, original Figma-redrawn floral transition. */ :root{--mx28-ink:#253E39;--mx28-dark:#152C29;--mx28-green:#3F503B;--mx28-gold:#BF9C46;--mx28-cinnabar:#9D2933;--mx28-teal:#007175;--mx28-paper:#FFFBF0;--mx28-silk:#EEDEB0} #shell .drawer{background:radial-gradient(ellipse at 50% 0,rgba(0,113,117,.18),transparent 47%),linear-gradient(165deg,#203C37 0%,#142723 75%,#13231F 100%)!important;color:var(--mx28-paper)!important} #shell .drawer::before{background-image:url("../assets/images/image-61303a90a2.svg"),url("../assets/images/image-5b548d6f36.svg")!important;background-repeat:no-repeat,repeat-x!important;background-size:clamp(270px,34vw,510px),600px 60px!important;background-position:calc(100% + 100px) calc(100% + 110px),center 22px!important;opacity:.2!important;mix-blend-mode:screen!important} #shell .drawergrid button{border:1px solid rgba(191,156,70,.25)!important;background:linear-gradient(165deg,rgba(34,68,60,.96),rgba(22,49,45,.97))!important;border-radius:14px!important;box-shadow:inset 0 1px rgba(255,251,240,.06),0 6px 17px rgba(1,10,8,.14)!important} #shell .drawergrid button::before{background-image:url("../assets/images/image-5b548d6f36.svg")!important;background-size:360px 36px!important;background-position:bottom 3px center!important;background-repeat:repeat-x!important;opacity:.22!important;mix-blend-mode:screen!important} #shell .drawergrid button:hover,#shell .drawergrid button.current{background:linear-gradient(160deg,#355D55,#24463F)!important;border-color:rgba(191,156,70,.55)!important} #shell .drawergrid button strong,#shell .drawergrid button b{color:#FFFBF0!important} #shell .drawergrid span{color:#D2B571!important} #shell .drawerhead h2{color:#E8D6B5!important} #shell .floral-chapter-nav.mx28-floral-nav{background:transparent!important;border:0!important;box-shadow:none!important;display:flex!important;flex-direction:column!important;gap:4px!important;align-items:center;justify-content:center} #shell .mx28-floral-nav .v10-mini-perspective,#shell .mx28-floral-nav .v10-mini-cube{display:none!important} #shell .mx28-nav-flower{display:block;width:clamp(43px,4.7vw,68px);height:clamp(43px,4.7vw,68px);background:url("../assets/images/image-61303a90a2.svg") center/contain no-repeat;filter:drop-shadow(0 4px 10px #030a0868);transition:transform .35s ease} #shell .mx28-floral-nav:hover .mx28-nav-flower{transform:rotate(35deg)} #shell .mx28-floral-nav .v10-mini-label{color:#E8D7B0!important;font-size:12px!important;text-shadow:0 2px 8px #0b1410!important} /* All old cube/9-panel transition visuals are removed, not merely decorated. */ #shell .mx28-floral-assembly{position:absolute;left:50%;top:49%;width:clamp(250px,57vmin,580px);aspect-ratio:1;transform:translate(-50%,-50%);isolation:isolate;opacity:0} #shell .mx28-floral-assembly>div{position:absolute;inset:0;background-repeat:no-repeat;background-position:center;background-size:contain;filter:drop-shadow(0 7px 15px rgba(2,13,10,.24));will-change:transform} #shell .mx28-floral-outer{background-image:url("../assets/images/image-8304d2171b.svg")} #shell .mx28-floral-inner{background-image:url("../assets/images/image-93ca667c4d.svg")} #shell .mx28-floral-core{background-image:url("../assets/images/image-c5d7ae6ec8.svg")} #shell .mx28-cloud-band{position:absolute;inset:auto 0 11%;height:54px;background:url("../assets/images/image-5b548d6f36.svg") center/600px 60px repeat-x;opacity:0} @keyframes mx28Appear{0%{opacity:0;transform:translate(-50%,-50%) scale(.38)}26%{opacity:1}80%{opacity:1}100%{opacity:.85;transform:translate(-50%,-50%) scale(1.06)}} @keyframes mx28Outer{from{transform:rotate(-85deg) scale(.67)}to{transform:rotate(58deg) scale(1)}} @keyframes mx28Inner{from{transform:rotate(96deg) scale(.36)}to{transform:rotate(-52deg) scale(1)}} @keyframes mx28Core{from{transform:rotate(-50deg) scale(.23)}to{transform:rotate(36deg) scale(1)}} @keyframes mx28Wash{from{opacity:0;transform:scale(1.08)}40%{opacity:.7}to{opacity:.22;transform:scale(1)}} @keyframes mx28Cloud{0%{opacity:0;transform:translateY(22px)}36%{opacity:.48}100%{opacity:.25;transform:translateY(0)}} @keyframes mx28Caption{0%,24%{opacity:0;transform:translateY(9px)}48%,80%{opacity:1}100%{opacity:.6;transform:translateY(0)}} /* Motion modes: never use three-dimensional cube/panel subdivision. */ #shell .mx28-cloud .mx28-floral-assembly{width:clamp(220px,48vmin,500px)} #shell .mx28-cloud .mx28-cloud-band{inset:auto 0 26%;transform:rotate(-3deg)} #shell .mx28-baoxiang .mx28-floral-assembly{width:clamp(260px,63vmin,640px)} html[data-device="phone"][data-layout="portrait"] #shell .mx28-floral-assembly{width:min(89vw,440px);top:46%} html[data-device="phone"][data-layout="portrait"] #shell .drawer{background:linear-gradient(180deg,#F7F0DF,#E9DCC2)!important;color:#253E39!important} html[data-device="phone"][data-layout="portrait"] #shell .drawer h2{color:#253E39!important} html[data-device="phone"][data-layout="portrait"] #shell .drawergrid button{background:linear-gradient(180deg,#FFFDF7,#EFE3CA)!important;color:#253E39!important} html[data-device="phone"][data-layout="portrait"] #shell .drawergrid button strong,html[data-device="phone"][data-layout="portrait"] #shell .drawergrid button b{color:#253E39!important} html[data-device="phone"][data-layout="portrait"] #shell .drawergrid span{color:#966B35!important} html[data-device="phone"][data-layout="portrait"] #shell .drawer::before{background-position:right -125px bottom -115px!important;opacity:.15!important;mix-blend-mode:multiply!important} @media(prefers-reduced-motion:reduce){} /* ---- extracted style block boundary ---- */ /* Inline: css/11_V29_宝相花深化与目录实图.css */ /* Dream Brook V29: supplied textile artwork + precision six-layer editable ornament transitions. User-supplied directory artwork is a compositional crop, not a stock image. */ #shell #drawer.drawer{ background:linear-gradient(135deg,#F6F0E2 0%,#EDE1C9 50%,#DBCAA8 100%)!important; color:#253E39!important; } #shell #drawer.drawer::before{ content:""!important;position:absolute!important; inset:4% 0 4% auto!important;width:min(63vw,860px)!important;height:auto!important; background-image:url("../assets/images/image-1ee5971b66.jpg")!important; background-repeat:no-repeat!important;background-size:contain!important;background-position:right center!important; opacity:.51!important;mix-blend-mode:multiply!important; mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.85) 24%,#000 50%)!important; pointer-events:none!important;filter:saturate(.78) contrast(1.02)!important; } #shell #drawer.drawer::after{ content:""!important;position:absolute!important;inset:14px!important;width:auto!important;height:auto!important; border:1px solid rgba(141,104,54,.22)!important;box-shadow:inset 0 0 0 2px rgba(255,251,240,.38)!important; pointer-events:none!important;background:none!important; } #shell #drawer.drawer .drawerhead,#shell #drawer.drawer .drawergrid{position:relative;z-index:2} #shell #drawer.drawer .drawerhead h2{color:#25443d!important;text-shadow:none!important} #shell #drawer.drawer .drawerhead{border-color:rgba(135,95,51,.24)!important} #shell #drawer.drawer .drawerhead::before,#shell #drawer.drawer .drawerhead::after{ background-image:url("../assets/images/image-289e2aeb8a.svg")!important;opacity:.55!important; } #shell #drawer.drawer .drawergrid button{ background:linear-gradient(145deg,rgba(255,252,245,.91),rgba(244,235,213,.84))!important; color:#253E39!important;border:1px solid rgba(142,104,55,.2)!important; box-shadow:0 12px 21px rgba(73,57,30,.09),inset 0 1px rgba(255,255,255,.62)!important; backdrop-filter:blur(8px); } #shell #drawer.drawer .drawergrid button:hover,#shell #drawer.drawer .drawergrid button.current{ background:linear-gradient(160deg,rgba(225,237,223,.98),rgba(240,225,196,.96))!important; border-color:rgba(133,91,36,.58)!important; } #shell #drawer.drawer .drawergrid button::before{background-image:url("../assets/images/image-5b548d6f36.svg")!important;opacity:.24!important;mix-blend-mode:multiply!important} #shell #drawer.drawer .drawergrid button::after{opacity:.4!important} #shell #drawer.drawer .drawergrid button strong,#shell #drawer.drawer .drawergrid button b, #shell #drawer.drawer .drawergrid button{color:#254139!important;text-shadow:none!important} #shell #drawer.drawer .drawergrid span{color:#805c34!important} #shell #drawer.drawer #closemap{color:#254139!important;border-color:#B69762!important;background:rgba(255,251,240,.55)!important} #shell .mx28-nav-flower{background-image:url("../assets/images/image-a442b7ac66.svg")!important} /* No cube / nine-slice effect. Multi-axis ornament composition. */ #shell .mx29-transition{position:absolute;inset:0;z-index:181;pointer-events:none;overflow:hidden;isolation:isolate; --mx29-bg1:#3E6862;--mx29-bg2:#214039;--mx29-bg3:#142925;--mx29-frame:rgba(230,202,135,.38);--mx29-frame2:rgba(244,230,194,.15);--mx29-caption:#EEDBB2;--mx29-rule:#E3C388;--mx29-shadow:#0A1A15;--mx29-grainGlow:rgba(221,190,126,.18);--mx29-flower-filter:saturate(1.02);--mx29-cloud-opacity:.28;--mx29-silk1:rgba(246,233,201,.82);--mx29-silk2:rgba(221,200,154,.53);--mx29-silk-line:rgba(206,168,103,.9); background:radial-gradient(circle at 50% 45%,var(--mx29-bg1) 0%,var(--mx29-bg2) 50%,var(--mx29-bg3) 100%); opacity:1;transition:opacity 230ms ease;will-change:opacity} #shell .mx29-transition.done{opacity:0} #shell .mx29-transition::before,#shell .mx29-transition::after{content:"";position:absolute;pointer-events:none;inset:16px;border:1px solid var(--mx29-frame);z-index:5} #shell .mx29-transition::after{inset:27px;border-color:var(--mx29-frame2)} #shell .mx29-transition-grain{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 13px,rgba(245,226,180,.017) 13px 14px),radial-gradient(ellipse at center,var(--mx29-grainGlow),transparent 65%);opacity:.7} #shell .mx29-flower{position:absolute;left:50%;top:47%;width:clamp(280px,73vmin,700px);aspect-ratio:1;transform:translate(-50%,-50%);opacity:0;isolation:isolate;will-change:transform,opacity;filter:var(--mx29-flower-filter)} #shell .mx29-ring{position:absolute;inset:0;background-position:center;background-repeat:no-repeat;background-size:contain;filter:drop-shadow(0 2px 5px rgba(10,20,16,.16));will-change:transform,opacity} #shell .mx29-ring-1{background-image:url("../assets/images/image-030e7d837e.svg")} #shell .mx29-ring-2{background-image:url("../assets/images/image-a442b7ac66.svg")} #shell .mx29-ring-3{background-image:url("../assets/images/image-028ef92a5c.svg")} #shell .mx29-ring-4{background-image:url("../assets/images/image-fd423479b4.svg")} #shell .mx29-ring-5{background-image:url("../assets/images/image-6b3e77207c.svg")} #shell .mx29-ring-6{background-image:url("../assets/images/image-289e2aeb8a.svg")} #shell .mx29-transition.play .mx29-flower{animation:mx29Stage 1.45s cubic-bezier(.24,.77,.18,1) both} #shell .mx29-transition.play .mx29-ring{animation:mx29Petal .99s cubic-bezier(.16,.76,.24,1) both;animation-delay:calc(var(--mx-ring)*65ms)} #shell .mx29-transition.play .mx29-ring:nth-child(even){animation-name:mx29PetalReverse} #shell .mx29-halo-dot{position:absolute;inset:11%;border-radius:50%;border:1px solid rgba(247,226,174,.21);box-shadow:0 0 0 14px rgba(227,187,109,.018),0 0 50px rgba(226,183,94,.09);opacity:0} #shell .mx29-transition.play .mx29-halo-dot{animation:mx29Halo 1.22s ease both} #shell .mx29-cloud{position:absolute;left:-20%;right:-20%;height:50px;pointer-events:none;opacity:0;background:url("../assets/images/image-5b548d6f36.svg") center/690px 68px repeat-x;filter:drop-shadow(0 4px 6px rgba(5,15,12,.18));mix-blend-mode:screen} #shell .mx29-cloud-a{top:25%}#shell .mx29-cloud-b{bottom:23%;transform:scaleX(-1)} #shell .mx29-transition.play .mx29-cloud-a{animation:mx29CloudA 1.32s ease-out both} #shell .mx29-transition.play .mx29-cloud-b{animation:mx29CloudB 1.32s ease-out both} #shell .mx29-transition-caption{position:absolute;z-index:5;left:3%;right:3%;bottom:7.5%;text-align:center; font-size:clamp(15px,1.55vw,22px);font-weight:500;letter-spacing:.24em;color:var(--mx29-caption);text-shadow:0 4px 18px var(--mx29-shadow);opacity:0} #shell .mx29-transition.play .mx29-transition-caption{animation:mx29Title 1.44s ease both} #shell .mx29-transition-rule{position:absolute;left:18%;right:18%;bottom:16%;height:1px;opacity:.38;background:linear-gradient(90deg,transparent,var(--mx29-rule),transparent)} #shell .mx29-silk-sheet{position:absolute;top:-2%;bottom:-2%;width:52%;z-index:2;opacity:0;pointer-events:none; background:linear-gradient(115deg,var(--mx29-silk1),var(--mx29-silk2),rgba(246,233,201,.76)), repeating-linear-gradient(90deg,transparent 0 3px,rgba(74,57,32,.04) 3px 4px)} #shell .mx29-silk-a{left:-52%;border-right:2px solid var(--mx29-silk-line)} #shell .mx29-silk-b{right:-52%;border-left:2px solid var(--mx29-silk-line)} @keyframes mx29Stage{0%{opacity:0;transform:translate(-50%,-50%) scale(.38)}23%{opacity:1}76%{opacity:1}100%{opacity:.86;transform:translate(-50%,-50%) scale(1)}} @keyframes mx29Petal{0%{transform:rotate(-95deg) scale(.54);opacity:0}47%{opacity:1}100%{transform:rotate(40deg) scale(1);opacity:1}} @keyframes mx29PetalReverse{0%{transform:rotate(85deg) scale(.58);opacity:0}50%{opacity:1}100%{transform:rotate(-32deg) scale(1);opacity:1}} @keyframes mx29Halo{0%,25%{opacity:0;transform:scale(.7)}65%{opacity:.7}100%{opacity:.55;transform:scale(1.04)}} @keyframes mx29Title{0%,30%{opacity:0;transform:translateY(13px)}60%,85%{opacity:1;transform:none}100%{opacity:.78}} @keyframes mx29CloudA{0%{opacity:0;transform:translateX(-18%)}45%{opacity:.5}100%{opacity:.27;transform:translateX(0)}} @keyframes mx29CloudB{0%{opacity:0;transform:translateX(18%) scaleX(-1)}45%{opacity:.4}100%{opacity:.24;transform:scaleX(-1)}} /* Four distinct movement compositions rather than one repeated spin. */ /* Unfold: concentric blossoms open in three waves */ #shell .mx29-unfold .mx29-flower{width:clamp(300px,77vmin,740px)} #shell .mx29-unfold.play .mx29-ring-5,#shell .mx29-unfold.play .mx29-ring-6{animation-delay:410ms} #shell .mx29-unfold.play .mx29-ring-2,#shell .mx29-unfold.play .mx29-ring-3{animation-delay:135ms} /* Orbit: concentric jewelry-like rings spin in alternating directions. */ #shell .mx29-orbit.play .mx29-ring-1,#shell .mx29-orbit.play .mx29-ring-3{animation:mx29OrbitCW 1.31s cubic-bezier(.23,.78,.14,1) both} #shell .mx29-orbit.play .mx29-ring-2,#shell .mx29-orbit.play .mx29-ring-4{animation:mx29OrbitCCW 1.31s cubic-bezier(.23,.78,.14,1) both} #shell .mx29-orbit.play .mx29-ring-5,#shell .mx29-orbit.play .mx29-ring-6{animation:mx29LotusReveal 1.17s cubic-bezier(.23,.78,.14,1) both;animation-delay:220ms} @keyframes mx29OrbitCW{from{transform:rotate(-160deg) scale(.66);opacity:0}35%{opacity:1}to{transform:rotate(64deg) scale(1);opacity:1}} @keyframes mx29OrbitCCW{from{transform:rotate(152deg) scale(.7);opacity:0}35%{opacity:1}to{transform:rotate(-52deg) scale(1);opacity:1}} @keyframes mx29LotusReveal{0%{transform:scale(.05) rotate(-42deg);opacity:0}45%{opacity:1}100%{transform:scale(1) rotate(0);opacity:1}} /* Silk: two-sided split curtains reveal a stationary blooming jewel. */ #shell .mx29-silk{background:#E9D8B5} #shell .mx29-silk .mx29-flower{width:clamp(230px,57vmin,560px);top:46%} #shell .mx29-silk .mx29-silk-a,#shell .mx29-silk .mx29-silk-b{opacity:.92} #shell .mx29-silk.play .mx29-silk-a{animation:mx29CurtainLeft 1.35s cubic-bezier(.44,.01,.16,1) both} #shell .mx29-silk.play .mx29-silk-b{animation:mx29CurtainRight 1.35s cubic-bezier(.44,.01,.16,1) both} #shell .mx29-silk.play .mx29-flower{animation:mx29SilkFlower 1.35s ease both;z-index:3} #shell .mx29-silk .mx29-transition-caption{color:#2F544A;text-shadow:none} @keyframes mx29CurtainLeft{0%{left:0}35%{left:0}100%{left:-52%}} @keyframes mx29CurtainRight{0%{right:0}35%{right:0}100%{right:-52%}} @keyframes mx29SilkFlower{0%,24%{opacity:0;transform:translate(-50%,-50%) scale(.5)}64%{opacity:1}100%{opacity:.94;transform:translate(-50%,-50%) scale(.86)}} /* Cloud: waves cross first; floral center appears from the mist; gold filigree trails late. */ #shell .mx29-cloudflow .mx29-cloud-a,#shell .mx29-cloudflow .mx29-cloud-b{height:84px;background-size:760px 80px} #shell .mx29-cloudflow.play .mx29-cloud-a{animation:mx29CloudLeadA 1.42s cubic-bezier(.19,.79,.25,1) both} #shell .mx29-cloudflow.play .mx29-cloud-b{animation:mx29CloudLeadB 1.42s cubic-bezier(.19,.79,.25,1) both} #shell .mx29-cloudflow.play .mx29-flower{animation:mx29MistFlower 1.43s ease both} #shell .mx29-cloudflow.play .mx29-ring{animation-delay:calc(360ms + var(--mx-ring)*45ms)} @keyframes mx29CloudLeadA{0%{opacity:0;transform:translateX(-35%) translateY(18px)}30%{opacity:.9}80%{opacity:.45}100%{opacity:.22;transform:none}} @keyframes mx29CloudLeadB{0%{opacity:0;transform:translateX(35%) scaleX(-1)}30%{opacity:.8}85%{opacity:.36}100%{opacity:.21;transform:scaleX(-1)}} @keyframes mx29MistFlower{0%,24%{opacity:0;transform:translate(-50%,-50%) scale(.55);filter:blur(8px)}62%{opacity:.97;filter:blur(0)}100%{opacity:.82;transform:translate(-50%,-50%) scale(.98);filter:none}} @media(max-width:800px){ #shell #drawer.drawer::before{left:4%!important;right:4%!important;top:8%!important;bottom:auto!important;width:92%!important;height:47%!important;background-size:contain!important;background-position:center top!important;opacity:.24!important;mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.72) 50%,transparent 100%)!important} #shell #drawer.drawer .drawergrid button{background:rgba(255,251,241,.94)!important} #shell .mx29-transition::before{inset:10px}#shell .mx29-transition::after{inset:19px} #shell .mx29-flower{width:min(94vw,480px);top:44%} #shell .mx29-orbit .mx29-flower,#shell .mx29-unfold .mx29-flower{width:min(95vw,520px)} #shell .mx29-transition-caption{font-size:clamp(15px,4vw,19px);bottom:16%} #shell .mx29-transition-rule{bottom:24%} } @media(orientation:landscape) and (max-height:500px){#shell .mx29-flower{width:min(75vh,400px)}#shell .mx29-transition-caption{bottom:5%;font-size:13px}} @media(prefers-reduced-motion:reduce){#shell .mx29-transition *{animation:none!important}#shell .mx29-transition{transition:none!important}} /* V31 palettes: different flower colors and tonal atmospheres for each chapter transition. */ #shell .mx29-palette-celadon{--mx29-bg1:#7c978d;--mx29-bg2:#385b56;--mx29-bg3:#162a27;--mx29-frame:rgba(225,209,162,.42);--mx29-frame2:rgba(239,232,205,.18);--mx29-caption:#efe3c0;--mx29-rule:#dcc489;--mx29-shadow:#10211d;--mx29-grainGlow:rgba(208,196,146,.2);--mx29-flower-filter:hue-rotate(-12deg) saturate(1.03) brightness(1.02);--mx29-silk1:rgba(233,231,212,.86);--mx29-silk2:rgba(179,191,171,.46);--mx29-silk-line:rgba(172,154,106,.88)} #shell .mx29-palette-coral{--mx29-bg1:#946352;--mx29-bg2:#5f362f;--mx29-bg3:#291917;--mx29-frame:rgba(235,194,150,.42);--mx29-frame2:rgba(250,233,213,.16);--mx29-caption:#f3ddc4;--mx29-rule:#eab17d;--mx29-shadow:#281412;--mx29-grainGlow:rgba(236,171,123,.2);--mx29-flower-filter:hue-rotate(24deg) saturate(1.12) brightness(1.02);--mx29-silk1:rgba(245,223,203,.86);--mx29-silk2:rgba(203,146,124,.38);--mx29-silk-line:rgba(214,147,98,.88)} #shell .mx29-palette-lapis{--mx29-bg1:#50769a;--mx29-bg2:#233e62;--mx29-bg3:#111f38;--mx29-frame:rgba(217,210,182,.4);--mx29-frame2:rgba(240,236,224,.18);--mx29-caption:#ecf0e8;--mx29-rule:#d8c894;--mx29-shadow:#0f1624;--mx29-grainGlow:rgba(185,196,213,.18);--mx29-flower-filter:hue-rotate(-44deg) saturate(1.1) brightness(1.04);--mx29-silk1:rgba(229,232,236,.86);--mx29-silk2:rgba(133,156,186,.45);--mx29-silk-line:rgba(191,177,134,.84)} #shell .mx29-palette-gold{--mx29-bg1:#b48a34;--mx29-bg2:#744c18;--mx29-bg3:#39200c;--mx29-frame:rgba(247,218,137,.46);--mx29-frame2:rgba(253,235,188,.19);--mx29-caption:#f9ebc0;--mx29-rule:#f2cb6d;--mx29-shadow:#30180b;--mx29-grainGlow:rgba(247,205,109,.22);--mx29-flower-filter:hue-rotate(74deg) saturate(1.15) brightness(1.03);--mx29-silk1:rgba(247,231,189,.88);--mx29-silk2:rgba(222,182,92,.42);--mx29-silk-line:rgba(240,186,69,.9)} #shell .mx29-palette-turquoise{--mx29-bg1:#5d8d8d;--mx29-bg2:#244a4f;--mx29-bg3:#102528;--mx29-frame:rgba(214,209,177,.42);--mx29-frame2:rgba(236,236,221,.17);--mx29-caption:#edf0e2;--mx29-rule:#c7d3ab;--mx29-shadow:#0c1818;--mx29-grainGlow:rgba(160,209,203,.18);--mx29-flower-filter:hue-rotate(-76deg) saturate(1.18) brightness(1.06);--mx29-silk1:rgba(226,236,230,.86);--mx29-silk2:rgba(132,181,174,.42);--mx29-silk-line:rgba(178,191,141,.84)} #shell .mx29-palette-rose{--mx29-bg1:#8c6e7e;--mx29-bg2:#523446;--mx29-bg3:#26151f;--mx29-frame:rgba(226,191,181,.39);--mx29-frame2:rgba(247,223,216,.16);--mx29-caption:#f1ddd3;--mx29-rule:#d6b8ad;--mx29-shadow:#1c1115;--mx29-grainGlow:rgba(214,170,175,.18);--mx29-flower-filter:hue-rotate(138deg) saturate(1.02) brightness(1.02);--mx29-silk1:rgba(241,225,220,.84);--mx29-silk2:rgba(177,136,152,.4);--mx29-silk-line:rgba(198,151,157,.84)} /* V31 motion systems: each chapter uses a distinct motion logic rather than one repeated rotation. */ #shell .mx29-pinwheel .mx29-flower{width:clamp(290px,74vmin,710px)} #shell .mx29-pinwheel.play .mx29-flower{animation:mx29PinwheelStage 1.46s cubic-bezier(.18,.79,.18,1) both} #shell .mx29-pinwheel.play .mx29-ring-1,#shell .mx29-pinwheel.play .mx29-ring-4{animation:mx29PinwheelA 1.2s cubic-bezier(.2,.82,.19,1) both} #shell .mx29-pinwheel.play .mx29-ring-2,#shell .mx29-pinwheel.play .mx29-ring-5{animation:mx29PinwheelB 1.2s cubic-bezier(.2,.82,.19,1) both;animation-delay:85ms} #shell .mx29-pinwheel.play .mx29-ring-3,#shell .mx29-pinwheel.play .mx29-ring-6{animation:mx29PinwheelC 1.2s cubic-bezier(.2,.82,.19,1) both;animation-delay:170ms} @keyframes mx29PinwheelStage{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-22deg)}34%{opacity:1}100%{opacity:.88;transform:translate(-50%,-50%) scale(1) rotate(0)}} @keyframes mx29PinwheelA{0%{transform:translate(-12%,10%) rotate(-240deg) scale(.2);opacity:0}40%{opacity:1}100%{transform:none;opacity:1}} @keyframes mx29PinwheelB{0%{transform:translate(14%,-12%) rotate(220deg) scale(.22);opacity:0}42%{opacity:1}100%{transform:none;opacity:1}} @keyframes mx29PinwheelC{0%{transform:translate(-4%,15%) rotate(-160deg) scale(.15);opacity:0}46%{opacity:1}100%{transform:none;opacity:1}} #shell .mx29-pulse .mx29-flower{width:clamp(250px,66vmin,620px)} #shell .mx29-pulse.play .mx29-flower{animation:mx29PulseStage 1.46s ease both} #shell .mx29-pulse.play .mx29-ring-1{animation:mx29PulseOut 1.24s cubic-bezier(.26,.73,.18,1) both} #shell .mx29-pulse.play .mx29-ring-2{animation:mx29PulseIn 1.26s cubic-bezier(.26,.73,.18,1) both;animation-delay:70ms} #shell .mx29-pulse.play .mx29-ring-3{animation:mx29PulseOut 1.2s cubic-bezier(.26,.73,.18,1) both;animation-delay:140ms} #shell .mx29-pulse.play .mx29-ring-4{animation:mx29PulseIn 1.18s cubic-bezier(.26,.73,.18,1) both;animation-delay:210ms} #shell .mx29-pulse.play .mx29-ring-5{animation:mx29PulseCore 1.1s cubic-bezier(.26,.73,.18,1) both;animation-delay:290ms} #shell .mx29-pulse.play .mx29-ring-6{animation:mx29PulseCore 1.05s cubic-bezier(.26,.73,.18,1) both;animation-delay:350ms} @keyframes mx29PulseStage{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}36%{opacity:1}100%{opacity:.87;transform:translate(-50%,-50%) scale(1)}} @keyframes mx29PulseOut{0%{transform:scale(.16);opacity:0}55%{opacity:1}100%{transform:scale(1.05);opacity:1}} @keyframes mx29PulseIn{0%{transform:scale(1.45);opacity:0}45%{opacity:1}100%{transform:scale(1);opacity:1}} @keyframes mx29PulseCore{0%{transform:scale(.02) rotate(-70deg);opacity:0}58%{opacity:1}100%{transform:scale(1) rotate(0);opacity:1}} /* ---- extracted style block boundary ---- */ /* Inline: css/12_展陈排版与交互精修.css */ /* V30 · Exhibition typography and interaction finishing rules. Layout rules are scoped by format to preserve all chapter content. */ :root{ --m30-ink:#253d36; --m30-paper:#f7f0df; --m30-silk:#eee0c5; --m30-moss:#3f503b; --m30-jade:#007175; --m30-gold:#bf9c46; --m30-cinnabar:#9d2933; --m30-safe-bottom:env(safe-area-inset-bottom,0px); } /* Exhibition labels are part of the authoring tools, not the viewed exhibit. */ #shell .blender-model-badge, #shell .blender-model-status, #shell .v10-model-caption, #shell .model-callout{display:none!important} /* Decorative layers never receive focus or cover interactive exhibit controls. */ #shell .scene::before,#shell .scene::after,#shell .scene .copy::before, #shell .mx29-transition-grain,#shell .mx29-halo-dot{pointer-events:none!important} #shell button,#shell input[type="range"]{touch-action:manipulation} #shell button:focus-visible,#shell [tabindex]:focus-visible{ outline:2px solid var(--m30-gold);outline-offset:3px; } #shell .copy h1,#shell .copy h1 em,#shell .copy p, #shell .copy .learning,#shell .footnote{overflow-wrap:anywhere;word-break:normal} #shell .copy h1{letter-spacing:.055em;line-height:1.19} #shell .copy p{line-height:1.78} #shell .copy .learning{line-height:1.65} /* Readable contrast without rectangular cards over photographic scenes. */ @media(min-width:1000px) and (min-height:600px){ #shell #stage .scene:not([data-id="15"]):not([data-id="16"]) .copy{ z-index:4;max-width:min(43vw,620px);min-width:0; text-wrap:pretty; } #shell #stage .scene:not([data-id="15"]):not([data-id="16"]) .visual{ min-width:0;max-width:100%;overflow:visible; } #shell .scene .copy h1{font-size:clamp(34px,3.35vw,64px)} #shell .scene .copy p{font-size:clamp(15px,1.18vw,20px)} #shell .scene .copy .learning{font-size:clamp(13px,1vw,17px)} } /* Compass: the physical exhibit and the explanatory text use separate planes. */ #shell .suspension-hero{isolation:isolate} #shell .suspension-hero .suspension-model, #shell .suspension-hero model-viewer{z-index:2;touch-action:pan-y;} #shell .suspension-stage .suspension-side{position:relative;z-index:3} #shell .suspension-stage .controlpanel{position:relative;z-index:4} #shell .suspension-side .principle-card{ display:flex;align-items:flex-start;gap:10px;min-width:0; } #shell .suspension-side .principle-copy{flex:1;min-width:0;overflow-wrap:anywhere} #shell .suspension-side .principle-copy span{line-height:1.58} #shell .suspension-stage input[type="range"]{accent-color:var(--m30-jade)} /* Buttons use one quiet cloud detail instead of layered decorative effects. */ #shell .controlpanel button,#shell .suspension-side button, #shell .scene-actions button,#shell .mx20-action button{ min-height:36px;white-space:normal;text-align:center; } #shell .controlpanel button::before,#shell .scene-actions button::before{ opacity:.26!important; } /* The directory artwork is the visual subject, text stays on readable paper. */ #shell #drawer.drawer{isolation:isolate} #shell #drawer.drawer::before{z-index:0!important;pointer-events:none!important} #shell #drawer.drawer .drawerhead, #shell #drawer.drawer .drawergrid, #shell #drawer.drawer .sources{position:relative;z-index:2} #shell #drawer.drawer .drawergrid button{ min-width:0;overflow:hidden; transition:background-color .2s,border-color .2s,transform .2s; } #shell #drawer.drawer .drawergrid button:focus-visible{ outline:2px solid #9c7546;outline-offset:2px; } #shell #drawer.drawer .drawergrid button strong{line-height:1.45;overflow-wrap:anywhere} /* Keep the floral transition quietly centered; no 3D cube or screen slicing. */ #shell .mx29-transition{contain:layout style paint} #shell .mx29-flower{max-width:calc(100vw - 26px);max-height:calc(100dvh - 135px)} #shell .mx29-transition-caption{max-width:min(92vw,900px);margin:auto;line-height:1.5} @media(prefers-reduced-motion:reduce){ #shell .mx29-transition{transition:none!important} #shell .mx29-transition .mx29-ring, #shell .mx29-transition .mx29-flower, #shell .mx29-transition .mx29-cloud{animation:none!important} } /* Phone portrait: a reading edition, not a scaled-down desktop canvas. */ @media(orientation:portrait) and (max-width:799px){ html,body{width:100%;overflow-x:hidden} #shell .brand{z-index:46;max-width:calc(100vw - 24px)} #shell .brand .shoujin-title{letter-spacing:.12em;white-space:normal} #shell .bottomnav{z-index:50;min-height:72px;padding-bottom:max(8px,var(--m30-safe-bottom))} #shell #stage .scene[data-form]:not([data-id="15"]):not([data-id="16"]){ width:100%!important;max-width:100%!important;min-width:0!important; padding-left:clamp(16px,5vw,26px)!important; padding-right:clamp(16px,5vw,26px)!important; padding-bottom:calc(104px + var(--m30-safe-bottom))!important; align-content:start!important; row-gap:18px!important; overflow:visible!important; } #shell #stage .scene[data-form]>.copy{ width:100%!important;max-width:100%!important;min-width:0!important; flex:none!important; height:auto!important;max-height:none!important; margin:0!important; overflow:visible!important; position:relative!important; transform:none!important; } #shell #stage .scene[data-form]>.visual{ width:100%!important;max-width:100%!important;min-width:0!important; flex:none!important; height:auto!important; position:relative!important; transform:none!important; margin:0!important; } #shell #stage .scene[data-form] .copy h1{ font-size:clamp(27px,8vw,39px)!important;line-height:1.22!important; max-width:100%;margin:10px 0 12px!important; } #shell #stage .scene[data-form] .copy h1 em{ display:block;font-size:clamp(14px,3.8vw,18px)!important; margin-top:9px!important;line-height:1.5!important; } #shell #stage .scene[data-form] .copy p{ font-size:clamp(15px,4.25vw,17px)!important; line-height:1.78!important;letter-spacing:.012em; margin:10px 0 16px!important; } #shell #stage .scene[data-form] .copy .learning, #shell #stage .scene[data-form] .copy .footnote{ font-size:clamp(13px,3.75vw,15px)!important;line-height:1.68!important; } #shell #stage .scene[data-form] .copy .learning{display:flex!important;flex-wrap:wrap;gap:9px!important} #shell #stage .scene[data-form] .copy .learning>*{min-width:0} /* Model first for the suspension-compass chapters, narrative afterwards. */ #shell #stage .scene[data-id="9"], #shell #stage .scene[data-id="10"]{ display:flex!important;flex-direction:column!important; gap:16px!important;align-items:stretch!important; } #shell #stage .scene[data-id="9"]>.visual, #shell #stage .scene[data-id="10"]>.visual{order:0!important} #shell #stage .scene[data-id="9"]>.copy, #shell #stage .scene[data-id="10"]>.copy{order:1!important} #shell .suspension-stage{ width:100%!important;min-width:0!important; display:flex!important;flex-direction:column!important;gap:14px!important; height:auto!important;min-height:0!important; } #shell .suspension-stage .suspension-hero{ width:100%!important;height:clamp(300px,46dvh,410px)!important; min-height:300px!important;max-height:410px!important; padding:0!important;overflow:hidden!important; } #shell .suspension-stage .suspension-model{ width:96%!important;height:88%!important; left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important; } #shell .suspension-stage .suspension-side{ width:100%!important;max-width:none!important; padding:16px!important;position:relative!important; overflow:visible!important; } #shell .suspension-stage .suspension-side h3{font-size:20px!important;line-height:1.35} #shell .suspension-stage .principle-card{min-width:0;gap:9px!important} #shell .suspension-stage .principle-copy b{font-size:15px!important} #shell .suspension-stage .principle-copy span{font-size:13px!important;line-height:1.55!important} #shell .suspension-stage #interaction.controlpanel{ display:flex!important;flex-direction:column!important;align-items:stretch!important; gap:11px!important;width:100%!important;max-width:100%!important; min-width:0!important;height:auto!important;padding:16px!important; overflow:visible!important; } #shell .suspension-stage #interaction.controlpanel label, #shell .suspension-stage #interaction.controlpanel output{ display:block!important;width:100%!important;max-width:100%!important; line-height:1.6!important;font-size:14px!important;white-space:normal!important; } #shell .suspension-stage #interaction.controlpanel input[type=range]{ display:block!important;width:100%!important;height:24px!important; margin:0!important;align-self:stretch!important; } #shell .suspension-stage #interaction.controlpanel .stepper, #shell .suspension-stage #interaction.controlpanel .v10-compass-extra{ display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:9px!important;width:100%!important; } #shell .suspension-stage #interaction.controlpanel button{ min-width:0!important;min-height:44px!important;padding:9px 6px!important; font-size:13px!important;line-height:1.35!important; } /* Existing fullscreen process exhibits keep their own composition. */ #shell #stage .scene[data-id="15"], #shell #stage .scene[data-id="16"]{padding:0!important} #shell .mx20-immersive .mx20-heading{max-width:90%!important} #shell #drawer.drawer::before{ left:3%!important;right:3%!important;width:94%!important; opacity:.27!important;pointer-events:none!important; } #shell #drawer.drawer .drawergrid button{min-height:80px!important} #shell .mx29-flower{width:min(91vw,510px)!important;max-height:calc(100dvh - 120px)} #shell .mx29-transition-caption{bottom:max(12%,calc(75px + var(--m30-safe-bottom)))!important} } @media(orientation:landscape) and (max-height:530px){ #shell .bottomnav{min-height:48px} #shell .mx29-flower{max-width:74vh;max-height:76vh} #shell .mx29-transition-caption{bottom:5%;font-size:13px} } /* ---- extracted style block boundary ---- */ /* Inline: css/13_运河之闸_电脑版标注修复.css */ /* Canal-lock exhibit: one annotation system, clearly separated from stage controls. Scope is limited to scene 15 / data-id 14. */ @media (min-width: 901px){ #shell #stage .scene[data-id="14"] .canal-picture .canal-tag{ top:13px; padding:7px 10px; max-width:31%; box-sizing:border-box; border:1px solid rgba(237,207,154,.6); background:rgba(27,32,27,.86); color:#f5e7c8; font-size:clamp(10px,.82vw,12px); line-height:1.45; letter-spacing:.05em; white-space:normal; text-align:center; text-shadow:0 1px 3px rgba(0,0,0,.42); pointer-events:none; } #shell #stage .scene[data-id="14"] .canal-tag.up{left:14px} #shell #stage .scene[data-id="14"] .canal-tag.mid{left:50%;transform:translateX(-50%)} #shell #stage .scene[data-id="14"] .canal-tag.down{right:14px} #shell #stage .scene[data-id="14"] .canal-control{padding:9px 13px 11px} #shell #stage .scene[data-id="14"] .canal-current{ display:grid; grid-template-columns:max-content minmax(0,1fr) max-content; grid-template-rows:auto auto; gap:4px 11px; min-height:0; align-items:center; margin-bottom:9px; } #shell #stage .scene[data-id="14"] .canal-current .stepno{grid-column:1;grid-row:1;align-self:center} #shell #stage .scene[data-id="14"] .canal-current strong{ grid-column:2;grid-row:1; font-size:14px;line-height:1.4; white-space:normal;min-width:0; } #shell #stage .scene[data-id="14"] .canal-current .canal-level{ grid-column:3;grid-row:1; margin-left:0; font-size:11px; line-height:1.45; padding:4px 7px; } #shell #stage .scene[data-id="14"] .canal-current #canalStepCopy{ grid-column:1/-1;grid-row:2; font-size:12px;line-height:1.5; overflow:visible;text-overflow:clip;white-space:normal; color:#d4c5a8; overflow-wrap:anywhere; } #shell #stage .scene[data-id="14"] .canal-steps{gap:7px} #shell #stage .scene[data-id="14"] .canal-step{min-height:34px;padding:7px 9px;gap:8px} #shell #stage .scene[data-id="14"] .canal-step span{ font-size:11px;line-height:1.35; overflow:visible;text-overflow:clip;white-space:normal; } #shell #stage .scene[data-id="14"] .canal-actions{gap:7px;margin-top:9px} #shell #stage .scene[data-id="14"] .canal-actions button{min-height:30px;font-size:11px} #shell #stage .scene[data-id="14"] .canal-seek{min-width:54px} } /* Low- and medium-height desktop screens previously squeezed the picture to ~100–200px. */ @media (min-width:901px) and (max-width:1365px) and (min-height:650px){ html[data-device="desktop"][data-layout="landscape"] body #shell #stage .scene[data-id="14"][data-form]{ height:clamp(460px,65dvh,525px)!important; min-height:460px!important; } html[data-device="desktop"][data-layout="landscape"] body #shell #stage .scene[data-id="14"][data-form] .visual{ height:100%!important; min-height:0!important; } } /* ---- extracted style block boundary ---- */ /* V33: eight individually art-directed transitions. Existing V31 content and exhibit styles remain untouched. */ #shell .mx29-transition{perspective:1200px} #shell .mx29-transition-lace{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.16;background:radial-gradient(circle at 50% 50%,rgba(248,227,181,.10) 0 1px,transparent 1.4px) center/24px 24px;mix-blend-mode:screen} #shell .mx29-transition .mx29-flower{z-index:3;transform-style:preserve-3d} #shell .mx29-transition .mx29-ring{backface-visibility:visible;transform-origin:50% 50%} #shell .mx29-transition-caption{z-index:10} /* 1. 百瓣开合：外层先开、主瓣跟进、花心最后落位。 */ #shell .mx29-unfold.play .mx29-flower{animation:mx33FlowerBloom 1.5s cubic-bezier(.17,.82,.18,1) both} #shell .mx29-unfold.play .mx29-ring-1{animation:mx33RingBloom 1.15s cubic-bezier(.17,.82,.18,1) both} #shell .mx29-unfold.play .mx29-ring-2,#shell .mx29-unfold.play .mx29-ring-3{animation:mx33PetalBloom 1.18s cubic-bezier(.2,.85,.16,1) both;animation-delay:120ms} #shell .mx29-unfold.play .mx29-ring-4,#shell .mx29-unfold.play .mx29-ring-5{animation:mx33PetalBloom 1.12s cubic-bezier(.2,.85,.16,1) both;animation-delay:260ms} #shell .mx29-unfold.play .mx29-ring-6,#shell .mx29-unfold.play .mx29-ring-7{animation:mx33CoreBloom 1.06s cubic-bezier(.2,.85,.16,1) both;animation-delay:390ms} #shell .mx29-unfold.play .mx29-ring-8{animation:mx33CoreBloom 1.02s cubic-bezier(.2,.85,.16,1) both;animation-delay:500ms} @keyframes mx33FlowerBloom{0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(-14deg)}32%{opacity:1}74%{transform:translate(-50%,-50%) scale(1.04) rotate(2deg)}100%{opacity:.94;transform:translate(-50%,-50%) scale(1) rotate(0)}} @keyframes mx33RingBloom{0%{opacity:0;transform:rotate(-120deg) scale(.48)}54%{opacity:1}100%{opacity:1;transform:rotate(0) scale(1)}} @keyframes mx33PetalBloom{0%{opacity:0;transform:rotate(30deg) scale(.42,.18)}62%{opacity:1;transform:rotate(-4deg) scale(1.04,1.03)}100%{opacity:1;transform:rotate(0) scale(1)}} @keyframes mx33CoreBloom{0%{opacity:0;transform:scale(.08) rotate(68deg)}70%{opacity:1;transform:scale(1.08) rotate(-4deg)}100%{opacity:1;transform:scale(1) rotate(0)}} /* 2. 双心错旋：内外花轮反向交旋，保留金属器物般的秩序感。 */ #shell .mx29-orbit.play .mx29-ring-1,#shell .mx29-orbit.play .mx29-ring-3,#shell .mx29-orbit.play .mx29-ring-5{animation:mx33OrbitClock 1.36s cubic-bezier(.18,.78,.15,1) both} #shell .mx29-orbit.play .mx29-ring-2,#shell .mx29-orbit.play .mx29-ring-4,#shell .mx29-orbit.play .mx29-ring-6{animation:mx33OrbitCounter 1.36s cubic-bezier(.18,.78,.15,1) both} #shell .mx29-orbit.play .mx29-ring-7,#shell .mx29-orbit.play .mx29-ring-8{animation:mx33OrbitCore 1.12s cubic-bezier(.18,.78,.15,1) both;animation-delay:240ms} @keyframes mx33OrbitClock{0%{opacity:0;transform:rotate(-188deg) scale(.72)}35%{opacity:1}100%{opacity:1;transform:rotate(0) scale(1)}} @keyframes mx33OrbitCounter{0%{opacity:0;transform:rotate(166deg) scale(.7)}35%{opacity:1}100%{opacity:1;transform:rotate(0) scale(1)}} @keyframes mx33OrbitCore{0%{opacity:0;transform:rotate(50deg) scale(.2)}60%{opacity:1}100%{opacity:1;transform:rotate(0) scale(1)}} /* 3. 花窗叠屏：花瓣层沿不同轴翻转，像多重木雕花窗逐层打开。 */ #shell .mx29-screen .mx29-flower{transform-style:preserve-3d} #shell .mx29-screen-lattice{position:absolute;z-index:2;inset:8% 14%;opacity:0;pointer-events:none;border:1px solid rgba(239,208,139,.38);background:repeating-linear-gradient(90deg,transparent 0 8.2%,rgba(239,208,139,.12) 8.25% 8.45%,transparent 8.5% 16.6%),repeating-linear-gradient(0deg,transparent 0 8.2%,rgba(239,208,139,.12) 8.25% 8.45%,transparent 8.5% 16.6%);mask-image:radial-gradient(ellipse at center,#000 10%,transparent 75%)} #shell .mx29-screen.play .mx29-screen-lattice{animation:mx33Lattice 1.35s ease both} #shell .mx29-screen.play .mx29-ring-1,#shell .mx29-screen.play .mx29-ring-3,#shell .mx29-screen.play .mx29-ring-5,#shell .mx29-screen.play .mx29-ring-7{animation:mx33ScreenX 1.24s cubic-bezier(.2,.78,.17,1) both} #shell .mx29-screen.play .mx29-ring-2,#shell .mx29-screen.play .mx29-ring-4,#shell .mx29-screen.play .mx29-ring-6,#shell .mx29-screen.play .mx29-ring-8{animation:mx33ScreenY 1.24s cubic-bezier(.2,.78,.17,1) both;animation-delay:130ms} @keyframes mx33Lattice{0%{opacity:0;transform:scale(.78)}40%{opacity:.65}100%{opacity:.24;transform:scale(1.04)}} @keyframes mx33ScreenX{0%{opacity:0;transform:rotateY(82deg) scale(.76)}58%{opacity:1;transform:rotateY(-8deg) scale(1.02)}100%{opacity:1;transform:rotateY(0) scale(1)}} @keyframes mx33ScreenY{0%{opacity:0;transform:rotateX(-76deg) scale(.72)}58%{opacity:1;transform:rotateX(7deg) scale(1.02)}100%{opacity:1;transform:rotateX(0) scale(1)}} /* 4. 云锦织花：经纬金丝扫过，花纹逐步显影。 */ #shell .mx29-brocade-weave{position:absolute;z-index:2;inset:-10%;opacity:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 17px,rgba(239,204,125,.18) 18px,transparent 19px 34px),repeating-linear-gradient(90deg,transparent 0 17px,rgba(239,204,125,.15) 18px,transparent 19px 34px),radial-gradient(ellipse at center,rgba(226,188,109,.14),transparent 64%);mask-image:radial-gradient(ellipse at center,#000 0 24%,transparent 75%);mix-blend-mode:screen} #shell .mx29-brocade.play .mx29-brocade-weave{animation:mx33Weave 1.55s ease both} #shell .mx29-brocade.play .mx29-ring{animation:mx33BrocadeReveal 1.12s cubic-bezier(.18,.8,.18,1) both;animation-delay:calc(var(--mx-ring)*75ms)} #shell .mx29-brocade .mx29-cloud{height:66px;background-size:780px 76px} #shell .mx29-brocade.play .mx29-cloud-a{animation:mx29CloudA 1.5s ease-out both} #shell .mx29-brocade.play .mx29-cloud-b{animation:mx29CloudB 1.5s ease-out both} @keyframes mx33Weave{0%{opacity:0;transform:translateY(24px) scale(.94)}36%{opacity:.78}100%{opacity:.32;transform:translateY(0) scale(1)}} @keyframes mx33BrocadeReveal{0%{opacity:0;clip-path:inset(0 100% 0 0);transform:scale(.9)}55%{opacity:1}100%{opacity:1;clip-path:inset(0 0 0 0);transform:scale(1)}} /* 5. 莲心水纹：多圈波纹从花心向外扩散，花纹随水波轻轻起伏。 */ #shell .mx29-ripple-stage{position:absolute;z-index:2;left:50%;top:47%;width:min(94vmin,900px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none} #shell .mx29-ripple-stage i{position:absolute;inset:50%;border:1px solid rgba(215,222,184,.62);border-radius:50%;transform:translate(-50%,-50%) scale(.04);box-shadow:0 0 0 8px rgba(204,216,180,.025),inset 0 0 24px rgba(197,221,194,.07);opacity:0} #shell .mx29-ripple-stage i:nth-child(2){border-color:rgba(223,194,126,.62)}#shell .mx29-ripple-stage i:nth-child(3){border-style:dashed;border-color:rgba(205,220,200,.48)}#shell .mx29-ripple-stage i:nth-child(4){border-width:2px;border-color:rgba(224,184,119,.3)} #shell .mx29-ripple.play .mx29-ripple-stage i{animation:mx33Ripple 1.58s cubic-bezier(.14,.7,.19,1) both} #shell .mx29-ripple.play .mx29-ripple-stage i:nth-child(2){animation-delay:160ms}#shell .mx29-ripple.play .mx29-ripple-stage i:nth-child(3){animation-delay:320ms}#shell .mx29-ripple.play .mx29-ripple-stage i:nth-child(4){animation-delay:480ms} #shell .mx29-ripple.play .mx29-flower{animation:mx33RippleFlower 1.45s ease both} @keyframes mx33Ripple{0%{inset:50%;opacity:0;transform:translate(-50%,-50%) scale(.04)}20%{opacity:.65}100%{inset:0;opacity:0;transform:translate(0,0) scale(1)}} @keyframes mx33RippleFlower{0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}42%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}62%{transform:translate(-50%,-50%) scale(.98)}100%{opacity:.94;transform:translate(-50%,-50%) scale(1)}} /* 6. 散花归位：小花瓣沿弧线聚向中心，随后主花落位。 */ #shell .mx29-scatter-petals{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden} #shell .mx29-scatter-petals i{position:absolute;left:50%;top:47%;width:var(--sp);height:calc(var(--sp)*1.75);border-radius:70% 20% 65% 22%;background:linear-gradient(150deg,#f5e6b7 0%,#c89d4b 45%,#9d2933 100%);box-shadow:0 0 9px rgba(235,197,111,.32);opacity:0;transform:translate(var(--sx),var(--sy)) rotate(var(--sr)) scale(.3)} #shell .mx29-scatter.play .mx29-scatter-petals i{animation:mx33Scatter 1.18s cubic-bezier(.2,.75,.16,1) both;animation-delay:var(--sd)} #shell .mx29-scatter.play .mx29-flower{animation:mx33ScatterFlower 1.38s cubic-bezier(.2,.75,.16,1) both;animation-delay:210ms} @keyframes mx33Scatter{0%{opacity:0;transform:translate(var(--sx),var(--sy)) rotate(var(--sr)) scale(.22)}34%{opacity:.95}75%{opacity:.82;transform:translate(0,0) rotate(0) scale(1)}100%{opacity:0;transform:translate(0,0) rotate(0) scale(.1)}} @keyframes mx33ScatterFlower{0%{opacity:0;transform:translate(-50%,-50%) scale(.14) rotate(-16deg)}48%{opacity:1;transform:translate(-50%,-50%) scale(1.04) rotate(3deg)}100%{opacity:.94;transform:translate(-50%,-50%) scale(1) rotate(0)}} /* 7. 描金成形：细金线先勾轮廓，再显出完整花色。 */ #shell .mx29-gold-trace{position:absolute;z-index:2;left:50%;top:47%;width:min(80vmin,780px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;opacity:0;background:repeating-radial-gradient(circle at center,transparent 0 34px,rgba(244,207,129,.56) 35px 36px,transparent 37px 51px),conic-gradient(from 0deg,transparent 0 9%,rgba(248,216,143,.85) 9.4% 9.8%,transparent 10.2% 24%,rgba(248,216,143,.68) 24.4% 24.8%,transparent 25.2% 49%,rgba(248,216,143,.82) 49.4% 49.8%,transparent 50.2% 74%,rgba(248,216,143,.65) 74.4% 74.8%,transparent 75.2%);mask-image:radial-gradient(circle at center,transparent 0 23%,#000 27% 73%,transparent 78%);mix-blend-mode:screen} #shell .mx29-gold-trace i{position:absolute;inset:8%;border:1px solid rgba(240,202,126,.55);border-radius:50%;transform:scale(.72) rotate(-25deg);opacity:0} #shell .mx29-gold-trace i:nth-child(2){inset:17%;border-style:dotted;border-width:2px}#shell .mx29-gold-trace i:nth-child(3){inset:26%;border-style:double;border-width:3px}#shell .mx29-gold-trace b{position:absolute;left:0;right:0;top:50%;height:2px;background:linear-gradient(90deg,transparent,#f6d88e,transparent);box-shadow:0 0 12px #edc878;transform:scaleX(0);transform-origin:left} #shell .mx29-gild.play .mx29-gold-trace{animation:mx33TraceField 1.52s ease both} #shell .mx29-gild.play .mx29-gold-trace i{animation:mx33TraceCircle 1.14s cubic-bezier(.16,.78,.2,1) both;animation-delay:calc(var(--mx-ring)*90ms)} #shell .mx29-gild.play .mx29-gold-trace b{animation:mx33TraceLine .8s ease-out both;animation-delay:180ms} #shell .mx29-gild.play .mx29-ring{animation:mx33GildReveal 1.05s ease both;animation-delay:calc(var(--mx-ring)*65ms)} @keyframes mx33TraceField{0%{opacity:0;transform:translate(-50%,-50%) rotate(-35deg) scale(.82)}35%{opacity:.9}100%{opacity:.38;transform:translate(-50%,-50%) rotate(0) scale(1)}} @keyframes mx33TraceCircle{0%{opacity:0;transform:scale(.45) rotate(-40deg)}55%{opacity:.9}100%{opacity:.34;transform:scale(1) rotate(0)}} @keyframes mx33TraceLine{0%{transform:scaleX(0);opacity:0}40%{opacity:1}100%{transform:scaleX(1);opacity:0}} @keyframes mx33GildReveal{0%{opacity:0;filter:brightness(1.8) saturate(.3);clip-path:inset(100% 0 0 0)}58%{opacity:1}100%{opacity:1;filter:brightness(1) saturate(1);clip-path:inset(0)}} /* 8. 古籍灼变：暗褐纸层由中心不规则蔓延，余烬沿边缘闪现后揭开新页。 */ #shell .mx29-burn-sheet{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 48%,rgba(250,192,95,.58) 0%,rgba(111,51,20,.86) 10%,rgba(41,23,16,.98) 34%,#120f0d 78%),repeating-linear-gradient(96deg,rgba(247,218,163,.04) 0 2px,transparent 2px 7px);clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%)} #shell .mx29-burn-sheet::before{content:"";position:absolute;inset:-3%;background:radial-gradient(ellipse at 50% 48%,transparent 0 16%,rgba(255,197,93,.3) 17%,rgba(64,30,14,.86) 20%,transparent 27%),radial-gradient(ellipse at 44% 45%,rgba(9,9,8,.7),transparent 38%);filter:blur(5px);mix-blend-mode:screen} #shell .mx29-embers{position:absolute;inset:0;z-index:9;pointer-events:none} #shell .mx29-embers i{position:absolute;left:50%;top:48%;width:3px;height:var(--eh);border-radius:50%;background:#ffce73;box-shadow:0 0 8px 2px rgba(255,145,48,.75);opacity:0} #shell .mx29-burn.play .mx29-burn-sheet{animation:mx33BurnSpread 1.22s cubic-bezier(.3,.05,.6,1) both} #shell .mx29-burn.play .mx29-embers i{animation:mx33Ember 1.12s ease-out both;animation-delay:var(--ed)} #shell .mx29-burn.play .mx29-flower{animation:mx33BurnFlower 1.2s ease both} @keyframes mx33BurnSpread{0%{opacity:0;clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%)}16%{opacity:1}100%{opacity:1;clip-path:polygon(0 0,10% 1%,17% 0,27% 4%,39% 0,48% 3%,62% 0,73% 4%,87% 0,100% 0,100% 11%,97% 19%,100% 31%,96% 43%,100% 52%,96% 64%,100% 78%,97% 88%,100% 100%,85% 97%,72% 100%,61% 96%,49% 100%,37% 96%,24% 100%,12% 97%,0 100%,3% 87%,0 74%,4% 61%,0 49%,4% 36%,0 23%,3% 12%)}} @keyframes mx33Ember{0%{opacity:0;transform:translate(0,0) scale(.3)}28%{opacity:1}75%{opacity:.7}100%{opacity:0;transform:translate(var(--ex),var(--ey)) scale(.2)}} @keyframes mx33BurnFlower{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}25%{opacity:1}70%{opacity:.8;transform:translate(-50%,-50%) scale(1.03)}100%{opacity:.25;transform:translate(-50%,-50%) scale(1.08)}} /* Keep the visual grammar distinct: cloud ribbons are reserved for blossom and brocade transitions. */ #shell .mx29-transition-lace{opacity:.11} #shell .mx29-unfold .mx29-transition-lace,#shell .mx29-brocade .mx29-transition-lace{opacity:.29} #shell .mx29-ripple .mx29-transition-lace{opacity:.07} #shell .mx29-burn .mx29-transition-lace{opacity:.025} #shell .mx29-transition:not(.mx29-unfold):not(.mx29-brocade) .mx29-cloud{display:none!important} #shell .mx29-burn::before,#shell .mx29-burn::after{opacity:.15;border-color:rgba(232,141,68,.12)} #shell .mx29-burn .mx29-transition-caption{color:#f0c58b;text-shadow:0 2px 18px #140d08} #shell .mx29-screen .mx29-transition-caption{color:#f2dfb3} #shell .mx29-ripple .mx29-transition-caption{color:#e0ead6} #shell .mx29-gild .mx29-transition-caption{color:#f7e5b6} @media(max-width:680px){ #shell .mx29-ripple-stage{width:112vw;top:45%} #shell .mx29-gold-trace{width:100vw;top:45%} #shell .mx29-screen-lattice{inset:12% 5%} #shell .mx29-scatter-petals i{box-shadow:0 0 5px rgba(235,197,111,.2)} #shell .mx29-transition-lace{opacity:.16;background-size:20px 20px,auto} } @media(prefers-reduced-motion:reduce){#shell .mx29-transition .mx29-ripple-stage,#shell .mx29-transition .mx29-brocade-weave,#shell .mx29-transition .mx29-gold-trace,#shell .mx29-transition .mx29-burn-sheet,#shell .mx29-transition .mx29-scatter-petals{display:none!important}} /* ---- extracted style block boundary ---- */ /* V34 replaced synthetic spoke gradients with curved floral SVG filigree below. */ /* ---- extracted style block boundary ---- */ /* Decorative fix: remove the unintended rectangular frame around the baoxiang flower. Keep the flower layers and transition motion untouched. */ #shell .mx29-transition::before, #shell .mx29-transition::after { content: none !important; display: none !important; border: 0 !important; box-shadow: none !important; } /* ---- extracted style block boundary ---- */ /* V34: replace harsh radial spokes with hand-drawn curved petal filigree. */ #shell .mx29-ring-7{ background-image:url("../assets/images/image-0d55e2a154.svg") !important; background-size:100% 100% !important; background-repeat:no-repeat !important; mask-image:none !important; opacity:.92 !important; mix-blend-mode:screen; } #shell .mx29-ring-8{ background-image:url("../assets/images/image-1d6c40ff63.svg") !important; background-size:100% 100% !important; background-repeat:no-repeat !important; mask-image:none !important; opacity:.99 !important; } #shell .mx29-transition-lace{ background-image: radial-gradient(circle,rgba(248,227,181,.10) 0 1px,transparent 1.4px), url("../assets/images/image-9e3e361e10.svg") center/100% 100%, radial-gradient(ellipse at center,rgba(230,202,135,.07),transparent 64%) !important; background-size:24px 24px,560px 180px,100% 100% !important; background-repeat:repeat,repeat-x,no-repeat !important; opacity:.16 !important; mix-blend-mode:screen; } #shell .mx29-unfold .mx29-transition-lace,#shell .mx29-brocade .mx29-transition-lace{opacity:.22 !important} #shell .mx29-ripple .mx29-transition-lace{opacity:.08 !important} @media(max-width:700px){#shell .mx29-transition-lace{opacity:.10 !important}} /* ---- extracted style block boundary ---- */ /* V35: redesigned 8-layer baoxianghua master; no spoke lines or circular halo. */ #shell .mx29-ring-1{background-image:url("../assets/images/image-42a3565bd6.svg")!important;filter:drop-shadow(0 2px 4px rgba(11,24,21,.14))!important;} #shell .mx29-ring-2{background-image:url("../assets/images/image-03736398e3.svg")!important;filter:drop-shadow(0 2px 4px rgba(11,24,21,.14))!important;} #shell .mx29-ring-3{background-image:url("../assets/images/image-481da98c5e.svg")!important;filter:drop-shadow(0 2px 4px rgba(11,24,21,.14))!important;} #shell .mx29-ring-4{background-image:url("../assets/images/image-2a5965886f.svg")!important;filter:drop-shadow(0 2px 4px rgba(11,24,21,.14))!important;} #shell .mx29-ring-5{background-image:url("../assets/images/image-3609105b77.svg")!important;filter:drop-shadow(0 2px 4px rgba(11,24,21,.14))!important;} #shell .mx29-ring-6{background-image:url("../assets/images/image-63c5ae207c.svg")!important;filter:drop-shadow(0 2px 4px rgba(11,24,21,.14))!important;} #shell .mx29-ring-7{background-image:url("../assets/images/image-5f78f933a5.svg")!important;filter:drop-shadow(0 2px 4px rgba(11,24,21,.14))!important;} #shell .mx29-ring-8{background-image:url("../assets/images/image-04cf21308e.svg")!important;filter:drop-shadow(0 2px 4px rgba(11,24,21,.14))!important;} #shell .mx29-transition-grain{background:radial-gradient(ellipse at center,rgba(221,190,126,.12),transparent 66%)!important;opacity:.38!important;} #shell .mx29-transition-lace{opacity:.055!important;} #shell .mx29-halo-dot{display:none!important;border:0!important;box-shadow:none!important;background:none!important;} #shell .mx29-transition .mx29-flower{filter:saturate(1.05) contrast(1.015)!important;} #shell .mx29-transition .mx29-ring{background-size:contain!important;background-position:center!important;background-repeat:no-repeat!important;} @media (max-width:700px){#shell .mx29-flower{width:min(94vw,520px)!important;top:45%!important;} #shell .mx29-transition-caption{bottom:6.8%!important;letter-spacing:.16em!important;}} /* ---- extracted style block boundary ---- */ /* V36 motion refactor: distinct movement grammar, no sunburst or concentric-ring trace. */ #shell .mx29-transition-grain{background:radial-gradient(ellipse at 50% 48%,rgba(221,190,126,.10),transparent 68%)!important;opacity:.32!important;} #shell .mx29-transition-lace{opacity:.045!important;} #shell .mx29-halo-dot{display:none!important;border:0!important;box-shadow:none!important;} /* 01 百瓣开合 — outer layer, main petals, inner lotus, then core. */ #shell .mx29-unfold.play .mx29-flower{animation:mx36BloomMaster 1.66s cubic-bezier(.18,.8,.18,1) both!important;} #shell .mx29-unfold.play .mx29-ring-1{animation:mx36BloomOuter 1.18s cubic-bezier(.16,.82,.16,1) both!important;} #shell .mx29-unfold.play .mx29-ring-2,#shell .mx29-unfold.play .mx29-ring-3{animation:mx36BloomPetal 1.24s cubic-bezier(.18,.84,.18,1) 90ms both!important;} #shell .mx29-unfold.play .mx29-ring-4,#shell .mx29-unfold.play .mx29-ring-5{animation:mx36BloomPetal 1.18s cubic-bezier(.18,.84,.18,1) 230ms both!important;} #shell .mx29-unfold.play .mx29-ring-6,#shell .mx29-unfold.play .mx29-ring-7{animation:mx36BloomInner 1.08s cubic-bezier(.2,.84,.16,1) 370ms both!important;} #shell .mx29-unfold.play .mx29-ring-8{animation:mx36BloomCore 1s cubic-bezier(.2,.84,.16,1) 510ms both!important;} @keyframes mx36BloomMaster{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-7deg)}18%{opacity:1}56%{transform:translate(-50%,-50%) scale(1.035) rotate(1.5deg)}76%{transform:translate(-50%,-50%) scale(1.015) rotate(-.6deg)}100%{opacity:.96;transform:translate(-50%,-50%) scale(1) rotate(0)}} @keyframes mx36BloomOuter{0%{opacity:0;transform:rotate(-18deg) scale(.52)}48%{opacity:1;transform:rotate(4deg) scale(1.04)}100%{opacity:1;transform:rotate(0) scale(1)}} @keyframes mx36BloomPetal{0%{opacity:0;transform:rotate(12deg) scale(.62,.38)}62%{opacity:1;transform:rotate(-2deg) scale(1.035)}82%{transform:rotate(1deg) scale(.99)}100%{opacity:1;transform:rotate(0) scale(1)}} @keyframes mx36BloomInner{0%{opacity:0;transform:scale(.42) rotate(12deg)}66%{opacity:1;transform:scale(1.06) rotate(-2deg)}100%{opacity:1;transform:scale(1) rotate(0)}} @keyframes mx36BloomCore{0%{opacity:0;transform:scale(.08) rotate(32deg)}68%{opacity:1;transform:scale(1.12) rotate(-3deg)}100%{opacity:1;transform:scale(1) rotate(0)}} /* 02 双心错旋 — counter-rotation between actual petal layers, then a still centre. */ #shell .mx29-orbit.play .mx29-ring-1,#shell .mx29-orbit.play .mx29-ring-3,#shell .mx29-orbit.play .mx29-ring-5{animation:mx36OrbitClock 1.48s cubic-bezier(.2,.72,.16,1) both!important;} #shell .mx29-orbit.play .mx29-ring-2,#shell .mx29-orbit.play .mx29-ring-4,#shell .mx29-orbit.play .mx29-ring-6{animation:mx36OrbitCounter 1.48s cubic-bezier(.2,.72,.16,1) both!important;} #shell .mx29-orbit.play .mx29-ring-7{animation:mx36OrbitInner 1.18s cubic-bezier(.18,.78,.18,1) 160ms both!important;} #shell .mx29-orbit.play .mx29-ring-8{animation:mx36CoreSettle 1.02s cubic-bezier(.18,.78,.18,1) 360ms both!important;} @keyframes mx36OrbitClock{0%{opacity:0;transform:rotate(-112deg) scale(.78)}28%{opacity:1}70%{transform:rotate(10deg) scale(1.025)}100%{opacity:1;transform:rotate(0) scale(1)}} @keyframes mx36OrbitCounter{0%{opacity:0;transform:rotate(96deg) scale(.8)}28%{opacity:1}70%{transform:rotate(-8deg) scale(1.02)}100%{opacity:1;transform:rotate(0) scale(1)}} @keyframes mx36OrbitInner{0%{opacity:0;transform:rotate(22deg) scale(.6)}65%{opacity:1;transform:rotate(-5deg) scale(1.04)}100%{opacity:1;transform:rotate(0) scale(1)}} @keyframes mx36CoreSettle{0%{opacity:0;transform:scale(.42)}65%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}} /* 03 花窗叠屏 — curving carved lattice, alternating X/Y folds rather than a cube. */ #shell .mx29-screen .mx29-flower{perspective:1100px;transform-style:preserve-3d;} #shell .mx29-screen-lattice{border:0!important;background-image:url("../assets/images/image-979ff0aecb.svg")!important;background-size:300px 300px!important;background-position:center!important;mask-image:radial-gradient(ellipse at center,#000 8%,transparent 80%)!important;opacity:0;} #shell .mx29-screen.play .mx29-screen-lattice{animation:mx36LatticeOpen 1.52s cubic-bezier(.18,.76,.18,1) both!important;} #shell .mx29-screen.play .mx29-ring-1,#shell .mx29-screen.play .mx29-ring-3,#shell .mx29-screen.play .mx29-ring-5,#shell .mx29-screen.play .mx29-ring-7{animation:mx36ScreenFoldX 1.42s cubic-bezier(.2,.78,.17,1) both!important;} #shell .mx29-screen.play .mx29-ring-2,#shell .mx29-screen.play .mx29-ring-4,#shell .mx29-screen.play .mx29-ring-6,#shell .mx29-screen.play .mx29-ring-8{animation:mx36ScreenFoldY 1.42s cubic-bezier(.2,.78,.17,1) 100ms both!important;} @keyframes mx36LatticeOpen{0%{opacity:0;transform:scale(.74) rotate(-5deg)}42%{opacity:.72}100%{opacity:.18;transform:scale(1.04) rotate(0)}} @keyframes mx36ScreenFoldX{0%{opacity:0;transform:rotateY(-74deg) translateX(-22px) scale(.86)}58%{opacity:1;transform:rotateY(8deg) translateX(3px) scale(1.015)}100%{opacity:1;transform:rotateY(0) translateX(0) scale(1)}} @keyframes mx36ScreenFoldY{0%{opacity:0;transform:rotateX(68deg) translateY(18px) scale(.84)}58%{opacity:1;transform:rotateX(-7deg) translateY(-2px) scale(1.015)}100%{opacity:1;transform:rotateX(0) translateY(0) scale(1)}} /* 04 云锦织花 — flowing silk threads, no horizontal/vertical grid. */ #shell .mx29-brocade-weave{background-image:url("../assets/images/image-7a0d293833.svg")!important;background-size:720px 220px!important;background-position:-100px 0!important;mask-image:radial-gradient(ellipse at center,#000 8%,transparent 80%)!important;mix-blend-mode:screen;} #shell .mx29-brocade.play .mx29-brocade-weave{animation:mx36SilkWeave 1.62s ease both!important;} #shell .mx29-brocade.play .mx29-ring-1{animation:mx36BrocadeReveal 1.32s cubic-bezier(.16,.78,.18,1) 60ms both!important;} #shell .mx29-brocade.play .mx29-ring-2{animation:mx36BrocadeReveal 1.26s cubic-bezier(.16,.78,.18,1) 150ms both!important;} #shell .mx29-brocade.play .mx29-ring-3{animation:mx36BrocadeReveal 1.22s cubic-bezier(.16,.78,.18,1) 230ms both!important;} #shell .mx29-brocade.play .mx29-ring-4{animation:mx36BrocadeReveal 1.18s cubic-bezier(.16,.78,.18,1) 310ms both!important;} #shell .mx29-brocade.play .mx29-ring-5{animation:mx36BrocadeReveal 1.12s cubic-bezier(.16,.78,.18,1) 390ms both!important;} #shell .mx29-brocade.play .mx29-ring-6{animation:mx36BrocadeReveal 1.08s cubic-bezier(.16,.78,.18,1) 470ms both!important;} #shell .mx29-brocade.play .mx29-ring-7{animation:mx36BrocadeReveal 1.02s cubic-bezier(.16,.78,.18,1) 550ms both!important;} #shell .mx29-brocade.play .mx29-ring-8{animation:mx36BrocadeReveal .98s cubic-bezier(.16,.78,.18,1) 630ms both!important;} @keyframes mx36SilkWeave{0%{opacity:0;background-position:-220px -20px;transform:translateY(18px) scale(.95)}36%{opacity:.82}100%{opacity:.24;background-position:160px 20px;transform:translateY(0) scale(1)}} @keyframes mx36BrocadeReveal{0%{opacity:0;clip-path:inset(0 100% 0 0);filter:brightness(1.35) saturate(.5);transform:translateX(-10px) scale(.98)}58%{opacity:1}100%{opacity:1;clip-path:inset(0 0 0 0);filter:brightness(1) saturate(1);transform:translateX(0) scale(1)}} /* 05 莲心水纹 — irregular organic wave edges, not perfect circles. */ #shell .mx29-ripple-stage i{border-radius:47% 53% 39% 61% / 44% 39% 61% 56%!important;box-shadow:0 0 0 5px rgba(204,216,180,.018),inset 0 0 22px rgba(197,221,194,.055)!important;border-style:solid!important;} #shell .mx29-ripple-stage i:nth-child(1){--mx36-turn:-12deg;border-radius:44% 56% 48% 52% / 55% 42% 58% 45%!important;} #shell .mx29-ripple-stage i:nth-child(2){--mx36-turn:9deg;border-radius:58% 42% 55% 45% / 43% 58% 42% 57%!important;} #shell .mx29-ripple-stage i:nth-child(3){--mx36-turn:-5deg;border-radius:42% 58% 37% 63% / 51% 44% 56% 49%!important;} #shell .mx29-ripple-stage i:nth-child(4){--mx36-turn:14deg;border-radius:53% 47% 61% 39% / 40% 53% 47% 60%!important;} #shell .mx29-ripple.play .mx29-ripple-stage i{animation:mx36OrganicRipple 1.62s cubic-bezier(.14,.7,.19,1) both!important;} #shell .mx29-ripple.play .mx29-ripple-stage i:nth-child(2){animation-delay:150ms!important;} #shell .mx29-ripple.play .mx29-ripple-stage i:nth-child(3){animation-delay:310ms!important;} #shell .mx29-ripple.play .mx29-ripple-stage i:nth-child(4){animation-delay:470ms!important;} #shell .mx29-ripple.play .mx29-flower{animation:mx36RippleFlower 1.55s ease both!important;} @keyframes mx36OrganicRipple{0%{inset:50%;opacity:0;transform:translate(-50%,-50%) scale(.03) rotate(var(--mx36-turn))}18%{opacity:.65}100%{inset:3%;opacity:0;transform:translate(0,0) scale(1) rotate(calc(var(--mx36-turn) * -1))}} @keyframes mx36RippleFlower{0%{opacity:0;transform:translate(-50%,-50%) scale(.78) rotate(-3deg)}36%{opacity:1;transform:translate(-50%,-50%) scale(.96) rotate(1.5deg)}64%{transform:translate(-50%,-50%) scale(1.035) rotate(-1deg)}100%{opacity:.96;transform:translate(-50%,-50%) scale(1) rotate(0)}} /* 06 散花归位 — uneven curved paths, flower layers briefly separate then return. */ #shell .mx29-scatter.play .mx29-scatter-petals i{animation:mx36ScatterParticle 1.46s cubic-bezier(.2,.75,.16,1) both!important;animation-delay:var(--sd)!important;} #shell .mx29-scatter.play .mx29-flower{animation:mx36ScatterMaster 1.52s cubic-bezier(.2,.75,.16,1) both!important;} #shell .mx29-scatter.play .mx29-ring-1{--sx:-22px;--sy:-13px;--sr:-12deg;--mx:-8px;--my:5px;--mr:5deg;animation:mx36ScatterLayer 1.34s cubic-bezier(.18,.76,.16,1) both!important;} #shell .mx29-scatter.play .mx29-ring-2{--sx:19px;--sy:-18px;--sr:14deg;--mx:6px;--my:-8px;--mr:-4deg;animation:mx36ScatterLayer 1.34s cubic-bezier(.18,.76,.16,1) 40ms both!important;} #shell .mx29-scatter.play .mx29-ring-3{--sx:27px;--sy:8px;--sr:-18deg;--mx:8px;--my:4px;--mr:6deg;animation:mx36ScatterLayer 1.34s cubic-bezier(.18,.76,.16,1) 80ms both!important;} #shell .mx29-scatter.play .mx29-ring-4{--sx:-24px;--sy:17px;--sr:17deg;--mx:-7px;--my:6px;--mr:-5deg;animation:mx36ScatterLayer 1.34s cubic-bezier(.18,.76,.16,1) 120ms both!important;} #shell .mx29-scatter.play .mx29-ring-5{--sx:13px;--sy:25px;--sr:-11deg;--mx:4px;--my:8px;--mr:3deg;animation:mx36ScatterLayer 1.34s cubic-bezier(.18,.76,.16,1) 160ms both!important;} #shell .mx29-scatter.play .mx29-ring-6{--sx:-16px;--sy:-25px;--sr:12deg;--mx:-5px;--my:-8px;--mr:-4deg;animation:mx36ScatterLayer 1.34s cubic-bezier(.18,.76,.16,1) 200ms both!important;} #shell .mx29-scatter.play .mx29-ring-7{--sx:10px;--sy:-11px;--sr:-8deg;--mx:3px;--my:-3px;--mr:2deg;animation:mx36ScatterLayer 1.24s cubic-bezier(.18,.76,.16,1) 240ms both!important;} #shell .mx29-scatter.play .mx29-ring-8{--sx:-7px;--sy:9px;--sr:7deg;--mx:-2px;--my:2px;--mr:-1deg;animation:mx36ScatterLayer 1.18s cubic-bezier(.18,.76,.16,1) 280ms both!important;} @keyframes mx36ScatterParticle{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.18)}25%{opacity:1;transform:translate(var(--mx),var(--my)) rotate(var(--mr)) scale(.82)}54%{opacity:.95;transform:translate(var(--sx),var(--sy)) rotate(var(--sr)) scale(1)}78%{opacity:.76;transform:translate(var(--mx),var(--my)) rotate(var(--mr)) scale(.76)}100%{opacity:0;transform:translate(0,0) rotate(0) scale(.12)}} @keyframes mx36ScatterMaster{0%{opacity:0;transform:translate(-50%,-50%) scale(.45) rotate(-9deg)}28%{opacity:1;transform:translate(-50%,-50%) scale(1.025) rotate(2deg)}57%{transform:translate(-50%,-50%) scale(.96) rotate(-1deg)}80%{transform:translate(-50%,-50%) scale(1.015) rotate(.6deg)}100%{opacity:.96;transform:translate(-50%,-50%) scale(1) rotate(0)}} @keyframes mx36ScatterLayer{0%{opacity:0;transform:translate(var(--sx),var(--sy)) rotate(var(--sr)) scale(.8)}46%{opacity:1;transform:translate(var(--mx),var(--my)) rotate(var(--mr)) scale(1.025)}78%{opacity:1;transform:translate(2px,-2px) rotate(1deg) scale(.995)}100%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}} /* 07 描金成形 — actual curved flower outlines are drawn first; no conic gradient, no spokes. */ #shell .mx29-gold-trace{position:absolute;z-index:2;left:50%;top:47%;width:clamp(280px,73vmin,700px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;opacity:0;background:none!important;mask:none!important;mix-blend-mode:screen;} #shell .mx29-gold-trace svg{width:100%;height:100%;overflow:visible;} #shell .mx29-gold-trace path{fill:none;stroke:#F0D08A;stroke-width:2.15;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:.92;stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 2px rgba(233,190,105,.18));} #shell .mx29-gild.play .mx29-gold-trace{animation:mx36TraceField 1.52s ease both!important;} #shell .mx29-gild.play .mx29-gold-trace path{animation:mx36TracePath 1.06s cubic-bezier(.18,.74,.16,1) var(--mx35-delay,0ms) both!important;} #shell .mx29-gild.play .mx29-ring-1{animation:mx36GildColor 1.2s ease 180ms both!important;} #shell .mx29-gild.play .mx29-ring-2{animation:mx36GildColor 1.16s ease 260ms both!important;} #shell .mx29-gild.play .mx29-ring-3{animation:mx36GildColor 1.12s ease 340ms both!important;} #shell .mx29-gild.play .mx29-ring-4{animation:mx36GildColor 1.08s ease 420ms both!important;} #shell .mx29-gild.play .mx29-ring-5{animation:mx36GildColor 1.04s ease 500ms both!important;} #shell .mx29-gild.play .mx29-ring-6{animation:mx36GildColor 1s ease 580ms both!important;} #shell .mx29-gild.play .mx29-ring-7{animation:mx36GildColor .96s ease 660ms both!important;} #shell .mx29-gild.play .mx29-ring-8{animation:mx36GildColor .92s ease 740ms both!important;} @keyframes mx36TraceField{0%{opacity:0;transform:translate(-50%,-50%) scale(.97)}24%{opacity:1}100%{opacity:.4;transform:translate(-50%,-50%) scale(1)}} @keyframes mx36TracePath{0%{stroke-dashoffset:100;opacity:.2}60%{opacity:1}100%{stroke-dashoffset:0;opacity:.94}} @keyframes mx36GildColor{0%{opacity:0;clip-path:inset(0 0 100% 0);filter:brightness(1.35) saturate(.45)}62%{opacity:1}100%{opacity:1;clip-path:inset(0 0 0 0);filter:brightness(1) saturate(1)}} /* 08 古籍灼变 — uneven char edge and embers attached to the edge, not radial sparks. */ #shell .mx29-burn-sheet{background:radial-gradient(ellipse at 49% 48%,rgba(250,192,95,.42) 0%,rgba(111,51,20,.86) 12%,rgba(41,23,16,.98) 34%,#120f0d 78%),repeating-linear-gradient(96deg,rgba(247,218,163,.04) 0 2px,transparent 2px 7px)!important;} #shell .mx29-embers i{left:calc(50% + var(--epx,0px))!important;top:calc(48% + var(--epy,0px))!important;} #shell .mx29-burn.play .mx29-burn-sheet{animation:mx36BurnSpread 1.3s cubic-bezier(.28,.06,.62,1) both!important;} #shell .mx29-burn.play .mx29-embers i{animation:mx36EdgeEmber 1.1s ease-out both!important;animation-delay:var(--ed)!important;} #shell .mx29-burn.play .mx29-flower{animation:mx36BurnReveal 1.24s ease both!important;} @keyframes mx36BurnSpread{0%{opacity:0;clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%)}17%{opacity:1}100%{opacity:1;clip-path:polygon(0 5%,5% 1%,12% 4%,18% 0,27% 3%,33% 1%,41% 5%,47% 0,56% 3%,63% 1%,71% 4%,78% 0,87% 3%,93% 1%,100% 5%,97% 13%,100% 22%,96% 30%,99% 39%,95% 47%,100% 55%,96% 64%,99% 73%,95% 81%,100% 91%,94% 98%,86% 95%,78% 100%,69% 96%,61% 100%,51% 96%,43% 100%,34% 96%,25% 100%,17% 96%,8% 100%,0 94%,4% 85%,0 76%,4% 67%,1% 57%,5% 48%,0 39%,4% 30%,1% 20%,5% 12%)}} @keyframes mx36EdgeEmber{0%{opacity:0;transform:translate(0,0) scale(.3)}28%{opacity:1}72%{opacity:.7}100%{opacity:0;transform:translate(var(--ex),var(--ey)) scale(.22)}} @keyframes mx36BurnReveal{0%{opacity:0;transform:translate(-50%,-50%) scale(.48) rotate(-3deg)}26%{opacity:1}70%{opacity:.76;transform:translate(-50%,-50%) scale(1.025) rotate(1deg)}100%{opacity:.26;transform:translate(-50%,-50%) scale(1.07) rotate(0)}} /* Shared finishing: never let the flower become a mechanical sunburst. */ #shell .mx29-gold-trace i,#shell .mx29-gold-trace b{display:none!important;} #shell .mx29-transition-caption{text-shadow:0 2px 16px rgba(10,20,16,.4)!important;} @media (max-width:700px){#shell .mx29-flower{width:min(94vw,520px)!important;top:44%!important;} #shell .mx29-gold-trace{width:min(94vw,520px)!important;top:44%!important;} #shell .mx29-transition-caption{bottom:6.8%!important;letter-spacing:.14em!important;}} /* ---- extracted style block boundary ---- */ /* Centre lock: keep the inner lotus registered while outer layers move. */ #shell .mx29-unfold.play .mx29-ring-6{animation:mx36BloomInner 1.08s cubic-bezier(.2,.84,.16,1) 370ms both!important;} #shell .mx29-unfold.play .mx29-ring-7{animation:mx36CoreSoft 1.02s cubic-bezier(.18,.78,.18,1) 410ms both!important;} #shell .mx29-unfold.play .mx29-ring-8{animation:mx36CoreSoft .96s cubic-bezier(.18,.78,.18,1) 500ms both!important;} #shell .mx29-orbit.play .mx29-ring-7{animation:mx36CoreSoft 1.12s cubic-bezier(.18,.78,.18,1) 160ms both!important;} #shell .mx29-orbit.play .mx29-ring-8{animation:mx36CoreSoft .98s cubic-bezier(.18,.78,.18,1) 280ms both!important;} #shell .mx29-screen.play .mx29-ring-7{animation:mx36CoreSoft 1.1s cubic-bezier(.18,.78,.18,1) 220ms both!important;} #shell .mx29-screen.play .mx29-ring-8{animation:mx36CoreSoft 1s cubic-bezier(.18,.78,.18,1) 320ms both!important;} #shell .mx29-brocade .mx29-cloud{display:none!important;} #shell .mx29-brocade.play .mx29-ring-7{animation:mx36CoreSoft 1.02s cubic-bezier(.18,.78,.18,1) 300ms both!important;clip-path:none!important;} #shell .mx29-brocade.play .mx29-ring-8{animation:mx36CoreSoft .96s cubic-bezier(.18,.78,.18,1) 400ms both!important;clip-path:none!important;} #shell .mx29-ripple.play .mx29-ring{animation:mx36RippleLayer 1.46s cubic-bezier(.18,.75,.18,1) both!important;} #shell .mx29-ripple.play .mx29-ring-7{animation:mx36CoreSoft 1.08s cubic-bezier(.18,.78,.18,1) 180ms both!important;} #shell .mx29-ripple.play .mx29-ring-8{animation:mx36CoreSoft .98s cubic-bezier(.18,.78,.18,1) 280ms both!important;} #shell .mx29-scatter.play .mx29-ring-7{animation:mx36CoreSoft 1.08s cubic-bezier(.18,.78,.18,1) 220ms both!important;} #shell .mx29-scatter.play .mx29-ring-8{animation:mx36CoreSoft .98s cubic-bezier(.18,.78,.18,1) 300ms both!important;} #shell .mx29-gild.play .mx29-ring-7{animation:mx36CoreSoft 1.04s cubic-bezier(.18,.78,.18,1) 300ms both!important;clip-path:none!important;} #shell .mx29-gild.play .mx29-ring-8{animation:mx36CoreSoft .96s cubic-bezier(.18,.78,.18,1) 380ms both!important;clip-path:none!important;} #shell .mx29-burn.play .mx29-ring{animation:mx36BurnLayer 1.18s ease both!important;} #shell .mx29-burn.play .mx29-ring-7{animation:mx36CoreSoft 1.02s ease 180ms both!important;} #shell .mx29-burn.play .mx29-ring-8{animation:mx36CoreSoft .94s ease 260ms both!important;} @keyframes mx36CoreSoft{0%{opacity:0;transform:scale(.9)}42%{opacity:1;transform:scale(1.015)}76%{opacity:1;transform:scale(.995)}100%{opacity:1;transform:scale(1)}} @keyframes mx36RippleLayer{0%{opacity:0;transform:scale(.88) translateY(7px)}32%{opacity:1;transform:scale(1.025) translateY(-3px)}68%{transform:scale(.99) translateY(1px)}100%{opacity:1;transform:scale(1) translateY(0)}} @keyframes mx36BurnLayer{0%{opacity:0;transform:scale(.9)}35%{opacity:1;transform:scale(1.02)}100%{opacity:1;transform:scale(1)}} /* ---- extracted style block boundary ---- */ /* V37: central rosette rebuilt as nested 8-petal and 6-petal layers. All ornament is inline SVG. */ #shell .mx29-ring-7{ background-image:url("../assets/images/image-8bc29b3ddc.svg")!important; background-size:contain!important;background-position:center!important;background-repeat:no-repeat!important; clip-path:none!important;transform-origin:50% 50%; filter:drop-shadow(0 1px 2px rgba(9,22,18,.18))!important; } #shell .mx29-ring-8{ background-image:url("../assets/images/image-9b7ab7c80a.svg")!important; background-size:contain!important;background-position:center!important;background-repeat:no-repeat!important; clip-path:none!important;transform-origin:50% 50%; filter:drop-shadow(0 1px 2px rgba(9,22,18,.2))!important; } /* Keep the inner flower registered. The 8-petal inner ring leaves a clear opening for the 6-petal jewel. */ #shell .mx29-unfold.play .mx29-ring-7{animation:mx37InnerBloom 1.08s cubic-bezier(.2,.84,.16,1) 370ms both!important;} #shell .mx29-unfold.play .mx29-ring-8{animation:mx37JewelBloom .96s cubic-bezier(.2,.84,.16,1) 500ms both!important;} #shell .mx29-orbit.play .mx29-ring-7{animation:mx37CoreSettle 1.08s cubic-bezier(.18,.78,.18,1) 160ms both!important;} #shell .mx29-orbit.play .mx29-ring-8{animation:mx37JewelBloom .94s cubic-bezier(.18,.78,.18,1) 280ms both!important;} /* The outer petals fold in 3D; the inner rosette remains registered and resolves last. */ #shell .mx29-screen.play .mx29-ring-7{animation:mx37ScreenCore 1.02s cubic-bezier(.2,.78,.17,1) 220ms both!important;} #shell .mx29-screen.play .mx29-ring-8{animation:mx37JewelBloom .94s cubic-bezier(.2,.78,.17,1) 360ms both!important;} /* Brocade is revealed by silk-like drift and saturation, not rectangular clip wipes. */ #shell .mx29-brocade.play .mx29-ring-1{animation:mx37BrocadeLayer 1.28s cubic-bezier(.16,.78,.18,1) 40ms both!important;} #shell .mx29-brocade.play .mx29-ring-2{animation:mx37BrocadeLayer 1.24s cubic-bezier(.16,.78,.18,1) 130ms both!important;} #shell .mx29-brocade.play .mx29-ring-3{animation:mx37BrocadeLayer 1.20s cubic-bezier(.16,.78,.18,1) 220ms both!important;} #shell .mx29-brocade.play .mx29-ring-4{animation:mx37BrocadeLayer 1.16s cubic-bezier(.16,.78,.18,1) 310ms both!important;} #shell .mx29-brocade.play .mx29-ring-5{animation:mx37BrocadeLayer 1.12s cubic-bezier(.16,.78,.18,1) 400ms both!important;} #shell .mx29-brocade.play .mx29-ring-6{animation:mx37BrocadeLayer 1.08s cubic-bezier(.16,.78,.18,1) 490ms both!important;} #shell .mx29-brocade.play .mx29-ring-7{animation:mx37CoreSettle 1.02s cubic-bezier(.18,.78,.18,1) 560ms both!important;clip-path:none!important;} #shell .mx29-brocade.play .mx29-ring-8{animation:mx37JewelBloom .94s cubic-bezier(.18,.78,.18,1) 660ms both!important;clip-path:none!important;} /* Water motion: irregular contours move outward; the centre responds subtly rather than wobbling with every ring. */ #shell .mx29-ripple.play .mx29-ring-7{animation:mx37CoreSettle 1.04s cubic-bezier(.18,.78,.18,1) 180ms both!important;} #shell .mx29-ripple.play .mx29-ring-8{animation:mx37JewelBloom .94s cubic-bezier(.18,.78,.18,1) 300ms both!important;} /* Scatter motion belongs to the surrounding layers; the centre stays aligned as the petals return. */ #shell .mx29-scatter.play .mx29-ring-7{animation:mx37CoreSettle 1.02s cubic-bezier(.18,.78,.18,1) 220ms both!important;} #shell .mx29-scatter.play .mx29-ring-8{animation:mx37JewelBloom .94s cubic-bezier(.18,.78,.18,1) 320ms both!important;} /* Gild: the drawn outline leads; color fades in without rectangular masks. */ #shell .mx29-gild.play .mx29-ring-1{animation:mx37GildColor 1.12s ease 180ms both!important;} #shell .mx29-gild.play .mx29-ring-2{animation:mx37GildColor 1.10s ease 260ms both!important;} #shell .mx29-gild.play .mx29-ring-3{animation:mx37GildColor 1.08s ease 340ms both!important;} #shell .mx29-gild.play .mx29-ring-4{animation:mx37GildColor 1.06s ease 420ms both!important;} #shell .mx29-gild.play .mx29-ring-5{animation:mx37GildColor 1.04s ease 500ms both!important;} #shell .mx29-gild.play .mx29-ring-6{animation:mx37GildColor 1.02s ease 580ms both!important;} #shell .mx29-gild.play .mx29-ring-7{animation:mx37CoreSettle 1.02s ease 650ms both!important;clip-path:none!important;} #shell .mx29-gild.play .mx29-ring-8{animation:mx37JewelBloom .92s ease 740ms both!important;clip-path:none!important;} #shell .mx29-burn.play .mx29-ring-7{animation:mx37CoreSettle 1.02s ease 180ms both!important;} #shell .mx29-burn.play .mx29-ring-8{animation:mx37JewelBloom .92s ease 280ms both!important;} @keyframes mx37InnerBloom{0%{opacity:0;transform:scale(.78)}64%{opacity:1;transform:scale(1.045)}82%{transform:scale(.99)}100%{opacity:1;transform:scale(1)}} @keyframes mx37JewelBloom{0%{opacity:0;transform:scale(.38)}66%{opacity:1;transform:scale(1.08)}84%{transform:scale(.98)}100%{opacity:1;transform:scale(1)}} @keyframes mx37CoreSettle{0%{opacity:0;transform:scale(.82)}62%{opacity:1;transform:scale(1.035)}82%{transform:scale(.992)}100%{opacity:1;transform:scale(1)}} @keyframes mx37ScreenCore{0%{opacity:0;transform:scale(.78) rotate(-3deg)}65%{opacity:1;transform:scale(1.035) rotate(1deg)}100%{opacity:1;transform:scale(1) rotate(0)}} @keyframes mx37BrocadeLayer{0%{opacity:0;transform:translateY(13px) scale(.965);filter:brightness(1.16) saturate(.55)}58%{opacity:1}100%{opacity:1;transform:translateY(0) scale(1);filter:brightness(1) saturate(1)}} @keyframes mx37GildColor{0%{opacity:0;filter:brightness(1.35) saturate(.32);transform:scale(.985)}48%{opacity:1}100%{opacity:1;filter:brightness(1) saturate(1);transform:scale(1)}} /* Reverse navigation should feel like unweaving, closing, or returning—not replaying the same direction. */ #shell .mx29-backward.play .mx29-flower, #shell .mx29-backward.play .mx29-ring, #shell .mx29-backward.play .mx29-gold-trace, #shell .mx29-backward.play .mx29-gold-trace path, #shell .mx29-backward.play .mx29-screen-lattice, #shell .mx29-backward.play .mx29-brocade-weave, #shell .mx29-backward.play .mx29-ripple-stage i, #shell .mx29-backward.play .mx29-scatter-petals i, #shell .mx29-backward.play .mx29-burn-sheet, #shell .mx29-backward.play .mx29-embers i, #shell .mx29-backward.play .mx29-silk-sheet, #shell .mx29-backward.play .mx29-cloud{animation-direction:reverse!important;} /* Avoid square reveal fragments on the flower layers. Gilding and brocade use motion/opacity instead. */ #shell .mx29-brocade.play .mx29-ring, #shell .mx29-gild.play .mx29-ring{clip-path:none!important;} @media(max-width:700px){ #shell .mx29-transition .mx29-flower{width:min(92vw,480px)!important;top:43.5%!important;} #shell .mx29-transition .mx29-gold-trace{width:min(92vw,480px)!important;top:43.5%!important;} #shell .mx29-transition .mx29-transition-caption{font-size:clamp(14px,4vw,18px)!important;bottom:max(5.5%,env(safe-area-inset-bottom,0px))!important;letter-spacing:.13em!important;} } /* ---- extracted style block boundary ---- */ /* V38：正式名称更换后的品牌字距适配；不改页面内容与交互。 */ #shell .brand .shoujin-title, #shell .orientation-brand .shoujin-title{white-space:nowrap;letter-spacing:.16em!important;} @media(max-width:700px){#shell .brand .shoujin-title{font-size:clamp(10px,2.7vw,13px)!important;}#shell .orientation-brand .shoujin-title{font-size:11px!important;}} /* ---- extracted style block boundary ---- */ /* 最终部署版：统一卷轴正式作品名与中文副标题，优先保证手机端文字清晰。 */ #shell .scroll-title{letter-spacing:.045em!important;} #shell .scroll-subtitle{font-family:"Noto Serif SC",serif!important;font-size:clamp(10px,1.05vw,15px)!important;letter-spacing:.055em!important;text-transform:none!important;color:#3e4035!important;line-height:1.7!important;margin-top:clamp(8px,1vw,15px)!important;text-shadow:0 1px 0 #f5e9ca88!important;} #shell .scroll-subtitle small{font-family:"Noto Serif SC",serif!important;font-size:8px!important;letter-spacing:.18em!important;color:#59604f!important;} @media(max-width:700px){#shell .scroll-subtitle{font-size:clamp(9px,2.7vw,11px)!important;letter-spacing:.015em!important;}#shell .scroll-subtitle small{font-size:7px!important;}} html[data-device="phone"][data-layout="portrait"] #shell .scroll-subtitle{font-family:"Noto Serif SC",serif!important;font-size:clamp(10px,3.1vw,13px)!important;letter-spacing:.015em!important;color:#3e4035!important;line-height:1.7!important;margin-top:8px!important;text-shadow:0 1px 0 #f5e9ca88!important;} html[data-device="phone"][data-layout="portrait"] #shell .scroll-subtitle small{font-family:"Noto Serif SC",serif!important;font-size:7px!important;letter-spacing:.18em!important;color:#59604f!important;} /* 免费字体系统：Noto Serif SC 负责古籍气质与正文，Noto Sans SC 负责操作界面。 */ :root{--serif:"Noto Serif SC",serif;--mengxi-body-font:"Noto Serif SC",serif;--mengxi-display-font:"Noto Serif SC",serif;--mengxi-ui-font:"Noto Sans SC",sans-serif} body,#shell,.book-scene,.scroll-opening{font-family:"Noto Serif SC",serif!important} #shell button,#shell input,#shell textarea,#shell select,#shell .topright,#shell .bottomnav,#shell .chapter,#shell .eyebrow,#shell .scroll-skip,#shell .toast,#shell .controlpanel,#shell .model-help,#shell .artlabel{font-family:"Noto Sans SC",sans-serif!important} #shell .scroll-title,#shell #stage .scene .copy h1,#shell .drawerhead h2,#shell .scroll-kicker{font-family:"Noto Serif SC",serif!important;font-weight:700!important;letter-spacing:.075em!important} #shell .brand .shoujin-title,#shell .orientation-brand .shoujin-title{font-family:"Noto Serif SC",serif!important;font-weight:700!important;letter-spacing:.18em!important} #shell #stage .scene .copy h1 em{font-family:"Noto Serif SC",serif!important;font-weight:400!important} #shell .scroll-subtitle,#shell .scroll-subtitle small{font-family:"Noto Serif SC",serif!important}