/* --------------------- 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 Arial,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-transition{position:absolute;inset:0;z-index:140;pointer-events:all;display:grid;place-items:center;perspective:1400px;isolation:isolate;background:radial-gradient(circle at 52% 45%,#7361426c,#070d0ce8 80%);opacity:0;transition:opacity .17s linear} .v10-cube-transition.play{opacity:1} .v10-cube-transition:before{content:"";position:absolute;inset:2.8%;border:1px solid #d9bf8060;box-shadow:inset 0 0 70px #040b0c99;pointer-events:none} .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-transition.play .v10-cube-stage{transform:rotateY(-9deg) rotateX(6deg) scale(.97)} .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-cube-transition.play .v10-cubelet{transform:rotateY(var(--angle)) rotateX(var(--tilt))} .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))} .v10-cube-transition.done{opacity:0;pointer-events:none;transition:opacity .31s ease} /* 轻触或扭动右下角实体魔方导航 */ .v10-cube-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)} .v10-cube-nav:active{cursor:grabbing} .v10-cube-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}.v10-cube-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){.v10-cube-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/悬丝指南针_立柱.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/悬丝指南针_横梁.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/悬丝指南针_基座.png');background-size:100% 100%,130% 150%} #shell .suspension-dial{background-image:url('../assets/images/悬丝指南针_盘面.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-fullscreen-cube{ position:absolute!important;inset:0!important;width:100%!important;height:100%!important; z-index:160!important;overflow:hidden!important;display:block!important; background:#152019!important;perspective:2200px!important;isolation:isolate; pointer-events:auto;opacity:1!important;transition:none!important; } #shell .v11-fullscreen-cube::before{display:none!important} #shell .v11-fullscreen-cube .v11-cube-underlay{ position:absolute;inset:0; background-image:var(--new-image);background-size:100% 100%;background-position:center; filter:brightness(.45) saturate(.8);opacity:.98; } #shell .v11-fullscreen-cube .v10-cube-stage{ position:absolute!important;inset:0!important;width:100%!important;height:100%!important; transform:none!important;filter:none!important;perspective:2200px!important; transition:none!important;transform-style:preserve-3d!important; } #shell .v11-fullscreen-cube.play .v10-cube-stage{transform:none!important} #shell .v11-fullscreen-cube .v10-cube-grid{ --cellW:calc(100vw / 3);--cellH:calc(100dvh / 3); position:absolute!important;inset:0!important;width:100%!important;height:100%!important; display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important; grid-template-rows:repeat(3,minmax(0,1fr))!important; gap:0!important;transform:none!important;transform-style:preserve-3d!important; } #shell .v11-fullscreen-cube .v10-cubelet{ position:relative!important;display:block!important;width:100%!important;height:100%!important; transform:rotateX(0deg)!important;transform-origin:50% 50%!important; transform-style:preserve-3d!important;will-change:transform; transition:transform 990ms cubic-bezier(.34,.02,.21,1)!important; transition-delay:var(--delay)!important; } #shell .v11-fullscreen-cube.play .v10-cubelet{transform:rotateX(var(--turn))!important} #shell .v11-fullscreen-cube .v10-cubeface{ position:absolute!important;inset:-.35px!important;width:calc(100% + .7px)!important; height:calc(100% + .7px)!important;border:0!important; border-radius:0!important;box-shadow:none!important; display:block!important;backface-visibility:hidden!important; background-repeat:no-repeat!important;background-size:300% 300%!important; background-position:var(--posX) var(--posY)!important; } #shell .v11-fullscreen-cube .v10-face-front{ background-image:var(--old-image)!important; transform:translateZ(calc(100dvh / 6))!important; } #shell .v11-fullscreen-cube .v10-face-next{ background-image:var(--new-image)!important; transform:rotateX(var(--incoming)) translateZ(calc(100dvh / 6))!important; } #shell .v11-fullscreen-cube .v10-face-edge{ inset:auto!important;top:0!important;left:0!important;width:100%!important; height:calc(100dvh / 3)!important;transform:rotateX(90deg) translateZ(calc(100dvh / 6))!important; background:linear-gradient(160deg,#473d2f,#161e18 55%,#9a815b)!important; opacity:.94; } #shell .v11-fullscreen-cube .v10-face-top{display:none!important} #shell .v11-fullscreen-cube .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 .45s,transform .4s ease .45s; } #shell .v11-fullscreen-cube.play .v11-cube-overprint{opacity:1;transform:none} #shell .v11-cube-overprint i{font-style:normal;color:#f1c789;padding:0 9px} #shell .v11-fullscreen-cube.done{opacity:0!important;pointer-events:none!important;transition:opacity 240ms ease!important} @media(max-width:850px){#shell .v11-fullscreen-cube .v11-cube-overprint{font-size:12px;bottom:2vh;padding:0 16px;gap:12px;letter-spacing:.04em}} @media(max-width:580px){#shell .v11-fullscreen-cube .v11-cube-overprint span:first-child{display:none}} @media(prefers-reduced-motion:reduce){#shell .v11-fullscreen-cube .v10-cubelet{transition:none!important}} /* 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 .v10-cube-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 .v10-cube-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. */ #shell .v11-fullscreen-cube{ --v13-depth:calc(100dvh / 3); --v13-half:calc(100dvh / 6); perspective:1250px!important; perspective-origin:50% 48%!important; transform-style:preserve-3d!important; background:radial-gradient(ellipse 90% 90% at 52% 42%,#415044,#101b19 78%,#0a1111)!important; } #shell .v11-fullscreen-cube .v11-cube-underlay{ filter:brightness(.47) saturate(.78) blur(1.4px)!important; transform:scale(1.025)!important; } #shell .v11-fullscreen-cube .v10-cube-stage{ position:absolute!important;inset:0!important;width:100%!important;height:100%!important; transform-style:preserve-3d!important; transform:translateZ(calc(0px - var(--v13-half)))!important; perspective:none!important; filter:none!important; transition:none!important; will-change:transform; } #shell .v11-fullscreen-cube.play .v10-cube-stage{ animation:v13CameraRide 1540ms cubic-bezier(.23,.7,.2,1) both!important; } @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)} } #shell .v11-fullscreen-cube .v10-cube-grid{ --cellW:calc(100vw / 3);--cellH:calc(100dvh / 3); position:absolute!important;inset:0!important;width:100%!important;height:100%!important; display:flex!important;flex-direction:column!important; gap:0!important; transform-style:preserve-3d!important; transform:none!important; perspective:none!important; } #shell .v11-fullscreen-cube .v13-rubik-row{ width:100%!important;height:33.333333333%!important;min-height:0!important; display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important; transform:rotateX(0deg);transform-origin:50% 50%!important; transform-style:preserve-3d!important; filter:none!important; animation:none; transition:transform 1120ms cubic-bezier(.22,.82,.16,1)!important; transition-delay:var(--delay)!important; will-change:transform; } #shell .v11-fullscreen-cube.play .v13-rubik-row{transform:rotateX(var(--turn))!important;} #shell .v11-fullscreen-cube .v10-cubelet{ position:relative!important;width:100%!important;height:100%!important; transform:none!important;transition:none!important; transform-style:preserve-3d!important; filter:none!important; will-change:auto!important; } #shell .v11-fullscreen-cube.play .v10-cubelet{transform:none!important;filter:none!important;} #shell .v11-fullscreen-cube .v10-cubeface{ position:absolute!important;box-sizing:border-box!important; inset:auto!important;border-radius:0!important; backface-visibility:hidden!important; background-repeat:no-repeat!important; filter:none!important; transform-origin:center center!important; box-shadow:inset 0 0 0 1px #0b111127,inset 0 0 22px #0a12151a!important; } #shell .v11-fullscreen-cube .v10-face-front, #shell .v11-fullscreen-cube .v10-face-next, #shell .v11-fullscreen-cube .v13-face-back{ inset:0!important;width:100%!important;height:100%!important; background-size:300% 300%!important; background-position:var(--posX) var(--posY)!important; } #shell .v11-fullscreen-cube .v10-face-front{ background-image:var(--old-image)!important; transform:translateZ(var(--v13-half))!important; } #shell .v11-fullscreen-cube .v10-face-next{ background-image:var(--new-image)!important; transform:rotateX(var(--incoming)) translateZ(var(--v13-half))!important; box-shadow:inset 0 0 0 1px #f1d7ae22,inset 0 0 30px #0005!important; } #shell .v11-fullscreen-cube .v13-face-back{ transform:rotateX(180deg) translateZ(var(--v13-half))!important; background:linear-gradient(130deg,#302c26,#101c1b 74%,#5c4e37)!important; } #shell .v11-fullscreen-cube .v13-face-top{ width:100%!important;height:var(--v13-depth)!important;left:0!important;top:50%!important; margin-top:calc(0px - var(--v13-half))!important; background:linear-gradient(165deg,#c2a06c 0%,#655038 23%,#252d27 67%,#a18b62 100%)!important; transform:translateY(calc(0px - var(--v13-half))) rotateX(90deg)!important; box-shadow:inset 0 0 22px #0008,inset 0 0 0 2px #edc78a39!important; } /* 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. */ #shell .v11-fullscreen-cube .v13-face-top{display:block!important} #shell .v11-fullscreen-cube .v13-face-left, #shell .v11-fullscreen-cube .v13-face-right{ width:var(--v13-depth)!important;height:100%!important; top:0!important;left:50%!important; margin-left:calc(0px - var(--v13-half))!important; background:linear-gradient(120deg,#2d3129 0%,#967b52 17%,#4b4331 50%,#171d19 84%,#9b7648 100%)!important; box-shadow:inset 0 0 24px #0008,inset 0 0 0 2px #e3b97952!important; } #shell .v11-fullscreen-cube .v13-face-left{transform:translateX(calc(0px - var(--cellW))) rotateY(-90deg)!important} #shell .v11-fullscreen-cube .v13-face-right{transform:rotateY(90deg)!important} /* The material catch-light sweeps over the complete viewport; it is *outside* 3D subtree. */ #shell .v11-fullscreen-cube .v13-perspective-light{ position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(105deg,transparent 16%,#ffe4b32b 45%,#ffffff16 49%,transparent 66%); background-size:170% 100%;opacity:0;mix-blend-mode:screen; } #shell .v11-fullscreen-cube.play .v13-perspective-light{ animation:v13CatchLight 1.65s ease-in-out both; } @keyframes v13CatchLight{0%,100%{background-position:100% 0;opacity:0}27%,74%{opacity:.48}90%{background-position:0 0;opacity:.08}} #shell .v11-fullscreen-cube .v11-cube-overprint{z-index:4!important;font-size:clamp(14px,1.32vw,19px)!important;} #shell .v11-fullscreen-cube.done{opacity:0!important;pointer-events:none!important;transition:opacity 260ms ease!important;} @media(max-width:850px){ #shell .v11-fullscreen-cube{perspective:820px!important} #shell .v11-fullscreen-cube .v10-cubeface{box-shadow:inset 0 0 0 1px #15191020,inset 0 0 11px #04090822!important} } @media(prefers-reduced-motion:reduce){ #shell .v11-fullscreen-cube.play .v10-cube-stage,#shell .v11-fullscreen-cube.play .v13-perspective-light{animation:none!important} #shell .v11-fullscreen-cube .v13-rubik-row{transition:none!important} }