.ww-context{display:flex!important;align-items:center;justify-content:flex-end;gap:10px;min-width:0;max-width:75%;margin-left:auto;font:500 12px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;text-transform:none;color:#315760}
.ww-context a{display:inline-flex!important;align-items:center;min-height:44px;padding:4px 0!important;text-decoration:none;border:0!important;background:none!important;font:inherit!important;white-space:normal;color:inherit!important}
.ww-context a:hover{text-decoration:underline}.ww-context a:focus-visible{outline:3px solid #168297;outline-offset:3px}.ww-context [hidden]{display:none!important}.ww-return{flex:none}.ww-subject{border-left:1px solid #d5e4e7!important}.ww-subject::before{content:'/';color:#91a7ad;margin-right:10px}.ww-current{font-size:11px;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#60777d}.ww-current::before{content:'/';margin-right:10px;color:#91a7ad}.ww-version{font-weight:650!important;color:#176c79!important;margin-left:6px}.ww-context+.pilot{display:none}
@media(max-width:1100px){.ww-current{display:none}.ww-context{gap:8px;font-size:11px;max-width:65%}header .pilot{display:none}}
@media(max-width:650px){.ww-context{max-width:58%;font-size:11px;gap:9px}.ww-subject{display:none!important}.ww-context .ww-subject{display:none!important}.ww-version{max-width:78px;text-align:right}.ww-current{display:none}}
@media print{.ww-context{display:none!important}}
/* Keep the retained model viewers navigable on a phone. Their original fixed
   desktop columns otherwise clip controls even when document overflow is hidden. */
@media(max-width:700px){
 body:has(>.studio),body:has(>.app #building){height:auto;overflow:auto}
 html:has(body>.studio),html:has(body>.app #building){height:auto;overflow:auto}
 .studio,body>.app:has(#building){height:auto;min-height:100dvh;display:grid;grid-template-rows:auto auto auto auto;padding:12px;gap:12px;max-width:100%;min-width:0}
 .studio>header,body>.app:has(#building)>header{flex-wrap:wrap;gap:10px;min-width:0}
 .studio>header .brand,body>.app:has(#building)>header .brand{font-size:14px}
 .studio>header .mode button,body>.app:has(#building)>header .view-modes button{padding:7px 12px;font-size:12px;min-height:44px}
 .studio>header #notes,body>.app:has(#building)>header #guide{min-height:44px;font-size:12px;padding:8px 12px}
 .studio>nav,body>.app:has(#building)>nav{flex-wrap:wrap;align-items:center;min-width:0;gap:8px;padding:8px}
 .studio>nav .ww-context,body>.app:has(#building)>nav .ww-context{flex:1 1 100%;max-width:100%;justify-content:space-between;margin:0}
 .studio>nav label,body>.app:has(#building)>nav label{font-size:12px}
 .studio>nav select,body>.app:has(#building)>nav select{min-width:0;max-width:100%;flex:1;min-height:44px}
 .studio>main,body>.app:has(#building)>main{grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
 .studio .experiment,body>.app:has(#building) .exhibit{min-height:440px;height:55dvh;max-height:580px;min-width:0}
 .studio>main>aside,body>.app:has(#building)>main>aside{width:100%;min-width:0;overflow:visible;padding:18px}
 .studio .intro{left:18px;top:18px;right:18px}.studio #subtitle{font-size:13px}.studio #scene{inset:120px 0 100px}
 .studio .camera{bottom:52px;left:14px}.studio .experiment #status{left:16px;right:16px;bottom:15px;max-width:none;text-align:left;font-size:12px}
 .studio #controls{grid-template-columns:1fr}.studio .control{min-width:0}.studio .control label{font-size:14px}.studio input[type=range]{width:100%;min-width:0}
 .studio>footer,body>.app:has(#building)>footer{height:auto;display:flex;flex-wrap:wrap;gap:8px;font-size:11px;line-height:1.5}
}