:root{
    --preview-width:240px;
    --preview-height:135px;
    --preview-margin:16px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
    width:100%; height:100%; overflow:hidden;
    background:#111; font-family:system-ui,sans-serif;
}

#app{
    position:relative;
    width:100vw;
    height:100vh;
    height:100dvh;
    overflow:hidden;
    isolation:isolate;
}

.app-menu{
    position:absolute;
    z-index:80;
    top:max(14px,env(safe-area-inset-top));
    left:max(14px,env(safe-area-inset-left));
    color:#17231e;
}

.app-menu-toggle{
    position:relative;
    display:grid;
    width:46px; height:46px;
    place-content:center;
    gap:5px;
    padding:0;
    border:2px solid rgba(255,255,255,.94);
    border-radius:50%;
    background:#173f32;
    color:#fff;
    box-shadow:0 4px 18px rgba(0,0,0,.4);
    cursor:pointer;
    transition:background .2s ease,transform .2s ease;
}

.app-menu-toggle:hover{ transform:translateY(-1px); }
.app-menu.is-open .app-menu-toggle{ background:#245c49; }

.app-menu-toggle span{
    display:block;
    width:19px; height:2px;
    border-radius:2px;
    background:currentColor;
    transition:transform .2s ease,opacity .2s ease;
}

.app-menu.is-open .app-menu-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.app-menu.is-open .app-menu-toggle span:nth-child(2){ opacity:0; }
.app-menu.is-open .app-menu-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.app-menu-toggle:focus-visible,
.app-menu-about:focus-visible,
.about-dialog-close:focus-visible,
.about-dialog-links a:focus-visible{
    outline:3px solid #f1cf86;
    outline-offset:3px;
}

.app-menu-panel{
    position:absolute;
    top:56px; left:0;
    width:min(330px,calc(100vw - 28px));
    padding:16px;
    border:1px solid rgba(255,255,255,.54);
    border-radius:17px;
    background:rgba(250,249,244,.97);
    box-shadow:0 18px 50px rgba(0,0,0,.38);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
}

.app-menu-panel[hidden],.about-dialog[hidden]{ display:none; }

.app-menu-heading{
    margin:0 2px 9px;
    color:#627069;
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.app-menu-option{
    display:grid;
    grid-template-columns:22px 1fr;
    gap:10px;
    align-items:start;
    padding:11px 8px;
    border-radius:11px;
    cursor:pointer;
}

.app-menu-option:hover{ background:#edf1eb; }

.app-menu-option input{
    width:19px; height:19px;
    margin-top:1px;
    accent-color:#245c49;
    cursor:pointer;
}

.app-menu-option span{ display:grid; gap:3px; }

.app-menu-option strong{
    font-size:.86rem;
    line-height:1.25;
}

.app-menu-option small{
    color:#67726d;
    font-size:.71rem;
    line-height:1.35;
}

.app-menu-about{
    display:grid;
    grid-template-columns:28px 1fr auto;
    align-items:center;
    gap:9px;
    width:100%;
    margin-top:8px;
    padding:12px 8px 4px;
    border:0;
    border-top:1px solid #d9ded9;
    background:transparent;
    color:#173f32;
    font:inherit;
    font-size:.86rem;
    font-weight:800;
    text-align:left;
    cursor:pointer;
}

.app-menu-info{
    display:grid;
    width:24px; height:24px;
    place-items:center;
    border:1.5px solid currentColor;
    border-radius:50%;
    font-family:Georgia,serif;
    font-size:.84rem;
}

.app-menu-tutorial{
    padding-bottom:10px;
}

.app-menu-tutorial + .app-menu-about{
    margin-top:0;
    padding-top:8px;
    border-top:0;
}

.app-menu-tutorial-icon{
    display:grid;
    width:24px; height:24px;
    place-items:center;
    border-radius:8px;
    background:#dfeae4;
    color:#245c49;
    font-size:1rem;
    line-height:1;
}

.app-menu-tutorial-copy{
    display:grid;
    gap:2px;
}

.app-menu-tutorial-copy small{
    color:#67726d;
    font-size:.69rem;
    font-weight:500;
    line-height:1.3;
}

.app-menu-chevron{ font-size:1.45rem; font-weight:400; line-height:1; }

#map .leaflet-top.leaflet-left{ top:62px; }

.about-dialog{
    position:fixed;
    z-index:2000;
    inset:0;
    display:grid;
    place-items:center;
    padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right))
        max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
}

.about-dialog-backdrop{
    position:absolute;
    inset:0;
    width:100%; height:100%;
    border:0;
    background:rgba(3,8,6,.72);
    -webkit-backdrop-filter:blur(7px);
    backdrop-filter:blur(7px);
    cursor:pointer;
}

.about-dialog-card{
    position:relative;
    display:flex;
    flex-direction:column;
    width:min(620px,100%);
    max-height:min(760px,100%);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.62);
    border-radius:22px;
    background:#f7f6f0;
    color:#1b2923;
    box-shadow:0 28px 80px rgba(0,0,0,.5);
}

.about-dialog-header{
    display:flex;
    flex:none;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding:24px 24px 18px;
    border-bottom:1px solid #dfe2dc;
}

.about-dialog-kicker{
    margin-bottom:4px;
    color:#66736d;
    font-size:.66rem;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.about-dialog-header h2{
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(1.7rem,5vw,2.45rem);
    font-weight:500;
    line-height:1.05;
}

.about-dialog-close{
    display:grid;
    flex:none;
    width:38px; height:38px;
    place-items:center;
    border:0;
    border-radius:50%;
    background:#e6e9e3;
    color:#173f32;
    font-size:1.55rem;
    line-height:1;
    cursor:pointer;
}

.about-dialog-content{
    display:grid;
    gap:20px;
    overflow:auto;
    padding:22px 24px 26px;
    overscroll-behavior:contain;
}

.about-dialog-content section{ display:grid; gap:6px; }

.about-dialog-content h3{
    font-size:.94rem;
    line-height:1.3;
}

.about-dialog-content p{
    color:#53615a;
    font-size:.84rem;
    line-height:1.55;
}

.about-dialog-links{
    padding-top:18px;
    border-top:1px solid #dfe2dc;
}

.about-dialog-links a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:42px;
    padding:10px 12px;
    border-radius:10px;
    background:#e7eee8;
    color:#174b3b;
    font-size:.8rem;
    font-weight:750;
    line-height:1.3;
    text-decoration:none;
}

.about-dialog-links a::after{ content:"↗"; flex:none; }
.about-dialog-links a:hover{ background:#dce8df; }

html.has-about-dialog{ overflow:hidden; }

#mapWrapper,#map{ position:absolute; inset:0; }
#mapWrapper{ z-index:1; }

#galleryWrapper{
    position:absolute; inset:0; z-index:10;
    opacity:0; visibility:hidden; pointer-events:none;
    touch-action:pan-x pan-y;
    transition:opacity .6s ease,visibility 0s linear .6s;
}

#app[data-mode="gallery"] #galleryWrapper{
    opacity:1; visibility:visible; pointer-events:auto;
    transition:opacity .6s ease,visibility 0s;
}

#gallery{ position:absolute; inset:0; overflow:hidden; }

#campGallery{
    position:absolute; inset:0;
    overflow-x:hidden; overflow-y:auto;
    overscroll-behavior-y:contain;
    scroll-snap-type:y mandatory;
    scrollbar-width:none;
}

#campGallery.is-timeline-jumping{ scroll-snap-type:none; }

#campGallery::-webkit-scrollbar,.camp-photo-track::-webkit-scrollbar{ display:none; }

.camp-gallery-set{
    position:relative;
    width:100%; height:100%;
    overflow:hidden;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    background:#111;
    isolation:isolate;
}

.camp-gallery-backdrop{
    display:none;
}

.camp-gallery-set::after{
    content:""; position:absolute; z-index:2; inset:auto 0 0;
    height:min(46vh,460px); pointer-events:none;
    background:linear-gradient(transparent,rgba(0,0,0,.78));
}

.camp-photo-track{
    position:relative; z-index:1;
    display:flex;
    width:100%; height:100%;
    overflow:hidden;
    align-items:stretch;
    overscroll-behavior-x:contain;
    scroll-snap-type:none;
    scroll-padding-inline:0;
    touch-action:pan-y;
    -webkit-overflow-scrolling:auto;
    scrollbar-width:none;
}

.camp-gallery-set.is-active .camp-photo-track{
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory;
    touch-action:pan-x pan-y;
    -webkit-overflow-scrolling:touch;
}

@supports (overflow:clip){
    .camp-gallery-set:not(.is-active) .camp-photo-track{ overflow:clip; }
}

.camp-photo-card{
    position:relative;
    flex:0 0 100%;
    width:100%; height:100%;
    min-width:0;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    overflow:hidden;
    border:0;
    border-radius:0;
    background:#111;
    box-shadow:none;
}

.camp-photo{
    --photo-cover-scale:1;
    position:absolute;
    left:50%; top:50%;
    display:block;
    width:100%; height:100%;
    object-fit:cover;
    opacity:0;
    transform:translate(-50%,-50%) scale(var(--photo-cover-scale));
    transform-origin:center;
    transition:opacity .32s ease,transform .5s cubic-bezier(.22,.7,.2,1);
}

.camp-photo.is-fit-width{
    width:100%; height:auto;
    object-fit:fill;
}

.camp-photo.is-fit-height{
    width:auto; height:100%;
    object-fit:fill;
}

.camp-gallery-set.is-active .camp-photo.is-loaded{ will-change:transform; }

#galleryWrapper.is-photo-fit .camp-photo{
    transform:translate(-50%,-50%) scale(1);
}

.camp-photo.is-loaded{ opacity:1; }

.camp-photo-loading{
    position:absolute; z-index:3;
    left:50%; top:50%;
    display:flex;
    align-items:center;
    gap:.58rem;
    transform:translate(-50%,-50%);
    padding:.62rem .82rem .62rem .72rem;
    border:1px solid rgba(205,235,185,.24);
    border-radius:999px;
    background:linear-gradient(135deg,rgba(11,24,17,.68),rgba(20,31,21,.46));
    box-shadow:0 8px 28px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.06);
    color:rgba(255,255,255,.86);
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    white-space:nowrap;
    text-shadow:0 1px 8px rgba(0,0,0,.5);
    contain:layout paint;
    animation:none;
    transition:opacity .2s ease;
}

.camp-photo-loading::before{
    content:"";
    flex:none;
    width:15px; height:10px;
    border:1.5px solid rgba(209,239,183,.96);
    border-radius:100% 0 100% 0;
    box-shadow:inset 2px -2px rgba(129,181,96,.15);
    transform:rotate(-38deg);
    transform-origin:88% 88%;
}

.camp-photo-loading::after{
    content:"";
    flex:none;
    width:3px; height:3px;
    margin-left:-.18rem;
    border-radius:50%;
    background:#efffc9;
    box-shadow:6px -3px rgba(220,248,175,.78),12px 1px rgba(173,225,125,.62);
    opacity:.45;
}

.camp-gallery-set.is-loader-active .camp-photo-card:not(.is-loaded):not(.is-error) .camp-photo-loading{
    animation:gallery-loading-breathe 1.55s ease-in-out infinite alternate;
}

.camp-gallery-set.is-loader-active .camp-photo-card:not(.is-loaded):not(.is-error) .camp-photo-loading::before{
    animation:gallery-loading-leaf 1.35s ease-in-out infinite alternate;
}

.camp-gallery-set.is-loader-active .camp-photo-card:not(.is-loaded):not(.is-error) .camp-photo-loading::after{
    animation:gallery-loading-fireflies 1.45s ease-in-out infinite;
}

.camp-photo-loading[hidden]{ display:none; }

.camp-photo-card.is-loaded .camp-photo-loading{
    opacity:0;
    pointer-events:none;
}

.camp-photo-card.is-error .camp-photo-loading{
    animation:none;
    color:rgba(255,255,255,.65);
}

.camp-photo-card.is-error .camp-photo-loading::before,
.camp-photo-card.is-error .camp-photo-loading::after{
    display:none;
}

@keyframes gallery-loading-breathe{
    from{ opacity:.72; }
    to{ opacity:1; }
}

@keyframes gallery-loading-leaf{
    from{ transform:rotate(-43deg) translate3d(-1px,1px,0); }
    to{ transform:rotate(-27deg) translate3d(1px,-1px,0); }
}

@keyframes gallery-loading-fireflies{
    0%,100%{ opacity:.28; transform:translate3d(0,2px,0); }
    45%{ opacity:1; transform:translate3d(1px,-2px,0); }
    70%{ opacity:.58; transform:translate3d(-1px,0,0); }
}

.camp-gallery-caption{
    position:absolute; z-index:3;
    left:max(20px,env(safe-area-inset-left));
    right:calc(var(--preview-width) + var(--preview-margin) + 24px);
    bottom:max(22px,env(safe-area-inset-bottom));
    display:flex; flex-direction:column; align-items:flex-start; gap:12px;
    color:#fff; pointer-events:none;
    text-shadow:0 2px 14px rgba(0,0,0,.75);
}

.camp-gallery-name{
    font-size:clamp(1.5rem,4vw,3.4rem);
    line-height:1; font-weight:750;
}

.camp-gallery-count{
    order:-1;
    flex:none;
    font-size:.72rem;
    font-weight:750;
    letter-spacing:.18em;
    opacity:.72;
}
.gallery-affordance{
    position:absolute;
    z-index:4;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.gallery-edge-shadow{
    position:absolute;
    opacity:0;
    transition:opacity .28s ease;
    will-change:opacity;
}

.gallery-edge-shadow-left,
.gallery-edge-shadow-right{
    top:0; bottom:0;
    width:clamp(34px,7vw,110px);
}

.gallery-edge-shadow-left{
    left:0;
    background:linear-gradient(to right,rgba(0,0,0,.4),transparent);
}

.gallery-edge-shadow-right{
    right:0;
    background:linear-gradient(to left,rgba(0,0,0,.4),transparent);
}

.gallery-edge-shadow-top,
.gallery-edge-shadow-bottom{
    left:0; right:0;
    height:clamp(36px,8vh,110px);
}

.gallery-edge-shadow-top{
    top:0;
    background:linear-gradient(to bottom,rgba(0,0,0,.34),transparent);
}

.gallery-edge-shadow-bottom{
    bottom:0;
    background:linear-gradient(to top,rgba(0,0,0,.38),transparent);
}

#galleryWrapper.can-photo-prev .gallery-edge-shadow-left,
#galleryWrapper.can-photo-next .gallery-edge-shadow-right,
#galleryWrapper.can-camp-prev .gallery-edge-shadow-top,
#galleryWrapper.can-camp-next .gallery-edge-shadow-bottom{
    opacity:1;
}

.camp-timeline{
    --timeline-position:0%;
    --timeline-preview-top:50%;
    position:absolute;
    z-index:8;
    top:max(72px,calc(env(safe-area-inset-top) + 60px));
    right:max(10px,env(safe-area-inset-right));
    bottom:calc(var(--preview-height) + var(--preview-margin) + 24px);
    width:28px;
    min-height:160px;
    color:#fff;
    opacity:.76;
    transition:width .25s ease,opacity .25s ease;
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;
}

.camp-timeline.is-expanded,
.camp-timeline:focus-within{
    width:min(190px,48vw);
    opacity:1;
}

.camp-timeline-rail{
    position:absolute;
    z-index:2;
    top:0; right:0; bottom:0;
    width:28px;
    border-radius:999px;
    cursor:ns-resize;
    outline:none;
}

.camp-timeline-rail::before{
    content:"";
    position:absolute;
    inset:0 -3px;
    border-radius:999px;
    background:rgba(5,10,8,.01);
}

.camp-timeline-line{
    position:absolute;
    top:8px; right:9px; bottom:8px;
    width:4px;
    overflow:visible;
    border-radius:999px;
    background:
        repeating-linear-gradient(to bottom,rgba(255,255,255,.3) 0 1px,transparent 1px 7px),
        rgba(5,10,8,.36);
    box-shadow:0 1px 8px rgba(0,0,0,.55);
}

.camp-timeline-progress{
    position:absolute;
    top:0; left:0;
    width:100%;
    height:var(--timeline-position);
    border-radius:999px;
    background:#f1cf86;
    box-shadow:0 0 8px rgba(241,207,134,.45);
}

.camp-timeline-thumb{
    position:absolute;
    z-index:2;
    left:50%; top:var(--timeline-position);
    width:12px; height:12px;
    border:2px solid #fff;
    border-radius:50%;
    background:#173f32;
    box-shadow:0 2px 8px rgba(0,0,0,.58);
    transform:translate(-50%,-50%);
    transition:width .2s ease,height .2s ease,background .2s ease;
}

.camp-timeline.is-expanded .camp-timeline-thumb,
.camp-timeline.is-scrubbing .camp-timeline-thumb{
    width:16px; height:16px;
    background:#f1cf86;
}

.camp-timeline-rail:focus-visible{
    outline:3px solid #f1cf86;
    outline-offset:3px;
}

.camp-timeline-label{
    position:absolute;
    z-index:4;
    top:var(--timeline-preview-top);
    right:34px;
    display:grid;
    grid-template-columns:56px minmax(0,1fr);
    align-items:center;
    gap:10px;
    width:min(230px,60vw);
    padding:8px;
    border:1px solid rgba(255,255,255,.3);
    border-radius:11px;
    background:rgba(9,15,12,.82);
    box-shadow:0 7px 24px rgba(0,0,0,.35);
    color:#fff;
    opacity:0;
    transform:translateY(-50%) translateX(8px);
    transition:opacity .18s ease,transform .22s ease;
    -webkit-backdrop-filter:blur(9px);
    backdrop-filter:blur(9px);
    pointer-events:none;
}

.camp-timeline-label > img{
    display:block;
    width:56px; height:56px;
    border:1px solid rgba(255,255,255,.3);
    border-radius:9px;
    object-fit:cover;
    background:#17231e;
}

.camp-timeline-label-text{
    display:grid;
    min-width:0;
    gap:4px;
}

.camp-timeline.is-scrubbing .camp-timeline-label,
.camp-timeline.is-previewing .camp-timeline-label,
.camp-timeline:focus-within .camp-timeline-label{
    opacity:1;
    transform:translateY(-50%) translateX(0);
}

@media (hover:hover) and (pointer:fine){
    .camp-timeline.is-expanded .camp-timeline-label{
        opacity:1;
        transform:translateY(-50%) translateX(0);
    }
}

.camp-timeline.is-preview-dismissed .camp-timeline-label{
    opacity:0;
    transform:translateY(-50%) translateX(8px);
}

.camp-timeline-label strong{
    overflow:hidden;
    font-size:.76rem;
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.camp-timeline-label small{
    color:rgba(255,255,255,.66);
    font-size:.61rem;
    font-weight:800;
    letter-spacing:.12em;
}

.gallery-onboarding{
    position:absolute;
    z-index:90;
    inset:0;
    display:grid;
    place-items:center;
    overflow:hidden;
    padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right))
        max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
    background:rgba(3,8,6,.64);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    transition:background .32s ease;
}

.gallery-onboarding[hidden]{ display:none; }
.gallery-onboarding [hidden]{ display:none !important; }

.gallery-onboarding[data-phase="practice"]{
    pointer-events:none;
    background:transparent;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
}

.gallery-onboarding-card{
    position:relative;
    z-index:3;
    width:min(500px,100%);
    padding:clamp(24px,5vw,38px);
    border:1px solid rgba(255,255,255,.7);
    border-radius:24px;
    background:rgba(248,247,241,.97);
    box-shadow:0 24px 70px rgba(0,0,0,.48);
    color:#17231e;
    text-align:center;
}

.gallery-onboarding-lead{
    max-width:390px;
    margin:14px auto 0;
    color:#56655e;
    font-size:.9rem;
    line-height:1.55;
}

.gallery-onboarding-route{
    display:flex;
    justify-content:center;
    gap:10px;
    margin:24px 0;
}

.gallery-onboarding-route span{
    display:grid;
    width:42px; height:42px;
    place-items:center;
    border:1px solid rgba(23,63,50,.12);
    border-radius:14px;
    background:#e7eee8;
    color:#173f32;
    font-size:1.15rem;
    font-weight:850;
}

.gallery-onboarding-kicker{
    margin-bottom:7px;
    color:#65736c;
    font-size:.68rem;
    font-weight:850;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.gallery-onboarding-card h2{
    font-size:clamp(1.55rem,5vw,2.3rem);
    line-height:1.08;
}

.gallery-gesture-demo{
    position:relative;
    display:block;
    width:68px;
    height:68px;
    flex:none;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.2);
    border-radius:18px;
    background:linear-gradient(145deg,#173f32,#0b2019);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 8px 20px rgba(14,35,27,.18);
}

.gallery-gesture-trail,
.gallery-gesture-touch{
    position:absolute;
    left:50%;
    top:50%;
}

.gallery-gesture-trail{
    width:3px;
    height:48px;
    border-radius:999px;
    background:linear-gradient(to bottom,transparent,rgba(241,207,134,.75),transparent);
    transform:translate(-50%,-50%);
}

.gallery-gesture-demo.is-horizontal .gallery-gesture-trail{
    width:48px;
    height:3px;
    background:linear-gradient(to right,transparent,rgba(241,207,134,.75),transparent);
}

.gallery-gesture-demo.is-double-tap .gallery-gesture-trail{
    width:38px;
    height:38px;
    border:1px solid rgba(241,207,134,.5);
    border-radius:10px;
    background:rgba(255,255,255,.07);
}

.gallery-gesture-demo.is-scrubber .gallery-gesture-trail{
    width:5px;
    height:48px;
    background:linear-gradient(to bottom,rgba(255,255,255,.18),#f1cf86,rgba(255,255,255,.18));
}

.gallery-gesture-demo.is-scrubber::after{
    content:"";
    position:absolute;
    left:50%; top:9px; bottom:9px;
    width:18px;
    border-top:1px solid rgba(255,255,255,.22);
    border-bottom:1px solid rgba(255,255,255,.22);
    transform:translateX(-50%);
}

.gallery-gesture-demo.is-map .gallery-gesture-trail{
    width:44px;
    height:38px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:10px;
    background:
        linear-gradient(90deg,transparent 31%,rgba(255,255,255,.26) 32%,rgba(255,255,255,.26) 34%,transparent 35%,transparent 66%,rgba(255,255,255,.2) 67%,rgba(255,255,255,.2) 69%,transparent 70%),
        linear-gradient(0deg,transparent 46%,rgba(241,207,134,.55) 47%,rgba(241,207,134,.55) 51%,transparent 52%),
        #326b50;
}

.gallery-gesture-touch{
    width:18px;
    height:18px;
    border:3px solid rgba(255,255,255,.94);
    border-radius:50%;
    background:#f1cf86;
    box-shadow:0 3px 10px rgba(0,0,0,.35);
}

.gallery-gesture-demo.is-vertical .gallery-gesture-touch{
    animation:gallery-swipe-vertical 1.8s ease-in-out infinite;
}

.gallery-gesture-demo.is-horizontal .gallery-gesture-touch{
    animation:gallery-swipe-horizontal 1.8s ease-in-out infinite;
}

.gallery-gesture-demo.is-double-tap .gallery-gesture-touch{
    animation:gallery-double-tap 1.8s ease-in-out infinite;
}

.gallery-gesture-demo.is-scrubber .gallery-gesture-touch{
    animation:gallery-scrubber-drag 1.9s ease-in-out infinite;
}

.gallery-gesture-demo.is-map .gallery-gesture-touch{
    animation:gallery-map-tap 1.8s ease-in-out infinite;
}

.gallery-onboarding-skip{
    position:absolute;
    z-index:4;
    top:max(14px,env(safe-area-inset-top));
    right:max(14px,env(safe-area-inset-right));
    min-height:40px;
    padding:8px 13px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:999px;
    background:rgba(7,18,13,.7);
    color:rgba(255,255,255,.82);
    font:inherit;
    font-size:.72rem;
    font-weight:760;
    cursor:pointer;
    pointer-events:auto;
}

.gallery-onboarding-skip:focus-visible{
    outline:3px solid #f1cf86;
    outline-offset:3px;
}

.gallery-onboarding-spotlight{
    position:absolute;
    z-index:1;
    left:var(--onboarding-focus-left,15%);
    top:var(--onboarding-focus-top,18%);
    width:var(--onboarding-focus-width,70%);
    height:var(--onboarding-focus-height,60%);
    border:2px solid rgba(241,207,134,.88);
    border-radius:var(--onboarding-focus-radius,30px);
    box-shadow:0 0 0 200vmax rgba(2,7,5,.58),0 0 0 6px rgba(241,207,134,.12);
    pointer-events:none;
    transition:left .28s ease,top .28s ease,width .28s ease,height .28s ease,border-radius .28s ease;
}

.gallery-onboarding[data-step="timeline"] .gallery-onboarding-spotlight,
.gallery-onboarding[data-step="map"] .gallery-onboarding-spotlight{
    animation:gallery-onboarding-focus 1.45s ease-in-out infinite alternate;
}

.gallery-onboarding-coach{
    position:absolute;
    z-index:3;
    left:50%;
    bottom:max(24px,calc(env(safe-area-inset-bottom) + 14px));
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:13px;
    width:min(470px,calc(100% - 36px));
    padding:16px 18px;
    border:1px solid rgba(255,255,255,.68);
    border-radius:22px;
    background:rgba(248,247,241,.96);
    box-shadow:0 18px 52px rgba(0,0,0,.42);
    color:#17231e;
    transform:translateX(-50%);
    transition:background .22s ease,transform .22s ease;
}

.gallery-onboarding-progress{
    position:absolute;
    top:-11px;
    left:18px;
    padding:4px 9px;
    border-radius:999px;
    background:#173f32;
    color:#fff;
    font-size:.62rem;
    font-weight:850;
    letter-spacing:.12em;
}

.gallery-onboarding-copy{
    display:grid;
    gap:4px;
    min-width:0;
    padding-right:26px;
}

.gallery-onboarding-copy strong{
    font-size:1rem;
    line-height:1.2;
}

.gallery-onboarding-copy small{
    color:#5b6962;
    font-size:.78rem;
    line-height:1.4;
}

.gallery-onboarding-done{
    position:absolute;
    right:17px;
    display:grid;
    width:30px; height:30px;
    place-items:center;
    border-radius:50%;
    background:#277459;
    color:#fff;
    font-weight:900;
    opacity:0;
    transform:scale(.55);
    transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1.3);
}

.gallery-onboarding.is-step-complete .gallery-onboarding-coach{
    background:rgba(235,247,237,.98);
    transform:translateX(-50%) scale(1.015);
}

.gallery-onboarding.is-step-complete .gallery-onboarding-done{
    opacity:1;
    transform:scale(1);
}

.gallery-onboarding-dismiss{
    min-width:150px;
    min-height:48px;
    padding:11px 24px;
    border:0;
    border-radius:999px;
    background:#173f32;
    box-shadow:0 7px 18px rgba(23,63,50,.25);
    color:#fff;
    font:inherit;
    font-weight:800;
    cursor:pointer;
    transition:background .18s ease,transform .18s ease;
}

.gallery-onboarding-dismiss:hover{
    background:#245c49;
    transform:translateY(-1px);
}

.gallery-onboarding-dismiss:focus-visible{
    outline:3px solid #d39c2f;
    outline-offset:3px;
}

@keyframes gallery-swipe-vertical{
    0%,100%{ transform:translate(-50%,-50%) translateY(-21px); }
    50%{ transform:translate(-50%,-50%) translateY(21px); }
}

@keyframes gallery-swipe-horizontal{
    0%,100%{ transform:translate(-50%,-50%) translateX(-21px); }
    50%{ transform:translate(-50%,-50%) translateX(21px); }
}

@keyframes gallery-double-tap{
    0%,12%,38%,50%,100%{ transform:translate(-50%,-50%) scale(1); opacity:1; }
    22%,60%{ transform:translate(-50%,-50%) scale(.68); opacity:.72; }
}

@keyframes gallery-scrubber-drag{
    0%,100%{ transform:translate(-50%,-50%) translateY(-18px); }
    50%{ transform:translate(-50%,-50%) translateY(18px); }
}

@keyframes gallery-map-tap{
    0%,35%,72%,100%{ transform:translate(-50%,-50%) scale(1); opacity:1; }
    50%{ transform:translate(-50%,-50%) scale(.66); opacity:.7; }
}

@keyframes gallery-onboarding-focus{
    from{ border-color:rgba(241,207,134,.58); }
    to{ border-color:rgba(241,207,134,1); }
}

#galleryEmpty{ position:absolute; inset:0; }
#gallery.has-camps #galleryEmpty{ display:none; }

#galleryToggle,#mapToggle{
    position:absolute; inset:0;
    border:0; background:transparent; cursor:pointer;
}

#galleryMiniPreview,#mapPreview{
    position:absolute; z-index:20;
    right:var(--preview-margin); bottom:var(--preview-margin);
    width:var(--preview-width); height:var(--preview-height);
    overflow:hidden;
    border-radius:18px;
    clip-path:inset(0 round 18px);
    box-shadow:0 12px 40px rgba(0,0,0,.45);
    transition:opacity .45s ease;
}

#galleryMiniPreview{ opacity:1; pointer-events:auto; }
#mapPreview{ opacity:0; pointer-events:none; }
#app[data-mode="gallery"] #galleryMiniPreview{ opacity:0; pointer-events:none; }
#app[data-mode="gallery"] #mapPreview{ opacity:1; pointer-events:auto; }

#galleryMiniContent,#miniMap{ position:absolute; inset:0; }
#miniMap{ z-index:0; background:#4d8b4d; pointer-events:none; }
#mapToggle{ z-index:2; }

#galleryMiniImage,#galleryMiniEmpty{ position:absolute; inset:0; width:100%; height:100%; }
#galleryMiniImage{ display:block; object-fit:cover; opacity:0; transition:opacity .2s ease; }
#galleryMiniContent.has-camp #galleryMiniImage{ opacity:1; }
#galleryMiniContent.has-camp #galleryMiniEmpty{ display:none; }

#galleryToggle:focus-visible,#mapToggle:focus-visible{ outline:3px solid #fff; outline-offset:3px; }

.placeholder{
    display:grid; width:100%; height:100%; place-items:center;
    color:#fff; font-size:clamp(2rem,8vw,4rem); font-weight:700;
}

.placeholder.gallery{ background:#3158b5; }

.camp-marker{
    display:block;
    border:0;
    background:transparent;
}

.camp-marker svg{
    display:block;
    width:100%; height:100%;
    overflow:visible;
    filter:drop-shadow(0 3px 3px rgba(0,0,0,.58));
    transition:transform .18s ease,filter .18s ease;
}

.camp-marker-pin{
    fill:#173f32;
    stroke:#fff;
    stroke-width:2.8;
    stroke-linejoin:round;
}

.camp-marker-tent{
    fill:#f1cf86;
    stroke:#102e25;
    stroke-width:1.2;
    stroke-linejoin:round;
}

.camp-marker-door{
    fill:none;
    stroke:#102e25;
    stroke-width:1.4;
    stroke-linecap:round;
}

.camp-marker:hover svg{
    transform:translateY(-2px) scale(1.06);
    filter:drop-shadow(0 5px 5px rgba(0,0,0,.52));
}

.camp-popup{
    min-width:220px;
    color:#17231e;
}

.camp-popup-title{
    display:block;
    padding:0 2px;
    font-size:1rem;
    line-height:1.25;
}

.camp-popup-statuses{
    display:grid;
    gap:6px;
    margin-top:10px;
}

.camp-popup-status{
    display:grid;
    grid-template-columns:30px 1fr;
    align-items:center;
    min-height:36px;
    padding:4px 9px 4px 4px;
    border-radius:9px;
    font-size:.78rem;
    font-weight:700;
    line-height:1.15;
}

.camp-popup-status.is-positive{
    background:#e5f2e9;
    color:#245a3d;
}

.camp-popup-status.is-negative{
    background:#f7e4e1;
    color:#8d352e;
}

.camp-popup-icon{
    position:relative;
    display:grid;
    width:27px; height:27px;
    place-items:center;
    border-radius:50%;
    background:currentColor;
    color:inherit;
}

.camp-popup-icon svg{
    width:17px; height:17px;
    fill:none;
    stroke:#fff;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.camp-popup-status.is-negative .camp-popup-icon::after{
    content:"×";
    position:absolute;
    right:-3px; bottom:-3px;
    display:grid;
    width:13px; height:13px;
    place-items:center;
    border:2px solid #f7e4e1;
    border-radius:50%;
    background:#8d352e;
    color:#fff;
    font-size:10px;
    font-weight:900;
    line-height:1;
}

.gps-locate-control{
    border:0;
    background:transparent;
}

.gps-locate-button{
    display:grid;
    width:44px; height:44px;
    place-items:center;
    padding:0;
    border:2px solid rgba(255,255,255,.96);
    border-radius:50%;
    background:#173f32;
    color:#fff;
    box-shadow:0 3px 12px rgba(0,0,0,.42);
    cursor:pointer;
    transition:background .2s ease,transform .2s ease,opacity .2s ease;
}

.gps-locate-button:hover{ transform:translateY(-1px); }

.gps-locate-button:focus-visible{
    outline:3px solid #f1cf86;
    outline-offset:3px;
}

.gps-locate-button svg{
    width:23px; height:23px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
}

.gps-locate-button.is-locating{
    opacity:.72;
    cursor:wait;
}

.gps-locate-button.is-locating svg{ animation:gps-locate-pulse .9s ease-in-out infinite alternate; }
.gps-locate-button.is-active{ background:#176d59; }
.gps-locate-button.is-error{ background:#b34038; }

@keyframes gps-locate-pulse{
    from{ transform:scale(.76); opacity:.45; }
    to{ transform:scale(1); opacity:1; }
}

#toast{
    position:absolute;
    z-index:100;
    left:50%;
    bottom:max(24px,calc(env(safe-area-inset-bottom) + 18px));
    display:flex;
    align-items:flex-start;
    gap:9px;
    width:max-content;
    max-width:min(88vw,480px);
    padding:.78rem .95rem;
    border:1px solid rgba(255,255,255,.24);
    border-radius:12px;
    background:rgba(20,28,24,.94);
    color:#fff;
    box-shadow:0 8px 30px rgba(0,0,0,.38);
    font-size:.82rem;
    font-weight:650;
    line-height:1.35;
    opacity:0;
    visibility:hidden;
    transform:translate(-50%,12px);
    transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;
    pointer-events:none;
}

#toast::before{
    content:"";
    flex:none;
    width:9px; height:9px;
    margin-top:.18rem;
    border-radius:50%;
    background:#8db8a8;
    box-shadow:0 0 0 4px rgba(141,184,168,.16);
}

#toast.is-visible{
    opacity:1;
    visibility:visible;
    transform:translate(-50%,0);
    transition:opacity .22s ease,transform .22s ease,visibility 0s;
}

#toast.is-success::before{
    background:#65c78d;
    box-shadow:0 0 0 4px rgba(101,199,141,.17);
}

#toast.is-error{
    background:rgba(103,35,31,.96);
}

#toast.is-error::before{
    background:#ffb0a9;
    box-shadow:0 0 0 4px rgba(255,176,169,.18);
}

#appLoading{
    position:absolute; z-index:1000; inset:0;
    display:grid; place-items:center;
    overflow:hidden;
    background:rgba(3,7,6,.78);
    color:#f3f1e8;
    -webkit-backdrop-filter:blur(12px) saturate(.72);
    backdrop-filter:blur(12px) saturate(.72);
    transition:opacity .72s ease,visibility .72s ease;
}

html.skip-bootstrap #appLoading{ display:none; }

#appLoading::before{
    content:"";
    position:absolute;
    inset:-20%;
    background:
        radial-gradient(circle at 22% 18%,rgba(76,104,72,.2),transparent 34%),
        radial-gradient(circle at 78% 74%,rgba(82,59,38,.18),transparent 38%),
        linear-gradient(150deg,rgba(0,0,0,.08),rgba(3,10,7,.34));
    filter:blur(28px);
    animation:bootstrap-atmosphere 8s ease-in-out infinite alternate;
}

#appLoading::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.16;
    background:
        repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.018) 4px),
        radial-gradient(circle at center,transparent 22%,rgba(0,0,0,.62) 100%);
}

.bootstrap-stage{
    position:relative; z-index:1;
    display:grid;
    justify-items:center;
    width:min(92vw,860px);
    transform:translateY(-2vh);
    text-align:center;
}

.bootstrap-kicker{
    margin-bottom:.8rem;
    color:rgba(233,235,220,.48);
    font-size:.68rem;
    font-weight:750;
    letter-spacing:.32em;
    text-transform:uppercase;
}

.bootstrap-title{
    max-width:12ch;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(2.45rem,7.4vw,6.4rem);
    font-weight:400;
    line-height:.92;
    letter-spacing:-.045em;
    text-wrap:balance;
    text-shadow:0 10px 50px rgba(0,0,0,.6);
}

.camp-reel{
    position:relative;
    width:100%;
    height:clamp(230px,35vh,340px);
    margin-top:clamp(20px,4vh,46px);
    overflow:hidden;
    -webkit-mask-image:linear-gradient(
        to bottom,
        transparent,
        #000 18%,
        #000 82%,
        transparent
    );
    mask-image:linear-gradient(
        to bottom,
        transparent,
        #000 18%,
        #000 82%,
        transparent
    );
}

#campReelTrack{
    position:absolute;
    inset:0;
}

.camp-reel-item{
    position:absolute;
    left:50%; top:50%;
    width:100%;
    color:#e9e7da;
    font-size:clamp(1rem,2.4vw,1.55rem);
    font-weight:530;
    letter-spacing:.08em;
    line-height:1;
    text-transform:uppercase;
    white-space:nowrap;
    will-change:transform,opacity,filter;
}

#appLoading.is-landed .camp-reel-item{
    opacity:0 !important;
    transition:opacity .5s ease,filter .5s ease;
}

#appLoading.is-landed .camp-reel-item.is-center{
    opacity:1 !important;
    filter:blur(0) !important;
    color:#fffdf1;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(2rem,6vw,4.8rem);
    font-weight:400;
    letter-spacing:.04em;
    text-shadow:0 8px 36px rgba(0,0,0,.72);
}

.bootstrap-result{
    margin-top:clamp(-44px,-5vh,-26px);
    color:rgba(244,241,225,.7);
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(1rem,2.5vw,1.35rem);
    font-style:italic;
    opacity:0;
    transform:translateY(8px);
    transition:opacity .5s ease .15s,transform .5s ease .15s;
}

.bootstrap-preference{
    display:flex;
    align-items:center;
    gap:.58rem;
    margin-top:clamp(16px,2.6vh,28px);
    color:rgba(239,238,226,.68);
    font-size:.76rem;
    font-weight:650;
    letter-spacing:.035em;
    cursor:pointer;
    user-select:none;
}

.bootstrap-preference input{
    width:17px; height:17px;
    margin:0;
    accent-color:#83d35e;
    cursor:pointer;
}

.bootstrap-preference:focus-within{
    outline:2px solid rgba(255,255,255,.9);
    outline-offset:5px;
    border-radius:2px;
}

#appLoading.is-landed .bootstrap-result{
    opacity:1;
    transform:translateY(0);
}

.bootstrap-network-status{
    position:fixed;
    z-index:2;
    left:50%;
    bottom:max(22px,env(safe-area-inset-bottom));
    display:grid;
    justify-items:center;
    width:min(88vw,420px);
    color:rgba(239,238,226,.58);
    font-size:.72rem;
    letter-spacing:.035em;
    opacity:0;
    transform:translate(-50%,8px);
    transition:opacity .5s ease,transform .5s ease;
}

#appLoading.is-slow .bootstrap-network-status{
    opacity:1;
    transform:translate(-50%,0);
}

#appLoading.is-resolving .bootstrap-network-status{
    opacity:0;
    transform:translate(-50%,6px);
}

.bootstrap-slow-note{
    line-height:1.4;
    text-align:center;
}

.bootstrap-progress{
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:8px;
    width:min(100%,290px);
}

.bootstrap-progress[hidden],.bootstrap-retry[hidden]{ display:none; }

.bootstrap-spinner{
    width:10px; height:10px;
    border:1px solid rgba(239,238,226,.2);
    border-top-color:rgba(239,238,226,.8);
    border-radius:50%;
    animation:bootstrap-spinner .85s linear infinite;
}

.bootstrap-progress-line{
    grid-column:1 / -1;
    display:block;
    width:100%; height:1px;
    overflow:hidden;
    background:rgba(239,238,226,.12);
}

#bootstrapProgressFill{
    display:block;
    width:0; height:100%;
    background:rgba(239,238,226,.62);
    transition:width .25s ease;
}

#appLoading.is-progress .bootstrap-slow-note{ display:none; }

.bootstrap-retry{
    margin-top:14px;
    padding:.55rem .9rem;
    border:1px solid rgba(239,238,226,.3);
    border-radius:999px;
    background:rgba(6,9,8,.28);
    color:rgba(255,253,241,.86);
    font:inherit;
    font-weight:700;
    letter-spacing:.08em;
    cursor:pointer;
}

.bootstrap-retry:focus-visible{
    outline:2px solid #fff;
    outline-offset:3px;
}

#appLoading.is-hidden{ visibility:hidden; opacity:0; pointer-events:none; }

@keyframes bootstrap-atmosphere{
    from{ transform:translate3d(-1.5%,-1%,0) scale(1); }
    to{ transform:translate3d(1.5%,1%,0) scale(1.05); }
}

@keyframes bootstrap-spinner{
    to{ transform:rotate(360deg); }
}

#app.is-initializing #galleryWrapper,
#app.is-initializing #galleryMiniPreview,
#app.is-initializing #mapPreview{ transition:none; }

@media (prefers-reduced-motion:reduce){
    #galleryWrapper,#galleryMiniPreview,#mapPreview{ transition-duration:1ms; }
    .camp-photo-track{ scroll-behavior:auto; }
    .camp-photo{ transition:none; }
    .camp-photo-loading,
    .camp-photo-loading::before,
    .camp-photo-loading::after{ animation:none !important; }
    #appLoading::before{ animation:none; }
    .bootstrap-spinner{ animation:none; }
    .gps-locate-button.is-locating svg{ animation:none; }
    .gallery-edge-shadow{ transition:none; }
    .gallery-gesture-touch{ animation:none !important; transform:translate(-50%,-50%); }
    .gallery-onboarding-dismiss{ transition:none; }
    .gallery-onboarding-spotlight,
    .gallery-onboarding-coach,
    .gallery-onboarding-done{ animation:none !important; transition:none; }
    .app-menu-toggle,.app-menu-toggle span{ transition:none; }
    .camp-timeline,.camp-timeline-label,.camp-timeline-thumb{ transition:none; }
}

@media (max-width:600px){
    .app-menu{
        top:max(12px,env(safe-area-inset-top));
        left:max(12px,env(safe-area-inset-left));
    }

    .app-menu-toggle{ width:43px; height:43px; }
    .app-menu-panel{ top:52px; }

    .about-dialog{
        align-items:end;
        padding:0;
    }

    .about-dialog-card{
        width:100%;
        max-height:92dvh;
        border-width:1px 0 0;
        border-radius:22px 22px 0 0;
        padding-bottom:env(safe-area-inset-bottom);
    }

    .about-dialog-header{ padding:20px 18px 15px; }
    .about-dialog-content{ padding:18px 18px 22px; }

    .camp-gallery-caption{
        right:calc(var(--preview-width) + var(--preview-margin) + 14px);
    }

    .camp-gallery-name{
        font-size:clamp(1.35rem,7vw,2.15rem);
    }

    .camp-timeline{
        top:max(64px,calc(env(safe-area-inset-top) + 52px));
        right:max(7px,env(safe-area-inset-right));
        bottom:calc(var(--preview-height) + var(--preview-margin) + 16px);
    }

    .camp-timeline.is-expanded,
    .camp-timeline:focus-within{ width:min(166px,52vw); }

    .camp-timeline-label{
        right:33px;
        grid-template-columns:50px minmax(0,1fr);
        width:min(210px,64vw);
    }

    .camp-timeline-label > img{ width:50px; height:50px; }

    .gallery-onboarding-card{
        padding:24px 18px 22px;
        border-radius:21px;
    }

    .gallery-onboarding-route{ margin:20px 0; }
    .gallery-onboarding-route span{ width:38px; height:38px; border-radius:12px; }
    .gallery-onboarding-coach{
        grid-template-columns:58px minmax(0,1fr);
        gap:11px;
        bottom:max(16px,calc(env(safe-area-inset-bottom) + 10px));
        width:calc(100% - 28px);
        padding:15px 14px;
        border-radius:19px;
    }
    .gallery-onboarding[data-step="timeline"] .gallery-onboarding-coach{
        left:14px;
        width:calc(100% - 88px);
        transform:none;
    }
    .gallery-onboarding[data-step="timeline"].is-step-complete .gallery-onboarding-coach{
        transform:scale(1.015);
    }
    .gallery-onboarding[data-step="map"] .gallery-onboarding-coach{
        top:max(70px,calc(env(safe-area-inset-top) + 58px));
        bottom:auto;
    }
    .gallery-onboarding-copy{ padding-right:20px; }
    .gallery-onboarding-copy strong{ font-size:.9rem; }
    .gallery-onboarding-copy small{ font-size:.72rem; }
    .gallery-onboarding-done{ right:12px; }
    .gallery-gesture-demo{ width:58px; height:58px; border-radius:16px; }
    .gallery-onboarding-dismiss{ width:100%; }
}