/* One 1600x900 composition, fitted to the visible browser viewport. */
html,body{width:100%;height:100%;overflow:hidden}
body{font-size:13px;background:#020d22}
#app-shell{position:absolute;left:50%;top:50%;width:1600px;height:900px;transform:translate(-50%,-50%) scale(var(--app-scale,1));transform-origin:center;overflow:hidden}
#app-shell header{height:70px;min-height:0;padding:6px 18px;flex-wrap:nowrap}
#app-shell .brand{gap:14px}
#app-shell .brand>svg{width:76px;height:48px}
#app-shell .brand strong{font-size:31px}
#app-shell .brand>span{display:block;font-size:15px;max-width:none}
#app-shell .connection{font-size:12px;margin:0}
#app-shell main{height:830px;width:100%;max-width:none;display:grid;grid-template-columns:278px minmax(0,1fr) 268px;gap:10px;padding:10px}
#app-shell .left,#app-shell .right{min-height:0;display:flex;flex-direction:column;gap:10px;grid-column:auto;overflow:hidden}
#app-shell .panel{flex-shrink:0}
#app-shell .panel h2{min-height:34px;height:34px;font-size:16px;padding:5px 10px 5px 17px}
#app-shell .panel h2:before{top:9px;height:16px}
#app-shell .content{padding:8px 10px}
#app-shell .caption,#app-shell h3{font-size:13px;margin:6px 0}
#app-shell button{padding:6px 8px}
#app-shell .mode-switch button{padding:7px 3px;gap:4px;flex-direction:column;font-size:13px}
#app-shell .mode-switch svg{height:23px}
#app-shell .flight-actions{gap:6px}
#app-shell .flight-actions button{padding:8px 2px;font-size:12px;gap:6px}
#app-shell .keys{grid-template-columns:1fr 1fr;gap:7px 10px}
#app-shell .keys>span{font-size:12px}
#app-shell .hint{font-size:11px;line-height:1.5;margin:6px 0 0}
#app-shell .mouse-note{font-size:11px;margin-top:8px;padding:7px}
#app-shell .mouse-note small{font-size:10px}
#app-shell .layers .content{gap:6px;font-size:11px;padding:8px 10px}
#app-shell .middle{display:flex;min-height:0;gap:8px;order:initial}
#app-shell .viewport{height:auto;min-height:0;aspect-ratio:auto;flex:1}
#app-shell .viewport>img{inset:0;width:100%;height:100%;object-fit:cover;max-width:100%;opacity:1}
#app-shell .scene-badge{top:12px;font-size:11px}
#app-shell .compass{top:56px}
#app-shell .hud{top:14px;max-width:54%;padding:10px 12px}
#app-shell .hud svg{display:block}
#app-shell .hud p{font-size:11px}
#app-shell .navigation{top:34%}
#app-shell .navigation button{padding:7px 5px;width:51px;min-height:56px}
#app-shell .camera-bar{height:43px;min-height:43px;flex:none}
#app-shell .camera-bar h2{display:flex;width:115px;font-size:15px}
#app-shell .camera-bar button{font-size:13px;padding:5px}
#app-shell .replay{height:92px;min-height:92px;flex:none}
#app-shell .replay h2{height:30px;min-height:30px;font-size:15px}
#app-shell .replay-row{height:60px;display:flex;flex-wrap:nowrap;gap:10px;padding:9px 12px;overflow:hidden}
#app-shell .replay-row>button{width:30px;height:32px;min-width:30px;padding:3px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;white-space:nowrap;line-height:1}
#app-shell .replay-row button.round{width:38px;height:38px;min-width:38px;padding:8px}
#app-shell .replay-row svg{width:23px;height:23px;display:block;flex:none}
#app-shell #playback use[href="#i-play"],#app-shell #rewind use,#app-shell #finish use{fill:currentColor;stroke-width:1}
#app-shell .replay-row>span{font-size:12px;white-space:nowrap}
#app-shell #timeline{flex:1;width:0;min-width:50px;order:initial;flex-basis:auto}
#app-shell .speeds{flex:none}
#app-shell .speeds button{font-size:12px;padding:5px 9px}
#app-shell .right>#manual-info,#app-shell .right>#auto-info{display:flex;flex-direction:column;gap:10px;min-height:0}
#app-shell .values>div{padding:8px 0;font-size:12px}
#app-shell .notice{padding:9px;font-size:13px}
#app-shell .notice.warning{font-size:15px}
#app-shell .wide{margin-top:6px;padding:6px;font-size:12px}
#app-shell .footnote{display:block;font-size:10px;margin-top:auto}
#app-shell .area-tag{font-size:11px;padding:5px}
#app-shell #selector{height:102px;width:100%;margin:6px 0}
#app-shell .z-entry{margin-top:6px;font-size:12px}
#app-shell .z-entry{white-space:nowrap}
#app-shell .z-entry input{padding:4px;flex:1;width:0;min-width:0}
#app-shell .layers label{display:flex;align-items:center;white-space:nowrap;font-size:10.5px}
#app-shell .layers input{flex:none}
#app-shell .coordinates{font-size:10px;margin-top:7px;padding-top:5px}
#app-shell #profile{height:100px}
#app-shell .minimap{width:240px;bottom:36px}
#app-shell .minimap canvas{height:135px}
/* Visibility is a state, including inside the narrow-screen stylesheet. */
#app-shell [hidden]{display:none!important}