/* 梦溪万象 · 参赛手机适配补丁
   只调整响应式布局、可读性与触控操作；不改章节、文案、插图或模型数据。
   横屏仍为首选沉浸模式，竖屏则提供整页连续阅读。 */
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 .v10-cube-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 .v10-cube-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}