/* 《梦溪万象》全端精修：CSS presentation layer only.
   No text, art, scene order or scene interaction data is changed.
   Priority: desktop immersive composition + mobile legibility and touch + tablet breathing room.
*/
:root { --mx-responsive-gutter: clamp(22px, 4.5vw, 100px); }
html,body { width:100%; max-width:100%; }
#shell :is(button,input,[role="button"]) { -webkit-tap-highlight-color:transparent; }
#shell :is(button,input,[role="button"]):focus-visible { outline:2px solid #caa56b; outline-offset:4px; }
#shell .drawergrid button { text-wrap:pretty; }
#shell .scene .visual canvas { max-width:100%; }
/* Desktop / laptop: fix the original full-viewport-width bug behind an inset scene.
   Give both title block and models the correctly centered space of the exhibit. */
@media (min-width:1101px) and (min-height:640px) {
 #shell #stage section.scene[data-form]:not([data-id="15"]):not([data-id="16"]) {
  left:var(--reader-side)!important;right:var(--reader-side)!important;
  top:var(--reader-top)!important;bottom:var(--reader-bottom)!important;
  width:calc(100% - var(--reader-side) - var(--reader-side))!important;height:auto!important;max-width:none!important;
  grid-template-columns:minmax(0,43%) minmax(0,1fr)!important;
  gap:clamp(34px,4.3vw,90px)!important;
  align-items:center!important;min-height:0!important;
 }
 #shell #stage section.scene[data-form]:not([data-id="15"]):not([data-id="16"]) .copy {
  width:100%!important;max-width:min(100%,600px)!important;
  min-width:0!important;align-self:center!important;
 }
 #shell #stage section.scene[data-form]:not([data-id="15"]):not([data-id="16"]) .visual {
  width:100%!important;max-width:100%!important;min-width:0!important;
  height:min(68vh,700px)!important;min-height:400px!important;
  max-height:100%!important;align-self:center!important;
  display:grid!important;place-items:center!important;
 }
 #shell #stage section.scene[data-form]:not([data-id="15"]):not([data-id="16"]) .visual .art {
  max-width:100%!important;max-height:100%!important;
 }
 #shell #stage section.scene[data-form] .copy h1 {
  font-size:clamp(43px,4.5vw,74px)!important;
  line-height:1.17!important;
  letter-spacing:.035em!important;
 }
 #shell #stage section.scene[data-form] .copy h1.reader-long {
  font-size:clamp(38px,4.0vw,61px)!important;
 }
 #shell #stage section.scene[data-form] .copy .scene-summary {
  line-height:1.92!important;
  font-size:clamp(15px,1.14vw,19px)!important;
 }
 #shell #stage section.scene[data-form] .copy .learning { line-height:1.65!important; }
 #shell #stage section.scene[data-form] .copy .note-trigger { min-height:34px!important; }
 #shell .drawergrid button { min-height:70px!important; }
}
/* Wide displays: cap line width rather than letting exhibits disperse across huge monitors. */
@media (min-width:1700px) and (min-height:750px) {
 :root { --reader-side:max(6.0vw,calc((100vw - 1710px)/2)); --reader-top:clamp(95px,9.5vh,142px); --reader-bottom:clamp(96px,10.5vh,142px); }
 #shell #stage section.scene[data-form] .visual { height:min(70vh,830px)!important; }
 #shell #stage section.scene[data-form] .copy h1 { font-size:clamp(58px,4.1vw,84px)!important; }
}
/* Laptop screens with shorter height: prioritize readable text while protecting bottom navigation. */
@media (min-width:1101px) and (max-height:760px) {
 :root { --reader-top:clamp(61px,9vh,78px); --reader-bottom:clamp(62px,9.5vh,82px); }
 #shell #stage section.scene[data-form]:not([data-id="15"]):not([data-id="16"]) .visual { min-height:0!important;height:100%!important; }
 #shell #stage section.scene[data-form] .copy h1 { font-size:clamp(37px,4.15vw,63px)!important; }
 #shell #stage section.scene[data-form] .reader-deck { font-size:clamp(14px,1.30vw,18px)!important; }
 #shell #stage section.scene[data-form] .scene-summary { font-size:clamp(13px,1.05vw,17px)!important;line-height:1.62!important; }
}
/* Tablet landscape: leave real safe margins; retain immersive two-column content. */
@media (min-width:760px) and (max-width:1100px) and (orientation:landscape) and (min-height:600px) {
 :root { --reader-side:clamp(25px,4.0vw,45px); --reader-top:clamp(68px,9vh,84px); --reader-bottom:clamp(70px,10vh,92px); }
 #shell #stage section.scene[data-form]:not([data-id="15"]):not([data-id="16"]) {
  left:var(--reader-side)!important;right:var(--reader-side)!important;top:var(--reader-top)!important;bottom:var(--reader-bottom)!important;
  width:calc(100% - var(--reader-side) - var(--reader-side))!important;height:auto!important;max-width:none!important;
  grid-template-columns:minmax(0,45%) minmax(0,1fr)!important;gap:25px!important;
 }
 #shell #stage section.scene[data-form]:not([data-id="15"]):not([data-id="16"]) .visual {
  height:100%!important;min-height:0!important;width:100%!important;
 }
 #shell #stage section.scene[data-form] .copy h1 { font-size:clamp(33px,4vw,48px)!important; }
 #shell #stage section.scene[data-form] .scene-summary { font-size:clamp(13px,1.5vw,16px)!important;line-height:1.7!important; }
}
/* Compact landscape phones: fixed left and right inset should not still leave width=100vw. */
@media (orientation:landscape) and (pointer:coarse) and (max-width:1050px) {
 #shell #stage section.scene[data-form]:not([data-id="15"]):not([data-id="16"]) {
  width:calc(100% - var(--reader-side) - var(--reader-side))!important;height:auto!important;min-height:0!important;
  left:var(--reader-side)!important;right:var(--reader-side)!important;
  top:var(--reader-top)!important;bottom:var(--reader-bottom)!important;
  grid-template-columns:minmax(0,47%) minmax(0,1fr)!important;
  gap:clamp(12px,2.7vw,24px)!important;
 }
 #shell #stage section.scene[data-form]:not([data-id="15"]):not([data-id="16"]) .visual {
  width:100%!important;height:100%!important;min-height:0!important;max-height:100%!important;
 }
 #shell #stage section.scene[data-form] .copy h1 { font-size:clamp(23px,4vw,38px)!important;line-height:1.18!important; }
 #shell #stage section.scene[data-form] .scene-summary { font-size:clamp(12px,1.6vw,15px)!important;line-height:1.52!important; }
 #shell #stage section.scene[data-form] .copy .learning { font-size:clamp(11px,1.42vw,13.5px)!important;line-height:1.5!important; }
 #shell .drawergrid button{ min-height:50px!important; }
 #shell .topright #mapbtn{min-height:40px!important;padding:8px 10px!important}
 #shell .bottomnav .bookmark-nav{min-height:44px!important;min-width:72px!important}
 #shell .bottomnav .chapter-dial{min-height:44px!important;min-width:44px!important}
 #shell :is(.scene button,.drawer button,.mx20-track button){touch-action:manipulation}
 #shell .mx20-track button {min-height:43px!important;}
 #shell .mx20-action>button,#shell .mx20-page-nav button{min-height:40px!important;}
}
/* Portrait phones: stable reading canvas, large touch targets and comfortable breathing room.
   Content is scrollable at the page level, never inside a little caption panel. */
html[data-device="phone"][data-layout="portrait"] #shell #stage {
 top:calc(65px + env(safe-area-inset-top,0px))!important;
 bottom:calc(76px + env(safe-area-inset-bottom,0px))!important;
 scrollbar-gutter:stable;
 background:transparent!important;
}
html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene[data-form]:not([data-id="15"]):not([data-id="16"]) {
 padding:clamp(21px,5vw,30px) clamp(21px,6.2vw,30px) 48px!important;
 gap:clamp(22px,6vw,34px)!important;
}
html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene[data-form] .copy .eyebrow {font-size:12px!important;letter-spacing:.13em!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene[data-form] .copy h1 {font-size:clamp(32px,8.3vw,45px)!important;line-height:1.20!important;letter-spacing:.045em!important;margin:10px 0 15px!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene[data-form] .copy .reader-deck {font-size:clamp(16px,4.15vw,18px)!important;line-height:1.7!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene[data-form] .copy .scene-summary {font-size:clamp(15.5px,4.1vw,18px)!important;line-height:1.82!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene[data-form] .copy .learning {font-size:14px!important;line-height:1.68!important;margin-top:18px!important}
html[data-device="phone"][data-layout="portrait"] #shell #stage>.scene[data-form] .visual {min-height:270px!important;height:min(91vw,425px)!important;}
html[data-device="phone"][data-layout="portrait"] #shell .bottomnav {min-height:68px!important;height:calc(68px + env(safe-area-inset-bottom,0px))!important;box-shadow:0 -9px 26px #0a1d1950!important;}
html[data-device="phone"][data-layout="portrait"] #shell .bottomnav .bookmark-nav{min-width:94px!important;min-height:46px!important;color:#f2e7d4!important}
html[data-device="phone"][data-layout="portrait"] #shell .bottomnav .bookmark-nav span{font-size:13px!important;color:inherit!important}
html[data-device="phone"][data-layout="portrait"] #shell .bottomnav .bookmark-nav b{font-size:11px!important;color:#d5c19a!important}
html[data-device="phone"][data-layout="portrait"] #shell .bottomnav .chapter-dial{min-width:50px!important;min-height:50px!important;}
html[data-device="phone"][data-layout="portrait"] #shell .drawergrid button{min-height:85px!important;}
html[data-device="phone"][data-layout="portrait"] #shell .topright #mapbtn{min-height:44px!important;}
html[data-device="phone"][data-layout="portrait"] #shell .scene input[type="range"]{min-height:42px!important;}
/* Mobile 3D exhibits: allocate dedicated vertical sections; never overlay steps on captions. */
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:1030px!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,
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 {min-height:1030px!important;}
html[data-device="phone"][data-layout="portrait"] #shell #stage .mx20-immersive {height:1030px!important;min-height:1030px!important;}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-heading{top:5.5%!important;left:8%!important;width:84%!important;}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-heading p{font-size:clamp(15px,4vw,17px)!important;line-height:1.62!important;}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-model,
html[data-device="phone"][data-layout="portrait"] #shell .mx20-immersive.ink .mx20-model{top:19%!important;height:35%!important;max-height:none!important;min-height:315px!important;}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-notes{top:56%!important;}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-notes h2{font-size:clamp(20px,5.4vw,24px)!important;}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-notes p{font-size:clamp(14px,3.8vw,16px)!important;line-height:1.68!important;}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-timeline{bottom:10.2%!important;gap:15px!important;}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-track{gap:10px!important;}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-track button{min-height:44px!important;}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-action>button{min-height:44px!important;}
html[data-device="phone"][data-layout="portrait"] #shell .mx20-page-nav{bottom:2.5%!important;}
/* Small-width 320-360 screens need fewer columns and no content clipping. */
@media (max-width:360px) and (orientation:portrait){
 html[data-device="phone"] #shell .brand{left:11px!important}
 html[data-device="phone"] #shell .topright{right:9px!important}
 html[data-device="phone"] #shell #stage>.scene[data-form]{padding-inline:17px!important}
 html[data-device="phone"] #shell #stage>.scene[data-form] .copy h1{font-size:31px!important}
 html[data-device="phone"] #shell .bottomnav{padding-inline:10px!important}
 html[data-device="phone"] #shell .bottomnav .bookmark-nav{min-width:79px!important;padding-inline:6px!important}
}
@media(prefers-reduced-motion:reduce){#shell *{scroll-behavior:auto!important}}
/* Input labels must remain legible on phones; preserve all control functions. */
@media (orientation:landscape) and (pointer:coarse) and (max-width:1050px){
 #shell .scene .controlpanel {max-width:100%!important;min-width:0!important;padding:9px 12px!important;}
 #shell .scene .controlpanel label,
 #shell .scene .controlpanel output {font-size:clamp(12px,1.58vw,15px)!important;line-height:1.35!important;}
 #shell .scene .controlpanel input[type="range"] {height:34px!important;min-height:34px!important;}
 #shell .scene .controlpanel button {min-height:40px!important;}
}