/* V30 · Exhibition typography and interaction finishing rules.
   Layout rules are scoped by format to preserve all chapter content. */
:root{
  --m30-ink:#253d36;
  --m30-paper:#f7f0df;
  --m30-silk:#eee0c5;
  --m30-moss:#3f503b;
  --m30-jade:#007175;
  --m30-gold:#bf9c46;
  --m30-cinnabar:#9d2933;
  --m30-safe-bottom:env(safe-area-inset-bottom,0px);
}

/* Exhibition labels are part of the authoring tools, not the viewed exhibit. */
#shell .blender-model-badge,
#shell .blender-model-status,
#shell .v10-model-caption,
#shell .model-callout{display:none!important}

/* Decorative layers never receive focus or cover interactive exhibit controls. */
#shell .scene::before,#shell .scene::after,#shell .scene .copy::before,
#shell .mx29-transition-grain,#shell .mx29-halo-dot{pointer-events:none!important}
#shell button,#shell input[type="range"]{touch-action:manipulation}
#shell button:focus-visible,#shell [tabindex]:focus-visible{
  outline:2px solid var(--m30-gold);outline-offset:3px;
}
#shell .copy h1,#shell .copy h1 em,#shell .copy p,
#shell .copy .learning,#shell .footnote{overflow-wrap:anywhere;word-break:normal}
#shell .copy h1{letter-spacing:.055em;line-height:1.19}
#shell .copy p{line-height:1.78}
#shell .copy .learning{line-height:1.65}

/* Readable contrast without rectangular cards over photographic scenes. */
@media(min-width:1000px) and (min-height:600px){
  #shell #stage .scene:not([data-id="15"]):not([data-id="16"]) .copy{
    z-index:4;max-width:min(43vw,620px);min-width:0;
    text-wrap:pretty;
  }
  #shell #stage .scene:not([data-id="15"]):not([data-id="16"]) .visual{
    min-width:0;max-width:100%;overflow:visible;
  }
  #shell .scene .copy h1{font-size:clamp(34px,3.35vw,64px)}
  #shell .scene .copy p{font-size:clamp(15px,1.18vw,20px)}
  #shell .scene .copy .learning{font-size:clamp(13px,1vw,17px)}
}

/* Compass: the physical exhibit and the explanatory text use separate planes. */
#shell .suspension-hero{isolation:isolate}
#shell .suspension-hero .suspension-model,
#shell .suspension-hero model-viewer{z-index:2;touch-action:pan-y;}
#shell .suspension-stage .suspension-side{position:relative;z-index:3}
#shell .suspension-stage .controlpanel{position:relative;z-index:4}
#shell .suspension-side .principle-card{
  display:flex;align-items:flex-start;gap:10px;min-width:0;
}
#shell .suspension-side .principle-copy{flex:1;min-width:0;overflow-wrap:anywhere}
#shell .suspension-side .principle-copy span{line-height:1.58}
#shell .suspension-stage input[type="range"]{accent-color:var(--m30-jade)}

/* Buttons use one quiet cloud detail instead of layered decorative effects. */
#shell .controlpanel button,#shell .suspension-side button,
#shell .scene-actions button,#shell .mx20-action button{
  min-height:36px;white-space:normal;text-align:center;
}
#shell .controlpanel button::before,#shell .scene-actions button::before{
  opacity:.26!important;
}

/* The directory artwork is the visual subject, text stays on readable paper. */
#shell #drawer.drawer{isolation:isolate}
#shell #drawer.drawer::before{z-index:0!important;pointer-events:none!important}
#shell #drawer.drawer .drawerhead,
#shell #drawer.drawer .drawergrid,
#shell #drawer.drawer .sources{position:relative;z-index:2}
#shell #drawer.drawer .drawergrid button{
  min-width:0;overflow:hidden;
  transition:background-color .2s,border-color .2s,transform .2s;
}
#shell #drawer.drawer .drawergrid button:focus-visible{
  outline:2px solid #9c7546;outline-offset:2px;
}
#shell #drawer.drawer .drawergrid button strong{line-height:1.45;overflow-wrap:anywhere}

/* Keep the floral transition quietly centered; no 3D cube or screen slicing. */
#shell .mx29-transition{contain:layout style paint}
#shell .mx29-flower{max-width:calc(100vw - 26px);max-height:calc(100dvh - 135px)}
#shell .mx29-transition-caption{max-width:min(92vw,900px);margin:auto;line-height:1.5}
@media(prefers-reduced-motion:reduce){
  #shell .mx29-transition{transition:none!important}
  #shell .mx29-transition .mx29-ring,
  #shell .mx29-transition .mx29-flower,
  #shell .mx29-transition .mx29-cloud{animation:none!important}
}

/* Phone portrait: a reading edition, not a scaled-down desktop canvas. */
@media(orientation:portrait) and (max-width:799px){
  html,body{width:100%;overflow-x:hidden}
  #shell .brand{z-index:46;max-width:calc(100vw - 24px)}
  #shell .brand .shoujin-title{letter-spacing:.12em;white-space:normal}
  #shell .bottomnav{z-index:50;min-height:72px;padding-bottom:max(8px,var(--m30-safe-bottom))}
  #shell #stage .scene[data-form]:not([data-id="15"]):not([data-id="16"]){
    width:100%!important;max-width:100%!important;min-width:0!important;
    padding-left:clamp(16px,5vw,26px)!important;
    padding-right:clamp(16px,5vw,26px)!important;
    padding-bottom:calc(104px + var(--m30-safe-bottom))!important;
    align-content:start!important;
    row-gap:18px!important;
    overflow:visible!important;
  }
  #shell #stage .scene[data-form]>.copy{
    width:100%!important;max-width:100%!important;min-width:0!important;
    flex:none!important;
    height:auto!important;max-height:none!important;
    margin:0!important;
    overflow:visible!important;
    position:relative!important;
    transform:none!important;
  }
  #shell #stage .scene[data-form]>.visual{
    width:100%!important;max-width:100%!important;min-width:0!important;
    flex:none!important;
    height:auto!important;
    position:relative!important;
    transform:none!important;
    margin:0!important;
  }
  #shell #stage .scene[data-form] .copy h1{
    font-size:clamp(27px,8vw,39px)!important;line-height:1.22!important;
    max-width:100%;margin:10px 0 12px!important;
  }
  #shell #stage .scene[data-form] .copy h1 em{
    display:block;font-size:clamp(14px,3.8vw,18px)!important;
    margin-top:9px!important;line-height:1.5!important;
  }
  #shell #stage .scene[data-form] .copy p{
    font-size:clamp(15px,4.25vw,17px)!important;
    line-height:1.78!important;letter-spacing:.012em;
    margin:10px 0 16px!important;
  }
  #shell #stage .scene[data-form] .copy .learning,
  #shell #stage .scene[data-form] .copy .footnote{
    font-size:clamp(13px,3.75vw,15px)!important;line-height:1.68!important;
  }
  #shell #stage .scene[data-form] .copy .learning{display:flex!important;flex-wrap:wrap;gap:9px!important}
  #shell #stage .scene[data-form] .copy .learning>*{min-width:0}
  /* Model first for the suspension-compass chapters, narrative afterwards. */
  #shell #stage .scene[data-id="9"],
  #shell #stage .scene[data-id="10"]{
    display:flex!important;flex-direction:column!important;
    gap:16px!important;align-items:stretch!important;
  }
  #shell #stage .scene[data-id="9"]>.visual,
  #shell #stage .scene[data-id="10"]>.visual{order:0!important}
  #shell #stage .scene[data-id="9"]>.copy,
  #shell #stage .scene[data-id="10"]>.copy{order:1!important}
  #shell .suspension-stage{
    width:100%!important;min-width:0!important;
    display:flex!important;flex-direction:column!important;gap:14px!important;
    height:auto!important;min-height:0!important;
  }
  #shell .suspension-stage .suspension-hero{
    width:100%!important;height:clamp(300px,46dvh,410px)!important;
    min-height:300px!important;max-height:410px!important;
    padding:0!important;overflow:hidden!important;
  }
  #shell .suspension-stage .suspension-model{
    width:96%!important;height:88%!important;
    left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;
  }
  #shell .suspension-stage .suspension-side{
    width:100%!important;max-width:none!important;
    padding:16px!important;position:relative!important;
    overflow:visible!important;
  }
  #shell .suspension-stage .suspension-side h3{font-size:20px!important;line-height:1.35}
  #shell .suspension-stage .principle-card{min-width:0;gap:9px!important}
  #shell .suspension-stage .principle-copy b{font-size:15px!important}
  #shell .suspension-stage .principle-copy span{font-size:13px!important;line-height:1.55!important}
  #shell .suspension-stage #interaction.controlpanel{
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    gap:11px!important;width:100%!important;max-width:100%!important;
    min-width:0!important;height:auto!important;padding:16px!important;
    overflow:visible!important;
  }
  #shell .suspension-stage #interaction.controlpanel label,
  #shell .suspension-stage #interaction.controlpanel output{
    display:block!important;width:100%!important;max-width:100%!important;
    line-height:1.6!important;font-size:14px!important;white-space:normal!important;
  }
  #shell .suspension-stage #interaction.controlpanel input[type=range]{
    display:block!important;width:100%!important;height:24px!important;
    margin:0!important;align-self:stretch!important;
  }
  #shell .suspension-stage #interaction.controlpanel .stepper,
  #shell .suspension-stage #interaction.controlpanel .v10-compass-extra{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;width:100%!important;
  }
  #shell .suspension-stage #interaction.controlpanel button{
    min-width:0!important;min-height:44px!important;padding:9px 6px!important;
    font-size:13px!important;line-height:1.35!important;
  }
  /* Existing fullscreen process exhibits keep their own composition. */
  #shell #stage .scene[data-id="15"],
  #shell #stage .scene[data-id="16"]{padding:0!important}
  #shell .mx20-immersive .mx20-heading{max-width:90%!important}
  #shell #drawer.drawer::before{
    left:3%!important;right:3%!important;width:94%!important;
    opacity:.27!important;pointer-events:none!important;
  }
  #shell #drawer.drawer .drawergrid button{min-height:80px!important}
  #shell .mx29-flower{width:min(91vw,510px)!important;max-height:calc(100dvh - 120px)}
  #shell .mx29-transition-caption{bottom:max(12%,calc(75px + var(--m30-safe-bottom)))!important}
}
@media(orientation:landscape) and (max-height:530px){
  #shell .bottomnav{min-height:48px}
  #shell .mx29-flower{max-width:74vh;max-height:76vh}
  #shell .mx29-transition-caption{bottom:5%;font-size:13px}
}