/* BOLD: the terrain fills the viewport; controls float over it. */
#stage::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,transparent 45%,rgba(0,3,10,.34) 100%);z-index:2}
#arrival{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:28;pointer-events:none;background:radial-gradient(ellipse,rgba(7,11,20,.5),transparent 70%);animation:arrival-title 5s ease-out both;text-align:center;padding:24px}#arrival h1{font-size:64px;font-weight:600;letter-spacing:-.05em;margin:0 0 16px;color:#e8eef6}#arrival p{font-size:24px;margin:0 0 16px;color:#e8eef6}#arrival small{font-size:13px;color:#9aa7b8}#stage.arriving #gl{animation:arrival-scene 2.4s ease-out both}
@keyframes arrival-scene{from{opacity:0}to{opacity:1}}@keyframes arrival-title{0%{opacity:0}15%,58%{opacity:1}80%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){#arrival{display:none}#stage.arriving #gl{animation:none}*,*::before,*::after{transition:none!important;animation:none!important}}
:root{--bg-0:#070b14;--glass:rgba(10,16,28,.62);--glass-edge:rgba(255,255,255,.08);--ink-1:#e8eef6;--ink-2:#9aa7b8;--ink-3:#9aa7b8;--signal:#ffb020;--cyan:#38d3f5;--mono:'JetBrains Mono',Consolas,monospace;--panel-width:360px;--ui-radius:12px;--glass-blur:18px}
#app{display:block!important;position:relative;overflow:hidden;background:var(--bg-0)}
#stage{position:absolute!important;inset:0!important;width:100%;height:100%;grid-row:1!important;background:var(--bg-0)}
#gl{position:absolute;inset:0;width:100%;height:100%}
#app-header,#mode-rail,#inspector,#view-pill,#layer-dock,#layer-legend,#scene-hero,#minimap-shell,#scale-bar,#north-arrow,#welcome-card,#evidence-popover,#compare-popover,#exag-popover,#export-menu.export-menu,#side,#help,.command-box,#gallery,.hover-hud,.swipe-label,.model-compare-note,#fly-hint,#pres-title,#pres-metrics{background:var(--glass);border:1px solid var(--glass-edge);backdrop-filter:blur(var(--glass-blur));box-shadow:none;border-radius:16px}
#app-header{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 176px);height:44px;padding:0 12px;gap:16px;border-radius:24px;z-index:40}
#app-header .brand{height:44px;min-width:0;max-width:none;gap:8px;padding:0!important}
#app-header .brand-mark,#app-header .brand-mark svg{width:28px;height:28px}
#app-header .brand b{font-size:18px;font-weight:600;letter-spacing:-.03em}
#app-header .brand small{display:none}
#library-toggle.scene-picker{background:transparent;max-width:280px;min-width:0;border:0;padding:4px 0;font-size:13px}
#library-toggle.scene-picker>span{display:none}
#scene-badge.scene-badge{font-size:12px;max-width:240px;padding:5px 10px;border-radius:12px}
.header-actions{margin-left:0;gap:4px}.header-actions #dl-dsm-header{font-weight:600;font-size:13px}.header-actions .icon-btn{height:32px;width:32px}
#mode-rail{position:absolute;left:16px;top:50%;bottom:auto;transform:translateY(-50%);width:56px;padding:8px 6px;gap:24px;border-radius:28px;z-index:18}
#mode-rail button{position:relative;width:42px;min-height:44px;height:44px;padding:8px;border-radius:12px;display:grid;place-content:center}
#mode-rail button span{display:none}#mode-rail button.active{box-shadow:none;border-color:transparent;background:rgba(56,211,245,.12)}
#mode-rail svg{width:22px;height:22px}#mode-rail button::after{content:attr(aria-label);display:none;position:absolute;left:54px;top:8px;white-space:nowrap;padding:8px 12px;background:rgba(10,16,28,.94);border:1px solid var(--glass-edge);border-radius:12px;font-size:12px;color:var(--ink-1);z-index:30}#mode-rail button:hover::after,#mode-rail button:focus-visible::after{display:block}
#inspector{top:88px;right:88px;bottom:24px;width:min(360px,calc(100vw - 184px));max-height:calc(100dvh - 112px);transition:transform .2s ease-out,opacity .2s ease-out;z-index:17}
#app.drawer-collapsed #inspector{transform:translateX(32px);opacity:0;visibility:hidden;pointer-events:none}
#drawer-reopen{display:none!important}#drawer-head{padding:24px;gap:16px}#drawer-title{font-size:24px;font-weight:600}#drawer-subtitle{font-size:13px;margin-top:8px}#drawer-toggle{width:24px;height:24px;font-size:24px}
#inspector .panel{padding:24px}#inspector .group{padding-bottom:24px;margin-bottom:24px}#inspector .group h3{font-size:18px}#inspector .kv,#inspector label,#inspector .note{font-size:13px;line-height:1.5}#inspector output,#inspector .kv>span{font-family:var(--mono);font-variant-numeric:tabular-nums}
#toolbar,#app.drawer-collapsed #toolbar{position:absolute;top:88px;left:auto;right:16px;bottom:auto;width:56px;max-width:56px;z-index:20}
#view-pill{flex-direction:column;align-items:center;width:56px;max-width:56px;max-height:calc(100dvh - 312px);overflow:visible;padding:8px 4px;gap:4px;border-radius:28px}
#nav-mode,#view-mode{flex-direction:column;display:flex;gap:4px;padding:0;border:0;background:transparent}
#view-pill button{position:relative;display:grid;place-items:center;width:44px;height:36px;min-width:44px;padding:8px;border-radius:12px;font-size:13px;background:transparent;border:0}
#view-pill button.active{background:rgba(56,211,245,.12);color:var(--cyan)}#view-pill svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#view-pill .v3-tool-label{position:absolute;right:60px;top:4px;white-space:nowrap;padding:8px 12px;border-radius:12px;background:rgba(10,16,28,.94);border:1px solid var(--glass-edge);font-size:12px;display:none}#view-pill button:hover .v3-tool-label,#view-pill button:focus-visible .v3-tool-label{display:block}
#view-pill .sep{width:24px;height:1px;background:var(--glass-edge);margin:4px}
#app:has(#coordinate-readout) #cinematic-status{top:144px}@media(max-width:700px){#app:not(.drawer-collapsed) #coordinate-readout{display:none}}
#coordinate-readout{position:absolute;left:96px;top:80px;z-index:15;max-width:calc(100% - 208px);padding:8px 12px;background:var(--glass);border:1px solid var(--glass-edge);border-radius:12px;color:var(--ink-2);font:11px/1.6 var(--mono);pointer-events:none}#coordinate-readout>div{display:flex;align-items:center;gap:16px;justify-content:space-between}#coordinate-crs{color:var(--cyan);font-weight:500}#coordinate-grid-toggle{pointer-events:auto;padding:2px 8px;font-size:11px}#coordinate-value,#coordinate-lonlat{display:block}#coordinate-lonlat{font-size:10px;color:var(--ink-2)}#coordinate-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}#coordinate-labels span{position:absolute;transform:translate(-50%,-50%);padding:2px 4px;border-radius:4px;background:rgba(10,16,28,.75);color:#b2d9e0;font:10px var(--mono);white-space:nowrap}#app.presentation #coordinate-readout{display:none}@media(max-width:700px){#coordinate-readout{left:64px;top:62px;max-width:calc(100% - 128px);font-size:9px;padding:4px 8px}#coordinate-lonlat{display:none}#cinematic-status{top:140px}}
#cinematic-status{position:absolute;top:80px;left:50%;transform:translateX(-50%);z-index:16;display:flex;align-items:center;gap:16px;padding:8px 12px;border:1px solid var(--glass-edge);border-radius:12px;background:var(--glass);color:var(--cyan);font:12px var(--mono);white-space:nowrap}#cinematic-status button{padding:4px 8px;font-size:12px}#app.presentation #cinematic-status{display:none}
#compare-popover,#exag-popover{top:0;right:68px;bottom:auto;width:240px;padding:16px;z-index:22}
#exag-control{position:relative}#exag-trigger::after{content:attr(data-value);position:absolute;bottom:1px;right:1px;font:9px var(--mono);color:var(--cyan)}
#layer-dock,#app.drawer-collapsed #layer-dock{left:50%;right:auto;transform:translateX(-50%);bottom:24px;max-width:calc(100% - 384px);padding:8px;gap:4px;border-radius:40px;overflow:visible;width:max-content}
#shade-mode{gap:8px}#layer-dock #shade-mode button{position:relative;display:flex;flex-direction:column;align-items:center;width:44px;min-width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;font-size:12px;overflow:visible}
#layer-dock .layer-thumb{width:44px;height:44px;border-radius:50%;border:2px solid transparent;object-fit:cover}
#layer-dock #shade-mode button.active{box-shadow:none;background:transparent}#layer-dock #shade-mode button.active .layer-thumb{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(56,211,245,.12)}
#layer-dock #shade-mode button .layer-label{display:none;position:absolute;bottom:-21px;font-size:12px;color:var(--ink-1);white-space:nowrap;text-shadow:0 1px 6px #000}#layer-dock #shade-mode button.active .layer-label{display:block;color:var(--cyan)}
#layer-dock #shade-mode button:not(.active):hover .layer-label,#layer-dock #shade-mode button:focus-visible .layer-label{display:block;bottom:54px;padding:8px 12px;background:rgba(10,16,28,.94);border-radius:12px}
#dock-more{width:36px;height:36px;border-radius:50%;background:transparent;border:0}#layer-more-menu{bottom:76px;right:0;background:var(--glass);backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-edge);border-radius:16px}
#layer-more-menu button{width:100%!important;flex-direction:row!important;gap:12px}#layer-more-menu .layer-label{position:static!important;display:inline!important}
#layer-legend,#app.drawer-collapsed #layer-legend{left:50%;transform:translateX(-50%);bottom:104px;top:auto!important;width:var(--dock-width,420px);max-width:calc(100% - 384px);padding:12px 16px;min-width:0;z-index:14}#legend .ticks{font:12px var(--mono)}
#scene-hero,#app.drawer-collapsed #scene-hero{left:24px;bottom:24px;max-width:calc(50% - 280px);padding:16px 24px;pointer-events:none;text-shadow:none}
#hero-title{font-size:13px!important;letter-spacing:.02em;margin:0 0 12px;color:var(--ink-2);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hero-stats{display:flex;gap:24px}#hero-stats .hero-stat{min-width:0;padding-right:0;border:0}#hero-stats .hero-stat b{font-size:24px;color:var(--cyan);font-weight:400;white-space:nowrap;line-height:1.3}#hero-stats .hero-stat span{font-size:12px;text-transform:uppercase;margin-top:4px}#hero-caption{font-size:12px;line-height:1.4;margin-top:12px;display:block;color:var(--ink-2)}
#minimap-shell{position:absolute;right:16px;bottom:24px;width:168px;height:168px;border-radius:50%;padding:8px;z-index:14;overflow:hidden}
#minimap{position:static!important;display:block;width:150px;height:150px;border:0;opacity:1;border-radius:50%;background:transparent}
#scale-bar-container{position:absolute!important;left:auto!important;right:16px;top:auto!important;bottom:8px;display:flex!important;z-index:15}
#north-arrow{position:absolute;right:24px;bottom:132px;width:24px;height:32px;background:rgba(10,16,28,.7);border:0;font-size:12px;border-radius:8px;pointer-events:none}#north-arrow span{font-size:10px}
#scale-bar{background:transparent;border:0;padding:0 8px;border-radius:0}#scale-bar-text{font:12px var(--mono)}
#welcome-card{left:96px;top:88px;bottom:auto;width:340px;padding:24px;border-radius:16px}#welcome-card h2{font-size:24px}#welcome-card p{font-size:12px}
#evidence-popover{top:72px;left:50%;transform:translateX(-50%);width:min(420px,calc(100% - 32px));padding:24px}#evidence-popover h2{font-size:18px}
#side{top:72px!important;left:50%!important;transform:translateX(-50%);width:min(400px,calc(100vw - 32px))!important;max-height:calc(100dvh - 96px)!important}
#fly-hint,#stage:has(#model-compare-note:not(.hidden)) #fly-hint{left:96px;bottom:184px;width:max-content;max-width:calc(100% - 208px);font-size:12px;padding:12px 16px}
#swipe-label-left{top:88px;left:96px;max-width:calc(50% - 120px)}#swipe-label-right{top:88px;right:88px;max-width:calc(50% - 120px)}.model-compare-note{left:96px;top:136px;max-width:calc(100% - 208px);font-size:13px}
.comparison{left:96px;right:88px;top:88px;bottom:208px;border-radius:16px;background:var(--glass)}
#exaggeration-note{top:72px;left:50%;transform:translateX(-50%);right:auto;border-radius:12px}
#app.presentation #toolbar,#app.presentation #mode-rail,#app.presentation #app-header,#app.presentation #scene-hero,#app.presentation #minimap-shell{display:none!important}#app.presentation #north-arrow{position:static;width:32px;height:36px}#app.presentation #scale-bar-container{left:24px!important;right:auto;bottom:24px!important;gap:16px}
#app.presentation #pres-title{top:24px;left:24px;padding:16px 24px;font-size:24px}#app.presentation #pres-metrics{padding:16px 24px}
.v3-solid-glass{--glass:rgba(10,16,28,.9);--glass-blur:0px}
#toolbar #view-pill button::before{display:none!important}
#view-pill #nav-mode button,#view-pill #view-mode button{width:44px;height:36px;min-width:44px;padding:8px}
#minimap-north{position:absolute;top:14px;right:28px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;border-radius:8px;background:rgba(10,16,28,.8);font-size:12px;color:var(--cyan);pointer-events:none}#minimap-north small{font-size:10px;color:var(--ink-1)}
#north-arrow{position:static;bottom:auto;right:auto;background:transparent;width:24px;height:24px;margin-right:8px}
#layer-dock #shade-mode button{border-radius:50%!important}#layer-dock-actions{overflow:visible;flex:none}#layer-dock #shade-mode button{justify-content:flex-start}#scene-hero::before{display:none}
#minimap-shell #minimap{width:150px!important;height:150px!important;box-shadow:none;border:0;background:transparent}
#metrics .card .v{font:24px var(--mono);color:var(--ink-1)}#metrics .card .k{font-size:12px}#metrics .card{padding:8px 0}.validation-baseline strong{font-size:15px}.validation-baseline span{font-size:13px}
button,input,select,textarea{border-radius:12px}button{background:transparent;border:1px solid var(--glass-edge);font-size:13px;transition:transform .15s ease-out,border-color .15s ease-out,background .15s ease-out}button:hover:not(:disabled){transform:translateY(-1px);border-color:rgba(56,211,245,.42);background:rgba(56,211,245,.07)}button.primary{background:var(--signal);border-color:var(--signal);color:#070b14;font-weight:600}button.primary:hover:not(:disabled){background:#ffc05b;color:#070b14}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
#upload-modal .upload-dialog,#export-menu.export-menu,.command-box,#help,#gallery{background:var(--glass);border:1px solid var(--glass-edge);backdrop-filter:blur(var(--glass-blur));border-radius:16px}#upload-modal .upload-dialog{top:16px;right:16px;bottom:16px;width:min(520px,calc(100vw - 32px));padding:24px}
#export-menu.export-menu{top:72px;bottom:auto;right:16px;max-height:calc(100dvh - 88px)}.export-menu .export-category button{background:transparent;border-color:var(--glass-edge)}
[data-theme="light"]{--glass:rgba(239,245,249,.86);--glass-edge:rgba(14,36,55,.14);--ink-1:#112738;--ink-2:#425b6e;--ink-3:#425b6e;--cyan:#00758e;--paper:#eff5f9;--text:var(--ink-1);--muted:var(--ink-2)}
@media(max-width:1000px){#minimap-shell #minimap{width:110px!important;height:110px!important}}
@media(max-width:700px){#layer-dock-actions{overflow:visible}#arrival h1{font-size:40px}#arrival p{font-size:18px}}
@media(min-width:1700px){#hero-stats .hero-stat b{font-size:40px}#hero-stats{gap:16px}#scene-hero{max-width:640px}#hero-stats .hero-stat+.hero-stat{border-left:1px solid var(--glass-edge);padding-left:16px}}
@media(max-width:1500px){#scene-hero,#app.drawer-collapsed #scene-hero{left:88px;bottom:152px;max-width:calc(100% - 560px)}#layer-dock,#app.drawer-collapsed #layer-dock{max-width:calc(100% - 384px)}}
@media(max-width:1000px){#app-header{gap:8px;max-width:calc(100% - 32px);padding:0 8px}.brand b{font-size:15px!important}#library-toggle.scene-picker{max-width:200px}#scene-badge.scene-badge{max-width:160px}#inspector{right:80px;width:320px}#scene-hero,#app.drawer-collapsed #scene-hero{left:88px;max-width:calc(100% - 112px);bottom:136px}#hero-stats{gap:16px}#hero-stats .hero-stat b{font-size:24px}#minimap-shell{width:128px;height:128px}#minimap{width:110px;height:110px}#north-arrow{bottom:96px}#layer-dock,#app.drawer-collapsed #layer-dock{left:88px;transform:none;max-width:calc(100% - 240px)}#layer-legend,#app.drawer-collapsed #layer-legend{left:88px;transform:none;max-width:calc(100% - 240px)}#shade-mode{gap:4px}}
@media(max-width:700px){#app-header{height:44px;top:8px;width:calc(100% - 16px);max-width:none;gap:8px}#app-header .brand-mark{display:none}#scene-badge.scene-badge{display:inline-flex!important;max-width:120px;font-size:0}#scene-badge.scene-badge strong{font-size:12px}#library-toggle.scene-picker{flex:1;max-width:160px}.header-actions #command-open{display:none}#app-header .header-actions #dl-dsm-header span{display:none}#mode-rail{left:8px;width:48px;padding:4px;gap:12px}#mode-rail button{width:38px;height:40px;min-height:40px}#toolbar,#app.drawer-collapsed #toolbar{right:8px;top:72px;width:48px;max-width:48px}#view-pill{width:48px;padding:4px;max-width:48px;max-height:calc(100dvh - 230px);overflow-y:auto;overflow-x:visible}#view-pill button{width:38px;min-width:38px;height:32px;padding:4px}#view-pill #fullscreen,#view-pill #vr-toggle{display:grid}#inspector{left:64px;right:64px;top:72px;bottom:144px;width:auto;height:auto;max-height:none}#app.drawer-collapsed #inspector{transform:translateX(24px)}#drawer-head,#inspector .panel{padding:16px}#drawer-title{font-size:18px}#minimap-shell{display:none}#scale-bar-container{right:16px;bottom:8px}#north-arrow{position:static;margin-right:12px}#layer-dock,#app.drawer-collapsed #layer-dock{left:64px;bottom:28px;max-width:calc(100% - 128px);overflow-x:auto;padding:8px 8px 24px;border-radius:24px}#layer-legend,#app.drawer-collapsed #layer-legend{left:64px;bottom:124px;max-width:calc(100% - 128px)}#hero-stats{display:flex;gap:12px}#hero-stats .hero-stat b{font-size:18px}#hero-stats .hero-stat span{font-size:10px}#hero-stats .hero-stat:nth-child(n+3){display:none}#scene-hero,#app.drawer-collapsed #scene-hero{left:64px;bottom:176px;max-width:calc(100% - 128px);padding:12px}#hero-caption{font-size:10px}#hero-title{font-size:12px!important;max-width:100%}#welcome-card{left:64px;right:64px;top:72px;width:auto;padding:16px}#welcome-card h2{font-size:18px}#welcome-card ol{display:block}#welcome-card li{margin:8px 0}#welcome-demos,#welcome-card .welcome-actions{flex-direction:column}#compare-popover,#exag-popover{position:fixed;right:64px;top:72px;width:220px}#swipe-label-left{left:64px;top:72px;font-size:10px;max-width:calc(50% - 72px)}#swipe-label-right{right:64px;top:72px;font-size:10px;max-width:calc(50% - 72px)}.model-compare-note{left:64px;top:120px;max-width:calc(100% - 128px);font-size:12px}#fly-hint,#stage:has(#model-compare-note:not(.hidden)) #fly-hint{left:64px;bottom:300px;max-width:calc(100% - 128px)}.comparison{left:64px;right:64px;top:72px;bottom:220px}}

/* Keep controls legible over both bright imagery and shaded terrain. */
:root { --panel-glass: rgba(12, 20, 32, .95); --glass-edge: rgba(178, 203, 225, .16); }
[data-theme="light"] { --panel-glass: rgba(244, 248, 251, .97); }
#inspector, #upload-modal .upload-dialog, #export-menu.export-menu, .command-box,
#help, #gallery, #evidence-popover, #compare-popover, #exag-popover, .hover-hud {
  background: var(--panel-glass);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .18);
}
#mode-rail { width: 140px; padding: 8px; border-radius: 18px; gap: 16px; }
#mode-rail button {
  width: 122px; display: flex; align-items: center; justify-content: flex-start;
  gap: 10px; padding: 10px; color: var(--ink-2);
}
#mode-rail button span { display: inline; font-size: 12px; font-weight: 500; }
#mode-rail button.active { color: var(--cyan); border: 1px solid rgba(56, 211, 245, .3); }
#mode-rail button::after { display: none !important; }
#mode-rail .rail-bottom { border-top: 1px solid var(--glass-edge); padding-top: 12px; }
#coordinate-readout { left: 176px; }
#inspector { bottom: 112px; }
#drawer-head { padding: 20px; gap: 12px; }
#drawer-title { font-size: 22px; letter-spacing: -.025em; }
#drawer-toggle { width: 32px; height: 32px; min-width: 32px; }
#inspector .panel { padding: 20px; }
#inspector .group { padding-bottom: 20px; margin-bottom: 20px; }
#inspector .group h3 { font-size: 16px; line-height: 1.35; }
#inspector .group label { color: var(--ink-1); }
#inspector .note { color: var(--ink-2); }
#inspector button:not(.tab) { min-height: 36px; }
#inspector input:not([type="range"]):not([type="checkbox"]), #inspector select {
  background: var(--bg-0); border-color: var(--glass-edge); min-height: 36px;
}
#view-pill { gap: 2px; }
#view-pill .v3-tool-label { max-width: 180px; white-space: normal; width: max-content; }
#layer-dock, #app.drawer-collapsed #layer-dock {
  left: 176px; transform: none; bottom: 20px; max-width: calc(100% - 632px);
  padding: 6px; border-radius: 16px; gap: 6px;
}
#app.drawer-collapsed #layer-dock { max-width: calc(100% - 376px); }
#layer-dock-actions { min-width: 0; flex: 0 1 auto; overflow-x: auto; scrollbar-width: thin; }
#shade-mode { gap: 4px; }
#layer-dock #shade-mode button {
  width: 72px; min-width: 72px; height: 62px; padding: 6px 3px;
  border-radius: 10px !important; gap: 4px; justify-content: center;
}
#layer-dock .layer-thumb { width: 28px; height: 28px; border-radius: 7px; }
#layer-dock #shade-mode button .layer-label,
#layer-dock #shade-mode button:not(.active):hover .layer-label,
#layer-dock #shade-mode button:focus-visible .layer-label {
  display: block; position: static; padding: 0; font-size: 11px;
  background: transparent; text-shadow: none; line-height: 1.25;
}
#layer-dock #shade-mode button.active { background: rgba(56, 211, 245, .12); }
#dock-more { flex: 0 0 36px; align-self: center; }
#layer-legend, #app.drawer-collapsed #layer-legend {
  left: 176px; transform: none; bottom: 106px; max-width: calc(100% - 632px);
  padding: 10px 14px; background: var(--panel-glass);
}
#app.drawer-collapsed #layer-legend { max-width: calc(100% - 376px); }
#scene-hero, #app.drawer-collapsed #scene-hero {
  left: 176px; bottom: 196px; max-width: min(440px, calc(100% - 656px)); padding: 14px 18px;
  background: var(--panel-glass);
}
#hero-title { margin-bottom: 8px; }
#hero-stats { gap: 18px; }
#hero-stats .hero-stat b { color: var(--ink-1); font-size: 22px; font-weight: 500; }
#hero-stats .hero-stat span { font-size: 10px; letter-spacing: .025em; }
#hero-caption { font-size: 11px; margin-top: 10px; }
#fly-hint, #stage:has(#model-compare-note:not(.hidden)) #fly-hint { left: 176px; bottom: 340px; }
#swipe-label-left { left: 176px; }
.model-compare-note { left: 176px; max-width: calc(100% - 264px); }
.comparison { left: 176px; }
@media (max-height: 720px) and (min-width: 701px) {
  #view-pill #vr-toggle:disabled { display: none; }
  #minimap-shell { width: 128px; height: 128px; }
  #minimap-shell #minimap { width: 110px !important; height: 110px !important; }
}
@media (max-width: 1000px) and (min-width: 701px) {
  #mode-rail { width: 116px; }
  #mode-rail button { width: 98px; gap: 8px; padding: 8px; }
  #coordinate-readout, #layer-dock, #app.drawer-collapsed #layer-dock,
  #layer-legend, #app.drawer-collapsed #layer-legend { left: 144px; }
  #layer-dock, #layer-legend { max-width: calc(100% - 568px); }
  #app.drawer-collapsed #layer-dock, #app.drawer-collapsed #layer-legend { max-width: calc(100% - 288px); }
  #scene-hero, #app.drawer-collapsed #scene-hero { left: 144px; max-width: calc(100% - 568px); }
  #hero-stats { flex-wrap: wrap; gap: 12px; }
  #hero-stats .hero-stat b { font-size: 18px; }
}
@media (max-width: 700px) {
  #scene-badge.scene-badge { display: none !important; }
  #app-header .header-actions { flex: none; }
  #app-header .brand { flex: none; }
  #library-toggle.scene-picker { max-width: none; }
  #mode-rail {
    left: 8px; right: 8px; top: auto; bottom: 8px; transform: none; width: auto;
    display: flex; flex-direction: row; padding: 4px; gap: 8px; overflow-x: auto;
    border-radius: 16px; background: var(--panel-glass); scrollbar-width: thin;
  }
  #mode-rail .rail-main, #mode-rail .rail-bottom { display: flex; flex-direction: row; gap: 2px; flex: none; }
  #mode-rail .rail-bottom { border-top: 0; border-left: 1px solid var(--glass-edge); padding: 0 0 0 8px; }
  #mode-rail button { width: 54px; min-width: 54px; height: 54px; padding: 5px 2px; flex-direction: column; gap: 4px; justify-content: center; }
  #mode-rail button svg { width: 18px; height: 18px; }
  #mode-rail button span { font-size: 9px; }
  #inspector { left: 12px; right: 68px; top: 68px; bottom: 170px; width: auto; max-height: none; }
  #drawer-head, #inspector .panel { padding: 16px; }
  #drawer-title { font-size: 20px; }
  #app:not(.drawer-collapsed) #scene-hero, #app:not(.drawer-collapsed) #layer-legend { display: none; }
  #coordinate-readout { left: 12px; top: 64px; max-width: calc(100% - 80px); }
  #layer-dock, #app.drawer-collapsed #layer-dock { left: 12px; bottom: 84px; max-width: calc(100% - 80px); padding: 5px; overflow: visible; }
  #layer-dock #shade-mode button { width: 62px; min-width: 62px; }
  #layer-legend, #app.drawer-collapsed #layer-legend { left: 12px; bottom: 172px; max-width: calc(100% - 80px); }
  #scene-hero, #app.drawer-collapsed #scene-hero { left: 12px; bottom: 256px; max-width: calc(100% - 80px); padding: 12px; }
  #hero-stats .hero-stat b { font-size: 20px; }
  #scale-bar-container { bottom: 78px; }
  #welcome-card { left: 12px; right: 68px; }
  #fly-hint, #stage:has(#model-compare-note:not(.hidden)) #fly-hint { left: 12px; bottom: 390px; max-width: calc(100% - 80px); }
  #swipe-label-left { left: 12px; max-width: calc(50% - 20px); }
  #swipe-label-right { right: 68px; max-width: calc(50% - 76px); }
  .model-compare-note { left: 12px; max-width: calc(100% - 80px); }
  .comparison { left: 12px; right: 68px; }
}

/* Scene-first framing: labelled camera controls and an expandable summary. */
#camera-modes {
  position: absolute; left: 50%; top: 78px; transform: translateX(-50%); z-index: 20;
  padding: 4px; border: 1px solid var(--glass-edge); border-radius: 14px;
  background: var(--panel-glass); max-width: calc(100% - 360px);
}
#camera-modes #nav-mode { flex-direction: row; gap: 2px; border: 0; padding: 0; }
#camera-modes button {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 6px 11px; border: 0; border-radius: 10px; color: var(--ink-2);
}
#camera-modes button.active { background: rgba(56,211,245,.14); color: var(--cyan); }
#camera-modes button:disabled { opacity: .38; }
#camera-modes svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#camera-modes .v3-tool-label { display: inline; position: static; font-size: 12px; white-space: nowrap; }
#scene-badge.scene-badge { max-width: none; flex: none; white-space: nowrap; overflow: visible; }
#app-header { gap: 12px; }
#library-toggle.scene-picker { flex: 1; min-width: 80px; max-width: 240px; }
#scene-hero, #app.drawer-collapsed #scene-hero {
  left: 176px; bottom: 110px; width: min(420px, calc(100% - 280px)); max-width: none;
  padding: 9px 12px; pointer-events: auto; border-radius: 12px; background: var(--panel-glass);
}
.hero-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#hero-title { margin: 0; min-width: 0; color: var(--ink-1); font-weight: 500; }
#hero-details-toggle { flex: none; padding: 4px 8px; min-height: 28px; font-size: 11px; color: var(--cyan); }
#hero-details { padding-top: 12px; }
#hero-stats { flex-wrap: wrap; gap: 12px 20px; }
#hero-stats .hero-stat b { font-size: 19px; }
#hero-caption { margin-top: 10px; overflow-wrap: anywhere; }
#scene-hero:has(#hero-details:not(.hidden)) { box-shadow: 0 8px 28px rgba(0,0,0,.25); }
#app:not(.drawer-collapsed) #scene-hero { width: min(360px, calc(100% - 632px)); }
#app:has(#legend:not(:empty), #layer-legend.topo-active) #scene-hero { bottom: 194px; }
#fly-hint, #stage:has(#model-compare-note:not(.hidden)) #fly-hint { bottom: 174px; }
#app:has(#hero-details:not(.hidden)) #fly-hint { bottom: 310px; }
#app.presentation #camera-modes { display: none; }
#stage:has(#swipe-divider:not(.hidden)) .swipe-label { top: 144px; }
#stage:has(#swipe-divider:not(.hidden)) .model-compare-note { top: 200px; }
@media (max-width: 1000px) and (min-width: 701px) {
  #scene-hero, #app.drawer-collapsed #scene-hero { left: 144px; width: min(360px, calc(100% - 248px)); }
  #app:not(.drawer-collapsed) #scene-hero { width: min(280px, calc(100% - 536px)); }
  #camera-modes { max-width: calc(100% - 240px); }
  #camera-modes button { padding: 6px 8px; }
  #scene-badge.scene-badge { font-size: 10px; padding: 4px 6px; }
}
@media (max-width: 700px) {
  #scene-badge.scene-badge { display: none !important; }
  #camera-modes { top: 64px; left: 12px; transform: none; max-width: calc(100% - 80px); }
  #camera-modes button { padding: 6px 8px; }
  #camera-modes svg { display: none; }
  #coordinate-readout { top: 112px; }
  #scene-hero, #app.drawer-collapsed #scene-hero { left: 12px; bottom: 164px; width: calc(100% - 80px); padding: 7px 10px; }
  #app:has(#legend:not(:empty), #layer-legend.topo-active) #scene-hero { bottom: 252px; }
  #hero-stats .hero-stat:nth-child(n+3) { display: block; }
  #fly-hint, #stage:has(#model-compare-note:not(.hidden)) #fly-hint { bottom: 224px; font-size: 10px; }
  #app:has(#hero-details:not(.hidden)) #fly-hint { bottom: 360px; }
  #app #cinematic-status { top: 170px; }
  #stage:has(#swipe-divider:not(.hidden)) .swipe-label { top: 164px; }
  #stage:has(#swipe-divider:not(.hidden)) .model-compare-note { top: 244px; }
}