/* Mobile controls occupy their own rows; no model geometry or camera defaults change. */
@media(max-width:850px){
 body.pion-mobile-header:not(.pion-mobile-viewport) header[data-pion-mobile-header],
 .app-shell > .topbar,[data-pion-model-shell] .topbar{position:relative!important;inset:auto!important;flex-wrap:wrap!important;height:auto!important;max-width:100%;gap:8px!important}
 body.pion-mobile-return{--pion-return-height:calc(64px + env(safe-area-inset-top,0px))}
 body.pion-mobile-return:not(.pion-mobile-viewport){padding-top:var(--pion-return-height)!important}
 body.pion-mobile-return [data-pion-archive-return]{left:8px!important;top:calc(6px + env(safe-area-inset-top,0px))!important;width:calc(50% - 12px)!important;min-width:0!important;height:50px!important;min-height:48px!important;padding:6px 8px!important;gap:5px!important}
 body.pion-mobile-return [data-archive-back-control]{position:fixed!important;top:calc(6px + env(safe-area-inset-top,0px))!important;left:calc(50% + 4px)!important;right:8px!important;width:calc(50% - 12px)!important;min-width:0!important;height:50px!important;min-height:48px!important;font-size:11px!important;padding:6px!important}
 [data-pion-archive-return] .pion-return-wordmark{font-size:15px!important;letter-spacing:1px!important}
 [data-pion-archive-return] .pion-return-wordmark span{font-size:9px!important;letter-spacing:1px!important}
 [data-pion-archive-return] .pion-return-label{font-size:10px!important}
 body.pion-mobile-return header .brand:has(>.title),body.pion-mobile-return [data-pion-legacy-brand],body.pion-mobile-return [data-pion-model-shell] .topbar>.brand{display:none!important}
 body.pion-mobile-header header .topactions{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;overflow-x:auto!important;overflow-y:hidden!important;max-width:100%!important;min-width:0!important;gap:6px!important;scrollbar-width:thin;overscroll-behavior-x:contain;padding-bottom:3px;touch-action:pan-x}
 body.pion-mobile-header header .topactions > *{flex-shrink:0!important}
 body.pion-mobile-header header .topactions .pion-format-controls{display:flex!important;flex-flow:row nowrap!important;gap:6px!important;width:auto!important}
 body.pion-mobile-header header .topactions .pion-export-status:empty{display:none!important}
 body.pion-mobile-header header .topactions .pion-export-status{max-width:180px;font-size:11px;white-space:normal}
 body.pion-mobile-header header .topactions button,body.pion-mobile-header header .topactions select,body.pion-mobile-header header .topactions a{min-height:48px!important;max-height:52px;white-space:nowrap!important}
 body.pion-mobile-header header .topactions #download,body.pion-mobile-header header .topactions #snapshot{display:inline-flex!important;align-items:center;justify-content:center}
 body.pion-mobile-header header .topactions #panelToggle{position:sticky;right:0;z-index:2;background:#f7f8f4;box-shadow:-5px 0 8px #e9eee8}
 body.pion-mobile-viewport > header{position:fixed!important;top:var(--pion-return-height,8px)!important;left:8px!important;right:8px!important;min-height:0!important;height:auto!important;padding:4px!important;background:#eaede8!important;border-bottom:1px solid #cbd5ce;border-radius:8px;display:flex!important;gap:6px!important;z-index:10001!important}
 body.pion-mobile-viewport > header .topactions{width:100%;margin:0!important}
 body.pion-mobile-viewport:not(.full):not(.fullscreen):not(.fullscreen-mode) > canvas,
 body.pion-mobile-viewport:not(.full):not(.fullscreen):not(.fullscreen-mode) > #dimensions{top:var(--pion-mobile-top,132px)!important;left:0!important;width:100%!important;bottom:var(--pion-mobile-bottom,76px)!important;height:calc(100dvh - var(--pion-mobile-top,132px) - var(--pion-mobile-bottom,76px))!important}
 body.pion-mobile-viewport.menu-open:not(.full):not(.fullscreen):not(.fullscreen-mode) > canvas,body.pion-mobile-viewport.menu-open:not(.full):not(.fullscreen):not(.fullscreen-mode) > #dimensions{height:calc((100dvh - var(--pion-mobile-top,132px) - var(--pion-mobile-bottom,76px)) * .5)!important;bottom:auto!important}
 body.pion-mobile-viewport > aside{top:calc(var(--pion-mobile-top,132px) + (100dvh - var(--pion-mobile-top,132px) - var(--pion-mobile-bottom,76px)) * .5 + 4px)!important;bottom:var(--pion-mobile-bottom,76px)!important;left:8px!important;right:8px!important;width:auto!important;min-height:0;z-index:4}
 body.pion-mobile-viewport > nav{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;justify-content:flex-start!important;left:8px!important;right:8px!important;transform:none!important;width:auto!important;max-width:none!important;bottom:calc(var(--viewport-bottom,0px) + max(6px,env(safe-area-inset-bottom)))!important;padding:5px!important;gap:4px!important;scrollbar-width:thin;touch-action:pan-x}
 body.pion-mobile-viewport > nav button{flex:0 0 auto!important;min-width:48px!important;min-height:48px!important;white-space:nowrap}
 body.pion-mobile-viewport .caption,body.pion-mobile-viewport .hint{display:none!important}
 body.pion-mobile-viewport #loading{top:var(--pion-mobile-top,132px)!important;bottom:var(--pion-mobile-bottom,76px)!important}
 body.pion-mobile-viewport .sidecontrols{top:calc(var(--pion-mobile-top,132px) + 8px)!important;bottom:auto!important}
 body.pion-mobile-header:not(.pion-mobile-viewport) header button,body.pion-mobile-header:not(.pion-mobile-viewport) header select{min-height:48px;max-width:100%}
 body.pion-mobile-header:not(.pion-mobile-viewport) header .nav{flex-wrap:wrap;max-width:100%}
 body.pion-mobile-viewport.full > header,body.pion-mobile-viewport.full > nav,body.pion-mobile-viewport.full > aside{display:none!important}
 body.pion-mobile-viewport.full > canvas{inset:0!important;width:100%!important;height:100%!important}
 html:has(:fullscreen) body.pion-mobile-return{padding-top:0!important}
}
@media(max-width:850px) and (orientation:landscape) and (max-height:550px){
 body.pion-mobile-viewport.menu-open:not(.full):not(.fullscreen):not(.fullscreen-mode) > canvas,
 body.pion-mobile-viewport.menu-open:not(.full):not(.fullscreen):not(.fullscreen-mode) > #dimensions{width:calc(100% - min(46vw,340px) - 16px)!important;height:calc(100dvh - var(--pion-mobile-top,132px) - var(--pion-mobile-bottom,76px))!important}
 body.pion-mobile-viewport > aside{top:var(--pion-mobile-top,132px)!important;left:auto!important;right:8px!important;width:min(46vw,340px)!important}
}