/* --------------------- id="mengxi-v14-open-font-typography" --------------------- */ :root{--mengxi-body-font:"Noto Serif SC","Source Han Serif SC","Noto Serif CJK SC","Songti SC",SimSun,serif;--mengxi-display-font:"Ma Shan Zheng","STKaiti","KaiTi","AR PL KaitiM GB",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:Georgia,"Times New Roman",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:"STSong","Songti SC","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:"STSong","Songti SC","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:"STSong","Songti SC","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("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23956a3d' stroke-opacity='.48' stroke-width='1.3'%3E%3Cpath d='M0 40C22 18 44 18 66 40s44 22 66 0 44-22 66 0'/%3E%3Cpath d='M0 110c22-22 44-22 66 0s44 22 66 0 44-22 66 0'/%3E%3Cpath d='M0 180c22-22 44-22 66 0s44 22 66 0 44-22 66 0'/%3E%3Cpath d='M30 0v220M110 0v220M190 0v220' stroke-opacity='.18'/%3E%3C/g%3E%3C/svg%3E");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("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%238a6439' stroke-opacity='.55' stroke-width='1.15'%3E%3Cpath d='M10 18h18v18H10zM28 0h18v18H28zM46 18h18v18H46zM28 36h18v18H28zM58 50c8-10 16-10 24 0-8 10-16 10-24 0ZM10 62c10-8 18-8 28 0-10 8-18 8-28 0Z'/%3E%3C/g%3E%3C/svg%3E");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","Songti SC","STSong",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("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' seed='12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='.18'/%3E%3C/svg%3E");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","Songti 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) .v10-cube-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-cube-mode{position:absolute!important;inset:0!important;perspective:2300px!important;overflow:hidden!important;background:#111a15!important;isolation:isolate} #shell .v21-cube-stage{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;transform:rotateY(0deg) rotateX(0deg) scale(1.01)} #shell .v21-cube-grid{--cellW:calc(100vw / 3);--cellH:calc(100dvh / 3);--depth:clamp(26px,4vw,48px);position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));transform-style:preserve-3d} #shell .v21-cubelet{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(0deg) rotateY(0deg);transition:transform 1020ms cubic-bezier(.22,.82,.16,1);transition-delay:var(--delay,0ms);will-change:transform;z-index:1} #shell .v21-cube-mode.play .v21-cubelet{transform:rotateX(var(--turnX,0deg)) rotateY(var(--turnY,0deg))} #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)} #shell .v21-cubelet.axis-x .v21-next-y{display:none} #shell .v21-cubelet.axis-y .v21-next-x{display:none} #shell .v21-cubelet.axis-x .v21-left,#shell .v21-cubelet.axis-x .v21-right{opacity:.88} #shell .v21-cubelet.axis-y .v21-top,#shell .v21-cubelet.axis-y .v21-bottom{opacity:.88} #shell .v21-mode-rows .v21-cube-stage{transform:rotateY(7deg) rotateX(-4deg) scale(1.02)} #shell .v21-mode-columns .v21-cube-stage{transform:rotateY(-8deg) rotateX(5deg) scale(1.02)} #shell .v21-mode-wave .v21-cube-stage{transform:rotateY(10deg) rotateX(-7deg) scale(1.04)} #shell .v21-mode-burst .v21-cube-stage{transform:rotateY(-10deg) rotateX(-5deg) scale(1.01)} #shell .v21-mode-rows.play .v21-cube-stage{animation:v21RowsStage 1.5s cubic-bezier(.22,.82,.16,1) both} #shell .v21-mode-columns.play .v21-cube-stage{animation:v21ColsStage 1.5s cubic-bezier(.22,.82,.16,1) both} #shell .v21-mode-wave.play .v21-cube-stage{animation:v21WaveStage 1.6s cubic-bezier(.22,.82,.16,1) both} #shell .v21-mode-burst.play .v21-cube-stage{animation:v21BurstStage 1.6s cubic-bezier(.22,.82,.16,1) both} @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)}} #shell .v21-cube-mode .v11-cube-overprint{position:absolute;inset:auto 0 2.7vh;display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:0 clamp(24px,4.2vw,72px);pointer-events:none;z-index:4;font-size:clamp(13px,1.2vw,17px);font-weight:500;letter-spacing:.12em;color:#f7e6c9;text-shadow:0 2px 14px #101510,0 0 4px #131914;opacity:0;transform:translateY(8px);transition:opacity .25s ease .42s,transform .4s ease .42s} #shell .v21-cube-mode.play .v11-cube-overprint{opacity:1;transform:none} #shell .v21-cube-mode .v11-cube-overprint i{font-style:normal;color:#f1c789;padding:0 9px} #shell .v21-cube-mode.done{opacity:0!important;pointer-events:none!important;transition:opacity 240ms ease!important} @media(max-width:850px){#shell .v21-cube-grid{--depth:clamp(18px,3.2vw,32px)}#shell .v21-cube-mode .v11-cube-overprint{font-size:12px;bottom:2vh;padding:0 16px;gap:12px;letter-spacing:.04em}} @media(max-width:580px){#shell .v21-cube-mode .v11-cube-overprint span:first-child{display:none}} @media(prefers-reduced-motion:reduce){#shell .v21-cubelet,#shell .v21-cube-mode .v11-cube-overprint{transition:none!important;animation:none!important}} /* --------------------- id="mengxi-v22-ornament-and-transition" --------------------- */ :root{--mx22-cloud:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27180%27%20height%3D%27120%27%20viewBox%3D%270%200%20180%20120%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%25238a6a3f%27%20stroke-opacity%3D%27.24%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M4%2072c14-15%2028-15%2042%200s28%2015%2042%200%2028-15%2042%200%2028%2015%2042%200%27/%3E%3Cpath%20d%3D%27M12%2048c10-10%2020-10%2030%200s20%2010%2030%200%2020-10%2030%200%2020%2010%2030%200%2020-10%2030%200%27/%3E%3Cpath%20d%3D%27M20%2096c8-8%2016-8%2024%200s16%208%2024%200%2016-8%2024%200%2016%208%2024%200%2016-8%2024%200%27/%3E%3C/g%3E%3C/svg%3E");--mx22-hui:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2796%27%20height%3D%2796%27%20viewBox%3D%270%200%2096%2096%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%2523856943%27%20stroke-opacity%3D%27.24%27%20stroke-width%3D%271.5%27%3E%3Cpath%20d%3D%27M8%2018h16v16H8zM24%202h16v16H24zM40%2018h16v16H40zM24%2034h16v16H24z%27/%3E%3Cpath%20d%3D%27M56%2058h16v16H56zM72%2042h16v16H72zM56%2026h16v16H56zM40%2042h16v16H40z%27/%3E%3C/g%3E%3C/svg%3E");--mx22-floral:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27120%27%20height%3D%27120%27%20viewBox%3D%270%200%20120%20120%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%2523856943%27%20stroke-opacity%3D%27.22%27%20stroke-width%3D%271.6%27%3E%3Cpath%20d%3D%27M60%2014c12%2014%2012%2030%200%2044-12-14-12-30%200-44Z%27/%3E%3Cpath%20d%3D%27M60%20106c-12-14-12-30%200-44%2012%2014%2012%2030%200%2044Z%27/%3E%3Cpath%20d%3D%27M14%2060c14-12%2030-12%2044%200-14%2012-30%2012-44%200Z%27/%3E%3Cpath%20d%3D%27M106%2060c-14%2012-30%2012-44%200%2014-12%2030-12%2044%200Z%27/%3E%3Ccircle%20cx%3D%2760%27%20cy%3D%2760%27%20r%3D%278%27/%3E%3Cpath%20d%3D%27M30%2030c8-6%2016-6%2024%200-8%206-16%206-24%200Z%27/%3E%3Cpath%20d%3D%27M90%2090c-8%206-16%206-24%200%208-6%2016-6%2024%200Z%27/%3E%3C/g%3E%3C/svg%3E");--mx22-brocade:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27220%27%20height%3D%27220%27%20viewBox%3D%270%200%20220%20220%27%3E%3Crect%20width%3D%27220%27%20height%3D%27220%27%20fill%3D%27%2523eadcc2%27/%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%2523806339%27%20stroke-opacity%3D%27.12%27%20stroke-width%3D%271.4%27%3E%3Cpath%20d%3D%27M0%20110h220M110%200v220%27/%3E%3Cpath%20d%3D%27M18%2056c18-18%2036-18%2054%200s36%2018%2054%200%2036-18%2054%200%27/%3E%3Cpath%20d%3D%27M18%20166c18-18%2036-18%2054%200s36%2018%2054%200%2036-18%2054%200%27/%3E%3Cpath%20d%3D%27M56%2018c18%2018%2018%2036%200%2054s-18%2036%200%2054%2018%2036%200%2054%27/%3E%3Cpath%20d%3D%27M166%2018c18%2018%2018%2036%200%2054s-18%2036%200%2054%2018%2036%200%2054%27/%3E%3Ccircle%20cx%3D%27110%27%20cy%3D%27110%27%20r%3D%2726%27/%3E%3Ccircle%20cx%3D%27110%27%20cy%3D%27110%27%20r%3D%278%27/%3E%3C/g%3E%3C/svg%3E");--mx22-corner:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%252383653b%27%20stroke-opacity%3D%27.55%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M28%20106V30h76%27/%3E%3Cpath%20d%3D%27M52%2052h28M52%2078h52%27/%3E%3Cpath%20d%3D%27M92%2028c0%2020-18%2038-38%2038%27/%3E%3Cpath%20d%3D%27M28%20132c22%200%2040%2018%2040%2040%27/%3E%3Cpath%20d%3D%27M78%20172H52M104%20198H28%27/%3E%3Cpath%20d%3D%27M108%2038c18%206%2030%2018%2036%2036%27/%3E%3C/g%3E%3C/svg%3E");} #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-silkcube{position:absolute!important;inset:0!important;z-index:160!important;overflow:hidden!important;display:block!important;perspective:1700px!important;isolation:isolate;background:linear-gradient(180deg,#161e1b,#0f1714)!important} #shell .v22-silkcube::before{content:"";position:absolute;inset:0;background-image:var(--new-image);background-size:100% 100%;background-position:center;filter:brightness(.42) saturate(.78) blur(2px);opacity:.98} #shell .v22-silkcube::after{content:"";position:absolute;inset:0;background-image:var(--mx22-brocade),linear-gradient(180deg,rgba(255,238,205,.03),rgba(174,130,75,.08));background-size:220px 220px,100% 100%;background-repeat:repeat;mix-blend-mode:screen;opacity:.34;pointer-events:none} #shell .v22-silk-stage{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform} #shell .v22-silk-grid{--cellW:calc(100vw / 3);--cellH:calc(100dvh / 3);--depth:clamp(10px,1.6vw,18px);position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:0;transform-style:preserve-3d} #shell .v22-panel{position:relative;width:100%;height:100%;transform-style:preserve-3d;will-change:transform;transition:transform 860ms cubic-bezier(.24,.82,.18,1),opacity .55s ease;transition-delay:var(--delay,0ms);opacity:1} #shell .v22-silkcube.play .v22-panel{transform:rotateX(var(--turnX,0deg)) rotateY(var(--turnY,0deg)) translateZ(var(--lift,0px));opacity:.985} #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)} #shell .v22-panel.axis-x .v22-nextY{display:none} #shell .v22-panel.axis-y .v22-nextX{display:none} #shell .v22-panel::after{content:"";position:absolute;inset:0;background-image:var(--mx22-cloud),var(--mx22-floral);background-size:150px 100px,120px 120px;background-repeat:repeat,repeat;mix-blend-mode:soft-light;opacity:.12;pointer-events:none;transform:translateZ(2px)} #shell .v22-silkcube.play .v22-panel::after{opacity:.18} #shell .v22-mode-rowfold .v22-silk-stage{transform:rotateY(4deg) rotateX(-2deg) scale(1.01)} #shell .v22-mode-colfold .v22-silk-stage{transform:rotateY(-5deg) rotateX(3deg) scale(1.01)} #shell .v22-mode-ripple .v22-silk-stage{transform:rotateY(6deg) rotateX(-4deg) scale(1.02)} #shell .v22-mode-bloom .v22-silk-stage{transform:rotateY(-4deg) rotateX(-2deg) scale(1.015)} #shell .v22-mode-rowfold.play .v22-silk-stage{animation:v22stageA 1.35s cubic-bezier(.22,.82,.16,1) both} #shell .v22-mode-colfold.play .v22-silk-stage{animation:v22stageB 1.35s cubic-bezier(.22,.82,.16,1) both} #shell .v22-mode-ripple.play .v22-silk-stage{animation:v22stageC 1.42s cubic-bezier(.22,.82,.16,1) both} #shell .v22-mode-bloom.play .v22-silk-stage{animation:v22stageD 1.46s cubic-bezier(.22,.82,.16,1) both} @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)}} #shell .v22-gold-sheen{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(110deg,transparent 18%,rgba(255,235,195,.22) 42%,rgba(255,255,255,.12) 50%,transparent 72%);background-size:180% 100%;opacity:0;mix-blend-mode:screen} #shell .v22-silkcube.play .v22-gold-sheen{animation:v22sheen 1.4s ease-in-out both} @keyframes v22sheen{0%,100%{background-position:100% 0;opacity:0}25%{opacity:.38}85%{background-position:0 0;opacity:.08}} #shell .v22-overprint{position:absolute;inset:auto 0 2.6vh;display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:0 clamp(24px,4.2vw,72px);pointer-events:none;z-index:4;font-size:clamp(13px,1.2vw,17px);font-weight:500;letter-spacing:.12em;color:#f7e6c9;text-shadow:0 2px 14px #101510,0 0 4px #131914;opacity:0;transform:translateY(8px);transition:opacity .25s ease .36s,transform .35s ease .36s} #shell .v22-silkcube.play .v22-overprint{opacity:1;transform:none} #shell .v22-overprint i{font-style:normal;color:#f1c789;padding:0 9px} #shell .v22-silkcube.done{opacity:0!important;pointer-events:none!important;transition:opacity 220ms ease!important} @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}#shell .v22-silk-grid{--depth:clamp(7px,1.4vw,12px)}#shell .v22-overprint{font-size:12px;bottom:2vh;padding:0 16px;gap:12px;letter-spacing:.04em}} @media(max-width:580px){#shell .v22-overprint span:first-child{display:none}} @media(prefers-reduced-motion:reduce){#shell .v22-panel,#shell .v22-silk-stage,#shell .v22-gold-sheen,#shell .v22-overprint{transition:none!important;animation:none!important}}