/* V28 – Chinese Color Atlas-informed palette, original Figma-redrawn floral transition. */
:root{--mx28-ink:#253E39;--mx28-dark:#152C29;--mx28-green:#3F503B;--mx28-gold:#BF9C46;--mx28-cinnabar:#9D2933;--mx28-teal:#007175;--mx28-paper:#FFFBF0;--mx28-silk:#EEDEB0}
#shell .drawer{background:radial-gradient(ellipse at 50% 0,rgba(0,113,117,.18),transparent 47%),linear-gradient(165deg,#203C37 0%,#142723 75%,#13231F 100%)!important;color:var(--mx28-paper)!important}
#shell .drawer::before{background-image:url('../assets/ornaments/baoxiang_master.svg'),url('../assets/ornaments/cloud_ribbon.svg')!important;background-repeat:no-repeat,repeat-x!important;background-size:clamp(270px,34vw,510px),600px 60px!important;background-position:calc(100% + 100px) calc(100% + 110px),center 22px!important;opacity:.2!important;mix-blend-mode:screen!important}
#shell .drawergrid button{border:1px solid rgba(191,156,70,.25)!important;background:linear-gradient(165deg,rgba(34,68,60,.96),rgba(22,49,45,.97))!important;border-radius:14px!important;box-shadow:inset 0 1px rgba(255,251,240,.06),0 6px 17px rgba(1,10,8,.14)!important}
#shell .drawergrid button::before{background-image:url('../assets/ornaments/cloud_ribbon.svg')!important;background-size:360px 36px!important;background-position:bottom 3px center!important;background-repeat:repeat-x!important;opacity:.22!important;mix-blend-mode:screen!important}
#shell .drawergrid button:hover,#shell .drawergrid button.current{background:linear-gradient(160deg,#355D55,#24463F)!important;border-color:rgba(191,156,70,.55)!important}
#shell .drawergrid button strong,#shell .drawergrid button b{color:#FFFBF0!important}
#shell .drawergrid span{color:#D2B571!important}
#shell .drawerhead h2{color:#E8D6B5!important}
#shell .floral-chapter-nav.mx28-floral-nav{background:transparent!important;border:0!important;box-shadow:none!important;display:flex!important;flex-direction:column!important;gap:4px!important;align-items:center;justify-content:center}
#shell .mx28-floral-nav .v10-mini-perspective,#shell .mx28-floral-nav .v10-mini-cube{display:none!important}
#shell .mx28-nav-flower{display:block;width:clamp(43px,4.7vw,68px);height:clamp(43px,4.7vw,68px);background:url('../assets/ornaments/baoxiang_master.svg') center/contain no-repeat;filter:drop-shadow(0 4px 10px #030a0868);transition:transform .35s ease}
#shell .mx28-floral-nav:hover .mx28-nav-flower{transform:rotate(35deg)}
#shell .mx28-floral-nav .v10-mini-label{color:#E8D7B0!important;font-size:12px!important;text-shadow:0 2px 8px #0b1410!important}
/* All old cube/9-panel transition visuals are removed, not merely decorated. */
#shell .mx28-floral-assembly{position:absolute;left:50%;top:49%;width:clamp(250px,57vmin,580px);aspect-ratio:1;transform:translate(-50%,-50%);isolation:isolate;opacity:0}
#shell .mx28-floral-assembly>div{position:absolute;inset:0;background-repeat:no-repeat;background-position:center;background-size:contain;filter:drop-shadow(0 7px 15px rgba(2,13,10,.24));will-change:transform}
#shell .mx28-floral-outer{background-image:url('../assets/ornaments/baoxiang_outer.svg')}
#shell .mx28-floral-inner{background-image:url('../assets/ornaments/baoxiang_inner.svg')}
#shell .mx28-floral-core{background-image:url('../assets/ornaments/baoxiang_core.svg')}
#shell .mx28-cloud-band{position:absolute;inset:auto 0 11%;height:54px;background:url('../assets/ornaments/cloud_ribbon.svg') center/600px 60px repeat-x;opacity:0}
@keyframes mx28Appear{0%{opacity:0;transform:translate(-50%,-50%) scale(.38)}26%{opacity:1}80%{opacity:1}100%{opacity:.85;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes mx28Outer{from{transform:rotate(-85deg) scale(.67)}to{transform:rotate(58deg) scale(1)}}
@keyframes mx28Inner{from{transform:rotate(96deg) scale(.36)}to{transform:rotate(-52deg) scale(1)}}
@keyframes mx28Core{from{transform:rotate(-50deg) scale(.23)}to{transform:rotate(36deg) scale(1)}}
@keyframes mx28Wash{from{opacity:0;transform:scale(1.08)}40%{opacity:.7}to{opacity:.22;transform:scale(1)}}
@keyframes mx28Cloud{0%{opacity:0;transform:translateY(22px)}36%{opacity:.48}100%{opacity:.25;transform:translateY(0)}}
@keyframes mx28Caption{0%,24%{opacity:0;transform:translateY(9px)}48%,80%{opacity:1}100%{opacity:.6;transform:translateY(0)}}
/* Motion modes: never use three-dimensional cube/panel subdivision. */
#shell .mx28-cloud .mx28-floral-assembly{width:clamp(220px,48vmin,500px)}
#shell .mx28-cloud .mx28-cloud-band{inset:auto 0 26%;transform:rotate(-3deg)}
#shell .mx28-baoxiang .mx28-floral-assembly{width:clamp(260px,63vmin,640px)}
html[data-device="phone"][data-layout="portrait"] #shell .mx28-floral-assembly{width:min(89vw,440px);top:46%}
html[data-device="phone"][data-layout="portrait"] #shell .drawer{background:linear-gradient(180deg,#F7F0DF,#E9DCC2)!important;color:#253E39!important}
html[data-device="phone"][data-layout="portrait"] #shell .drawer h2{color:#253E39!important}
html[data-device="phone"][data-layout="portrait"] #shell .drawergrid button{background:linear-gradient(180deg,#FFFDF7,#EFE3CA)!important;color:#253E39!important}
html[data-device="phone"][data-layout="portrait"] #shell .drawergrid button strong,html[data-device="phone"][data-layout="portrait"] #shell .drawergrid button b{color:#253E39!important}
html[data-device="phone"][data-layout="portrait"] #shell .drawergrid span{color:#966B35!important}
html[data-device="phone"][data-layout="portrait"] #shell .drawer::before{background-position:right -125px bottom -115px!important;opacity:.15!important;mix-blend-mode:multiply!important}
@media(prefers-reduced-motion:reduce){}