#gallery3d{position:fixed;inset:0;z-index:50;background:#e8e9eb}
#gl-host{position:absolute;inset:0}
#gl-host canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.hud{position:absolute;inset:0;pointer-events:none;color:var(--hud-ink)}
.hud > *{pointer-events:auto}
.hud-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;pointer-events:none;
  padding:calc(env(safe-area-inset-top,0px) + 10px) max(12px,env(safe-area-inset-left,0px)) 0 max(12px,env(safe-area-inset-right,0px))}
.hud-top > *{pointer-events:auto}
.hud-right{display:flex;gap:.5rem;align-items:center}
.hud-btn{background:var(--hud-bg);color:var(--hud-ink);border:1px solid rgba(255,255,255,.22);border-radius:2px;padding:.55rem .9rem;font-family:var(--f-display);font-weight:500;font-size:.85rem;cursor:pointer;color-scheme:dark}
.hud-btn[aria-pressed="true"]{background:#f4f5f6;color:#111315}
.hud-pill{position:absolute;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 62px);background:var(--hud-bg);padding:.45rem 1rem;border-radius:2px;font-family:var(--f-mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;opacity:0;transition:opacity .4s;pointer-events:none!important}
.hud-pill.on{opacity:1}
#gl-map{position:absolute;right:max(12px,env(safe-area-inset-right,0px));top:calc(env(safe-area-inset-top,0px) + 62px);width:124px;height:124px;background:var(--hud-bg);border-radius:2px;pointer-events:none!important}
.hud-stats{position:absolute;left:max(12px,env(safe-area-inset-left,0px));top:calc(env(safe-area-inset-top,0px) + 62px);background:var(--hud-bg);padding:.6rem .8rem;border-radius:2px;font-family:var(--f-mono);font-size:.72rem;line-height:1.55;white-space:pre;pointer-events:none!important}
.cross{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(17,19,21,.6);pointer-events:none!important}
.hud-read{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 150px);max-width:calc(100% - 32px);background:#f4f5f6;color:#111315;border:0;border-radius:2px;padding:.75rem 1.2rem;font-family:var(--f-display);font-weight:500;font-size:.92rem;cursor:pointer;box-shadow:0 2px 14px rgba(0,0,0,.25)}
.hud-help{position:absolute;left:max(12px,env(safe-area-inset-left,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 14px);right:max(12px,env(safe-area-inset-right,0px));font-size:.8rem;text-align:center;pointer-events:none!important;color:#3a3e44}
.hud-help .t{display:none}
@media (pointer:coarse){.hud-help .m{display:none}.hud-help .t{display:inline}.hud-help{text-align:right;bottom:calc(env(safe-area-inset-bottom,0px) + 4px)}}
#joy{display:none;position:absolute;left:calc(max(12px,env(safe-area-inset-left,0px)) + 8px);bottom:calc(env(safe-area-inset-bottom,0px) + 26px);width:120px;height:120px;border-radius:50%;background:var(--hud-bg);border:1px solid rgba(255,255,255,.3);touch-action:none}
@media (pointer:coarse){#joy{display:block}}
#knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(255,255,255,.88);pointer-events:none}
.gl-load{position:absolute;inset:0;display:grid;place-items:center;background:rgba(13,14,16,.86);padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));z-index:5}
.gl-load .box{max-width:26rem;width:100%;background:var(--bg);border:1px solid var(--line);padding:1.6rem;display:grid;gap:1rem;justify-items:start}
.gl-load .box h2{font-size:1.6rem}