/* Native cursor is required in the dialog's browser top layer. */
body.viewer-open #cursor{visibility:hidden}
#viewer,#viewer *,#viewer::backdrop{cursor:auto!important}
html:has(#viewer[open]){overflow:hidden}
#viewer{inset:0;margin:0;padding:76px 5vw 28px;background:#000b;color:#fff;overflow:auto}
#viewer .viewer-panel{width:min(1120px,100%);margin:auto;background:#101216;border:1px solid #ffffff29;padding:20px}
#viewer-close{position:fixed;right:24px;top:16px;z-index:5;min-width:112px;min-height:48px;background:#191c21;color:white;border:1px solid #ffffff50;border-radius:3px}
#viewer-media{background:#ffffff0f;min-height:120px}
#viewer canvas,#viewer img{display:block;width:100%;height:auto;max-width:100%;max-height:calc(100svh - 310px);object-fit:contain}
#viewer [hidden]{display:none!important}
#viewer iframe{display:block;width:100%;height:calc(100svh - 310px);min-height:260px;border:0;background:#101216}
#viewer:has(iframe){padding:76px 5vw 28px;background:#000b}
.viewer-info{padding:18px 4px 2px}
#viewer-label{text-align:left;margin:0;font-size:20px;line-height:1.3;letter-spacing:.03em}
#viewer-category{font-size:12px;margin:8px 0;opacity:.75}
#viewer-description{font-size:14px;color:#ffffffbd}
#viewer-site{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;color:#fff;text-underline-offset:5px}
#ribbon-controls :is(button,a.ribbon-link){background:#ffffff0f}
#ribbon-controls :is(button,a.ribbon-link) .open-mark{position:absolute;right:8px;top:8px;bottom:auto;left:auto;padding:2px 7px;background:#101216cf;color:white;font-size:16px;opacity:0;transition:opacity .15s}
#ribbon-controls :is(button,a.ribbon-link):hover .open-mark,#ribbon-controls :is(button,a.ribbon-link):focus-visible .open-mark{opacity:1}
#ribbon-controls :is(button,a.ribbon-link) .ribbon-label{font-size:12px;background:#eef0f3e8;padding:4px 6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;bottom:-29px}
@media(pointer:coarse){#ribbon-controls :is(button,a.ribbon-link) .ribbon-label,#ribbon-controls :is(button,a.ribbon-link) .open-mark{opacity:1}}
@media(max-width:767px){
 #viewer,#viewer:has(iframe){padding:76px 12px 16px}
 #viewer .viewer-panel{padding:10px}
 #viewer-close{right:12px}
 #viewer-label{font-size:17px}
 #viewer-description{font-size:13px}
 #scene2 .jp-copy{font-size:13px!important}
 #scene2 .jp-mask{white-space:normal}
 #scene2 .jp-mask span{display:block}
}

/* Review 1: keep the sphere clear of mobile copy; all frames retain visible labels. */
#ribbon-controls :is(button,a.ribbon-link) .ribbon-label{opacity:1}
@media(max-width:767px){#scene1 .declaration{top:66%}#scene1 h2{font-size:48px}}