/* Viewer only: reserve usable framing space rather than overlaying the sculpture. */
html,body{height:100%;height:100dvh;overflow:hidden}
body{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
header{position:relative;padding:12px 24px 7px;background:transparent}
h1{font-size:22px}
main{height:100%;min-height:0;grid-row:2}
.tools{position:relative;bottom:auto;left:auto;right:auto;grid-row:3;padding:6px 14px 10px;gap:6px;background:#050a10}
.tools .settings{background:transparent;padding:2px 8px}
.tools p{font-size:10px}
#gate{bottom:12%}
@media(max-width:600px){
 header{padding:8px 12px 3px;gap:10px}h1{font-size:17px}header p{font-size:10px}header a{font-size:11px}
 .tools{padding:3px 6px 6px;gap:3px}.views{gap:4px;flex-wrap:nowrap;width:100%}.views button{flex:1;min-width:0;padding:4px 3px;font-size:10px;min-height:36px}.views button[data-view="quarter"]{flex:1.65}
 .settings{gap:4px;width:100%;justify-content:center}.settings select{max-width:128px;font-size:11px;min-height:36px}.settings label{font-size:9px}.settings button{min-height:36px;padding:4px 7px;font-size:11px}.settings a{font-size:10px}.tools p{font-size:9px;max-width:100%}
}
@media(max-height:600px) and (min-width:601px){header{padding:5px 15px}header h1{font-size:17px}header p{display:none}.tools{padding:3px 10px;gap:2px}.tools button,.tools select{min-height:32px;padding:4px 8px}.tools .settings{padding:0}.tools p{display:none}}