/* 梦溪万象 V27 ｜统一祥云交互与双端分层美化：全局控件，不改章节内容 */
:root{--mx27-cloud:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20220%2034%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23bc965b%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.64%22%3E%3Cpath%20d%3D%22M4%2024H28c7%200%208-10%2017-10%208%200%2011%2010%2021%2010h26c7%200%208-11%2019-11%209%200%2010%2011%2020%2011h26c7%200%209-10%2019-10%208%200%2011%2010%2021%2010h19%22%2F%3E%3Cpath%20d%3D%22M42%2024c-5-5-5-10%200-14s11-3%2013%203M105%2024c-5-5-5-10%200-14s11-3%2013%203M170%2024c-5-5-5-10%200-14s11-3%2013%203%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");--mx27-cloud-light:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20220%2034%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23f1dba9%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.68%22%3E%3Cpath%20d%3D%22M4%2024H28c7%200%208-10%2017-10%208%200%2011%2010%2021%2010h26c7%200%208-11%2019-11%209%200%2010%2011%2020%2011h26c7%200%209-10%2019-10%208%200%2011%2010%2021%2010h19%22%2F%3E%3Cpath%20d%3D%22M42%2024c-5-5-5-10%200-14s11-3%2013%203M105%2024c-5-5-5-10%200-14s11-3%2013%203M170%2024c-5-5-5-10%200-14s11-3%2013%203%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");--mx27-knob:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2218%22%20fill%3D%22%23f9efd9%22%20stroke%3D%22%23926d43%22%20stroke-width%3D%221.5%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2214.5%22%20fill%3D%22none%22%20stroke%3D%22%23b9a57d%22%20stroke-width%3D%22.8%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23855c39%22%20stroke-width%3D%221.25%22%3E%3Cpath%20d%3D%22M20%206Q27%2011%2020%2018Q13%2011%2020%206ZM20%2034Q27%2029%2020%2022Q13%2029%2020%2034ZM6%2020Q11%2013%2018%2020Q11%2027%206%2020ZM34%2020Q29%2013%2022%2020Q29%2027%2034%2020Z%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%223%22%20fill%3D%22%23a35f4a%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");}
/* Each interactive button reads as an engraved silk/china control, not a heavy software panel. */
#shell :is(.scene-actions button,.controlpanel button,.suspension-stage .v10-compass-extra button,
  .mx20-action button,.mx20-page-nav button,.mx20-track button,.mx23-controls button,
  .sun-panel button,.solstice-panel button,.note-trigger,.scroll-skip,.drawerhead button){
  position:relative;isolation:isolate;touch-action:manipulation;
  transition:transform .22s ease,background-color .22s ease,border-color .22s ease,box-shadow .22s ease;
}
#shell :is(.scene-actions button,.controlpanel button,.suspension-stage .v10-compass-extra button,
  .mx20-action button,.mx20-page-nav button,.mx23-controls button,.sun-panel button,.solstice-panel button){
  border-radius:11px!important;
  border-color:rgba(159,115,66,.49)!important;
  background-image:var(--mx27-cloud-light),linear-gradient(180deg,rgba(255,246,219,.18),rgba(32,57,48,.04))!important;
  background-size:140px 21px,100% 100%!important;
  background-position:center 3px,center!important;
  background-repeat:repeat-x,no-repeat!important;
  box-shadow:inset 0 1px 0 rgba(255,250,236,.25),0 3px 10px rgba(24,22,17,.13)!important;
}
#shell :is(.scene-actions button,.controlpanel button,.suspension-stage .v10-compass-extra button,.mx20-action button,.mx20-page-nav button,.mx20-track button,.mx23-controls button,.sun-panel button,.solstice-panel button):active{transform:translateY(1px) scale(.985)!important}
#shell :is(.scene-actions button,.controlpanel button,.mx20-action button,.mx20-track button,.mx23-controls button,.sun-panel button,.solstice-panel button):focus-visible{outline:2px solid #d7a75c!important;outline-offset:3px!important}
/* Sliders in every chapter, including terrain/sundial/ink and magnetic needle. */
#shell input[type="range"]{appearance:none!important;-webkit-appearance:none!important;accent-color:#a68051!important;background:transparent!important;
  min-height:28px!important;max-width:100%!important;touch-action:pan-y!important;cursor:pointer;}
#shell input[type="range"]::-webkit-slider-runnable-track{height:9px!important;border-radius:999px!important;border:1px solid rgba(132,103,65,.37)!important;
  background-image:var(--mx27-cloud),linear-gradient(90deg,rgba(250,242,224,.95),rgba(216,198,164,.94))!important;
  background-size:175px 30px,100% 100%!important;background-position:center!important;background-repeat:repeat-x,no-repeat!important;
  box-shadow:inset 0 1px 3px rgba(76,52,29,.13)!important;}
#shell input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none!important;appearance:none!important;width:26px!important;height:26px!important;
  margin-top:-9px!important;border:none!important;border-radius:50%!important;background:var(--mx27-knob) center/100% 100% no-repeat!important;
  box-shadow:0 2px 8px rgba(33,29,21,.24)!important;}
#shell input[type="range"]::-moz-range-track{height:9px;border:1px solid rgba(132,103,65,.37);border-radius:999px;
  background:linear-gradient(90deg,rgba(250,242,224,.95),rgba(216,198,164,.94));}
#shell input[type="range"]::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;background:var(--mx27-knob) center/100% 100% no-repeat;}
/* The catalogue is patterned on both widescreen and phones, but each menu card remains legible. */
#shell .drawergrid button{min-height:70px;isolation:isolate;}
#shell .drawergrid button::after{content:"";position:absolute;right:14px;bottom:7px;width:110px;height:24px;
  background:var(--mx27-cloud-light) center/130px 22px repeat-x;opacity:.24;pointer-events:none;}
#shell .drawerhead::after{content:"";position:absolute;left:0;bottom:-1px;width:140px;height:15px;background:var(--mx27-cloud-light) left center/140px 20px no-repeat;opacity:.26;pointer-events:none;}
/* A light rhythmic fabric border around the transition, not a pile of stickers. */
/* Keep 'compass museum exhibit' readable on smartphones: model stage first, descriptions entirely below it. */
html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]){
  display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:15px!important;padding:14px 14px 26px!important;
}
html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"])>.visual{
  order:0!important;display:block!important;width:100%!important;height:auto!important;min-height:0!important;flex:none!important;}
html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"])>.copy{
  order:1!important;flex:none!important;width:100%!important;max-width:100%!important;transform:none!important;margin:0!important;
  border:1px solid rgba(162,127,77,.17)!important;background:rgba(254,248,234,.87)!important;padding:15px!important;border-radius:16px!important;}
html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]) .suspension-stage{
  display:flex!important;flex-direction:column!important;align-items:stretch!important;padding:0!important;gap:12px!important;height:auto!important;min-height:0!important;}
html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]) .suspension-hero{
  display:block!important;flex:none!important;position:relative!important;min-height:370px!important;height:370px!important;max-width:100%!important;
  isolation:isolate;overflow:hidden!important;border-radius:18px!important;}
html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]) .suspension-model{
  top:51%!important;left:50%!important;width:97%!important;height:89%!important;max-height:348px!important;
  transform:translate(-50%,-50%)!important;}
html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]) .blender-model-badge{
  top:10px!important;left:10px!important;bottom:auto!important;right:auto!important;max-width:calc(100% - 20px)!important;
  padding:5px 8px!important;font-size:10px!important;white-space:normal!important;}
html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]) .blender-model-status{
  left:9px!important;right:9px!important;bottom:9px!important;top:auto!important;max-width:none!important;
  font-size:11px!important;line-height:1.35!important;padding:6px 9px!important;pointer-events:none!important;}
html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]) :is(.model-callout,.v10-model-caption){display:none!important;}
html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]) .suspension-side{
  position:relative!important;order:1!important;max-width:none!important;overflow:visible!important;
  padding:14px!important;border-radius:16px!important;}
html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]) #interaction.controlpanel{
  position:relative!important;order:2!important;display:flex!important;flex-direction:column!important;gap:11px!important;
  width:100%!important;min-height:0!important;max-height:none!important;overflow:visible!important;padding:14px!important;
  border:1px solid rgba(157,120,66,.15)!important;border-radius:16px!important;}
html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]) #interaction.controlpanel>*{
  display:block!important;position:static!important;width:100%!important;max-width:100%!important;margin:0!important;flex:none!important;}
html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]) #interaction.controlpanel .stepper,
html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]) #interaction.controlpanel .v10-compass-extra{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]) #interaction.controlpanel button{
  min-height:43px!important;padding:10px 7px!important;font-size:12px!important;line-height:1.25!important;white-space:normal!important;}
html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]) #interaction.controlpanel label,
html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]) #interaction.controlpanel output{
  display:block!important;font-size:13px!important;line-height:1.52!important;text-wrap:pretty!important;}
html[data-device="phone"][data-layout="portrait"] #shell #stage .scene:is([data-id="9"],[data-id="10"]) .copy :is(p,.learning){
  font-size:14px!important;line-height:1.72!important;color:#394e43!important;}
/* Mobile controls throughout the other 23 scenes keep a minimum comfortable touch height. */
html[data-device="phone"][data-layout="portrait"] #shell #stage :is(.scene-actions button,.controlpanel button,.mx20-track button,.mx20-action button,.sun-panel button){
  min-height:42px!important;}
@media(max-width:900px) and (orientation:landscape){
 #shell .controlpanel button{min-height:34px!important}
}
@media(prefers-reduced-motion:reduce){}

#shell .scroll-opening>.scroll-skip{position:absolute!important;z-index:20!important;left:auto!important;top:auto!important;right:5%!important;bottom:2.4%!important;transform:none!important;white-space:nowrap!important;min-height:36px!important;padding:7px 15px!important;line-height:1.2!important;}
html[data-device="phone"][data-layout="portrait"] #shell .scroll-opening>.scroll-skip{right:7%!important;bottom:2%!important;min-height:34px!important;padding:7px 13px!important;background:rgba(12,31,27,.85)!important;color:#f2d8a8!important;box-shadow:0 4px 12px #0005!important;}