:root{--stone:#2b2621;--stone-dark:#191613;--stone-translucent:#2b2621bf;--bronze:#a8763e;--bronze-light:#c99a5e;--bronze-glow:#c99a5e40;--river:#3d6b6b;--river-light:#528c8c;--cream:#f2ece1;--line:#5a4f42}*{box-sizing:border-box}html,body{background:var(--stone);color:var(--cream);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100svh;margin:0;padding:0;font-family:Georgia,Times New Roman,serif;overflow:hidden}#root{width:100vw;height:100svh;position:relative;overflow:hidden}header{z-index:5;text-align:left;pointer-events:none;background:linear-gradient(#14110ee0 0%,#14110e73 70%,#0000 100%);justify-content:space-between;align-items:flex-start;gap:20px;width:100%;padding:20px 28px;display:flex;position:fixed;top:0;left:0}.header-left{max-width:650px}header h1{letter-spacing:.3px;color:var(--cream);margin:0 0 4px;font-size:1.45rem;font-weight:400}header .instructions{color:var(--bronze-light);opacity:.95;margin:0;font-family:Arial,sans-serif;font-size:.9rem}.caption{color:var(--cream);opacity:.88;letter-spacing:.2px;margin-top:6px;font-family:Arial,sans-serif;font-size:.82rem;font-weight:500;transition:opacity .35s}.header-right{pointer-events:auto;flex-direction:column;align-items:flex-end;gap:10px;display:flex}.step-count{color:var(--bronze-light);text-align:right;letter-spacing:.5px;font-family:Arial,sans-serif;font-size:.85rem;font-weight:700}.mode-switcher{border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:auto;background:#191613d9;border-radius:20px;gap:2px;padding:3px;display:flex;box-shadow:0 4px 14px #00000059}.mode-btn{color:var(--cream);cursor:pointer;background:0 0;border:none;border-radius:16px;align-items:center;gap:6px;padding:5px 12px;font-family:Arial,sans-serif;font-size:.76rem;font-weight:500;transition:all .2s;display:flex}.mode-btn:hover{color:#fff;background:#c99a5e26}.mode-btn.active{background:var(--bronze);color:var(--stone-dark);font-weight:700;box-shadow:0 2px 6px #0000004d}.viewer-wrap{width:100%;height:100svh;padding:0;position:relative}.frame-box{cursor:grab;-webkit-user-select:none;user-select:none;background:#110e0c;width:100%;height:100%;position:relative;overflow:hidden}.frame-box.dragging{cursor:grabbing}.frame-box:after{content:"";pointer-events:none;z-index:3;position:absolute;inset:0;box-shadow:inset 0 0 140px #000000a6}.pano-layer{opacity:0;pointer-events:none;z-index:1;will-change:opacity;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .8s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;inset:0;overflow:hidden}.pano-layer.active{opacity:1;pointer-events:auto;z-index:2}.pano-ambient-backdrop{filter:blur(40px)brightness(.4)saturate(1.2);pointer-events:none;z-index:1;opacity:.85;background-position:50%;background-size:cover;position:absolute;inset:-40px;transform:scale(1.15)}.pano-img{z-index:2;pointer-events:none;-webkit-user-select:none;user-select:none;will-change:transform;transform-origin:50%;display:block;position:relative}.pano-img.img-pano{object-fit:cover;width:auto;max-width:none;height:100%;max-height:none}.pano-img.img-simple{object-fit:contain;border-radius:8px;width:auto;max-width:94%;height:auto;max-height:94%;box-shadow:0 12px 48px #0009}.pano-img.img-simple.mode-fill{object-fit:cover;width:100%;max-width:none;height:100%;max-height:none;box-shadow:none;border-radius:0}.pano-type-pill{z-index:4;border:1px solid var(--line);color:var(--cream);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;letter-spacing:.02em;background:#191613bf;border-radius:20px;padding:5px 12px;font-size:.78rem;font-weight:500;position:absolute;top:140px;left:28px;box-shadow:0 4px 12px #0000004d}.pano-placeholder{text-align:center;background:radial-gradient(circle at 50% 50%, #a9763e2e, transparent 70%), var(--stone);color:var(--cream);flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:24px;display:flex}.pano-placeholder .point-badge{background:var(--bronze);color:var(--stone-dark);border-radius:20px;margin-bottom:12px;padding:6px 14px;font-size:.85rem;font-weight:700}.pano-placeholder .filename{color:var(--bronze-light);margin-bottom:8px;font-family:monospace;font-size:1.15rem}.pano-placeholder .coords{opacity:.8;font-family:monospace;font-size:.82rem}.pano-placeholder code{color:var(--bronze-light);background:#0006;border-radius:4px;padding:2px 6px}.pano-hint{z-index:4;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);color:var(--cream);pointer-events:none;opacity:.95;white-space:nowrap;background:#191613d9;border-radius:20px;padding:6px 16px;font-family:Arial,sans-serif;font-size:.76rem;transition:opacity .5s;position:absolute;bottom:125px;left:50%;transform:translate(-50%);box-shadow:0 4px 12px #0000004d}.pano-hint.hidden{opacity:0;visibility:hidden}.zoom-controls{z-index:4;border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#191613d9;border-radius:8px;flex-direction:column;gap:3px;padding:4px;display:flex;position:absolute;bottom:120px;right:28px;box-shadow:0 4px 12px #0000004d}.zoom-btn{color:var(--cream);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;width:32px;height:32px;font-size:1.1rem;transition:background .2s,color .2s;display:flex}.zoom-btn:hover{color:#fff;background:#c99a5e33}.loading-shimmer{background:var(--stone);z-index:4;opacity:0;pointer-events:none;color:var(--bronze-light);letter-spacing:.4px;justify-content:center;align-items:center;font-family:Arial,sans-serif;font-size:.85rem;transition:opacity .4s;display:flex;position:absolute;inset:0}.loading-shimmer.show{opacity:1}.loading-shimmer span{background:var(--bronze-light);border-radius:50%;width:8px;height:8px;margin:0 4px;animation:1s ease-in-out infinite pulse;display:inline-block}.loading-shimmer span:nth-child(2){animation-delay:.15s}.loading-shimmer span:nth-child(3){animation-delay:.3s}@keyframes pulse{0%,80%,to{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}.gps-badge{z-index:4;background:var(--stone-translucent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);color:var(--cream);pointer-events:auto;border-radius:10px;flex-direction:column;gap:4px;max-width:280px;padding:8px 14px;font-family:Arial,sans-serif;font-size:.75rem;animation:.3s fadeIn;display:flex;position:fixed;top:105px;right:28px;box-shadow:0 4px 16px #0006}.gps-badge-header{color:var(--bronze-light);justify-content:space-between;align-items:center;gap:8px;font-weight:700;display:flex}.gps-badge-status-dot{background:#22c55e;border-radius:50%;width:8px;height:8px;display:inline-block}.gps-badge-status-dot.warning{background:#eab308}.gps-badge-status-dot.error{background:#ef4444}.gps-badge-coords{color:var(--cream);opacity:.85;font-family:monospace;font-size:.72rem}.gps-sim-controls{border-top:1px solid #5a4f4266;align-items:center;gap:6px;margin-top:4px;padding-top:4px;display:flex}.speed-btn{border:1px solid var(--line);color:var(--cream);cursor:pointer;background:#c99a5e26;border-radius:4px;padding:2px 6px;font-size:.7rem}.speed-btn.active{background:var(--bronze);color:var(--stone-dark);font-weight:700}.controls{z-index:4;align-items:center;gap:10px;width:min(520px,100% - 40px);display:flex;position:fixed;bottom:68px;left:50%;transform:translate(-50%)}button.ctrl-btn{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--bronze);color:var(--cream);cursor:pointer;background:#2b2621d9;border-radius:4px;padding:8px 18px;font-family:Arial,sans-serif;font-size:.9rem;transition:all .2s}button.ctrl-btn:hover:not(:disabled){background:var(--bronze);color:var(--stone-dark)}button.ctrl-btn:disabled{opacity:.35;cursor:default}.forward-btn{border:1px solid var(--bronze);flex:1;font-weight:700;background:var(--bronze)!important;color:var(--stone-dark)!important}.forward-btn:hover:not(:disabled){border-color:var(--bronze-light);background:var(--bronze-light)!important}.path-track{z-index:4;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#2b2621c7;border:1px solid #5a4f4273;border-radius:8px;width:min(520px,100% - 40px);padding:8px 12px;position:fixed;bottom:18px;left:50%;transform:translate(-50%)}.path-line{background:var(--line);height:2px;margin:18px 4px 0;position:relative}.path-fill{background:var(--river);height:100%;transition:width .3s;position:absolute;top:0;left:0}.path-dots{justify-content:space-between;margin-top:-5px;display:flex;position:relative}.dot{background:var(--line);border:2px solid var(--stone);cursor:pointer;border-radius:50%;width:8px;height:8px;padding:0;transition:background .2s,transform .2s}.dot:hover,.dot:focus-visible{background:var(--bronze-light);outline:none;transform:scale(1.35)}.dot.done{background:var(--river)}.dot.active{background:var(--bronze-light);width:11px;height:11px;box-shadow:0 0 6px var(--bronze-glow)}.intro{z-index:10;background:radial-gradient(circle at 50% 40%, #a9763e38, transparent 60%), var(--stone);text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:24px;transition:opacity .6s,visibility .6s;display:flex;position:fixed;inset:0}.intro.hidden{opacity:0;visibility:hidden;pointer-events:none}.intro .eyebrow{letter-spacing:1.5px;color:var(--bronze-light);text-transform:uppercase;margin-bottom:14px;font-family:Arial,sans-serif;font-size:.78rem}.intro h1{color:var(--cream);margin:0 0 14px;font-size:2.1rem;font-weight:400}.intro p{color:var(--cream);opacity:.85;max-width:420px;margin:0 0 32px;font-family:Arial,sans-serif;font-size:.95rem;line-height:1.6}.begin-btn{background:var(--bronze);color:var(--stone);border:1px solid var(--bronze);cursor:pointer;border-radius:4px;padding:14px 36px;font-family:Arial,sans-serif;font-size:1rem;font-weight:700;transition:background .2s,border-color .2s}.begin-btn:hover{background:var(--bronze-light);border-color:var(--bronze-light)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@media (width<=768px){header{background:linear-gradient(#14110eeb 0%,#14110e80 80%,#0000 100%);flex-direction:column;gap:8px;padding:14px 16px}.header-left{max-width:100%}header h1{font-size:1.2rem}header .instructions{font-size:.78rem}.caption{font-size:.76rem}.header-right{flex-direction:row-reverse;justify-content:space-between;align-items:center;width:100%}.step-count{font-size:.78rem}.mode-switcher{border-radius:16px}.mode-btn{padding:4px 10px;font-size:.72rem}.gps-badge{border-radius:12px;width:min(460px,100% - 32px);max-width:none;padding:8px 12px;font-size:.72rem;inset:auto 50% 120px auto;transform:translate(50%)}.controls{gap:8px;width:min(460px,100% - 32px);bottom:60px}button.ctrl-btn{border-radius:6px;padding:10px 14px;font-size:.85rem}.path-track{width:min(460px,100% - 32px);padding:6px 10px;bottom:14px}.zoom-controls{bottom:130px;right:16px}.zoom-btn{width:36px;height:36px;font-size:1.15rem}.pano-type-pill{font-size:.72rem;top:auto;bottom:135px;left:16px}.pano-hint{padding:5px 12px;font-size:.72rem;bottom:130px}}@media (width<=600px){header{gap:6px;padding:12px 14px}header h1{margin-bottom:2px;font-size:1.05rem}header .instructions{font-size:.72rem;line-height:1.3}.caption{margin-top:4px;font-size:.72rem}.header-right{flex-direction:row-reverse;gap:8px}.step-count{white-space:nowrap;font-size:.74rem}.mode-switcher{border-radius:14px;gap:1px;padding:2px}.mode-btn{border-radius:12px;gap:4px;padding:4px 8px;font-size:.68rem}.gps-badge{border-radius:10px;width:calc(100% - 24px);padding:8px 10px;font-size:.7rem;bottom:112px}.gps-badge-header{font-size:.72rem}.gps-badge-coords{font-size:.68rem}.gps-sim-controls{flex-wrap:wrap;gap:4px}.speed-btn{justify-content:center;align-items:center;min-width:36px;min-height:28px;padding:3px 6px;font-size:.66rem;display:flex}.controls{gap:6px;width:calc(100% - 24px);bottom:52px}button.ctrl-btn{border-radius:8px;min-height:44px;padding:10px 12px;font-size:.82rem}.forward-btn{font-size:.88rem!important}.path-track{border-radius:8px;width:calc(100% - 24px);padding:6px 8px;bottom:10px}.path-line{margin:14px 2px 0}.dot{border-width:2px;width:10px;height:10px;padding:0}.dot.active{width:13px;height:13px}.zoom-controls{gap:2px;padding:3px;bottom:120px;right:12px}.zoom-btn{width:38px;height:38px;font-size:1.2rem}.pano-hint{white-space:normal;text-align:center;max-width:calc(100% - 80px);padding:5px 10px;font-size:.68rem;line-height:1.3;bottom:120px}.pano-type-pill{padding:3px 8px;font-size:.68rem;top:auto;bottom:165px;left:12px}.intro{padding:20px 16px}.intro .eyebrow{letter-spacing:1.2px;font-size:.7rem}.intro h1{margin-bottom:10px;font-size:1.5rem}.intro p{max-width:320px;margin-bottom:28px;font-size:.88rem;line-height:1.5}.begin-btn{border-radius:6px;width:min(280px,100%);padding:14px 32px;font-size:.95rem}.pano-placeholder{padding:16px}.pano-placeholder .point-badge{padding:5px 12px;font-size:.78rem}.pano-placeholder .filename{font-size:.95rem}.pano-placeholder .coords{font-size:.75rem}.frame-box:after{box-shadow:inset 0 0 80px #00000080}}@media (width<=380px){header{gap:4px;padding:10px 12px}header h1{font-size:.95rem}header .instructions{font-size:.68rem}.mode-btn{padding:3px 6px;font-size:.62rem}.step-count{font-size:.7rem}.gps-badge{width:calc(100% - 16px);padding:6px 8px;font-size:.66rem;bottom:108px}.controls{gap:4px;width:calc(100% - 16px);bottom:48px}button.ctrl-btn{padding:8px 10px;font-size:.78rem}.path-track{width:calc(100% - 16px);padding:5px 6px;bottom:8px}.zoom-controls{bottom:114px;right:8px}.zoom-btn{width:34px;height:34px}.intro h1{font-size:1.3rem}.intro p{max-width:280px;font-size:.82rem}.begin-btn{padding:12px 24px;font-size:.88rem}}@media (height<=500px) and (orientation:landscape){header{background:linear-gradient(#14110ef2 0%,#0000 100%);flex-direction:row;gap:12px;padding:8px 16px}header h1{margin-bottom:0;font-size:.95rem}header .instructions{display:none}.caption{margin-top:2px;font-size:.7rem}.gps-badge{width:auto;max-width:220px;padding:4px 8px;font-size:.65rem;inset:8px 8px auto auto;transform:none}.gps-sim-controls{display:none}.controls{width:calc(100% - 20px);bottom:36px}button.ctrl-btn{min-height:36px;padding:6px 10px;font-size:.78rem}.path-track{width:calc(100% - 20px);padding:4px 6px;bottom:4px}.path-line{margin:12px 2px 0}.zoom-controls{bottom:44px;right:8px}.zoom-btn{width:28px;height:28px;font-size:.9rem}.pano-hint{font-size:.65rem;bottom:80px}.intro h1{margin-bottom:8px;font-size:1.3rem}.intro p{margin-bottom:16px;font-size:.85rem}}@supports (padding:env(safe-area-inset-bottom)){.controls{bottom:calc(68px + env(safe-area-inset-bottom))}.path-track{bottom:calc(18px + env(safe-area-inset-bottom))}@media (width<=768px){.controls{bottom:calc(60px + env(safe-area-inset-bottom))}.path-track{bottom:calc(14px + env(safe-area-inset-bottom))}.gps-badge{bottom:calc(120px + env(safe-area-inset-bottom))}}@media (width<=600px){.controls{bottom:calc(52px + env(safe-area-inset-bottom))}.path-track{bottom:calc(10px + env(safe-area-inset-bottom))}.gps-badge{bottom:calc(112px + env(safe-area-inset-bottom))}}}