/* Demo image surface only. Overview and construction progress retain their UI. */
#developerPanel .panel-image-demo{width:100%;min-width:0;color:#f5f3ef}
#developerPanel .panel-image-demo-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:12px}
#developerPanel .panel-image-demo-heading p{font:600 11px var(--mono);letter-spacing:.17em;color:var(--amber);margin:0 0 10px}
#developerPanel .panel-image-demo-heading h3{font-family:var(--serif);font-size:clamp(28px,2.8vw,43px);line-height:1.15;letter-spacing:-.02em;margin:0;color:#fff}
#developerPanel .panel-image-demo-heading button{display:flex;align-items:center;justify-content:center;gap:15px;flex:none;min-height:44px;padding:11px 17px;border:1px solid rgba(224,173,118,.65);border-radius:7px;background:rgba(224,173,118,.1);color:#e7bd87;font:500 14px var(--sans);cursor:pointer;transition:background .18s}
#developerPanel .panel-image-demo-heading button:hover{background:rgba(224,173,118,.22)}
#developerPanel .panel-image-demo-heading button:focus-visible,#developerPanel .panel-image-demo-scroll:focus-visible{outline:2px solid #e7bd87;outline-offset:3px}
#developerPanel .panel-image-demo-caption,#developerPanel .panel-image-demo-help{font:400 13px/1.5 var(--sans);color:rgba(255,255,255,.56);margin:0 0 18px}
#developerPanel .panel-image-demo-help{margin:12px 0 0;display:none}
#developerPanel .panel-image-demo-scroll{max-width:100%;width:100%;overflow:auto;overscroll-behavior-x:contain;border:1px solid rgba(224,173,118,.22);border-radius:8px;background:#0b0d0c;-webkit-overflow-scrolling:touch}
#developerPanel .panel-image-demo-crop{display:block;position:relative;overflow:hidden;margin:0;width:100%;background:#0b0d0c;min-width:0}
#developerPanel .panel-image-demo-crop img{position:absolute;display:block;width:var(--demo-image-width);max-width:none;height:auto;left:var(--demo-image-left);top:var(--demo-image-top);object-fit:initial;pointer-events:none;user-select:none}
#developerPanel .panel-image-demo.is-zoomed .panel-image-demo-crop{width:max(1250px,140%)}
#developerPanel .is-image-demo{min-width:0}
@media(max-width:980px){
  #developerPanel .panel-image-demo-heading{align-items:flex-start;gap:10px}
  #developerPanel .panel-image-demo-heading h3{font-size:30px}
  #developerPanel .panel-image-demo-help{display:block}
  #developerPanel .panel-image-demo-heading button{font-size:12px;padding:10px 12px;gap:7px}
  #developerPanel .panel-image-demo-caption{font-size:12px}
}
@media(max-width:430px){
  #developerPanel .panel-image-demo-heading{flex-wrap:wrap}
  #developerPanel .panel-image-demo-heading h3{font-size:28px}
  #developerPanel .panel-image-demo-heading button{min-height:44px}
}