/* 梦溪万象 · 参赛手机适配补丁
   只调整响应式布局、可读性与触控操作；不改章节、文案、插图或模型数据。
   横屏仍为首选沉浸模式，竖屏则提供整页连续阅读。 */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
#shell button,#shell input,#shell textarea{ -webkit-tap-highlight-color:transparent; }
#shell button:focus-visible,#shell input:focus-visible,#shell textarea:focus-visible{outline:2px solid #e9c787;outline-offset:3px;}

/* 手机横屏：兼顾小屏、浏览器工具栏、刘海 / 系统手势区域 */
@media (orientation:landscape) and (pointer:coarse) and (max-width:1050px){
 :root{--reader-side:max(4vw,env(safe-area-inset-left,0px));--reader-top:clamp(46px,11.5vh,70px);--reader-bottom:clamp(52px,13vh,72px)}
 #shell{height:100dvh!important;min-height:0!important}
 #shell .brand{left:max(4vw,env(safe-area-inset-left,0px))!important;top:clamp(9px,2vh,17px)!important}
 #shell .topright{right:max(4vw,env(safe-area-inset-right,0px))!important;top:clamp(9px,2vh,17px)!important}
 #shell #stage .scene[data-form]{inset:var(--reader-top) var(--reader-side) var(--reader-bottom)!important;gap:clamp(12px,2.5vw,28px)!important;grid-template-columns:minmax(0,48%) minmax(0,1fr)!important}
 #shell #stage .scene[data-form] .copy{max-width:none!important;min-width:0!important}
 #shell #stage .scene[data-form] .copy h1{font-size:clamp(27px,4.5vw,48px)!important;letter-spacing:.07em!important;line-height:1.12!important}
 #shell #stage .scene[data-form] .copy .reader-deck{font-size:clamp(12.5px,1.65vw,15px)!important;line-height:1.44!important}
 #shell #stage .scene[data-form] .scene-summary{font-size:clamp(12px,1.57vw,14px)!important;line-height:1.52!important}
 #shell #stage .scene[data-form] .copy .learning{font-size:clamp(11.5px,1.35vw,13px)!important;line-height:1.43!important;margin-top:clamp(5px,1.5vh,12px)!important}
 #shell #stage .scene[data-form] .eyebrow{font-size:clamp(9px,1.2vw,11px)!important}
 #shell #stage .scene[data-form] .visual{min-width:0!important;max-width:100%!important}
 #shell .bottomnav{left:max(4vw,env(safe-area-inset-left,0px))!important;right:max(4vw,env(safe-area-inset-right,0px))!important;bottom:max(8px,env(safe-area-inset-bottom,0px))!important;min-height:37px!important;display:flex!important;align-items:center!important;justify-content:space-between!important}
 #shell .bottomnav .bookmark-nav{min-height:42px!important;min-width:76px!important;padding:5px 10px!important;display:flex;align-items:center;justify-content:center;gap:5px}
 #shell .bottomnav .chapter-dial{min-width:42px!important;min-height:42px!important;display:flex!important;align-items:center;justify-content:center;flex-direction:column}
 #shell .bottomnav .bookmark-nav span{font-size:clamp(10px,1.25vw,12px)!important;line-height:1.12!important}
 #shell .bottomnav .bookmark-nav b{font-size:clamp(9px,1.1vw,11px)!important;line-height:1.12!important}
 #shell .bottomnav .chapter-dial small{font-size:9px!important}
 #shell .scene button,#shell .scene [role=button],#shell .drawer button,#shell .note-tabs button{touch-action:manipulation}
 #shell .scene input[type=range]{min-height:30px!important;accent-color:#b48b51}
 #shell .scene input[type=range]::-webkit-slider-thumb{width:20px;height:20px}
 #shell .scene canvas{max-width:100%;touch-action:none}
 #shell .scene .art .controlpanel{max-width:100%;min-width:0}
 #shell .notepanel .note-sheet{max-height:calc(100dvh - 25px)!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch}
 #shell .drawer{padding:clamp(12px,3vw,25px) max(5vw,env(safe-area-inset-left,0px))!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch}
 #shell .drawerhead{margin-bottom:8px!important}
 #shell .drawer h2{font-size:clamp(22px,3.5vw,30px)!important}
 #shell .drawergrid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:9px!important}
 #shell .drawergrid button{min-height:46px!important;padding:9px 8px!important;font-size:clamp(11px,1.65vw,14px)!important;line-height:1.25!important}
 #shell .drawergrid span{font-size:10px!important;margin-bottom:4px!important}
 #shell .floral-chapter-nav{display:none!important}
 /* Keep the two model-centric scenes full-screen, with smaller decorative chrome and larger controls. */
 #shell .mx20-timeline{left:4%!important;right:4%!important}
 #shell .mx20-action>button,#shell .mx20-page-nav button{min-height:32px;display:inline-flex;align-items:center}
 #shell .mx20-track button{min-height:36px}
}
@media (orientation:landscape) and (pointer:coarse) and (max-height:370px){
 :root{--reader-top:37px;--reader-bottom:48px}
 #shell #stage .scene[data-form] .copy h1{font-size:clamp(24px,4vw,32px)!important}
 #shell #stage .scene[data-form] .reader-deck{font-size:12px!important;line-height:1.32!important}
 #shell #stage .scene[data-form] .scene-summary{font-size:11.5px!important;line-height:1.4!important}
 #shell #stage .scene[data-form] .copy .learning{font-size:11px!important;line-height:1.36!important}
 #shell .bottomnav .bookmark-nav{min-height:39px!important}
}

/* 手机竖屏：一屏一个视觉单元，文字整页自然延展，避免窗口式内滚动。
   章节标题、文字、图片、模型及顺序原样保留。 */
html[data-device="phone"][data-layout="portrait"] #shell{height:100dvh!important;min-height:0!important;width:100%!important;overflow:hidden!important}
html[data-device="phone"][data-layout="portrait"] #shell .orientation-curtain{display:none!important}
html[data-device="phone"][data-layout="portrait"] #shell .brand{position:absolute!important;top:max(10px,env(safe-area-inset-top,0px))!important;left:18px!important;font-size:10px!important;z-index:25!important}
html[data-device="phone"][data-layout="portrait"] #shell .brand .seal{font-size:14px!important}
html[data-device="phone"][data-layout="portrait"] #shell .topright{position:absolute!important;top:max(11px,env(safe-area-inset-top,0px))!important;right:16px!important;z-index:25!important}
html[data-device="phone"][data-layout="portrait"] #shell .topright .bar{width:42px!important}
html[data-device="phone"][data-layout="portrait"] #shell .topright #mapbtn{min-height:40px!important;padding:6px 8px!important;font-size:12px!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage{position:absolute!important;inset:60px 0 calc(70px + env(safe-area-inset-bottom,0px))!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior-y:contain!important;-webkit-overflow-scrolling:touch!important;touch-action:pan-y!important;scrollbar-width:thin;scrollbar-color:rgba(189,158,107,.38) transparent;z-index:1!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene,
html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene[data-form]{position:relative!important;inset:auto!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;grid-template-columns:none!important;grid-template-rows:none!important;gap:20px!important;width:100%!important;height:auto!important;max-width:100%!important;min-height:calc(100% - 12px)!important;padding:20px 20px 38px!important;overflow:visible!important;transform:none!important;animation:none!important;filter:none!important;box-sizing:border-box!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene .copy,
html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene[data-form] .copy{position:relative!important;display:block!important;align-self:auto!important;flex:none!important;max-width:100%!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;padding:0!important;margin:0!important;overflow:visible!important;transform:none!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene .copy h1,
html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene[data-form] .copy h1{font-size:clamp(31px,8vw,43px)!important;line-height:1.2!important;letter-spacing:.07em!important;margin:8px 0 14px!important;max-width:100%!important;white-space:normal!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene .copy h1 em{font-size:.52em!important;line-height:1.5!important;margin-top:5px!important;white-space:normal!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene .copy p,
html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene[data-form] .reader-deck,
html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene[data-form] .scene-summary{font-size:clamp(15px,4vw,17px)!important;line-height:1.75!important;letter-spacing:.02em!important;white-space:normal!important;max-width:100%!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene .copy .learning{font-size:14px!important;line-height:1.55!important;margin-top:14px!important;gap:7px!important;max-width:100%!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene .copy .eyebrow{font-size:11px!important;letter-spacing:.11em!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene .copy .scene-actions{display:flex!important;flex-wrap:wrap!important;gap:12px!important;margin:16px 0 6px!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene .copy .scene-actions button{min-height:44px!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene .copy .note-trigger{min-height:44px!important;padding:10px 0!important;font-size:14px!important;margin-top:6px!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene .visual{position:relative!important;inset:auto!important;align-self:center!important;display:grid!important;place-items:center!important;flex:none!important;width:100%!important;max-width:100%!important;min-width:0!important;height:min(83vw,380px)!important;min-height:245px!important;max-height:none!important;overflow:visible!important;padding:0!important;transform:none!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene .visual>.art{position:relative!important;inset:auto!important;display:grid!important;width:100%!important;height:100%!important;max-width:100%!important;min-height:0!important;transform:none!important;overflow:visible!important;box-shadow:none!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene .footnote{position:static!important;font-size:12px!important;line-height:1.6!important;margin-top:12px!important}
html[data-device="phone"][data-layout="portrait"] #shell .bottomnav{position:absolute!important;left:0!important;right:0!important;bottom:0!important;height:calc(61px + env(safe-area-inset-bottom,0px))!important;padding:8px 18px calc(7px + env(safe-area-inset-bottom,0px))!important;display:flex!important;justify-content:space-between!important;align-items:center!important;box-sizing:border-box!important;background:linear-gradient(180deg,rgba(20,33,30,.92),rgba(13,27,24,.98))!important;border-top:1px solid rgba(206,174,116,.28)!important;z-index:30!important;gap:7px!important}
html[data-device="phone"][data-layout="portrait"] #shell .bottomnav .bookmark-nav{min-height:44px!important;min-width:80px!important;padding:6px 9px!important;display:flex!important;align-items:center;justify-content:center;gap:6px;font-size:12px!important}
html[data-device="phone"][data-layout="portrait"] #shell .bottomnav .bookmark-nav span{font-size:13px!important;line-height:1.2!important}
html[data-device="phone"][data-layout="portrait"] #shell .bottomnav .bookmark-nav b{font-size:11px!important;line-height:1.2!important}
html[data-device="phone"][data-layout="portrait"] #shell .bottomnav .chapter-dial{min-width:44px!important;min-height:44px!important;display:flex!important;flex-direction:column!important;justify-content:center;align-items:center}
html[data-device="phone"][data-layout="portrait"] #shell .bottomnav .chapter-dial .dial-number{font-size:13px!important}
html[data-device="phone"][data-layout="portrait"] #shell .bottomnav .chapter-dial small{font-size:10px!important}
html[data-device="phone"][data-layout="portrait"] #shell .floral-chapter-nav{display:none!important}
html[data-device="phone"][data-layout="portrait"] #shell .drawer{position:absolute!important;inset:0!important;z-index:45!important;padding:75px 19px 85px!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important}
html[data-device="phone"][data-layout="portrait"] #shell .drawer .drawerhead{display:flex!important;align-items:center!important;gap:14px!important}
html[data-device="phone"][data-layout="portrait"] #shell .drawer h2{font-size:26px!important;margin-bottom:15px!important}
html[data-device="phone"][data-layout="portrait"] #shell .drawergrid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
html[data-device="phone"][data-layout="portrait"] #shell .drawergrid button{min-height:76px!important;padding:13px 12px!important;font-size:14px!important;line-height:1.35!important}
html[data-device="phone"][data-layout="portrait"] #shell .drawergrid span{font-size:11px!important;margin-bottom:8px!important}
html[data-device="phone"][data-layout="portrait"] #shell .notepanel{position:absolute!important;inset:0!important;z-index:55!important;display:none;align-items:flex-start!important;overflow-y:auto!important;padding:70px 12px 76px!important;-webkit-overflow-scrolling:touch!important}
html[data-device="phone"][data-layout="portrait"] #shell .notepanel.open{display:flex!important}
html[data-device="phone"][data-layout="portrait"] #shell .notepanel .note-sheet{width:100%!important;max-width:100%!important;max-height:none!important;overflow:visible!important;padding:25px 23px!important}
html[data-device="phone"][data-layout="portrait"] #shell .note-page{font-size:15px!important;line-height:1.75!important}
html[data-device="phone"][data-layout="portrait"] #shell .note-tabs button{min-height:40px!important}
html[data-device="phone"][data-layout="portrait"] #shell .scene canvas{max-width:100%!important;touch-action:none}
html[data-device="phone"][data-layout="portrait"] #shell .scene .inlinegame{max-width:100%!important;width:100%!important;box-sizing:border-box!important}
html[data-device="phone"][data-layout="portrait"] #shell .scene input[type=range]{width:100%!important;max-width:100%!important;min-height:34px!important;accent-color:#b5894e}
html[data-device="phone"][data-layout="portrait"] #shell .scene button{touch-action:manipulation}
html[data-device="phone"][data-layout="portrait"] #shell .scene::before,#shell .scene::after{pointer-events:none!important}

/* Blender/Canvas scene #16/#17: switch from landscape-only overlay coordinates to a natural reading flow. */
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="15"],
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="16"]{position:relative!important;inset:auto!important;display:block!important;height:auto!important;min-height:820px!important;padding:0!important;overflow:visible!important;background:#dccaac!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="15"]>.visual,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="16"]>.visual{position:relative!important;inset:auto!important;display:block!important;width:100%!important;height:auto!important;min-height:820px!important;max-height:none!important;padding:0!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="15"] .art,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="16"] .art{position:relative!important;inset:auto!important;display:block!important;width:100%!important;height:auto!important;min-height:820px!important;max-width:none!important;overflow:visible!important;padding:0!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage .mx20-immersive{position:relative!important;inset:auto!important;display:block!important;width:100%!important;height:830px!important;min-height:830px!important;padding:0!important;overflow:hidden!important;transform:none!important}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-heading{position:absolute!important;top:6%!important;left:8%!important;width:84%!important;max-width:none!important}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-heading h1{font-size:clamp(35px,10vw,48px)!important;margin:8px 0!important}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-heading p{font-size:15px!important;line-height:1.55!important;max-width:100%!important}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-model,
html[data-device="phone"][data-layout="portrait"] #shell .mx20-immersive.ink .mx20-model{position:absolute!important;top:22%!important;left:0!important;width:100%!important;height:37%!important;max-height:330px!important;min-height:265px!important}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-notes{position:absolute!important;top:57%!important;left:9%!important;right:9%!important;width:82%!important}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-notes h2{font-size:20px!important;line-height:1.35!important;margin-bottom:6px!important}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-notes p{font-size:14px!important;line-height:1.5!important}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-notes .mx20-source{font-size:12px!important;margin-top:7px!important;line-height:1.4!important}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-seal{right:0!important;top:-28px!important;font-size:11px!important;writing-mode:horizontal-tb!important}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-side-caption{display:none!important}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-timeline{position:absolute!important;left:8%!important;right:8%!important;bottom:8.7%!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-track{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;max-width:none!important;padding-top:8px!important}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-track button{display:flex!important;flex-direction:row!important;align-items:center!important;gap:7px!important;min-height:38px!important;max-width:none!important}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-track button span{font-size:13px!important;white-space:normal!important}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-track button i{font-size:14px!important}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-action{justify-content:space-between!important;width:100%!important;gap:10px!important;flex-wrap:wrap!important}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-action>button{min-height:42px!important;font-size:13px!important}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-slider-label{flex:1!important;min-width:100px!important;font-size:12px!important}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-slider-label input{width:100%!important;min-height:22px!important}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-page-nav{position:absolute!important;right:8%!important;bottom:2%!important;display:flex!important;gap:12px!important;font-size:12px!important}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-page-nav button{min-height:40px!important;font-size:12px!important}

/* Respect accessibility preferences; keep animations but reduce costly decorative motion on phones. */
@media(prefers-reduced-motion:reduce){#shell .scene{animation:none!important;scroll-behavior:auto!important}#shell .scene .art::after{animation:none!important}}

/* Model chapters already contain their own heading and narration. Avoid displaying
   an extra copy of the original copy block in portrait (no content is deleted). */
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="15"]>.copy,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="16"]>.copy{display:none!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="15"],
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="16"]{min-height:830px!important}
@media(orientation:landscape) and (pointer:coarse) and (max-width:1050px){
 html[data-device="phone"] #shell:has(.mx20-immersive) #stage{inset:0!important;height:100%!important;min-height:0!important}
 html[data-device="phone"] #shell #stage section.scene[data-id="15"],
 html[data-device="phone"] #shell #stage section.scene[data-id="16"]{inset:0!important;left:0!important;top:0!important;right:0!important;bottom:0!important;width:100%!important;height:100%!important}
 html[data-device="phone"] #shell #stage section.scene[data-id="15"]>.visual,
 html[data-device="phone"] #shell #stage section.scene[data-id="16"]>.visual{inset:0!important;width:100%!important;height:100%!important}
 html[data-device="phone"] #shell #stage section.scene[data-id="15"] .art,
 html[data-device="phone"] #shell #stage section.scene[data-id="16"] .art{inset:0!important;width:100%!important;height:100%!important}
}

/* Cinematic opening, portrait: retain original reel animation, but use space vertically. */
html[data-device="phone"][data-layout="portrait"] #shell .scroll-opening{inset:0!important;overflow:hidden!important}
html[data-device="phone"][data-layout="portrait"] #shell .scroll-kicker{top:9%!important;font-size:12px!important;letter-spacing:.19em!important;white-space:nowrap}
html[data-device="phone"][data-layout="portrait"] #shell .scroll-opening .scroll-reel{width:100vw!important;height:min(33vh,260px)!important;min-height:0!important;max-height:none!important;margin-top:-14vh!important;aspect-ratio:auto!important}
html[data-device="phone"][data-layout="portrait"] #shell .blender-reel-stage{width:100%!important;height:auto!important;max-height:100%!important;aspect-ratio:1024/428}
html[data-device="phone"][data-layout="portrait"] #shell .scroll-title-group{left:9%!important;right:9%!important;top:9%!important;bottom:9%!important}
html[data-device="phone"][data-layout="portrait"] #shell .scroll-title{font-size:clamp(30px,8vw,44px)!important;letter-spacing:.09em!important}
html[data-device="phone"][data-layout="portrait"] #shell .scroll-subtitle{font-size:10px!important;margin-top:6px!important;letter-spacing:.12em!important}
html[data-device="phone"][data-layout="portrait"] #shell .scroll-observatory{left:50%!important;bottom:8%!important;width:min(86vw,400px)!important;height:auto!important;min-height:150px!important;display:grid!important;grid-template-columns:1fr!important;gap:3px!important;padding:8px 14px!important;border-top:1px solid #d6bf825c!important;border-bottom:1px solid #d6bf825c!important;background:linear-gradient(90deg,transparent,#0c211bd9 15%,#0c211bd9 85%,transparent)!important}
html[data-device="phone"][data-layout="portrait"] #shell .scroll-observatory article{display:flex!important;justify-content:flex-start!important;text-align:left!important;padding:2px 8px!important;gap:15px!important;border:0!important}
html[data-device="phone"][data-layout="portrait"] #shell .scroll-observatory svg{width:34px!important;height:34px!important;flex:none!important}
html[data-device="phone"][data-layout="portrait"] #shell .scroll-observatory b{font-size:13px!important;letter-spacing:.10em!important}
html[data-device="phone"][data-layout="portrait"] #shell .scroll-observatory small{font-size:10.5px!important;letter-spacing:.02em!important;line-height:1.2!important;margin-top:3px!important;white-space:normal!important}
html[data-device="phone"][data-layout="portrait"] #shell .scroll-bottom-note{display:none!important}
html[data-device="phone"][data-layout="portrait"] #shell .scroll-skip{right:6%!important;bottom:3%!important;padding:10px 5px!important;min-height:42px!important;font-size:12px!important;opacity:1!important}



/* ===== V25 portrait refinement: opening scroll, floral transitions, suspension compass, and patterned drawer ===== */
html[data-device="phone"][data-layout="portrait"] #shell{
  --mx-mobile-paper:#efe5d2;
  --mx-mobile-paper-2:#e8dcc6;
  --mx-mobile-ink:#1f332d;
  --mx-mobile-gold:#c5a063;
  --mx-mobile-gold-deep:#9f7440;
  --mx-mobile-red:#9d5d47;
  --mx-mobile-teal:#4a8175;
  --mx-mobile-sky:#97c4c8;
}
html[data-device="phone"][data-layout="portrait"] #shell .brand,
html[data-device="phone"][data-layout="portrait"] #shell .topright{backdrop-filter:blur(8px);text-shadow:0 1px 8px rgba(10,18,16,.4)}
html[data-device="phone"][data-layout="portrait"] #shell .brand{padding:4px 10px 4px 0;border-radius:20px}
html[data-device="phone"][data-layout="portrait"] #shell .brand .seal{box-shadow:0 10px 18px rgba(39,26,17,.18)!important}
html[data-device="phone"][data-layout="portrait"] #shell .bottomnav{
  background:
    radial-gradient(circle at 50% -26px,rgba(231,213,174,.18),transparent 56px),
    linear-gradient(180deg,rgba(18,36,32,.92),rgba(10,24,21,.98))!important;
}
html[data-device="phone"][data-layout="portrait"] #shell .bottomnav::before{
  content:"";position:absolute;left:18px;right:18px;top:8px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(213,179,118,.16) 12%,rgba(213,179,118,.56) 50%,rgba(213,179,118,.16) 88%,transparent);
  pointer-events:none;
}

/* Opening scroll: keep the animation in portrait and enrich the composition. */
html[data-device="phone"][data-layout="portrait"] #shell .scroll-opening{
  background:
    radial-gradient(ellipse 94% 54% at 50% 0%,rgba(232,206,141,.12),transparent 56%),
    radial-gradient(ellipse 70% 45% at 50% 82%,rgba(31,64,57,.42),transparent 64%),
    linear-gradient(180deg,#15302c 0%,#102420 46%,#0b1816 100%)!important;
}
html[data-device="phone"][data-layout="portrait"] #shell .scroll-opening::before{
  inset:14px!important;border:1px solid rgba(212,185,123,.5)!important;
  box-shadow:inset 0 0 0 4px rgba(214,190,131,.08),0 0 0 1px rgba(255,248,232,.05)!important;
}
html[data-device="phone"][data-layout="portrait"] #shell .scroll-opening::after{
  inset:24px!important;
  background:
    radial-gradient(circle at 50% 48%,transparent 35%,rgba(5,12,10,.18) 78%,rgba(7,14,12,.42) 100%),
    conic-gradient(from 0deg at 50% 18%,rgba(225,197,131,.06),transparent 30deg,rgba(225,197,131,.03) 65deg,transparent 110deg,rgba(225,197,131,.06) 180deg,transparent 230deg,rgba(225,197,131,.03) 290deg,transparent 360deg)!important;
}
html[data-device="phone"][data-layout="portrait"] #shell .scroll-opening .scroll-reel{
  width:min(92vw,460px)!important;height:min(34vh,240px)!important;margin-top:-13.5vh!important;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.42))!important;
}
html[data-device="phone"][data-layout="portrait"] #shell .scroll-paper{
  border-radius:8px;overflow:hidden;box-shadow:0 12px 24px rgba(16,7,2,.22), inset 0 0 0 1px rgba(255,251,240,.18);
}
html[data-device="phone"][data-layout="portrait"] #shell .scroll-title-group{
  display:flex;align-items:flex-start;justify-content:flex-end;flex-direction:column;
  text-shadow:0 2px 14px rgba(6,12,10,.28),0 8px 24px rgba(18,8,2,.18)!important;
}
html[data-device="phone"][data-layout="portrait"] #shell .scroll-title{font-size:clamp(31px,9vw,48px)!important}
html[data-device="phone"][data-layout="portrait"] #shell .scroll-subtitle{font-size:11px!important;color:#f7ead0!important}
html[data-device="phone"][data-layout="portrait"] #shell .scroll-kicker{
  top:7.5%!important;color:#ddc18e!important;gap:9px!important;
}
html[data-device="phone"][data-layout="portrait"] #shell .scroll-kicker::before,
html[data-device="phone"][data-layout="portrait"] #shell .scroll-kicker::after{width:24px!important}
html[data-device="phone"][data-layout="portrait"] #shell .scroll-observatory{
  width:min(88vw,412px)!important;bottom:7.4%!important;border-radius:22px!important;
  padding:12px 16px!important;backdrop-filter:blur(6px);
  background:
    linear-gradient(180deg,rgba(11,35,29,.9),rgba(11,31,26,.88))!important;
  box-shadow:0 14px 28px rgba(0,0,0,.23), inset 0 0 0 1px rgba(214,191,130,.13);
}
html[data-device="phone"][data-layout="portrait"] #shell .scroll-observatory::before,
html[data-device="phone"][data-layout="portrait"] #shell .scroll-observatory::after{
  content:"";position:absolute;width:76px;height:76px;top:-18px;pointer-events:none;opacity:.2;
  background:
    radial-gradient(circle at center,transparent 0 20%,rgba(255,223,163,.3) 20% 24%,transparent 24% 30%,rgba(255,223,163,.16) 30% 44%,transparent 44%),
    conic-gradient(from 0deg,#b85d44 0 22deg,#f2c768 22deg 46deg,#3b7990 46deg 70deg,#f6ebd2 70deg 92deg,#2d6477 92deg 118deg,#f0c35b 118deg 144deg,#b85d44 144deg 166deg,transparent 166deg 360deg);
  mask:radial-gradient(circle at center,#000 0 58%,transparent 59%);
}
html[data-device="phone"][data-layout="portrait"] #shell .scroll-observatory::before{left:-14px}
html[data-device="phone"][data-layout="portrait"] #shell .scroll-observatory::after{right:-14px;transform:scaleX(-1)}
html[data-device="phone"][data-layout="portrait"] #shell .scroll-skip{
  border:1px solid rgba(214,192,140,.35)!important;border-radius:999px!important;padding:10px 14px!important;
  background:rgba(9,23,20,.35)!important;box-shadow:0 6px 14px rgba(0,0,0,.12);
}
html[data-device="phone"][data-layout="portrait"] #shell .scroll-opening .scroll-stars{opacity:.88!important}
html[data-device="phone"][data-layout="portrait"] #shell .scroll-opening .scroll-stars i{box-shadow:0 0 8px rgba(255,236,193,.25)}
html[data-device="phone"][data-layout="portrait"] #shell .scroll-opening .scroll-bird{filter:drop-shadow(0 2px 4px rgba(64,40,22,.24))}

/* Drawer / chapter catalogue: echo the user-provided ornamental references without overfilling the page. */
html[data-device="phone"][data-layout="portrait"] #shell .drawer{
  background:
    radial-gradient(circle at 50% -80px,rgba(214,189,128,.18),transparent 180px),
    linear-gradient(180deg,rgba(248,242,230,.98),rgba(235,225,207,.98))!important;
  color:#294239!important;
}
html[data-device="phone"][data-layout="portrait"] #shell .drawer::before,
html[data-device="phone"][data-layout="portrait"] #shell .drawer::after{
  content:"";position:absolute;width:164px;height:164px;pointer-events:none;opacity:.18;
  background:
    radial-gradient(circle at center,transparent 0 16%,rgba(203,162,101,.45) 16% 20%,transparent 20% 28%,rgba(71,129,121,.38) 28% 40%,transparent 40%),
    conic-gradient(from 0deg,#b96446 0 24deg,#f2ca6c 24deg 52deg,#5b8790 52deg 82deg,#f7efde 82deg 108deg,#2f6780 108deg 138deg,#efbf58 138deg 164deg,#c66a4f 164deg 190deg,transparent 190deg 360deg);
  mask:radial-gradient(circle at center,#000 0 55%,transparent 57%);
}
html[data-device="phone"][data-layout="portrait"] #shell .drawer::before{left:-58px;top:56px}
html[data-device="phone"][data-layout="portrait"] #shell .drawer::after{right:-58px;bottom:110px;transform:scaleX(-1) rotate(24deg)}
html[data-device="phone"][data-layout="portrait"] #shell .drawer .drawerhead{position:relative;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid rgba(153,119,74,.22)!important}
html[data-device="phone"][data-layout="portrait"] #shell .drawer h2{font-size:28px!important;color:#1f3a33!important;letter-spacing:.08em!important}
html[data-device="phone"][data-layout="portrait"] #shell .drawergrid{gap:12px!important}
html[data-device="phone"][data-layout="portrait"] #shell .drawergrid button{
  position:relative;border:1px solid rgba(157,122,79,.28)!important;border-radius:18px!important;
  background:
    linear-gradient(180deg,rgba(255,251,243,.95),rgba(240,232,216,.95))!important;
  color:#274238!important;box-shadow:0 12px 18px rgba(114,83,42,.08), inset 0 0 0 1px rgba(255,255,255,.42);
}
html[data-device="phone"][data-layout="portrait"] #shell .drawergrid button::before{
  content:"";position:absolute;inset:8px;pointer-events:none;border-radius:13px;
  background:
    linear-gradient(90deg,transparent,rgba(199,162,97,.14),transparent),
    radial-gradient(circle at left top,rgba(77,127,125,.12),transparent 32%),
    radial-gradient(circle at right bottom,rgba(189,96,67,.12),transparent 35%);
}
html[data-device="phone"][data-layout="portrait"] #shell .drawergrid span{color:#9f7441!important;letter-spacing:.12em!important}
html[data-device="phone"][data-layout="portrait"] #shell .drawergrid button strong,
html[data-device="phone"][data-layout="portrait"] #shell .drawergrid button b{color:#224036!important}

/* Two suspension-compass scenes: remove overlap and make the model readable on portrait phones. */
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"],
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"]{
  padding:18px 16px 34px!important;gap:16px!important;
  background:
    radial-gradient(circle at 50% -20%,rgba(233,213,166,.22),transparent 35%),
    linear-gradient(180deg,rgba(246,240,228,.95),rgba(231,222,203,.94))!important;
}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"]>.copy,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"]>.copy{
  background:rgba(255,251,242,.74)!important;border:1px solid rgba(157,126,84,.16)!important;border-radius:18px!important;
  padding:14px 14px 10px!important;box-shadow:0 10px 18px rgba(94,65,31,.06);
}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .copy p,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .copy p{font-size:16px!important;line-height:1.72!important;color:#334339!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .visual,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .visual{
  height:auto!important;min-height:0!important;display:block!important;padding:0!important;
}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .art,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .art{
  display:block!important;height:auto!important;min-height:0!important;
}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .suspension-stage,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .suspension-stage{
  display:flex!important;flex-direction:column!important;gap:14px!important;padding:0 0 8px!important;min-height:0!important;height:auto!important;
}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .suspension-hero,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .suspension-hero{
  min-height:344px!important;height:344px!important;border-radius:22px!important;border:1px solid rgba(157,126,84,.2)!important;
  background:
    radial-gradient(circle at 78% 18%,rgba(255,249,235,.74),transparent 28%),
    linear-gradient(180deg,#f0e4c9 0%,#e9dbc0 54%,#d4be95 100%)!important;
  box-shadow:0 14px 24px rgba(75,52,27,.12), inset 0 0 0 1px rgba(255,255,255,.28)!important;
}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .suspension-model,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .suspension-model{width:min(96%,420px)!important;height:min(86%,350px)!important;top:55%!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .blender-compass-3d,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .blender-compass-3d{border-radius:22px!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .blender-model-badge,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .blender-model-badge{
  top:12px!important;left:12px!important;right:auto!important;bottom:auto!important;z-index:6!important;
  border-radius:999px!important;padding:8px 12px!important;font-size:12px!important;line-height:1!important;
  background:rgba(52,44,38,.78)!important;color:#f5e4bf!important;backdrop-filter:blur(8px)!important;
}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .blender-model-status,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .blender-model-status{
  left:12px!important;right:12px!important;bottom:10px!important;top:auto!important;z-index:6!important;
  font-size:12px!important;line-height:1.4!important;border-radius:14px!important;padding:9px 12px!important;
  color:#31463f!important;background:rgba(255,248,234,.72)!important;backdrop-filter:blur(8px)!important;
}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .model-callout,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .model-callout{display:none!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .suspension-side,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .suspension-side{
  width:100%!important;max-width:none!important;border:none!important;border-radius:18px!important;padding:14px 14px 10px!important;
  background:linear-gradient(180deg,rgba(251,248,241,.94),rgba(240,233,218,.94))!important;box-shadow:0 12px 18px rgba(82,58,26,.08)!important;
  gap:10px!important;
}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .suspension-side h3,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .suspension-side h3{font-size:20px!important;margin:0!important;color:#284338!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .suspension-side>p,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .suspension-side>p{font-size:14px!important;line-height:1.58!important;color:#42544b!important;display:block!important;margin:0 0 2px!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .suspension-caption,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .suspension-caption{display:block!important;font-size:12px!important;line-height:1.45!important;color:#607061!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .principle-card,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .principle-card{
  border-radius:16px!important;border:1px solid rgba(169,140,95,.16)!important;padding:7px 8px!important;background:rgba(255,255,255,.72)!important;
}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .principle-card.active,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .principle-card.active{
  background:linear-gradient(90deg,rgba(248,240,224,.94),rgba(255,251,244,.94))!important;border-color:rgba(153,111,56,.38)!important;
}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .principle-num,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .principle-num{width:28px!important;height:28px!important;font-size:14px!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .principle-copy b,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .principle-copy b{font-size:14px!important;line-height:1.35!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .principle-copy span,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .principle-copy span{font-size:12px!important;line-height:1.4!important;display:block!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] #interaction.controlpanel,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] #interaction.controlpanel{
  width:100%!important;display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto auto auto auto!important;
  gap:10px!important;padding:14px!important;border-radius:18px!important;background:rgba(255,251,243,.95)!important;
  box-shadow:0 12px 18px rgba(86,62,31,.08)!important;
}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] #interaction.controlpanel label,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] #interaction.controlpanel label{
  display:block!important;grid-column:1!important;grid-row:1!important;max-width:none!important;font-size:14px!important;color:#37493f!important;line-height:1.52!important;
}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] #interaction.controlpanel input[type="range"],
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] #interaction.controlpanel input[type="range"]{grid-column:1!important;grid-row:2!important;height:18px!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] #interaction.controlpanel .stepper,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] #interaction.controlpanel .stepper{
  grid-column:1!important;grid-row:3!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin:0!important;
}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] #interaction.controlpanel .stepper button,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] #interaction.controlpanel .stepper button{
  min-height:42px!important;padding:10px 8px!important;border-radius:14px!important;font-size:13px!important;line-height:1.2!important;
}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] #interaction.controlpanel output,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] #interaction.controlpanel output{
  display:block!important;grid-column:1!important;grid-row:4!important;font-size:13px!important;line-height:1.55!important;color:#59695e!important;max-width:none!important;
}

/* Portrait page transition: central rotating baoxiang-style medallions inspired by the supplied patterns. */
@keyframes mxMobileFloralA{0%{transform:translate(-50%,-50%) scale(.4) rotate(-34deg);opacity:0}40%{opacity:.8}100%{transform:translate(-50%,-50%) scale(1) rotate(68deg);opacity:.58}}
@keyframes mxMobileFloralB{0%{transform:translate(-50%,-50%) scale(.2) rotate(52deg);opacity:0}36%{opacity:.9}100%{transform:translate(-50%,-50%) scale(1) rotate(-74deg);opacity:.74}}
@keyframes mxMobileFloralC{0%{transform:translate(-50%,-50%) scale(.1) rotate(-18deg);opacity:0}55%{opacity:.96}100%{transform:translate(-50%,-50%) scale(1) rotate(22deg);opacity:.92}}


/* ===== V26 portrait refinement: compass readability and richer mobile aesthetics ===== */
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"],
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"]{
  display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto auto auto!important;
}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] > .visual,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] > .visual{order:1!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] > .copy,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] > .copy{order:2!important;margin-top:2px!important;padding-top:0!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] > .copy .eyebrow,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] > .copy .eyebrow{font-size:10px!important;letter-spacing:.22em!important;margin-bottom:4px!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] > .copy h1,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] > .copy h1{font-size:30px!important;line-height:1.18!important;margin:8px 0 8px!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] > .copy p,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] > .copy p{font-size:14px!important;line-height:1.58!important;max-width:none!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .suspension-hero,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .suspension-hero{min-height:320px!important;height:320px!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .suspension-model,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .suspension-model{top:53%!important;width:min(94%,390px)!important;height:min(84%,314px)!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .blender-model-status,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .blender-model-status{font-size:11px!important;line-height:1.38!important;padding:7px 10px!important;background:rgba(255,248,234,.62)!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] .suspension-side,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] .suspension-side{order:2!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] #interaction.controlpanel,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] #interaction.controlpanel{order:3!important;padding:12px 12px 14px!important;gap:9px!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] #interaction.controlpanel label,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] #interaction.controlpanel label{font-size:13px!important;line-height:1.45!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] #interaction.controlpanel .stepper,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] #interaction.controlpanel .stepper{grid-template-columns:1fr 1fr!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] #interaction.controlpanel .v10-compass-extra,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] #interaction.controlpanel .v10-compass-extra{
  display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin:0!important;
}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] #interaction.controlpanel .v10-compass-extra button,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] #interaction.controlpanel .v10-compass-extra button{
  min-height:42px!important;padding:10px 6px!important;font-size:12px!important;line-height:1.2!important;border-radius:14px!important;
}
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="9"] #interaction.controlpanel output,
html[data-device="phone"][data-layout="portrait"] #shell #stage section.scene[data-id="10"] #interaction.controlpanel output{font-size:12px!important;line-height:1.5!important}
html[data-device="phone"][data-layout="portrait"] #shell .drawergrid button::before{
  background:
    linear-gradient(90deg,transparent,rgba(199,162,97,.14),transparent),
    radial-gradient(circle at left top,rgba(77,127,125,.12),transparent 32%),
    radial-gradient(circle at right bottom,rgba(189,96,67,.12),transparent 35%),
    var(--mx26-cloudline-light) center calc(100% - 10px)/160px 16px repeat-x!important;
}

html[data-device="phone"][data-layout="portrait"] #shell .suspension-hero .v10-model-caption{display:none!important}