/* Machu Picchu in 3D: additions on top of pyr2.p5 and pyr2-site.p5 (reused unchanged). */
.st-measured{color:#8fe3a8;border-color:#8fe3a855}.st-published{color:#d8cfb8;border-color:#d8cfb855}.st-mapped{color:#7fd1c7;border-color:#7fd1c755}
.st-dem{color:#a7c8a0;border-color:#a7c8a055}.st-guide{color:#bdb6a8;border-color:#bdb6a855;border-style:dashed}.st-claim{color:#ff9f9f;border-color:#ff9f9f55}
.g3list{display:grid;gap:6px}
.g3li{display:block;width:100%;text-align:left;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:8px 11px;color:var(--ink);cursor:pointer;font:inherit}
.g3li:hover,.g3li:focus-visible{border-color:rgba(214,191,143,.55);background:rgba(214,191,143,.06)}
.g3li b{display:block;font-size:13.5px;font-weight:600}.g3li small{color:var(--mute);font-size:12px;font-variant-numeric:tabular-nums}
.g3sel{width:100%;margin:4px 0 8px}
.g3wide{width:100%;margin:6px 0 10px;accent-color:#d6bf8f}
.g3r input[type=range]{accent-color:#d6bf8f}
.g3col{flex-direction:column;align-items:stretch!important;gap:6px}.g3col textarea{width:100%;box-sizing:border-box;resize:vertical;font:inherit;border-radius:10px;padding:8px 10px;color:var(--ink)}
.g3seg3{display:grid!important;grid-template-columns:repeat(3,1fr)}
.g3rose{display:block;width:100%;max-width:260px;margin:6px auto 0}.g3rose text,.g3lay text,.g3prof text{fill:#c9c1b0;font:11px ui-sans-serif,system-ui,sans-serif}
.g3prof{display:block;width:100%;height:auto;margin:8px 0 4px;background:rgba(0,0,0,.25);border-radius:8px}
.g3lay{display:block;width:100%;max-width:340px;height:auto;margin:10px 0 4px}
.g3key b{margin-right:8px}
.sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:0}
.over{color:#ff9f9f}
.g3st td:first-child{white-space:normal;min-width:7em}
.g3labels span.pk{border-color:rgba(158,195,255,.55);background:rgba(8,12,22,.82);font-weight:600}
.g3s h3{font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);margin:14px 0 6px;font-weight:600}
.g3load.err .g3prog{display:none}
.g3load svg path{fill:none}
/* horizon panorama */
.mpPano{position:fixed;left:0;right:0;top:var(--g3hh,0px);bottom:var(--g3bh,0px);z-index:60;background:rgba(4,6,10,.96);display:flex;flex-direction:column}
.mpPano[hidden]{display:none}
.mpPano header{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}
.mpPano header h2{font:600 15px Georgia,serif;margin:0 auto 0 0;color:var(--ink)}
.mpPano header button,.mpPano header select{font:500 12.5px ui-sans-serif,system-ui,sans-serif;color:var(--ink);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;padding:6px 11px;cursor:pointer}
.mpPano header button:hover{border-color:rgba(214,191,143,.6)}
.mpPano canvas{flex:1;width:100%;min-height:0;touch-action:none;cursor:grab;display:block}
.mpPano p{margin:0;padding:8px 14px;font-size:12px;color:var(--mute);border-top:1px solid var(--line)}
@media (max-width:899px){.mpPano header{padding:8px 10px}.mpPano header h2{width:100%;margin:0}}

/* light first-paint poster, so the chrome does not wait on WebGL.
   Do not change .g3view positioning: desktop is relative/flex, phone is absolute inset 0. */
.mpPoster{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,#7f96ad 0%,#b9c6d0 36%,#8fa07a 72%,#5d6a48 100%)}
.mpPoster svg{width:100%;height:100%;display:block}
.g3view canvas{position:absolute;inset:0;z-index:2}
.g3labels{z-index:3}
body.ready .mpPoster{opacity:0;transition:opacity .55s ease}
@media (max-width:899px){.g3view{position:absolute!important;inset:0}}

/* Phone toolbar: the shared pyr2.css hides Home, Measure and Share under 900px.
   Keep every control reachable at 390, and leave the title clear of the pills. */
@media (max-width:899px){
  .g3site .g3top,.g3top{height:auto!important;min-height:44px;gap:6px;padding:4px 6px 6px!important;align-items:center;flex-wrap:nowrap}
  .g3top h1{font-size:12.5px!important;flex:0 1 auto;min-width:0;max-width:38%;overflow:hidden;text-overflow:ellipsis}
  .g3top h1 .g3full{display:none}
  .g3act{margin-left:auto;display:flex;flex:1 1 auto;justify-content:flex-end;flex-wrap:nowrap;gap:3px;min-width:0}
  .g3act button{height:30px!important;padding:0 7px!important;font-size:11.5px!important;min-width:30px;flex:0 0 auto}
  .g3act #tHome,.g3act #tShare,.g3act #tMeasure,#tHome,#tShare,#tMeasure{display:inline-flex!important}
}
@media (max-width:360px){
  .g3top h1{max-width:30%}
  .g3act button{padding:0 6px!important}
}