/* dddmaps - bright outdoor interface */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --brand-ink:#1f2d2e;
  --brand-teal:#2f6f73;
  --brand-teal-soft:#a7c1bf;
  --brand-red:#ff4d3d;
  --brand-paper:#f2f4f3;
  --bg:#f2f4f3;
  --surface:#ffffff;
  --surface2:#f2f4f3;
  --surface3:#f7f9f8;
  --border:#d9e2e0;
  --border2:#a7c1bf;
  --accent:#2f6f73;
  --accent2:#24575a;
  --accent-soft:rgba(167,193,191,.22);
  --trail:#ff4d3d;
  --text:#1f2d2e;
  --muted:#506668;
  --dim:#809293;
  --success:#2f6f73;
  --danger:#ff4d3d;
  --sky:#eaf0ef;
  --shadow:0 8px 34px rgba(31,45,46,.10);
  --sw:340px;
  --glass-menu:rgba(255,255,255,.58);
  --glass-panel:rgba(255,255,255,.62);
  --glass-control:rgba(255,255,255,.70);
  --glass-soft:rgba(242,244,243,.54);
  --public-teal:#2f6f73;
  --public-teal-dark:#24575a;
  --public-teal-soft:rgba(167,193,191,.24);
  --public-red:#ff4d3d;
  --public-red-dark:#df382b;
  --public-red-soft:rgba(255,77,61,.10);
  --public-ink:#1f2d2e;
  --public-muted:#506668;
  --public-sand:#f2f4f3;
  --public-border:#d9e2e0;
  --font-d:'Manrope','DM Sans',sans-serif;
  --font-m:'DM Mono',monospace;
  --font-b:'Inter','DM Sans',system-ui,sans-serif;
}

html,body{
  height:100%;
  width:100%;
  overflow:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-b);
  font-size:14px;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(135deg,rgba(47,125,79,.10),transparent 32%),
    radial-gradient(circle at 88% 12%,rgba(217,130,43,.10),transparent 24%),
    linear-gradient(180deg,var(--sky),var(--bg) 34%);
}

.noise-overlay{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:.018;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px;
}

.landing-page{
  position:fixed;
  inset:0;
  z-index:80;
  display:none;
  overflow:auto;
  overflow-x:hidden;
  background:#fff;
  color:#1a2035;
}
body.landing-active .landing-page{display:block;}
body.landing-active .mobile-app-header,
body.landing-active .sidebar,
body.landing-active .map-container{display:none;}

.landing-header,
.mobile-app-header{
  position:sticky;
  top:0;
  z-index:3;
  height:60px;
  min-height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 32px;
  border-bottom:1px solid rgba(224,226,218,.9);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px) saturate(1.08);
  -webkit-backdrop-filter:blur(14px) saturate(1.08);
}
.landing-header{position:sticky;}
.mobile-app-header{
  position:fixed;
  left:0;
  right:0;
  z-index:130;
  border-top:0;
  border-left:0;
  border-right:0;
  border-radius:0;
  box-shadow:none;
}
.landing-brand,
.mobile-brand-btn{
  display:flex;
  align-items:center;
  gap:10px;
  color:#11162a;
  text-decoration:none;
  font-family:Georgia,'Times New Roman',serif;
  font-size:20px;
  font-weight:700;
  line-height:1;
}
.mobile-brand-btn{
  min-width:0;
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
  text-align:left;
  cursor:pointer;
}
.landing-brand-mark,
.mobile-brand-logo{
  width:132px;
  height:44px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:0;
  flex:0 0 auto;
  background:transparent;
  border:0;
  box-shadow:none;
}
.landing-brand-mark img,
.mobile-brand-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.landing-nav,
.mobile-main-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:1;
}
.landing-nav a,
.landing-tool-link,
.landing-start-btn,
.mobile-nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  min-width:0;
  padding:7px 12px;
  border:1px solid transparent;
  border-radius:8px;
  color:#24304a;
  font:500 14px/1 var(--font-b);
  text-decoration:none;
  white-space:nowrap;
  background:transparent;
  box-shadow:none;
  cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.landing-nav a:hover,
.landing-tool-link:hover,
.mobile-nav-btn:hover{
  border-color:rgba(47,111,115,.24);
  background:var(--brand-paper);
}
.mobile-nav-btn.active{
  border-color:rgba(47,111,115,.48);
  background:var(--public-teal-soft);
  color:var(--brand-ink);
  font-weight:600;
}
.landing-login{
  border-color:#deded8 !important;
  background:#fff;
}
.landing-start-btn{
  border-color:var(--brand-teal);
  background:var(--brand-teal);
  color:#fff;
  font-weight:700;
  cursor:pointer;
}
.landing-start-btn:hover{
  background:var(--public-teal-dark);
  border-color:var(--public-teal-dark);
}
.landing-hero{
  min-height:calc(100vh - 60px);
  display:grid;
  grid-template-columns:minmax(380px,.95fr) minmax(520px,1.05fr);
  background:
    radial-gradient(circle at 18% 24%,rgba(167,193,191,.22),transparent 30%),
    var(--brand-paper);
}
.landing-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(48px,7.2vw,96px) clamp(34px,5vw,64px);
}
.landing-kicker{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:26px;
  color:var(--brand-teal);
  font:800 12px/1 var(--font-b);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.landing-kicker::before{
  content:"";
  width:20px;
  height:2px;
  background:var(--brand-teal);
}
.landing-copy h1{
  max-width:650px;
  color:var(--brand-ink);
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(50px,5.55vw,78px);
  line-height:.98;
  letter-spacing:0;
}
.landing-copy h1 em{
  color:var(--brand-teal);
  font-style:italic;
}
.landing-subtitle{
  max-width:555px;
  margin-top:24px;
  color:var(--public-muted);
  font-size:18px;
  line-height:1.58;
}
.landing-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:38px;
}
.landing-primary,
.landing-secondary{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 22px;
  border-radius:8px;
  font:800 15px/1 var(--font-b);
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.landing-primary svg,
.landing-secondary svg{width:16px;height:16px;}
.landing-primary{
  border:1px solid var(--brand-teal);
  color:white;
  background:var(--brand-teal);
  box-shadow:0 12px 28px rgba(47,111,115,.20);
}
.landing-secondary{
  border:1px solid rgba(167,193,191,.72);
  color:var(--brand-ink);
  background:#fff;
}
.landing-primary:hover,
.landing-secondary:hover{transform:translateY(-1px);}
.landing-stats{
  display:flex;
  gap:10px;
  max-width:590px;
  margin-top:34px;
}
.landing-stats div{
  flex:1;
  min-width:0;
  padding:16px 16px 15px;
  border:1px solid var(--public-border);
  border-radius:8px;
  background:rgba(255,255,255,.66);
}
.landing-stats strong{
  display:block;
  color:var(--brand-ink);
  font-size:18px;
  line-height:1.2;
}
.landing-stats span{
  display:block;
  margin-top:5px;
  color:var(--public-muted);
  font-size:13px;
}
.landing-preview{
  position:relative;
  min-height:calc(100vh - 60px);
  overflow:hidden;
  background:var(--brand-ink);
  isolation:isolate;
}
.landing-preview-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.01);
}
.landing-preview-scrim{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(to right,rgba(31,45,46,.68) 0%,rgba(31,45,46,.22) 48%,rgba(31,45,46,.08) 100%),
    linear-gradient(to top,rgba(31,45,46,.72) 0%,rgba(31,45,46,.08) 58%,transparent 100%);
}
.landing-preview-copy{
  position:absolute;
  left:34px;
  right:34px;
  bottom:32px;
  z-index:2;
  max-width:530px;
  color:#fff;
}
.landing-preview-label{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:11px;
  color:rgba(255,255,255,.78);
  font:800 11px/1 var(--font-b);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.landing-preview-label::before{
  content:"";
  width:28px;
  height:1px;
  background:var(--brand-teal);
}
.landing-preview-copy h2{
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(30px,3.2vw,44px);
  line-height:1.05;
  letter-spacing:0;
}
.landing-preview-copy p{
  max-width:430px;
  margin-top:10px;
  color:rgba(255,255,255,.76);
  font-size:14px;
  line-height:1.55;
}
.landing-preview-cta{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:18px;
  padding:11px 15px;
  border:0;
  border-radius:10px;
  background:var(--brand-teal);
  color:white;
  font:800 13px/1 var(--font-b);
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.24);
}
.landing-preview-cta svg{width:14px;height:14px;}
.landing-preview-tabs{
  display:inline-flex;
  gap:6px;
  margin-top:12px;
  padding:5px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.landing-preview-tab{
  border:0;
  border-radius:999px;
  padding:8px 12px;
  background:transparent;
  color:rgba(255,255,255,.74);
  font:800 12px/1 var(--font-b);
  cursor:pointer;
}
.landing-preview-tab.active,
.landing-preview-tab:hover{
  background:white;
  color:#1a2035;
}

.section-how,
.section-tools,
.section-creator,
.section-faq{
  padding:100px 64px;
}
.section-how,
.section-creator{
  background:var(--public-sand);
}
.section-tools{
  background:#fff;
}
.section-faq{
  background:#fff;
  border-top:1px solid rgba(224,226,218,.72);
}
.section-header{
  max-width:760px;
  margin:0 auto 64px;
  text-align:center;
}
.section-subtitle{
  max-width:620px;
  margin:16px auto 0;
  color:var(--public-muted);
  font-size:16px;
  line-height:1.6;
}
.section-eyebrow,
.creator-eyebrow{
  margin-bottom:16px;
  color:var(--public-teal);
  font:600 12px/1 var(--public-sans);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.section-header h2,
.creator-inner h2{
  color:var(--public-ink);
  font-family:var(--public-serif);
  font-size:clamp(32px,3vw,46px);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.5px;
}
.creator-inner h2{
  max-width:520px;
  font-size:clamp(28px,2.4vw,38px);
  line-height:1.14;
}
.steps{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  max-width:960px;
  margin:0 auto;
}
.steps::before{
  content:"";
  position:absolute;
  top:32px;
  left:calc(16.66% + 32px);
  right:calc(16.66% + 32px);
  height:1px;
  background:var(--brand-teal-soft);
}
.step{
  position:relative;
  text-align:center;
}
.step-num{
  position:relative;
  z-index:1;
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 20px;
  border:2px solid var(--brand-teal-soft);
  border-radius:50%;
  background:#fff;
  color:var(--public-teal);
  font-family:var(--public-serif);
  font-size:22px;
}
.step h3{
  margin-bottom:8px;
  color:var(--public-ink);
  font:600 17px/1.25 var(--public-sans);
}
.step p{
  color:#8896ab;
  font-size:14px;
  line-height:1.6;
}
.tools-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  max-width:960px;
  margin:0 auto;
}
.tool-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--public-border);
  border-radius:20px;
  background:#fff;
  color:inherit;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  transition:box-shadow .2s,transform .2s;
}
.tool-card:hover{
  transform:translateY(-3px);
  box-shadow:0 4px 24px rgba(26,32,53,.10),0 1px 4px rgba(26,32,53,.06);
}
.tool-card-visual{
  position:relative;
  height:200px;
  overflow:hidden;
  background:linear-gradient(135deg,var(--brand-paper) 0%,var(--brand-teal-soft) 58%,var(--brand-teal) 100%);
}
.tool-card-visual-zoom{
  background:linear-gradient(135deg,#e8f0f8 0%,#b8cde8 60%,#3a6b9f 100%);
}
.tool-preview-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}
.tool-card:hover .tool-preview-video{transform:scale(1.03);}
.tool-card-body{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:28px 28px 32px;
}
.tool-tag{
  margin-bottom:12px;
  color:var(--public-teal);
  font:600 11px/1 var(--public-sans);
  letter-spacing:.07em;
  text-transform:uppercase;
}
.tool-tag.blue,
.tool-card-cta.blue{color:#3a6b9f;}
.tool-card h3{
  margin-bottom:10px;
  color:var(--public-ink);
  font-family:var(--public-serif);
  font-size:26px;
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.3px;
}
.tool-card p{
  flex:1;
  margin-bottom:24px;
  color:var(--public-muted);
  font-size:14px;
  line-height:1.6;
}
.tool-card-cta{
  color:var(--public-teal);
  font:600 14px/1 var(--public-sans);
}
.start-landing-page{
  display:block;
}
.start-tools{
  min-height:calc(100vh - 60px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:120px;
  padding-bottom:88px;
}
.start-tools .section-header h1{
  color:var(--public-ink);
  font-family:var(--public-serif);
  font-size:clamp(34px,4vw,52px);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.5px;
}
.landing-faq-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  max-width:960px;
  margin:0 auto;
}
.landing-faq-item{
  border:1px solid var(--public-border);
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 28px rgba(26,32,53,.06);
  overflow:hidden;
}
.landing-faq-item summary{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:66px;
  padding:20px 48px 20px 22px;
  color:var(--public-ink);
  font:700 16px/1.25 var(--public-sans);
  cursor:pointer;
  list-style:none;
}
.landing-faq-item summary::-webkit-details-marker{display:none;}
.landing-faq-item summary::after{
  content:"+";
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  color:var(--public-teal);
  font:700 22px/1 var(--public-sans);
}
.landing-faq-item[open] summary::after{content:"-";}
.landing-faq-item p{
  padding:0 22px 22px;
  color:var(--public-muted);
  font-size:14px;
  line-height:1.65;
}
.landing-faq-link{
  margin:20px auto 0;
  text-align:center;
}
.landing-faq-link a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border:1px solid rgba(47,111,115,.28);
  border-radius:8px;
  color:var(--brand-teal);
  background:rgba(255,255,255,.76);
  font:800 14px/1 var(--public-sans);
  text-decoration:none;
}
.landing-faq-link a:hover{
  background:var(--brand-teal);
  color:#fff;
}
.creator-inner{
  max-width:820px;
  margin:0 auto;
  display:grid;
  grid-template-columns:200px 1fr;
  gap:64px;
  align-items:center;
}
.creator-photo{
  width:200px;
  height:200px;
  display:block;
  border-radius:20px;
  object-fit:cover;
  box-shadow:0 4px 24px rgba(26,32,53,.10),0 1px 4px rgba(26,32,53,.06);
}
.creator-bio{
  margin-top:18px;
  color:var(--public-muted);
  font-size:15px;
  line-height:1.65;
}
.landing-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:48px 64px;
  background:var(--public-ink);
  color:rgba(255,255,255,.58);
}
.footer-logo{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}
.footer-logo img{
  width:154px;
  height:auto;
  display:block;
  object-fit:contain;
}
.landing-footer-logo{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  text-decoration:none;
}
.landing-footer-logo img{
  width:154px;
  max-width:46vw;
  height:auto;
  display:block;
  object-fit:contain;
}
.landing-footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
}
.landing-footer-links a{
  color:rgba(255,255,255,.58);
  font:500 13px/1 var(--public-sans);
  text-decoration:none;
}
.landing-footer-links a:hover{color:#fff;}
.footer-links{
  display:flex;
  gap:20px;
  list-style:none;
  margin:0;
  padding:0;
}
.footer-links a{
  color:rgba(255,255,255,.58);
  font:500 13px/1 var(--public-sans);
  text-decoration:none;
}
.footer-links a:hover{color:#fff;}
.footer-copy{
  font:500 13px/1 var(--public-sans);
  margin:0;
}

.footer-social{display:flex;gap:14px;list-style:none;margin:0;padding:0}.footer-social a{color:rgba(255,255,255,.55);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;transition:color .15s,background .15s}.footer-social a:hover{color:white;background:rgba(255,255,255,.08)}

@media (max-width:900px){
  .section-how,
  .section-tools,
  .section-creator,
  .section-faq{
    padding:64px 24px;
  }
  .section-header{
    margin-bottom:38px;
  }
  .steps,
  .tools-grid,
  .creator-inner,
  .landing-faq-grid{
    grid-template-columns:1fr;
  }
  .steps{
    gap:28px;
  }
  .steps::before{
    display:none;
  }
  .creator-inner{
    gap:28px;
    text-align:center;
  }
  .creator-photo{
    margin:0 auto;
  }
  .landing-footer{
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
  }
  .landing-footer .footer-links,
  .landing-footer .footer-social,
  .landing-footer .landing-footer-links{
    max-width:100%;
    flex-wrap:wrap;
  }
  .landing-footer .landing-footer-links{
    justify-content:flex-start;
  }
  .footer-social{order:3;margin-top:8px;}
  .footer-links{
    flex-wrap:wrap;
  }
}

.mobile-app-header{
  position:fixed;
  left:0;
  right:0;
  top:0;
  height:60px;
  min-height:60px;
  z-index:130;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 32px;
  border:0;
  border-bottom:1px solid rgba(224,226,218,.92);
  border-radius:0;
  background:rgba(255,255,255,.96);
  box-shadow:none;
  backdrop-filter:blur(14px) saturate(1.08);
  -webkit-backdrop-filter:blur(14px) saturate(1.08);
}
.mobile-brand-btn{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#11162a;
  font-family:Georgia,'Times New Roman',serif;
  font-size:20px;
  font-weight:700;
  line-height:1;
  text-align:left;
  cursor:pointer;
}
.mobile-brand-logo{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:8px;
  overflow:hidden;
  color:var(--accent);
  background:transparent;
  border:0;
  box-shadow:none;
}
.mobile-brand-logo img{width:100%;height:100%;object-fit:contain;}
.mobile-main-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:1;
}
.mobile-nav-btn{
  min-height:34px;
  min-width:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:#24304a;
  font:500 14px/1 var(--font-b);
  text-decoration:none;
  cursor:pointer;
  box-shadow:none;
  transition:background .15s,border-color .15s,color .15s;
}
.mobile-nav-btn:hover{
  background:var(--brand-paper);
  border-color:rgba(47,111,115,.24);
}
.mobile-nav-btn.active{
  background:var(--public-teal-soft);
  border-color:rgba(47,111,115,.48);
  color:var(--brand-ink);
  font-weight:600;
}
.mobile-nav-btn.pricing{
  min-width:0;
  background:transparent;
}

.sidebar{
  position:fixed;
  left:18px;
  top:86px;
  bottom:18px;
  width:var(--sw);
  background:var(--glass-menu);
  border:1px solid rgba(216,227,206,.42);
  border-radius:8px;
  box-shadow:0 18px 45px rgba(31,45,36,.09);
  backdrop-filter:blur(18px) saturate(1.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.12);
  display:flex;
  flex-direction:column;
  z-index:100;
  overflow-y:auto;
}
.sidebar::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.01));
  z-index:-1;
}
.sidebar::-webkit-scrollbar{width:5px;}
.sidebar::-webkit-scrollbar-thumb{background:var(--border2);border-radius:8px;}

.map-container{
  position:fixed;
  left:0;
  top:0;
  right:0;
  bottom:0;
  z-index:1;
}
#map{width:100%;height:100%;}
.map-sunset-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
  background:
    radial-gradient(circle at 50% 29%, rgba(255,190,96,.32) 0%, rgba(255,126,38,.26) 12%, rgba(119,65,118,.10) 24%, transparent 36%),
    linear-gradient(180deg,
      rgba(19,32,82,.92) 0%,
      rgba(68,82,148,.68) 22%,
      rgba(214,126,118,.44) 36%,
      rgba(255,139,44,.34) 46%,
      rgba(255,212,132,.14) 53%,
      transparent 60%);
  mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 48%,rgba(0,0,0,.55) 55%,transparent 64%);
  mask-image:linear-gradient(180deg,#000 0%,#000 48%,rgba(0,0,0,.55) 55%,transparent 64%);
}

.brand{
  display:none;
  align-items:center;
  gap:13px;
  padding:16px 18px 14px;
  border-bottom:1px solid rgba(216,227,206,.42);
}
.brand-logo{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.brand-logo img{
  width:25px;
  height:25px;
  display:block;
  object-fit:contain;
}
.brand-name{
  display:block;
  font-family:var(--font-d);
  font-size:21px;
  font-weight:800;
  line-height:1;
}
.brand-tagline{
  display:none;
  font-family:var(--font-m);
  font-size:10px;
  color:var(--muted);
  letter-spacing:.9px;
  text-transform:uppercase;
  margin-top:5px;
}
.home-btn{
  margin-left:auto;
  display:none;
  align-items:center;
  gap:6px;
  min-height:34px;
  padding:8px 10px;
  border:1px solid rgba(216,227,206,.54);
  border-radius:8px;
  background:rgba(255,255,255,.32);
  color:var(--text);
  font-family:var(--font-b);
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:background .18s,border-color .18s,transform .18s;
}
.sidebar.show-home .home-btn{display:inline-flex;}
.home-btn:hover{
  background:rgba(255,255,255,.52);
  border-color:var(--accent);
}
.home-btn:active{transform:translateY(1px);}
.home-icon{
  width:15px;
  height:15px;
  display:grid;
  place-items:center;
}
.home-icon svg{width:15px;height:15px;}

.mode-section{
  display:none;
}

.search-section{
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:11px;
  border-bottom:1px solid rgba(216,227,206,.62);
}
.search-label,.toggle-label,.info-divider span{
  font-family:var(--font-m);
  font-size:10px;
  letter-spacing:1.2px;
  color:var(--muted);
  text-transform:uppercase;
}
.search-input-wrap{position:relative;}
.search-input{
  width:100%;
  background:var(--glass-control);
  border:1px solid rgba(216,227,206,.62);
  border-radius:8px;
  color:var(--text);
  font-family:var(--font-b);
  font-size:15px;
  padding:12px 16px 12px 42px;
  outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.search-input-with-action .search-input{padding-right:92px;}
.search-input::placeholder{color:var(--dim);}
.search-input:focus{
  background:rgba(255,255,255,.66);
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(47,125,79,.12);
}
.search-icon{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:17px;
  height:17px;
  color:var(--accent);
}
.search-icon svg{width:100%;height:100%;}
.search-submit-btn{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:74px;
  height:34px;
  padding:0 10px 0 12px;
  border:1px solid var(--accent);
  border-radius:7px;
  background:var(--accent);
  color:#fff;
  font-family:var(--font-b);
  font-size:13px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  box-shadow:0 5px 12px rgba(47,125,79,.16);
  transition:background .2s,border-color .2s,transform .12s,box-shadow .2s;
}
.search-submit-btn:hover:not(:disabled){
  background:#287246;
  border-color:#287246;
  box-shadow:0 7px 15px rgba(47,125,79,.2);
}
.search-submit-btn:active:not(:disabled){transform:translateY(-50%) scale(.98);}
.search-submit-btn:disabled{
  opacity:.68;
  cursor:not-allowed;
  box-shadow:none;
}
.search-submit-btn .btn-icon{
  display:inline-flex;
  width:14px;
  height:14px;
  flex-shrink:0;
}
.search-submit-btn .btn-icon svg{width:100%;height:100%;}

.generate-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:8px;
  padding:13px 15px;
  font-family:var(--font-b);
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  transition:background .2s,transform .1s,box-shadow .2s;
  box-shadow:0 12px 22px rgba(47,125,79,.22);
}
.generate-btn:hover{background:var(--accent2);box-shadow:0 14px 28px rgba(47,125,79,.26);}
.generate-btn:active{transform:translateY(1px);}
.generate-btn:disabled{background:var(--dim);box-shadow:none;cursor:not-allowed;}
.btn-icon svg{width:18px;height:18px;}

.mode-section,.gpx-choice-section,.upload-section,.zoom-section{
  padding:12px 14px;
  border-bottom:1px solid rgba(216,227,206,.40);
  gap:8px;
}
.mode-section{order:1;}
.guide-section{order:2;}
.gpx-choice-section{order:3;}
.zoom-section{order:3;}
.search-section,.upload-section{order:4;}
.status-section{order:5;display:none!important;}
.route-info{order:6;}
.disclaimer{order:7;}
.sidebar-footer{order:8;}
.mode-section{display:none;}
.gpx-choice-section{display:flex;flex-direction:column;}
.upload-section,.zoom-section,.zoom-panel{display:flex;flex-direction:column;}
.zoom-panel{gap:9px;}
.mode-card,.upload-drop{
  width:100%;
  border:1px solid rgba(216,227,206,.54);
  border-radius:8px;
  background:var(--glass-control);
  color:var(--text);
  padding:12px 10px;
  text-align:center;
  cursor:pointer;
  transition:background .15s,border-color .15s,box-shadow .15s,transform .1s;
}
.mode-card:hover,.mode-card.active,.upload-drop:hover{
  background:rgba(224,240,216,.58);
  border-color:var(--accent);
  box-shadow:0 10px 22px rgba(47,125,79,.12);
}
.upload-drop.drag-over{
  border-color:var(--accent);
  background:rgba(230,245,243,.88);
  box-shadow:0 0 0 3px rgba(43,168,155,.16),0 14px 28px rgba(43,168,155,.18);
  transform:translateY(-1px);
}
.mode-card:active,.upload-drop:active{transform:translateY(1px);}
.mode-title,.upload-title{
  display:block;
  font-size:14px;
  font-weight:800;
}
.mode-copy,.upload-copy{display:none;}
.upload-drop{
  min-height:128px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-style:dashed;
  border-width:1.5px;
  background:rgba(255,255,255,.58);
}
.upload-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:var(--public-teal-dark);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(43,168,155,.22);
  box-shadow:0 8px 18px rgba(26,32,53,.08);
}
.upload-icon svg{width:20px;height:20px;}
.upload-title{
  font-size:16px;
  color:var(--public-ink);
}
.upload-copy{
  display:block;
  font-size:12px;
  line-height:1.35;
  color:var(--public-muted);
}
.upload-drop.drag-over{
  border-style:solid;
}
.source-card{
  min-height:70px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  text-align:left;
  padding:14px 16px;
}
.source-card .mode-title{font-size:15px;}
.source-card .mode-copy{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}

.guide-section{
  padding:12px 14px;
  border-bottom:1px solid rgba(216,227,206,.40);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.guide-steps{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:5px;
  overflow:visible;
  padding-bottom:0;
}
.guide-steps::-webkit-scrollbar{display:none;}
.guide-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:0;
  padding:7px 4px;
  border:1px solid transparent;
  border-radius:8px;
  color:var(--muted);
  background:transparent;
  cursor:default;
  transition:background .15s,border-color .15s,color .15s,opacity .15s;
  text-align:center;
}
.guide-step.clickable{cursor:pointer;}
.guide-step.clickable:hover{
  background:rgba(224,240,216,.48);
  border-color:var(--border2);
  color:var(--text);
}
.guide-step.locked{opacity:.58;}
.guide-step.active{
  color:var(--text);
  background:rgba(255,255,255,.46);
  border-color:rgba(216,227,206,.56);
}
.guide-step.done .guide-index{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.guide-index{
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid var(--border2);
  display:grid;
  place-items:center;
  font-family:var(--font-m);
  font-size:11px;
  color:var(--muted);
  background:rgba(255,255,255,.58);
  flex-shrink:0;
}
.guide-title{
  display:block;
  font-size:10px;
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}
.guide-copy,.guide-panel-copy{display:none;}
.guide-panel,.camera-panel,.options-panel,.export-panel{
  border:1px solid rgba(216,227,206,.52);
  border-radius:8px;
  background:var(--glass-panel);
  padding:11px;
}
.guide-panel-title{
  font-size:13px;
  font-weight:800;
  color:var(--text);
}
.guide-panel-copy{
  margin-top:4px;
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
}
.guide-primary{
  width:100%;
  margin-top:10px;
  border:none;
  border-radius:8px;
  background:var(--accent);
  color:#fff;
  font-family:var(--font-b);
  font-size:13px;
  font-weight:800;
  padding:11px 12px;
  cursor:pointer;
  box-shadow:0 10px 20px rgba(47,125,79,.18);
  transition:background .2s,transform .1s,box-shadow .2s;
}
.guide-primary:hover{background:var(--accent2);box-shadow:0 12px 24px rgba(47,125,79,.22);}
.guide-primary:active{transform:translateY(1px);}
.camera-panel,.options-panel,.export-panel{display:flex;flex-direction:column;gap:12px;}
.camera-fine-tune{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:10px;
  border:1px solid rgba(216,227,206,.52);
  border-radius:8px;
  background:var(--glass-soft);
}
.camera-tune-direct{
  padding:2px 0 0;
  border:0;
  background:transparent;
}
.fine-tune-btn{
  width:100%;
  border:1px solid rgba(216,227,206,.58);
  border-radius:8px;
  background:var(--glass-control);
  color:var(--accent);
  font-family:var(--font-b);
  font-size:12px;
  font-weight:800;
  padding:9px 10px;
  cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.fine-tune-btn:hover{
  background:rgba(224,240,216,.58);
  border-color:var(--accent);
  color:var(--accent2);
}
.camera-row{display:flex;flex-direction:column;gap:7px;}
.camera-row label{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-family:var(--font-m);
  font-size:10px;
  letter-spacing:.8px;
  color:var(--muted);
  text-transform:uppercase;
}
.camera-row label span{color:var(--accent);font-weight:700;}
.camera-row input[type="range"]{
  width:100%;
  accent-color:var(--accent);
  cursor:pointer;
}
.zoom-camera-controls{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:10px;
  border:1px solid rgba(216,227,206,.52);
  border-radius:8px;
  background:var(--glass-soft);
}
.play-primary{margin-top:2px;background:var(--accent);box-shadow:0 10px 20px rgba(47,111,115,.18);}
.play-primary:hover{background:var(--accent2);box-shadow:0 12px 24px rgba(47,111,115,.24);}
.secondary-primary{
  background:var(--glass-control);
  color:var(--accent);
  border:1px solid rgba(216,227,206,.58);
  box-shadow:none;
}
.secondary-primary:hover{
  background:rgba(224,240,216,.58);
  color:var(--accent2);
  box-shadow:none;
}
.pc-render-btn{
  background:var(--glass-control);
  color:var(--accent);
  border:1px solid rgba(216,227,206,.58);
  box-shadow:none;
}
.pc-render-btn:hover{background:rgba(224,240,216,.58);color:var(--accent2);box-shadow:none;}
.video-download-link{
  display:flex;
  flex-direction:column;
  gap:5px;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:56px;
  border:1px solid rgba(47,111,115,.42);
  border-radius:8px;
  background:#f2f4f3;
  color:var(--brand-ink);
  font-family:var(--font-b);
  font-size:13px;
  font-weight:800;
  text-decoration:none;
  text-align:center;
  line-height:1.25;
  padding:12px 14px;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.video-download-link::before{
  content:"Download ready";
  color:var(--brand-teal);
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  line-height:1;
  text-transform:uppercase;
}
.video-download-link:hover{
  border-color:var(--brand-teal);
  background:#fff;
  color:var(--brand-ink);
}
.speed-row.compact,.toggle-row.compact,.marker-choice-row.compact{
  padding:0;
  border-bottom:none;
}
.toggle-row.compact,.marker-choice-row.compact{
  min-height:30px;
}

.status-section,.route-info,.speed-row,.toggle-row,.marker-choice-row{
  border-bottom:1px solid rgba(216,227,206,.40);
}
.status-section{display:none!important;padding:0;}
.status-log{display:flex;flex-direction:column;gap:7px;}
.status-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-m);
  font-size:11px;
  color:var(--muted);
  line-height:1.45;
}
.status-item.done{color:var(--success);}
.status-item.error{color:var(--danger);}
.status-item.active{color:var(--trail);}
.status-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;}
.status-item.active .status-dot{animation:pulse 1s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.route-info{
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.info-divider{display:none;}
.divider-line{flex:1;height:1px;background:var(--border);}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.info-item{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:8px;
  border:1px solid rgba(216,227,206,.52);
  border-radius:8px;
  background:var(--glass-soft);
}
.info-label{display:none;}
.info-value{
  font-family:var(--font-b);
  font-size:13px;
  color:var(--accent);
  font-weight:800;
  word-break:break-word;
}

.action-buttons{display:flex;gap:9px;}
.action-btn,.tb-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  background:var(--glass-control);
  border:1px solid rgba(216,227,206,.58);
  border-radius:8px;
  color:var(--text);
  font-family:var(--font-b);
  font-size:12px;
  font-weight:700;
  padding:10px 12px;
  cursor:pointer;
  transition:border-color .2s,background .2s,color .2s,transform .1s,box-shadow .2s;
}
.action-btn{flex:1;}
.action-btn svg,.tb-btn svg{width:15px;height:15px;flex-shrink:0;}
.action-btn:hover,.tb-btn:hover:not(:disabled){
  border-color:var(--accent);
  color:var(--accent);
  background:rgba(224,240,216,.58);
}

.speed-row{padding:16px 22px;display:flex;flex-direction:column;gap:10px;}
.speed-header{display:flex;align-items:center;justify-content:space-between;}
.duration-input-wrap{display:grid;grid-template-columns:minmax(0,1fr) 52px;align-items:center;gap:12px;width:100%;}
.duration-slider{
  width:100%;
  min-width:0;
  accent-color:var(--accent);
  cursor:pointer;
}
.duration-slider:focus-visible{outline:2px solid rgba(47,125,79,.35);outline-offset:5px;}
.duration-value{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-height:28px;
  font-family:var(--font-b);
  font-size:16px;
  font-weight:800;
  color:var(--accent);
  white-space:nowrap;
}

.toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 22px;
}
.toggle-btn{
  position:relative;
  width:44px;
  height:24px;
  border-radius:999px;
  background:#dbe5d4;
  border:1px solid var(--border2);
  cursor:pointer;
  transition:background .2s,border-color .2s;
  padding:0;
  flex-shrink:0;
}
.toggle-btn.active{background:var(--accent);border-color:var(--accent);}
.toggle-knob{
  position:absolute;
  top:2px;
  left:2px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 4px rgba(31,45,36,.25);
  transition:transform .2s;
}
.toggle-btn.active .toggle-knob{transform:translateX(20px);}
.marker-choice-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 22px;
  gap:12px;
}
.panel-intro{
  padding:13px 14px;
  border:1px solid rgba(216,227,206,.54);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(244,249,239,.24));
  box-shadow:0 8px 18px rgba(31,45,36,.06);
}
.panel-kicker{
  display:block;
  margin-bottom:5px;
  font-family:var(--font-m);
  font-size:10px;
  line-height:1;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--accent);
}
.panel-intro p{
  margin:0;
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
}
.zoom-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.zoom-panel-header .panel-kicker{
  margin-bottom:0;
}
.panel-info-btn{
  min-width:54px;
  height:28px;
  padding:0 11px;
  display:inline-grid;
  place-items:center;
  border:1px solid rgba(47,111,115,.36);
  border-radius:999px;
  background:rgba(47,111,115,.12);
  color:var(--accent);
  font-family:var(--font-b);
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
  line-height:1;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.44);
}
.panel-info-btn:hover,
.panel-info-btn[aria-expanded="true"]{
  border-color:var(--accent);
  background:var(--accent);
  color:#fff;
}
.panel-help-popover{
  padding:10px 11px;
  border:1px solid rgba(216,227,206,.52);
  border-radius:10px;
  background:rgba(255,255,255,.46);
  color:var(--muted);
  font-size:12px;
  line-height:1.42;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32);
}
.panel-help-popover[hidden]{
  display:none!important;
}
.marker-choice{
  display:flex;
  padding:3px;
  border:1px solid rgba(193,211,182,.56);
  border-radius:8px;
  background:rgba(238,244,232,.42);
}
.marker-choice-btn{
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--muted);
  font-family:var(--font-b);
  font-size:12px;
  font-weight:800;
  padding:7px 10px;
  cursor:pointer;
  transition:background .2s,color .2s,box-shadow .2s;
}
.marker-choice-btn.active{
  background:rgba(255,255,255,.62);
  color:var(--accent);
  box-shadow:0 5px 12px rgba(31,45,36,.12);
}
.visual-choice-row{
  align-items:flex-start;
}
.visual-choice-row .marker-choice{
  flex:1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:4px;
}
.visual-choice-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  min-width:0;
  padding:7px 6px 8px;
  text-align:center;
  line-height:1.1;
}
.visual-choice-btn::before{
  content:"";
  width:100%;
  height:24px;
  border-radius:5px;
  border:1px solid rgba(31,45,36,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);
}
.visual-choice-btn[data-map-style="satellite"]::before{
  background:linear-gradient(135deg,#22381f 0%,#476d36 45%,#142531 100%);
}
.visual-choice-btn[data-map-style="satelliteClean"]::before{
  background:linear-gradient(135deg,#182814 0%,#5f7f49 54%,#0b1c28 100%);
}
.visual-choice-btn[data-map-style="outdoors"]::before{
  background:linear-gradient(135deg,#d4ead1 0%,#7eae68 52%,#e8dfb8 100%);
}
.visual-choice-btn[data-map-style="streets"]::before{
  background:linear-gradient(135deg,#f3f0e8 0%,#d2dcc9 48%,#b7cce5 100%);
}
.visual-choice-btn[data-weather="sunny"]::before{
  background:linear-gradient(180deg,#6ec2ff 0%,#e9f8ff 100%);
}
.visual-choice-btn[data-weather="sunset"]::before{
  background:linear-gradient(180deg,#6570ae 0%,#ffb76d 48%,#ffe1b8 100%);
}
.visual-choice-btn[data-weather="night"]::before{
  background:linear-gradient(180deg,#151d43 0%,#3e3f79 48%,#ff8b32 100%);
}
.visual-choice-btn[data-weather="mist"]::before{
  background:linear-gradient(180deg,#ffffff 0%,#e4eae8 55%,#bfcac4 100%);
}

/* Shared product style: keep the tool UI aligned with the public landing page. */
.mobile-app-header,
.sidebar,
.guide-panel,
.camera-panel,
.options-panel,
.export-panel,
.zoom-camera-controls,
.camera-fine-tune,
.panel-help-popover,
.export-summary,
.info-item,
.route-info,
.map-toolbar{
  border-color:rgba(232,228,220,.76);
  background:rgba(255,255,255,.64);
  color:var(--public-ink);
  box-shadow:0 8px 34px rgba(26,32,53,.10);
  backdrop-filter:blur(18px) saturate(1.08);
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
}
.sidebar::after{
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(247,245,240,.04));
}
.mobile-app-header{
  background:rgba(255,255,255,.96);
}
.mobile-brand-btn,
.landing-brand{
  color:var(--public-ink);
  font-family:Georgia,'Times New Roman',serif;
}
.mobile-brand-btn{
  font-size:18px;
  font-weight:700;
  letter-spacing:-.2px;
}
.mobile-nav-btn,
.mode-card,
.upload-drop,
.action-btn,
.tb-btn,
.secondary-primary,
.pc-render-btn,
.marker-choice,
.search-input,
.panel-help-popover,
.export-summary-grid div{
  border-color:rgba(232,228,220,.86);
  background:rgba(255,255,255,.66);
  color:var(--public-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.48);
}
.mobile-nav-btn:hover,
.mode-card:hover,
.mode-card.active,
.upload-drop:hover,
.action-btn:hover,
.tb-btn:hover:not(:disabled),
.secondary-primary:hover,
.pc-render-btn:hover,
.fine-tune-btn:hover{
  border-color:rgba(43,168,155,.42);
  background:rgba(247,246,241,.88);
  color:var(--public-ink);
  box-shadow:0 8px 20px rgba(26,32,53,.08);
}
.mobile-nav-btn.active,
.guide-step.active,
.marker-choice-btn.active,
.visual-choice-btn.active{
  border-color:rgba(43,168,155,.72);
  background:#fff;
  color:var(--public-teal-dark);
  box-shadow:0 8px 22px rgba(26,32,53,.10);
}
.guide-step.done .guide-index,
.toggle-btn.active,
.landing-primary,
.landing-start-btn,
.search-submit-btn,
.generate-btn,
.guide-primary,
.play-primary,
.download-btn{
  border-color:var(--public-teal);
  background:var(--public-teal);
  color:#fff;
  box-shadow:0 12px 28px rgba(47,111,115,.20);
}
.search-submit-btn:hover:not(:disabled),
.generate-btn:hover,
.guide-primary:hover,
.play-primary:hover,
.download-btn:hover,
.landing-primary:hover,
.landing-start-btn:hover{
  border-color:var(--public-teal-dark);
  background:var(--public-teal-dark);
  color:#fff;
  box-shadow:0 14px 30px rgba(47,111,115,.24);
}
.panel-kicker,
.search-label,
.toggle-label,
.camera-row label,
.zoom-panel-header .panel-kicker{
  color:var(--public-teal);
}
.mode-copy,
.upload-copy,
.panel-help-popover,
.guide-panel-copy,
.panel-intro p,
.source-card .mode-copy{
  color:var(--public-muted);
}
.duration-value,
.camera-row label span,
.info-value{
  color:var(--public-teal-dark);
}
.toggle-btn{
  background:#e8e4dc;
  border-color:#deded8;
}
.panel-info-btn{
  min-width:54px;
  border-color:rgba(43,168,155,.32);
  background:rgba(255,255,255,.78);
  color:var(--public-teal-dark);
}
.panel-info-btn:hover,
.panel-info-btn[aria-expanded="true"]{
  background:var(--accent-soft);
}
.visual-choice-row .marker-choice{
  background:rgba(255,255,255,.52);
}
.search-input:focus{
  background:#fff;
  border-color:var(--public-teal);
  box-shadow:0 0 0 4px rgba(43,168,155,.14);
}
.video-download-link{
  border-color:rgba(47,111,115,.42);
  background:#f2f4f3;
  color:var(--brand-ink);
}
.map-watermark .watermark-domain{
  color:var(--public-teal);
}
.export-summary{
  padding:14px;
  border:1px solid rgba(216,227,206,.54);
  border-radius:8px;
  background:var(--glass-panel);
  box-shadow:0 10px 24px rgba(31,45,36,.08);
}
.export-summary-title{
  margin-bottom:10px;
  font-family:var(--font-b);
  font-size:14px;
  font-weight:800;
  color:var(--text);
}
.export-summary-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.export-summary-grid div{
  min-width:0;
  padding:9px 10px;
  border:1px solid rgba(216,227,206,.50);
  border-radius:7px;
  background:var(--glass-soft);
}
.export-summary-grid span{
  display:block;
  margin-bottom:3px;
  font-family:var(--font-m);
  font-size:9px;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--dim);
}
.export-summary-grid strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:var(--font-b);
  font-size:12px;
  color:var(--accent);
}
.color-choice{
  display:flex;
  align-items:center;
  gap:7px;
  padding:3px;
  border:1px solid rgba(193,211,182,.56);
  border-radius:8px;
  background:rgba(238,244,232,.42);
}
.color-choice-btn{
  width:28px;
  height:28px;
  border:2px solid transparent;
  border-radius:999px;
  background:var(--swatch);
  cursor:pointer;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.8),0 4px 10px rgba(31,45,36,.12);
  transition:transform .12s,border-color .15s,box-shadow .15s;
}
.color-choice-btn:hover{transform:translateY(-1px);}
.color-choice-btn.active{
  border-color:var(--text);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.95),0 0 0 3px rgba(47,125,79,.14);
}

.disclaimer{
  margin:16px 22px 0;
  padding:13px;
  background:#fff8e8;
  border:1px solid #ead7ac;
  border-radius:8px;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.disclaimer-icon{width:17px;height:17px;flex-shrink:0;color:var(--trail);margin-top:1px;}
.disclaimer p{font-size:12px;color:#756448;line-height:1.5;}
.sidebar-footer{
  margin-top:auto;
  padding:15px 22px;
  font-family:var(--font-m);
  font-size:10px;
  color:var(--dim);
  border-top:1px solid var(--border);
}

.disclaimer,.sidebar-footer{display:none;}
.status-section{padding:10px 14px;}
.status-log{gap:5px;}
.status-item{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.map-watermark{
  position:absolute;
  top:88px;
  left:50%;
  right:auto;
  bottom:auto;
  transform:translateX(-50%);
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
  padding:0;
  border-radius:0;
  pointer-events:auto;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.58)) drop-shadow(0 1px 2px rgba(0,0,0,.55));
  box-shadow:none;
  text-decoration:none;
}
.map-watermark img{
  display:block;
  width:clamp(180px,18vw,280px);
  height:auto;
  object-fit:contain;
}

.route-data-overlay{
  position:absolute;
  left:50%;
  bottom:34px;
  z-index:18;
  width:min(82vw,920px);
  transform:translateX(-50%);
  display:none;
  pointer-events:none;
  color:#fff;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.28));
}
.route-data-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:0 auto 10px;
  width:min(620px,100%);
}
.route-data-stats div{
  min-width:0;
  padding:8px 10px 7px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:14px;
  background:rgba(9,18,19,.58);
  text-align:center;
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
}
.route-data-stats span{
  display:block;
  margin-bottom:2px;
  color:rgba(255,255,255,.76);
  font:800 11px/1 var(--font-b);
}
.route-data-stats strong{
  display:inline-block;
  color:#fff;
  font:900 clamp(23px,3vw,36px)/.95 var(--font-b);
  letter-spacing:.02em;
}
.route-data-stats small{
  margin-left:3px;
  color:rgba(255,255,255,.84);
  font:800 12px/1 var(--font-b);
}
.route-elevation-canvas{
  display:block;
  width:100%;
  height:118px;
}
.route-data-overlay.minimal-stats .route-data-stats{
  display:none;
}
body.preview-video-frame.export-landscape .route-data-overlay,
body.gpx-video-frame.export-landscape .route-data-overlay{
  width:min(82vw,920px,min(100vw,177.7778vh) - 40px);
  bottom:calc((100vh - min(100vh,56.25vw)) / 2 + 24px);
}
body.preview-video-frame.export-portrait .route-data-overlay,
body.gpx-video-frame.export-portrait .route-data-overlay{
  width:calc(min(100vw,56.25vh) - 28px);
  max-width:calc(min(100vw,56.25vh) - 28px);
  bottom:calc((100vh - min(100vh,177.7778vw)) / 2 + 26px);
}
body.preview-video-frame.export-portrait .route-data-stats,
body.gpx-video-frame.export-portrait .route-data-stats{
  width:100%;
  gap:6px;
  margin-bottom:7px;
}
body.preview-video-frame.export-portrait .route-data-stats div,
body.gpx-video-frame.export-portrait .route-data-stats div{
  padding:7px 5px 6px;
  border-radius:11px;
}
body.preview-video-frame.export-portrait .route-data-stats span,
body.gpx-video-frame.export-portrait .route-data-stats span{
  font-size:9px;
}
body.preview-video-frame.export-portrait .route-data-stats strong,
body.gpx-video-frame.export-portrait .route-data-stats strong{
  font-size:clamp(20px,7vw,29px);
}
body.preview-video-frame.export-portrait .route-elevation-canvas,
body.gpx-video-frame.export-portrait .route-elevation-canvas{
  height:92px;
}
.route-data-overlay.hide-altitude .route-data-stats div:nth-child(1),
.route-data-overlay.hide-distance .route-data-stats div:nth-child(2),
.route-data-overlay.hide-ascent .route-data-stats div:nth-child(3),
.route-data-overlay.hide-hiking-time .route-data-stats div:nth-child(4){
  display:none;
}
.route-overlay-stats-options{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  padding:8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(255,255,255,.06);
}
.route-overlay-stats-options[hidden]{
  display:none!important;
}
.route-overlay-stats-options label{
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.82);
  font:800 10px/1 var(--font-b);
  cursor:pointer;
}
.route-overlay-stats-options input{
  width:13px;
  height:13px;
  accent-color:var(--accent);
}
.pro-badge{
  display:inline-grid;
  place-items:center;
  margin-left:5px;
  padding:2px 5px;
  border-radius:999px;
  background:rgba(47,111,115,.16);
  color:var(--accent);
  font:900 8px/1 var(--font-b);
  letter-spacing:.08em;
  vertical-align:middle;
}
.route-overlay-choice-row.locked .marker-choice-btn:not(.active){
  opacity:.48;
  cursor:not-allowed;
}
.marker-choice-btn.locked,
.visual-choice-btn.locked{
  position:relative;
  opacity:.58!important;
  cursor:not-allowed!important;
}
.marker-choice-btn.locked::after,
.visual-choice-btn.locked::after{
  content:"PRO";
  display:inline-grid!important;
  place-items:center;
  margin-left:6px;
  padding:2px 5px;
  border-radius:999px;
  background:rgba(47,111,115,.18);
  color:var(--accent);
  font:900 8px/1 var(--font-b);
  letter-spacing:.08em;
}
body:not(.landing-active) .marker-choice-btn.locked::after,
body:not(.landing-active) .visual-choice-btn.locked::after{
  background:rgba(255,255,255,.16);
  color:#fff;
}

.map-loader{
  position:absolute;
  inset:0;
  background:rgba(244,247,239,.78);
  backdrop-filter:blur(5px);
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
}
.loader-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  padding:28px;
  background:rgba(255,255,255,.9);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:var(--shadow);
}
.loader-logo{
  width:82px;
  height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:float 2s ease-in-out infinite;
}
.loader-logo img{
  width:74px;
  height:74px;
  object-fit:contain;
  display:block;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.loader-text{font-family:var(--font-m);font-size:12px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;}
.loader-bar{width:220px;height:5px;background:var(--surface2);border-radius:999px;overflow:hidden;}
.loader-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--trail));width:0%;transition:width .5s ease;border-radius:999px;}
.preload-map{
  position:fixed;
  left:-1200px;
  top:-1200px;
  width:1024px;
  height:768px;
  pointer-events:none;
  opacity:.01;
}

.map-toolbar{
  position:static;
  width:100%;
  background:rgba(255,255,255,.58);
  backdrop-filter:blur(14px) saturate(1.12);
  border:1px solid rgba(216,227,206,.72);
  border-radius:8px;
  padding:11px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  box-shadow:0 10px 24px rgba(31,45,36,.08);
}
.route-edit-toolbar{
  margin-top:10px;
}
.toolbar-hint{
  font-family:var(--font-m);
  font-size:11px;
  letter-spacing:.8px;
  color:var(--accent);
  text-align:center;
  text-transform:uppercase;
}
.toolbar-actions{display:flex;gap:9px;justify-content:center;align-items:center;flex-wrap:wrap;}
.tb-btn:disabled{opacity:.45;cursor:not-allowed;}
.route-point-actions{
  display:flex;
  gap:8px;
  margin:10px 0 8px;
}
.route-point-btn{
  flex:1;
  border:1px solid var(--line);
  background:rgba(255,255,255,.72);
  color:var(--text);
  border-radius:7px;
  padding:11px 10px;
  font-weight:800;
  cursor:pointer;
}
.route-point-btn.active{
  border-color:var(--accent);
  background:rgba(47,125,79,.12);
  color:var(--accent);
}
.tb-fly{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
  font-size:13px;
  padding:11px 20px;
  box-shadow:0 12px 24px rgba(47,125,79,.22);
  animation:popIn .22s cubic-bezier(.2,.9,.25,1.25);
}
.tb-fly:hover{background:var(--accent2);border-color:var(--accent2);color:#fff;transform:translateY(-1px);}
.tb-fly .fly-dist{font-family:var(--font-m);font-size:11px;opacity:.82;margin-left:4px;}
@keyframes popIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}

.wp-legend{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.wp-dot{display:flex;align-items:center;gap:5px;font-family:var(--font-m);font-size:10px;color:var(--muted);}
.wp-dot-circle{width:8px;height:8px;border-radius:50%;border:1.5px solid;}

.mapboxgl-popup-content{
  background:#fff!important;
  border:1px solid var(--border)!important;
  color:var(--text)!important;
  font-family:var(--font-b)!important;
  font-size:12px!important;
  border-radius:8px!important;
  padding:9px 12px!important;
  box-shadow:0 10px 28px rgba(31,45,36,.18)!important;
}
.mapboxgl-popup-tip{display:none!important;}
.popup-peak{color:var(--accent);font-weight:800;}
.popup-label{color:var(--muted);font-family:var(--font-m);font-size:10px;letter-spacing:1px;margin-bottom:2px;}
.mapboxgl-ctrl-group{background:#fff!important;border:1px solid var(--border)!important;border-radius:8px!important;box-shadow:0 6px 18px rgba(31,45,36,.13)!important;}
.mapboxgl-ctrl-group button{background:#fff!important;}
.mapboxgl-ctrl button .mapboxgl-ctrl-icon{filter:none!important;}
.mapboxgl-ctrl-attrib.mapboxgl-compact{
  min-height:0!important;
  padding:2px 5px!important;
}
.mapboxgl-ctrl-attrib.mapboxgl-compact button{
  display:none!important;
}
.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner{
  display:block!important;
}
.mapboxgl-ctrl-attrib a{
  display:inline!important;
}

body.preview-playing .sidebar,
body.preview-playing .mobile-app-header,
body.preview-playing .map-toolbar,
body.export-recording .sidebar,
body.export-recording .mobile-app-header,
body.export-recording .map-toolbar,
body.export-recording .map-watermark,
body.export-recording .mapboxgl-ctrl-top-right,
body.export-recording .mapboxgl-ctrl-logo{
  display:none!important;
}
body.export-recording .map-container,
body.preview-video-frame .map-container,
body.zoom-video-frame .map-container,
body.gpx-video-frame .map-container{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:9999;
  background:#000;
}
body.zoom-video-frame .map-container,
body.gpx-video-frame .map-container{z-index:1;}
body.preview-video-frame .map-container,
body.export-recording .map-container{z-index:9999;}
body.export-recording.export-landscape #map,
body.preview-video-frame.export-landscape #map,
body.zoom-video-frame.export-landscape #map,
body.gpx-video-frame.export-landscape #map{
  position:absolute;
  width:min(100vw,177.7778vh);
  height:min(100vh,56.25vw);
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
body.export-recording.export-portrait #map,
body.preview-video-frame.export-portrait #map,
body.zoom-video-frame.export-portrait #map,
body.gpx-video-frame.export-portrait #map{
  position:absolute;
  width:min(100vw,56.25vh);
  height:min(100vh,177.7778vw);
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
body.preview-video-frame.export-landscape .map-watermark,
body.zoom-video-frame.export-landscape .map-watermark,
body.gpx-video-frame.export-landscape .map-watermark{
  left:50%;
  right:auto;
  top:calc((100vh - min(100vh,56.25vw)) / 2 + 24px);
  bottom:auto;
}
body.preview-video-frame.export-portrait .map-watermark,
body.zoom-video-frame.export-portrait .map-watermark,
body.gpx-video-frame.export-portrait .map-watermark{
  left:50%;
  right:auto;
  top:24px;
  bottom:auto;
}
body.preview-video-frame .mobile-app-header{
  display:none!important;
}
body.preview-video-frame .map-watermark,
body.zoom-video-frame .map-watermark,
body.gpx-video-frame .map-watermark{
  display:flex!important;
  bottom:auto!important;
  right:auto!important;
  transform:translateX(-50%)!important;
}
body.preview-video-frame .map-watermark img,
body.zoom-video-frame .map-watermark img,
body.gpx-video-frame .map-watermark img{
  width:clamp(220px,22vw,360px);
}
body.pro-user .map-watermark,
body.pro-user.preview-video-frame .map-watermark,
body.pro-user.zoom-video-frame .map-watermark,
body.pro-user.gpx-video-frame .map-watermark{
  display:none!important;
}

@keyframes hk-walk-body{
  0%,100%{transform:translateY(0) rotate(-1deg)}
  25%{transform:translateY(.6px) rotate(.4deg)}
  50%{transform:translateY(-1px) rotate(1deg)}
  75%{transform:translateY(.4px) rotate(-.3deg)}
}
@keyframes hk-walk-leg-l{
  0%,100%{transform:rotate(-12deg) translateY(0)}
  25%{transform:rotate(-5deg) translateY(.5px)}
  50%{transform:rotate(10deg) translateY(-.4px)}
  75%{transform:rotate(4deg) translateY(.6px)}
}
@keyframes hk-walk-leg-r{
  0%,100%{transform:rotate(10deg) translateY(-.4px)}
  25%{transform:rotate(4deg) translateY(.6px)}
  50%{transform:rotate(-12deg) translateY(0)}
  75%{transform:rotate(-5deg) translateY(.5px)}
}
@keyframes hk-walk-arm-l{
  0%,100%{transform:rotate(9deg)}
  50%{transform:rotate(-8deg)}
}
@keyframes hk-walk-arm-r{
  0%,100%{transform:rotate(-8deg)}
  50%{transform:rotate(9deg)}
}
.hiker-marker{pointer-events:none;filter:drop-shadow(0 3px 10px rgba(31,45,36,.42));}
.hiker-preview-canvas{
  width:39px;
  height:58px;
  display:block;
}
.route-circle-marker{
  width:22px;
  height:22px;
  border:3px solid #fff;
  border-radius:50%;
  background:var(--trail);
  box-shadow:0 0 0 4px rgba(217,130,43,.24),0 4px 14px rgba(31,45,36,.34);
}
.hk-body{transform-origin:16px 29px;animation:hk-walk-body .86s cubic-bezier(.45,0,.55,1) infinite;}
.hk-leg-l{transform-origin:12px 39px;animation:hk-walk-leg-l .86s cubic-bezier(.45,0,.55,1) infinite;}
.hk-leg-r{transform-origin:20px 39px;animation:hk-walk-leg-r .86s cubic-bezier(.45,0,.55,1) infinite;}
.hk-arm-l{transform-origin:8px 19px;animation:hk-walk-arm-l .86s cubic-bezier(.45,0,.55,1) infinite;}
.hk-arm-r{transform-origin:23px 19px;animation:hk-walk-arm-r .86s cubic-bezier(.45,0,.55,1) infinite;}
.hiker-stopped .hk-body,.hiker-stopped .hk-leg-l,.hiker-stopped .hk-leg-r,.hiker-stopped .hk-arm-l,.hiker-stopped .hk-arm-r{animation:none!important;}
.hiker-stopped .hk-body,.hiker-stopped .hk-leg-l,.hiker-stopped .hk-leg-r,.hiker-stopped .hk-arm-l,.hiker-stopped .hk-arm-r{transform:rotate(0deg) translateY(0)!important;}

.ac-dropdown{
  position:absolute;
  top:calc(100% + 7px);
  left:0;
  right:0;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(216,227,206,.62);
  backdrop-filter:blur(14px) saturate(1.12);
  -webkit-backdrop-filter:blur(14px) saturate(1.12);
  border-radius:8px;
  box-shadow:0 18px 42px rgba(31,45,36,.18);
  z-index:200;
  overflow:hidden;
  max-height:320px;
  overflow-y:auto;
}
.ac-dropdown.mobile-floating{
  position:fixed;
  top:auto;
  right:auto;
  z-index:10000;
  border-radius:18px;
  background:rgba(255,255,255,.86);
  box-shadow:0 -18px 42px rgba(31,45,36,.24);
  backdrop-filter:blur(18px) saturate(1.16);
  -webkit-backdrop-filter:blur(18px) saturate(1.16);
}
.ac-dropdown.desktop-floating{
  position:fixed;
  right:auto;
  z-index:10000;
  border-radius:14px;
  background:rgba(247,250,246,.94);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 18px 44px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.70);
  backdrop-filter:blur(18px) saturate(1.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.12);
}
.ac-dropdown::-webkit-scrollbar{width:5px;}
.ac-dropdown::-webkit-scrollbar-thumb{background:var(--border2);border-radius:8px;}
.ac-item{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  align-items:start;
  gap:10px;
  padding:12px 14px;
  cursor:pointer;
  border-bottom:1px solid rgba(216,227,206,.48);
  transition:background .12s;
  min-height:64px;
}
.ac-item:last-child{border-bottom:none;}
.ac-item:hover,.ac-item.ac-selected{background:rgba(224,240,216,.58);}
.ac-peak .ac-icon{color:var(--accent);border-color:rgba(47,125,79,.28);background:rgba(47,125,79,.08);}
.ac-icon{
  align-self:start;
  justify-self:start;
  min-width:38px;
  padding:4px 5px;
  border:1px solid rgba(216,227,206,.56);
  border-radius:6px;
  color:var(--muted);
  background:rgba(248,250,246,.50);
  font-family:var(--font-b);
  font-size:10px;
  font-weight:800;
  line-height:1;
  text-align:center;
}
.ac-text{display:flex;flex-direction:column;gap:5px;min-width:0;}
.ac-row1{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;
  column-gap:8px;
}
.ac-row2{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:2px;
}
.ac-name{font-family:var(--font-b);font-size:14px;line-height:1.1;color:var(--text);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ac-ele{font-family:var(--font-m);font-size:10px;color:var(--trail);font-weight:800;white-space:nowrap;}
.ac-sub{font-family:var(--font-m);font-size:10px;line-height:1.25;color:var(--muted);letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ac-coords{font-family:var(--font-m);font-size:9px;line-height:1.2;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

@media (max-width:900px){
  :root{--sw:100vw;--mobile-menu-h:42dvh;}
  html,body{overflow:hidden;}
  body::before{opacity:.65;}
  .landing-page{
    overflow:auto;
  }
  .landing-header{
    height:auto;
    min-height:60px;
    padding:8px 12px;
    gap:8px;
  }
  .landing-brand{
    font-size:15px;
    gap:8px;
    flex:0 0 auto;
  }
  .landing-brand-mark{
    width:118px;
    height:39px;
  }
  .landing-nav{
    gap:4px;
  }
  .landing-nav a{
    min-height:34px;
    min-width:0;
    padding:7px 8px;
    font-size:11px;
    text-align:center;
  }
  .landing-start-btn{
    min-height:34px;
    padding:7px 10px;
    font-size:11px;
  }
  .landing-hero{
    min-height:calc(100dvh - 60px);
    display:flex;
    flex-direction:column;
  }
  .landing-preview{
    order:1;
    min-height:48dvh;
    flex:0 0 48dvh;
  }
  .landing-copy{
    order:2;
    padding:26px 18px 32px;
  }
  .landing-kicker{
    margin-bottom:18px;
  }
  .landing-copy h1{
    font-size:42px;
  }
  .landing-subtitle{
    font-size:16px;
    margin-top:18px;
  }
  .landing-actions{
    display:grid;
    grid-template-columns:1fr;
    margin-top:24px;
  }
  .landing-primary,
  .landing-secondary{
    width:100%;
  }
  .landing-stats{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:7px;
    margin-top:24px;
  }
  .landing-stats div{
    min-width:0;
    padding:12px 9px;
  }
  .landing-stats strong{
    font-size:14px;
  }
  .landing-stats span{
    font-size:11px;
  }
  .landing-preview-copy{
    left:20px;
    right:20px;
    bottom:20px;
  }
  .landing-preview-label{
    margin-bottom:8px;
  }
  .landing-preview-copy h2{
    font-size:30px;
  }
  .landing-preview-copy p{
    font-size:13px;
  }
  .landing-preview-tabs{
    width:100%;
  }
  .landing-preview-tab{
    flex:1;
    white-space:nowrap;
  }
  .mobile-app-header{
    left:0;
    right:0;
    top:0;
    min-height:58px;
    padding:7px 9px calc(7px + env(safe-area-inset-top,0px));
    border-left:0;
    border-right:0;
    border-top:0;
    border-radius:0;
    gap:7px;
    background:rgba(255,255,255,.96);
  }
  .mobile-brand-btn{
    min-width:76px;
    min-height:40px;
    gap:6px;
    font-size:13px;
  }
  .mobile-brand-logo{
    width:118px;
    height:39px;
  }
  .mobile-brand-logo img{width:100%;height:100%;object-fit:contain;}
  .mobile-main-nav{
    display:grid;
    grid-template-columns:1fr 1fr .72fr;
    gap:6px;
  }
  .mobile-nav-btn{
    min-width:0;
    min-height:38px;
    padding:8px 7px;
    font-size:12px;
    line-height:1.05;
    white-space:normal;
    text-align:center;
  }
  .sidebar{
    left:0;
    right:0;
    top:auto;
    bottom:0;
    width:100%;
    max-height:var(--mobile-menu-h);
    border:none;
    border-radius:0;
    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow:none;
    overflow-y:auto;
    overscroll-behavior:contain;
    justify-content:flex-end;
  }
  .sidebar::before{
    display:none;
  }
  .brand,
  .sidebar.show-home .brand{
    display:none!important;
  }
  .sidebar.show-home .brand-logo{
    width:30px;
    height:30px;
  }
  .sidebar.show-home .brand-logo svg{
    width:21px;
    height:21px;
  }
  .sidebar.show-home .brand-name{font-size:17px;}
  .sidebar.show-home .home-btn{
    min-height:32px;
    padding:7px 11px;
    font-size:12px;
  }
  .sidebar.mode-selected .mode-section,
  .mode-section{display:none!important;}
  .mode-section,.gpx-choice-section,.upload-section,.zoom-section,.search-section,.guide-section,.route-info{
    padding:8px 12px;
    border-top:0!important;
    border-bottom:0!important;
  }
  .gpx-choice-section{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .gpx-choice-intro{grid-column:1/-1;}
  .mode-card,.upload-drop{padding:10px;min-height:42px;}
  .upload-drop{
    min-height:112px;
    padding:16px 12px;
    gap:7px;
  }
  .upload-icon{
    width:32px;
    height:32px;
  }
  .mode-title,.upload-title{font-size:13px;}
  .upload-title{font-size:15px;}
  .mode-copy,.upload-copy{font-size:11px;}
  .source-card{min-height:58px;padding:10px 11px;}
  .source-card .mode-title{font-size:13px;}
  .source-card .mode-copy{
    display:block;
    font-size:10px;
    line-height:1.25;
  }
  .search-section,.upload-section,.gpx-choice-section,.guide-section,.zoom-panel{gap:7px;}
  .zoom-section,
  .guide-section{
    min-height:auto;
    padding-bottom:0;
    border:0!important;
    justify-content:flex-end;
  }
  .search-section,
  .upload-section{
    order:1;
  }
  .guide-section{
    order:2;
  }
  .search-section,
  .upload-section,
  .gpx-choice-section{
    position:relative;
    z-index:8;
    margin-bottom:8px;
    padding:10px!important;
    border:1px solid rgba(216,227,206,.50);
    border-radius:22px;
    background:rgba(255,255,255,.30);
    box-shadow:0 14px 34px rgba(31,45,36,.16), inset 0 1px 0 rgba(255,255,255,.28);
    backdrop-filter:blur(22px) saturate(1.12);
    -webkit-backdrop-filter:blur(22px) saturate(1.12);
  }
  .zoom-section > .zoom-panel,
  .guide-section > .guide-panel,
  .guide-section > .camera-panel,
  .guide-section > .options-panel,
  .guide-section > .export-panel{
    order:1;
    margin-bottom:8px;
    padding:10px;
    border:1px solid rgba(216,227,206,.50);
    border-radius:22px;
    background:rgba(255,255,255,.30);
    box-shadow:0 14px 34px rgba(31,45,36,.16), inset 0 1px 0 rgba(255,255,255,.28);
    backdrop-filter:blur(22px) saturate(1.12);
    -webkit-backdrop-filter:blur(22px) saturate(1.12);
  }
  #zoomLocationPanel{
    position:relative;
    z-index:8;
  }
  .search-section .ac-dropdown,
  #zoomLocationPanel .ac-dropdown,
  .ac-dropdown.mobile-floating{
    position:fixed;
    top:auto;
    z-index:10000;
    max-height:min(38dvh,320px);
    border-radius:18px;
    background:rgba(255,255,255,.78);
    box-shadow:0 -18px 42px rgba(31,45,36,.22);
  }
  .search-input{font-size:16px;min-height:42px;padding-top:10px;padding-bottom:10px;}
  .generate-btn,.guide-primary,.action-btn,.tb-btn{
    min-height:42px;
    font-size:14px;
  }
  .generate-btn{padding:10px 13px;}
  .guide-steps{
    order:50;
    position:sticky;
    bottom:7px;
    z-index:6;
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:4px;
    overflow:visible;
    margin-top:0;
    flex-shrink:0;
    padding:5px;
    border:0;
    border-radius:22px;
    background:rgba(255,255,255,.38);
    box-shadow:0 12px 30px rgba(31,45,36,.16);
    backdrop-filter:blur(22px) saturate(1.14);
    -webkit-backdrop-filter:blur(22px) saturate(1.14);
  }
  .guide-section .guide-steps{grid-template-columns:repeat(6,minmax(0,1fr));}
  .zoom-section .guide-steps{grid-template-columns:repeat(5,minmax(0,1fr));}
  .guide-steps::-webkit-scrollbar{display:none;}
  .guide-step{
    min-width:0;
    min-height:38px;
    padding:5px 4px;
    border-radius:17px;
    background:rgba(255,255,255,.12);
  }
  .guide-step.active{
    background:rgba(67,176,157,.22);
    border-color:rgba(216,227,206,.60);
    box-shadow:none;
  }
  .guide-step.done{
    color:var(--accent);
  }
  .guide-index{width:20px;height:20px;font-size:10px;}
  .guide-title{font-size:8px;}
  .guide-copy{display:none;}
  .guide-panel,.camera-panel,.options-panel,.export-panel{padding:9px;}
  .camera-panel,.options-panel,.export-panel{gap:8px;}
  .panel-info-btn{
    min-width:50px;
    height:24px;
    padding:0 9px;
    font-size:10px;
    background:rgba(255,255,255,.40);
  }
  .panel-help-popover{
    padding:8px 9px;
    font-size:11px;
    background:rgba(255,255,255,.32);
  }
  .export-summary{padding:11px;}
  .export-summary-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;}
  .export-summary-grid div{padding:7px 6px;}
  .export-summary-grid strong{font-size:11px;}
  #zoomSettingsPanel,
  #optionsPanel{
    gap:6px;
  }
  #zoomFinalPanel,
  #zoomStartPanel{
    gap:6px;
    padding:10px!important;
  }
  #zoomFinalPanel .zoom-panel-header,
  #zoomStartPanel .zoom-panel-header{
    min-height:24px;
  }
  #zoomFinalPanel .panel-info-btn,
  #zoomStartPanel .panel-info-btn{
    min-width:50px;
    height:24px;
    padding:0 9px;
    font-size:10px;
    background:rgba(255,255,255,.42);
  }
  #zoomFinalPanel .panel-help-popover,
  #zoomStartPanel .panel-help-popover{
    padding:8px 9px;
    font-size:11px;
    background:rgba(255,255,255,.32);
  }
  #zoomFinalPanel .zoom-camera-controls,
  #zoomStartPanel .zoom-camera-controls{
    gap:5px;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
  }
  #zoomFinalPanel .camera-row,
  #zoomStartPanel .camera-row{
    gap:3px;
  }
  #zoomFinalPanel .camera-row label,
  #zoomStartPanel .camera-row label{
    font-size:9px;
  }
  #zoomFinalPanel .camera-row input[type="range"],
  #zoomStartPanel .camera-row input[type="range"]{
    min-height:21px;
  }
  #setZoomEndBtn,
  #setZoomStartBtn{
    min-height:32px;
    padding:6px 10px;
    border-radius:10px;
    font-size:12px;
  }
  #zoomSettingsPanel .marker-choice-row,
  #optionsPanel .marker-choice-row,
  #optionsPanel .speed-row,
  #zoomSettingsPanel .speed-row,
  #optionsPanel .toggle-row,
  #zoomSettingsPanel .toggle-row{
    padding:6px 8px!important;
    border:1px solid rgba(216,227,206,.46);
    border-radius:10px;
    background:rgba(255,255,255,.24);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.24);
  }
  #zoomSettingsPanel .marker-choice-row,
  #optionsPanel .marker-choice-row,
  #optionsPanel .speed-row,
  #zoomSettingsPanel .speed-row{
    align-items:stretch;
    flex-direction:column;
    gap:5px;
  }
  #zoomSettingsPanel .toggle-row,
  #optionsPanel .toggle-row{
    min-height:34px;
  }
  #optionsPanel[style*="display: flex"]{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch;
  }
  #optionsPanel .zoom-panel-header,
  #optionsPanel .panel-help-popover,
  #optionsPanel .speed-row,
  #optionsPanel .visual-choice-row,
  #optionsPanel .color-choice-row,
  #optionsPanel .marker-choice-row:not(.visual-choice-row):not(.color-choice-row),
  #optionsPanel .guide-primary,
  #optionsPanel .fine-tune-btn{
    grid-column:1/-1;
  }
  #optionsPanel .toggle-row{
    min-width:0;
    padding:7px 8px!important;
  }
  #optionsPanel .toggle-row .toggle-label{
    font-size:9px;
    line-height:1.05;
  }
  #zoomSettingsPanel .marker-choice,
  #optionsPanel .marker-choice{
    width:100%;
    background:rgba(238,244,232,.28);
  }
  #zoomSettingsPanel .marker-choice-row:not(.visual-choice-row) .marker-choice,
  #optionsPanel .marker-choice-row:not(.visual-choice-row) .marker-choice{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:1fr;
  }
  #zoomSettingsPanel .marker-choice-row.compact,
  #optionsPanel .marker-choice-row.compact,
  #zoomSettingsPanel .speed-row.compact,
  #optionsPanel .speed-row.compact{
    flex-direction:row;
    align-items:center;
    gap:7px;
  }
  #zoomSettingsPanel .marker-choice-row.compact .toggle-label,
  #optionsPanel .marker-choice-row.compact .toggle-label,
  #zoomSettingsPanel .speed-row.compact .speed-header,
  #optionsPanel .speed-row.compact .speed-header{
    flex:0 0 58px;
    min-width:0;
    line-height:1.05;
  }
  #zoomSettingsPanel .marker-choice-row.compact .marker-choice,
  #optionsPanel .marker-choice-row.compact .marker-choice,
  #zoomSettingsPanel .marker-choice-row.compact .color-choice,
  #optionsPanel .marker-choice-row.compact .color-choice,
  #zoomSettingsPanel .speed-row.compact .duration-input-wrap,
  #optionsPanel .speed-row.compact .duration-input-wrap{
    flex:1 1 auto;
    width:auto;
    min-width:0;
  }
  .visual-choice-row{
    flex-direction:row!important;
    align-items:center!important;
    gap:7px!important;
  }
  .visual-choice-row .toggle-label{
    flex:0 0 58px;
    line-height:1.05;
  }
  .visual-choice-row .marker-choice{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:3px;
    padding:3px;
  }
  .visual-choice-btn{
    min-height:28px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:2px;
    padding:3px 2px 4px;
    text-align:center;
    overflow:hidden;
    font-size:9px;
  }
  .visual-choice-btn::before{
    width:100%;
    height:4px;
    flex:0 0 4px;
    margin:0;
    border-radius:999px;
  }
  .visual-choice-btn.active{
    outline:2px solid rgba(47,125,79,.22);
    outline-offset:0;
  }
  .marker-choice-btn{min-height:36px;padding:8px 8px;}
  .camera-row{gap:4px;}
  .camera-row input[type="range"]{min-height:24px;}
  .speed-row.compact,.toggle-row.compact,.marker-choice-row.compact{min-height:32px;}
  .toggle-row,.marker-choice-row{padding:5px 0;}
  .toggle-btn{width:44px;height:24px;}
  .toggle-knob{width:18px;height:18px;}
  .toggle-btn.active .toggle-knob{transform:translateX(20px);}
  .marker-choice{flex-shrink:0;}
  .duration-input-wrap{grid-template-columns:minmax(0,1fr) 42px;gap:8px;}
  .duration-value{font-size:14px;}
  .status-section{display:none!important;padding:0;}
  .status-log{max-height:34px;overflow:hidden;}
  .status-item{font-size:10px;align-items:flex-start;}
  .route-info{gap:8px;}
  .info-grid{grid-template-columns:1fr 1fr;gap:8px;}
  .info-item{padding:9px;}
  .info-value{font-size:12px;}
  .action-buttons{flex-direction:column;}
  .disclaimer,.sidebar-footer{display:none;}
  .map-toolbar{
    left:10px;
    right:10px;
    top:10px;
    bottom:auto;
    padding:8px 10px;
    gap:8px;
    z-index:80;
  }
  .toolbar-hint{font-size:10px;line-height:1.35;}
  .toolbar-actions{
    display:flex;
    gap:7px;
    justify-content:center;
  }
  .toolbar-actions .tb-btn{
    min-height:36px;
    padding:8px 10px;
    font-size:12px;
    flex:1;
    max-width:132px;
  }
  .toolbar-actions .tb-fly{display:none!important;}
  .map-watermark{
    left:50%;
    right:auto;
    top:72px;
    bottom:auto;
    transform:translateX(-50%);
    font-size:15px;
    padding:0;
  }
  .mapboxgl-ctrl-top-right{
    top:10px!important;
    right:10px!important;
  }
  body.export-recording .map-container,
  body.preview-video-frame .map-container,
  body.zoom-video-frame .map-container,
  body.gpx-video-frame .map-container{
    inset:0;
    width:100vw;
    height:100dvh;
  }
  body.export-recording.export-landscape #map,
  body.preview-video-frame.export-landscape #map,
  body.zoom-video-frame.export-landscape #map,
  body.gpx-video-frame.export-landscape #map{
    width:min(100vw,177.7778dvh);
    height:min(100dvh,56.25vw);
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
  }
  body.export-recording.export-portrait #map,
  body.preview-video-frame.export-portrait #map,
  body.zoom-video-frame.export-portrait #map,
  body.gpx-video-frame.export-portrait #map{
    width:min(100vw,56.25dvh);
    height:min(100dvh,177.7778vw);
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
  }
  body.preview-video-frame.export-landscape .map-watermark,
  body.preview-video-frame.export-portrait .map-watermark,
  body.zoom-video-frame.export-landscape .map-watermark,
  body.zoom-video-frame.export-portrait .map-watermark,
  body.gpx-video-frame.export-landscape .map-watermark,
  body.gpx-video-frame.export-portrait .map-watermark{
    top:14px!important;
    left:50%!important;
    bottom:auto!important;
    right:auto!important;
    transform:translateX(-50%)!important;
  }
  body.preview-video-frame .mapboxgl-ctrl-bottom-right,
  body.preview-video-frame .mapboxgl-ctrl-bottom-left{
    bottom:max(8px, env(safe-area-inset-bottom,0px))!important;
  }
  body.zoom-video-frame .sidebar{
    max-height:var(--mobile-menu-h);
  }
  .map-loader{align-items:flex-start;padding-top:18dvh;}
  .loader-inner{max-width:calc(100vw - 32px);padding:22px;}
  .route-data-overlay{
    bottom:28px;
    width:calc(100vw - 24px);
  }
  body.preview-video-frame.export-portrait .route-data-overlay,
  body.gpx-video-frame.export-portrait .route-data-overlay,
  body.zoom-video-frame.export-portrait .route-data-overlay{
    width:calc(100vw - 24px);
    max-width:calc(100vw - 24px);
    bottom:28px;
  }
  .route-elevation-canvas{
    height:90px;
  }
  .route-data-stats{
    gap:6px;
    margin-bottom:7px;
  }
  .route-data-stats div{
    padding:7px 6px 6px;
    border-radius:12px;
  }
  .route-data-stats span{
    font-size:9px;
  }
  .route-data-stats strong{
    font-size:22px;
  }
}

@media (max-width:420px){
  :root{--mobile-menu-h:42dvh;}
  .guide-step{min-width:0;}
  .info-grid{grid-template-columns:1fr 1fr;}
  .marker-choice-row{align-items:flex-start;flex-direction:column;}
  .marker-choice,.color-choice{width:100%;}
  #zoomSettingsPanel .marker-choice-row.compact,
  #optionsPanel .marker-choice-row.compact,
  #zoomSettingsPanel .speed-row.compact,
  #optionsPanel .speed-row.compact{
    align-items:center;
    flex-direction:row;
  }
  #zoomSettingsPanel .marker-choice-row.compact .toggle-label,
  #optionsPanel .marker-choice-row.compact .toggle-label,
  #zoomSettingsPanel .speed-row.compact .speed-header,
  #optionsPanel .speed-row.compact .speed-header{
    flex:0 0 54px;
  }
  #zoomSettingsPanel .marker-choice-row.compact .marker-choice,
  #optionsPanel .marker-choice-row.compact .marker-choice,
  #zoomSettingsPanel .marker-choice-row.compact .color-choice,
  #optionsPanel .marker-choice-row.compact .color-choice{
    width:auto;
  }
  .visual-choice-row{
    align-items:center;
    flex-direction:row;
  }
  .visual-choice-row .toggle-label{
    flex:0 0 54px;
  }
  .visual-choice-row .marker-choice{width:auto;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;}
  .visual-choice-btn{
    min-height:27px;
    padding:3px 1px 4px;
    font-size:8.5px;
  }
  .visual-choice-btn::before{
    width:100%;
    height:4px;
    margin:0;
  }
  .export-summary-grid{grid-template-columns:1fr 1fr;}
  .marker-choice-btn{flex:1;}
  .color-choice{justify-content:space-between;}
  .duration-input-wrap{grid-template-columns:minmax(0,1fr) 42px;}
  .map-toolbar{top:10px;bottom:auto;}
  .map-watermark{top:72px;bottom:auto;}
}

@media (max-height:700px) and (max-width:900px){
  :root{--mobile-menu-h:48dvh;}
  .brand{padding-top:8px;padding-bottom:9px;}
  .mode-section,.gpx-choice-section,.upload-section,.zoom-section,.search-section,.guide-section,.route-info{padding-top:10px;padding-bottom:10px;}
  .map-toolbar{top:10px;bottom:auto;}
  .map-watermark{display:flex;}
}

/* Final unified header: landing page and tool shell share the same visual system. */
:root{
  --public-serif:'DM Serif Display',Georgia,serif;
  --public-sans:'DM Sans',system-ui,sans-serif;
}
.landing-header,
.mobile-app-header.site-app-header{
  height:60px!important;
  min-height:60px!important;
  padding:0 32px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:20px!important;
  border:0!important;
  border-bottom:1px solid var(--public-border)!important;
  border-radius:0!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:none!important;
  backdrop-filter:blur(12px) saturate(1.04)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.04)!important;
}
.mobile-app-header.site-app-header{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  z-index:130!important;
}
.landing-brand,
.mobile-brand-btn{
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  color:var(--public-ink)!important;
  font-family:var(--public-serif)!important;
  font-size:20px!important;
  font-weight:400!important;
  line-height:1!important;
  letter-spacing:-.3px!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}
.landing-brand-mark,
.mobile-brand-logo{
  width:132px!important;
  height:44px!important;
  flex:0 0 132px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
.landing-brand-mark img,
.mobile-brand-logo img{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:contain!important;
}
.landing-nav,
.mobile-main-nav{
  flex:1 1 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  margin:0!important;
}
.landing-nav a,
.landing-start-btn,
.mobile-nav-btn{
  min-width:0!important;
  min-height:34px!important;
  padding:7px 12px!important;
  border:1px solid transparent!important;
  border-radius:8px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:transparent!important;
  color:#4a5568!important;
  box-shadow:none!important;
  font:500 14px/1 var(--public-sans)!important;
  letter-spacing:0!important;
  text-align:center!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  cursor:pointer!important;
}
.landing-nav a:hover,
.mobile-nav-btn:hover{
  border-color:transparent!important;
  background:var(--public-sand)!important;
  color:var(--public-ink)!important;
}
.landing-login{
  border-color:var(--public-border)!important;
  background:#fff!important;
  color:var(--public-ink)!important;
}
.landing-start-btn{
  border-color:var(--public-teal)!important;
  background:var(--public-teal)!important;
  color:#fff!important;
  font-weight:500!important;
}
.landing-start-btn:hover{
  border-color:var(--public-teal-dark)!important;
  background:var(--public-teal-dark)!important;
  color:#fff!important;
}
.mobile-nav-btn.active{
  border-color:rgba(47,111,115,.48)!important;
  background:var(--public-teal-soft)!important;
  color:var(--public-ink)!important;
  font-weight:600!important;
}
.mobile-nav-btn.pricing{
  border-color:transparent!important;
  background:transparent!important;
}
@media (min-width:901px){
  .app-nav .mobile-home-link,
  .app-nav .mobile-contact-link{
    display:none!important;
  }
}
.nav-hamburger,
.landing-hamburger{
  width:40px!important;
  height:40px!important;
  flex:0 0 40px!important;
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  margin-left:auto!important;
  padding:0!important;
  border:1px solid var(--public-border)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 8px 22px rgba(26,32,53,.08)!important;
  cursor:pointer!important;
}
.nav-hamburger span,
.landing-hamburger span{
  position:absolute!important;
  width:18px!important;
  height:2px!important;
  display:block!important;
  border-radius:999px!important;
  background:var(--public-ink)!important;
  transition:transform .18s ease,opacity .18s ease,top .18s ease!important;
}
.nav-hamburger span:nth-child(1),
.landing-hamburger span:nth-child(1){top:13px!important;}
.nav-hamburger span:nth-child(2),
.landing-hamburger span:nth-child(2){top:19px!important;}
.nav-hamburger span:nth-child(3),
.landing-hamburger span:nth-child(3){top:25px!important;}
.nav-hamburger.open span:nth-child(1),
.landing-hamburger.open span:nth-child(1){top:19px!important;transform:rotate(45deg)!important;}
.nav-hamburger.open span:nth-child(2),
.landing-hamburger.open span:nth-child(2){opacity:0!important;}
.nav-hamburger.open span:nth-child(3),
.landing-hamburger.open span:nth-child(3){top:19px!important;transform:rotate(-45deg)!important;}

@media (max-width:900px){
  .landing-header,
  .mobile-app-header.site-app-header{
    height:58px!important;
    min-height:58px!important;
    padding:0 10px!important;
    gap:8px!important;
  }
  .landing-brand{
    flex:0 0 auto!important;
    gap:10px!important;
    font-size:20px!important;
    line-height:1!important;
  }
  .mobile-brand-btn{
    flex:0 0 auto!important;
    gap:7px!important;
    font-size:13px!important;
    line-height:.95!important;
  }
  .landing-brand-mark,
  .mobile-brand-logo{
    width:118px!important;
    height:39px!important;
    flex-basis:118px!important;
  }
  .mobile-main-nav{
    display:grid!important;
    grid-auto-flow:column!important;
    grid-auto-columns:minmax(0,1fr)!important;
    gap:6px!important;
    min-width:0!important;
  }
  .landing-nav a,
  .landing-tool-link,
  .landing-start-btn,
  .mobile-nav-btn{
    min-height:38px!important;
    padding:8px 7px!important;
    border-radius:8px!important;
    font-size:12px!important;
    font-weight:600!important;
    line-height:1.05!important;
    white-space:normal!important;
  }
  .landing-hamburger{
    display:flex!important;
    position:relative!important;
  }
  .landing-nav{
    position:absolute!important;
    top:calc(100% + 10px)!important;
    left:12px!important;
    right:12px!important;
    z-index:260!important;
    display:none!important;
    grid-auto-flow:row!important;
    grid-template-columns:1fr!important;
    gap:6px!important;
    margin:0!important;
    padding:10px!important;
    border:1px solid var(--public-border)!important;
    border-radius:16px!important;
    background:rgba(255,255,255,.95)!important;
    box-shadow:0 18px 48px rgba(26,32,53,.18)!important;
    backdrop-filter:blur(18px) saturate(1.12)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.12)!important;
  }
  .landing-nav.open{
    display:grid!important;
  }
  .landing-nav.open a,
  .landing-nav.open .landing-tool-link,
  .landing-nav.open .landing-login,
  .landing-nav.open .landing-start-btn{
    width:100%!important;
    min-height:44px!important;
    display:flex!important;
    justify-content:flex-start!important;
    padding:0 14px!important;
    border-radius:10px!important;
    font:600 14px/1 var(--public-sans)!important;
    white-space:nowrap!important;
  }
  .landing-nav.open .landing-login{
    justify-content:center!important;
  }
  .landing-nav.open .landing-start-btn{
    justify-content:center!important;
    margin-top:4px!important;
  }
}

body.landing-active .mobile-app-header.site-app-header,
body.preview-playing .mobile-app-header.site-app-header,
body.export-recording .mobile-app-header.site-app-header,
body.preview-video-frame .mobile-app-header.site-app-header{
  display:none!important;
}

/* Keep the landing-page header typography identical to the public pages. */
.landing-header.public-nav .landing-nav a,
.landing-header.public-nav .landing-tool-link,
.landing-header.public-nav .landing-start-btn{
  font-family:var(--public-sans)!important;
  font-size:14px!important;
  font-weight:500!important;
  line-height:1!important;
  letter-spacing:0!important;
}
.landing-header.public-nav .landing-brand{
  font-family:var(--public-serif)!important;
  font-size:20px!important;
  font-weight:400!important;
  letter-spacing:-.3px!important;
}
.landing-brand.nav-logo,
.mobile-brand-btn.nav-logo{
  gap:0!important;
}
.landing-brand .nav-logo-wordmark,
.mobile-brand-btn .nav-logo-wordmark{
  width:132px!important;
  max-width:132px!important;
  height:auto!important;
  display:block!important;
  object-fit:contain!important;
  flex:0 0 auto!important;
}

@media (max-width:900px){
  .mobile-app-header.site-app-header .mobile-brand-btn{
    gap:0!important;
    font-size:20px!important;
    line-height:1!important;
  }
  .landing-brand.nav-logo,
  .mobile-brand-btn.nav-logo{
    gap:0!important;
  }
  .landing-brand .nav-logo-wordmark,
  .mobile-brand-btn .nav-logo-wordmark{
    width:132px!important;
    max-width:132px!important;
    height:auto!important;
    flex-basis:auto!important;
  }
}

/* =========================================================
   Mobile dark glass redesign
   Single appended override for @media max-width:900px only.
   ========================================================= */
@media (max-width:900px){
  .zoom-section > .zoom-panel,
  .guide-section > .guide-panel,
  .guide-section > .camera-panel,
  .guide-section > .options-panel,
  .guide-section > .export-panel,
  .search-section,
  .upload-section,
  .gpx-choice-section{
    position:relative;
    margin:0 10px 8px!important;
    background:rgba(20,28,32,.52)!important;
    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:20px!important;
    color:#fff!important;
    box-shadow:0 14px 34px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08)!important;
    backdrop-filter:blur(28px) saturate(1.6)!important;
    -webkit-backdrop-filter:blur(28px) saturate(1.6)!important;
  }

  .zoom-section > .zoom-panel::before,
  .guide-section > .guide-panel::before,
  .guide-section > .camera-panel::before,
  .guide-section > .options-panel::before,
  .guide-section > .export-panel::before,
  .search-section::before,
  .upload-section::before,
  .gpx-choice-section::before{
    content:"";
    display:block;
    width:36px;
    height:4px;
    margin:0 auto 10px;
    border-radius:2px;
    background:rgba(255,255,255,.28);
  }

  .zoom-section,
  .guide-section{
    max-height:55vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .zoom-section::-webkit-scrollbar,
  .guide-section::-webkit-scrollbar{
    display:none;
  }

  .guide-steps{
    position:sticky!important;
    top:12px!important;
    bottom:auto!important;
    margin:0 10px 8px!important;
    background:rgba(20,28,32,.52)!important;
    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:16px!important;
    color:#fff!important;
    box-shadow:0 12px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08)!important;
    backdrop-filter:blur(28px) saturate(1.6)!important;
    -webkit-backdrop-filter:blur(28px) saturate(1.6)!important;
  }

  .guide-copy{
    display:none!important;
  }

  .guide-step{
    color:rgba(255,255,255,.62)!important;
  }

  .guide-step.active{
    background:rgba(255,255,255,.10)!important;
    color:#fff!important;
    border-color:rgba(255,255,255,.14)!important;
    box-shadow:none!important;
  }

  .guide-step.active .guide-index{
    background:var(--accent)!important;
    color:#042f2a!important;
  }

  .guide-step.done{
    color:rgba(255,255,255,.78)!important;
  }

  .guide-step.done .guide-index{
    background:rgba(255,255,255,.82)!important;
    color:#1a2035!important;
  }

  .marker-choice{
    background:rgba(0,0,0,.28)!important;
    border:1px solid rgba(255,255,255,.08)!important;
    border-radius:11px!important;
    box-shadow:none!important;
  }

  .marker-choice-btn,
  .visual-choice-btn{
    background:transparent!important;
    background-image:none!important;
    border-color:transparent!important;
    color:rgba(255,255,255,.62)!important;
    box-shadow:none!important;
  }

  .marker-choice-btn::before,
  .marker-choice-btn::after,
  .visual-choice-btn::before,
  .visual-choice-btn::after{
    display:none!important;
    content:none!important;
  }

  .marker-choice-btn.active,
  .visual-choice-btn.active{
    background:rgba(255,255,255,.95)!important;
    background-image:none!important;
    color:#1a2035!important;
    box-shadow:none!important;
  }

  .marker-choice-row,
  .toggle-row,
  .speed-row{
    background:transparent!important;
    border:0!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
    border-radius:0!important;
    box-shadow:none!important;
  }

  .zoom-panel-header + .marker-choice-row,
  .zoom-panel-header + .toggle-row,
  .zoom-panel-header + .speed-row,
  .zoom-panel-header + .panel-help-popover + .marker-choice-row,
  .zoom-panel-header + .panel-help-popover + .toggle-row,
  .zoom-panel-header + .panel-help-popover + .speed-row,
  .marker-choice-row:first-child,
  .toggle-row:first-child,
  .speed-row:first-child{
    border-top:0!important;
  }

  .toggle-label,
  .panel-kicker,
  .camera-row label{
    font-family:var(--font-m)!important;
    font-size:10px!important;
    letter-spacing:.14em!important;
    text-transform:uppercase!important;
    color:rgba(255,255,255,.62)!important;
    font-weight:500!important;
  }

  .camera-row label span{
    color:#fff!important;
    font-family:var(--font-m)!important;
    font-weight:500!important;
  }

  .toggle-btn{
    background:rgba(0,0,0,.32)!important;
    border:1px solid rgba(255,255,255,.12)!important;
  }

  .toggle-btn.active{
    background:var(--accent)!important;
    border-color:var(--accent)!important;
  }

  input[type="range"],
  .duration-slider{
    height:20px!important;
    background:transparent!important;
  }

  input[type="range"]::-webkit-slider-runnable-track,
  .duration-slider::-webkit-slider-runnable-track{
    height:3px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.18)!important;
  }

  input[type="range"]::-webkit-slider-thumb,
  .duration-slider::-webkit-slider-thumb{
    width:20px!important;
    height:20px!important;
    margin-top:-8.5px!important;
    background:#fff!important;
    border:0!important;
    box-shadow:0 2px 6px rgba(0,0,0,.35)!important;
  }

  input[type="range"]::-moz-range-track,
  .duration-slider::-moz-range-track{
    height:3px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.18)!important;
  }

  input[type="range"]::-moz-range-thumb,
  .duration-slider::-moz-range-thumb{
    width:20px!important;
    height:20px!important;
    background:#fff!important;
    border:0!important;
    box-shadow:0 2px 6px rgba(0,0,0,.35)!important;
  }

  .duration-value{
    color:#fff!important;
    font-family:var(--font-m)!important;
    font-weight:500!important;
  }

  .guide-primary,
  .play-primary,
  .secondary-primary{
    background:var(--accent)!important;
    color:#fff!important;
    border-color:transparent!important;
    border-radius:12px!important;
    padding:13px!important;
    box-shadow:0 4px 14px rgba(43,168,155,.35)!important;
  }

  .guide-primary:disabled,
  .play-primary:disabled,
  .secondary-primary:disabled,
  .guide-primary[disabled],
  .play-primary[disabled],
  .secondary-primary[disabled]{
    background:rgba(255,255,255,.12)!important;
    color:rgba(255,255,255,.4)!important;
    box-shadow:none!important;
  }

  .guide-panel-title,
  .zoom-panel-title,
  .mode-title,
  .upload-title,
  .export-summary-title,
  .info-value{
    color:#fff!important;
  }

  .guide-panel-copy,
  .zoom-panel-copy,
  .mode-copy,
  .upload-copy,
  .export-summary-grid span,
  .info-label{
    color:rgba(255,255,255,.68)!important;
  }

  .search-input,
  .upload-file-label,
  .mode-card,
  .source-card{
    background:rgba(0,0,0,.24)!important;
    border-color:rgba(255,255,255,.10)!important;
    color:#fff!important;
    box-shadow:none!important;
  }

  .search-input::placeholder{
    color:rgba(255,255,255,.56)!important;
  }

  .search-suggestions{
    background:rgba(20,28,32,.72)!important;
    border-color:rgba(255,255,255,.10)!important;
    color:#fff!important;
    backdrop-filter:blur(28px) saturate(1.6)!important;
    -webkit-backdrop-filter:blur(28px) saturate(1.6)!important;
  }
}

/* Mobile step dock and panel color cleanup */
@media (max-width:900px){
  .sidebar{
    bottom:28px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    overflow:visible!important;
  }

  .sidebar::after{
    display:none!important;
  }

  .zoom-section,
  .guide-section{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  .zoom-section > .zoom-panel,
  .guide-section > .guide-panel,
  .guide-section > .camera-panel,
  .guide-section > .options-panel,
  .guide-section > .export-panel,
  .search-section,
  .upload-section,
  .gpx-choice-section{
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }

  .zoom-section .guide-steps,
  .guide-section .guide-steps{
    position:fixed!important;
    top:calc(58px + env(safe-area-inset-top,0px) + 8px)!important;
    right:10px!important;
    bottom:auto!important;
    left:10px!important;
    z-index:90!important;
    order:0!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    background:rgba(20,28,32,.52)!important;
    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:18px!important;
    box-shadow:0 12px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08)!important;
    backdrop-filter:blur(28px) saturate(1.6)!important;
    -webkit-backdrop-filter:blur(28px) saturate(1.6)!important;
  }

  .zoom-camera-controls,
  .camera-fine-tune,
  .duration-input-wrap,
  .route-point-actions,
  .toolbar-actions,
  .map-toolbar,
  .export-summary,
  .export-summary-grid div{
    background:transparent!important;
    box-shadow:none!important;
  }

  .zoom-camera-controls,
  .camera-fine-tune,
  .export-summary,
  .route-point-actions,
  .map-toolbar{
    border-color:rgba(255,255,255,.08)!important;
  }
}

/* Desktop tool panel: match the mobile dark glass control surface */
@media (min-width:901px){
  .sidebar{
    background:rgba(20,28,32,.52)!important;
    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:20px!important;
    color:#fff!important;
    box-shadow:0 18px 48px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08)!important;
    backdrop-filter:blur(28px) saturate(1.6)!important;
    -webkit-backdrop-filter:blur(28px) saturate(1.6)!important;
  }

  .sidebar::after{
    background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.01))!important;
  }

  .guide-panel,
  .camera-panel,
  .options-panel,
  .export-panel,
  .zoom-panel,
  .search-section,
  .upload-section,
  .gpx-choice-section,
  .route-info{
    color:#fff!important;
    background:transparent!important;
    border-color:rgba(255,255,255,.08)!important;
    box-shadow:none!important;
  }

  .guide-steps{
    background:rgba(0,0,0,.20)!important;
    border:1px solid rgba(255,255,255,.08)!important;
    border-radius:16px!important;
    padding:5px!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
  }

  .guide-step{
    color:rgba(255,255,255,.62)!important;
    background:transparent!important;
    border-color:transparent!important;
  }

  .guide-step.active{
    color:#fff!important;
    background:rgba(255,255,255,.10)!important;
    border-color:rgba(255,255,255,.12)!important;
  }

  .guide-step.done .guide-index,
  .guide-step.active .guide-index{
    background:var(--accent)!important;
    border-color:var(--accent)!important;
    color:#042f2a!important;
  }

  .guide-index{
    background:rgba(255,255,255,.14)!important;
    border-color:rgba(255,255,255,.14)!important;
    color:rgba(255,255,255,.72)!important;
  }

  .zoom-camera-controls,
  .camera-fine-tune,
  .duration-input-wrap,
  .export-summary,
  .export-summary-grid div,
  .info-item,
  .panel-help-popover,
  .mode-card,
  .source-card,
  .upload-drop,
  .search-input{
    background:rgba(0,0,0,.24)!important;
    border-color:rgba(255,255,255,.10)!important;
    color:#fff!important;
    box-shadow:none!important;
  }

  .marker-choice{
    background:rgba(0,0,0,.28)!important;
    border-color:rgba(255,255,255,.08)!important;
    border-radius:11px!important;
  }

  .marker-choice-btn{
    color:rgba(255,255,255,.62)!important;
    background:transparent!important;
  }

  .marker-choice-btn.active{
    color:#1a2035!important;
    background:rgba(255,255,255,.95)!important;
    box-shadow:none!important;
  }

  .marker-choice-row,
  .toggle-row,
  .speed-row{
    background:transparent!important;
    border-bottom:0!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
    box-shadow:none!important;
  }

  .zoom-panel-header + .marker-choice-row,
  .zoom-panel-header + .toggle-row,
  .zoom-panel-header + .speed-row,
  .zoom-panel-header + .panel-help-popover + .marker-choice-row,
  .zoom-panel-header + .panel-help-popover + .toggle-row,
  .zoom-panel-header + .panel-help-popover + .speed-row,
  .marker-choice-row:first-child,
  .toggle-row:first-child,
  .speed-row:first-child{
    border-top:0!important;
  }

  .toggle-label,
  .panel-kicker,
  .camera-row label,
  .search-label,
  .info-label,
  .export-summary-grid span{
    color:rgba(255,255,255,.62)!important;
  }

  .guide-panel-title,
  .zoom-panel-title,
  .mode-title,
  .upload-title,
  .export-summary-title,
  .info-value,
  .camera-row label span,
  .duration-value{
    color:#fff!important;
  }

  .guide-panel-copy,
  .zoom-panel-copy,
  .mode-copy,
  .upload-copy,
  .panel-help-popover{
    color:rgba(255,255,255,.68)!important;
  }

  .toggle-btn{
    background:rgba(0,0,0,.32)!important;
    border-color:rgba(255,255,255,.12)!important;
  }

  .toggle-btn.active{
    background:var(--accent)!important;
    border-color:var(--accent)!important;
  }

  .guide-primary,
  .play-primary,
  .generate-btn,
  .search-submit-btn{
    background:var(--accent)!important;
    color:#fff!important;
    border-color:transparent!important;
    box-shadow:0 4px 14px rgba(43,168,155,.35)!important;
  }

  .secondary-primary,
  .pc-render-btn,
  .fine-tune-btn,
  .action-btn,
  .tb-btn{
    background:rgba(0,0,0,.24)!important;
    border-color:rgba(255,255,255,.10)!important;
    color:#fff!important;
    box-shadow:none!important;
  }

  .search-input::placeholder{
    color:rgba(255,255,255,.56)!important;
  }
}

/* Final mobile placement cleanup: no tinted parent slab behind controls. */
@media (max-width:900px){
  body:not(.landing-active) .sidebar{
    bottom:52px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  body:not(.landing-active) .sidebar::before,
  body:not(.landing-active) .sidebar::after{
    display:none!important;
    content:none!important;
    background:none!important;
  }

  body:not(.landing-active) .zoom-section,
  body:not(.landing-active) .guide-section{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    padding-bottom:0!important;
  }

  body:not(.landing-active) .zoom-section > .zoom-panel,
  body:not(.landing-active) .guide-section > .guide-panel,
  body:not(.landing-active) .guide-section > .camera-panel,
  body:not(.landing-active) .guide-section > .options-panel,
  body:not(.landing-active) .guide-section > .export-panel,
  body:not(.landing-active) .search-section,
  body:not(.landing-active) .upload-section,
  body:not(.landing-active) .gpx-choice-section{
    margin-bottom:0!important;
  }

  body:not(.landing-active) .zoom-camera-controls,
  body:not(.landing-active) .camera-fine-tune{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    padding-left:0!important;
    padding-right:0!important;
  }
}

.advanced-settings-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(0,0,0,.18);
  color:#fff;
  padding:11px 14px;
  font-family:var(--font-m);
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
}

.advanced-settings-toggle:hover{
  background:rgba(255,255,255,.08);
}

.advanced-settings-chevron{
  font-family:var(--font-s);
  font-size:15px;
  line-height:1;
  transition:transform .16s ease;
}

.advanced-settings-toggle[aria-expanded="true"] .advanced-settings-chevron{
  transform:rotate(180deg);
}

.advanced-settings-panel{
  display:flex;
  flex-direction:column;
  gap:0;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(0,0,0,.12);
  overflow:hidden;
}

.advanced-settings-panel[hidden]{
  display:none;
}

.advanced-settings-panel > .toggle-row,
.advanced-settings-panel > .marker-choice-row{
  border-top:1px solid rgba(255,255,255,.08);
}

.advanced-settings-panel > .toggle-row:first-child,
.advanced-settings-panel > .marker-choice-row:first-child{
  border-top:0;
}

@media (max-width:900px){
  .advanced-settings-toggle{
    min-height:38px;
    padding:9px 12px;
    background:rgba(0,0,0,.28);
    border-color:rgba(255,255,255,.10);
  }

  .advanced-settings-panel{
    background:rgba(0,0,0,.14);
    border-color:rgba(255,255,255,.08);
  }
}

/* Keep Final view / Start view sliders on the same clean glass surface as Style. */
#zoomFinalPanel .zoom-camera-controls,
#zoomStartPanel .zoom-camera-controls,
#zoomFinalPanel .camera-fine-tune,
#zoomStartPanel .camera-fine-tune{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding-left:0!important;
  padding-right:0!important;
}

#zoomFinalPanel .camera-row,
#zoomStartPanel .camera-row{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Final/Start camera controls: keep sliders on one clean glass panel. */
body:not(.landing-active) #zoomFinalPanel,
body:not(.landing-active) #zoomStartPanel{
  background:rgba(20,28,32,.52)!important;
}

body:not(.landing-active) #zoomFinalPanel .zoom-camera-controls,
body:not(.landing-active) #zoomStartPanel .zoom-camera-controls{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  gap:7px!important;
}

body:not(.landing-active) #zoomFinalPanel .camera-row,
body:not(.landing-active) #zoomStartPanel .camera-row{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:3px 0!important;
}

body:not(.landing-active) #zoomFinalPanel .camera-row input[type="range"],
body:not(.landing-active) #zoomStartPanel .camera-row input[type="range"]{
  appearance:none!important;
  -webkit-appearance:none!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

body:not(.landing-active) #zoomFinalPanel .camera-row input[type="range"]::-webkit-slider-runnable-track,
body:not(.landing-active) #zoomStartPanel .camera-row input[type="range"]::-webkit-slider-runnable-track{
  height:3px!important;
  background:rgba(255,255,255,.22)!important;
  border:0!important;
  box-shadow:none!important;
}

body:not(.landing-active) #zoomFinalPanel .camera-row input[type="range"]::-moz-range-track,
body:not(.landing-active) #zoomStartPanel .camera-row input[type="range"]::-moz-range-track{
  height:3px!important;
  background:rgba(255,255,255,.22)!important;
  border:0!important;
  box-shadow:none!important;
}

body:not(.landing-active) #setZoomEndBtn,
body:not(.landing-active) #setZoomStartBtn{
  background:var(--accent)!important;
  border-color:transparent!important;
  color:#fff!important;
  box-shadow:0 4px 14px rgba(43,168,155,.35)!important;
}

/* Product UI shell cleanup: the sidebar is only a layout holder.
   Visible glass belongs to the active control cards, never the whole column. */
body:not(.landing-active) .sidebar{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

body:not(.landing-active) .sidebar::before,
body:not(.landing-active) .sidebar::after{
  display:none!important;
  content:none!important;
  background:none!important;
}

body:not(.landing-active) .zoom-section,
body:not(.landing-active) .guide-section,
body:not(.landing-active) .search-section,
body:not(.landing-active) .upload-section,
body:not(.landing-active) .gpx-choice-section{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

@media (min-width:901px){
  body:not(.landing-active) .sidebar{
    bottom:auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:calc(100vh - 112px)!important;
    overflow-y:auto!important;
    scrollbar-width:none!important;
  }

  body:not(.landing-active) .sidebar::-webkit-scrollbar{
    display:none!important;
  }

  body:not(.landing-active) .zoom-section,
  body:not(.landing-active) .guide-section{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    padding-bottom:0!important;
  }
}

@media (max-width:900px){
  body:not(.landing-active) .sidebar{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  body:not(.landing-active) .zoom-section,
  body:not(.landing-active) .guide-section{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    padding-left:0!important;
    padding-right:0!important;
  }
}

/* Unified product glass: every control card uses the same dark translucent
   surface, while the outer sidebar/sections stay invisible. */
body:not(.landing-active) .sidebar,
body:not(.landing-active) .zoom-section,
body:not(.landing-active) .guide-section{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

body:not(.landing-active) .sidebar::before,
body:not(.landing-active) .sidebar::after,
body:not(.landing-active) .zoom-section::before,
body:not(.landing-active) .zoom-section::after,
body:not(.landing-active) .guide-section::before,
body:not(.landing-active) .guide-section::after{
  display:none!important;
  content:none!important;
  background:none!important;
}

body:not(.landing-active) .zoom-section > .zoom-panel,
body:not(.landing-active) .guide-section > .guide-panel,
body:not(.landing-active) .guide-section > .camera-panel,
body:not(.landing-active) .guide-section > .options-panel,
body:not(.landing-active) .guide-section > .export-panel,
body:not(.landing-active) .search-section,
body:not(.landing-active) .upload-section,
body:not(.landing-active) .gpx-choice-section,
body:not(.landing-active) #zoomFinalPanel,
body:not(.landing-active) #zoomStartPanel{
  position:relative;
  background:
    linear-gradient(135deg,rgba(18,35,28,.78),rgba(14,25,26,.68))!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:20px!important;
  color:#fff!important;
  box-shadow:0 16px 38px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.10)!important;
  backdrop-filter:blur(28px) saturate(1.45)!important;
  -webkit-backdrop-filter:blur(28px) saturate(1.45)!important;
}

body:not(.landing-active) .zoom-section > .zoom-panel::before,
body:not(.landing-active) .guide-section > .guide-panel::before,
body:not(.landing-active) .guide-section > .camera-panel::before,
body:not(.landing-active) .guide-section > .options-panel::before,
body:not(.landing-active) .guide-section > .export-panel::before,
body:not(.landing-active) .search-section::before,
body:not(.landing-active) .upload-section::before,
body:not(.landing-active) .gpx-choice-section::before{
  content:""!important;
  display:block!important;
  width:36px!important;
  height:4px!important;
  margin:0 auto 10px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.30)!important;
}

body:not(.landing-active) .zoom-panel-header{
  color:#fff!important;
}

body:not(.landing-active) .panel-kicker,
body:not(.landing-active) .search-label,
body:not(.landing-active) .toggle-label,
body:not(.landing-active) .camera-row label,
body:not(.landing-active) .duration-value,
body:not(.landing-active) .guide-panel-title,
body:not(.landing-active) .upload-section label{
  color:rgba(255,255,255,.72)!important;
}

body:not(.landing-active) .camera-row label span,
body:not(.landing-active) .camera-row .camera-value,
body:not(.landing-active) .duration-value,
body:not(.landing-active) .guide-panel-title{
  color:#fff!important;
}

body:not(.landing-active) .zoom-camera-controls,
body:not(.landing-active) .camera-fine-tune,
body:not(.landing-active) .marker-choice-row,
body:not(.landing-active) .toggle-row,
body:not(.landing-active) .speed-row,
body:not(.landing-active) .export-summary,
body:not(.landing-active) .advanced-settings-panel{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}

body:not(.landing-active) .marker-choice-row,
body:not(.landing-active) .toggle-row,
body:not(.landing-active) .speed-row,
body:not(.landing-active) .advanced-settings-panel > .toggle-row,
body:not(.landing-active) .advanced-settings-panel > .marker-choice-row{
  border-top:1px solid rgba(255,255,255,.10)!important;
}

body:not(.landing-active) .marker-choice-row:first-of-type,
body:not(.landing-active) .toggle-row:first-of-type,
body:not(.landing-active) .speed-row:first-of-type{
  border-top:0!important;
}

body:not(.landing-active) #zoomFinalPanel .camera-row,
body:not(.landing-active) #zoomStartPanel .camera-row{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}

body:not(.landing-active) .marker-choice{
  background:rgba(0,0,0,.28)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:12px!important;
  box-shadow:none!important;
  overflow:hidden!important;
}

body:not(.landing-active) .marker-choice-btn,
body:not(.landing-active) .visual-choice-btn{
  background:transparent!important;
  background-image:none!important;
  border-color:transparent!important;
  color:rgba(255,255,255,.66)!important;
  box-shadow:none!important;
}

body:not(.landing-active) .marker-choice-btn::before,
body:not(.landing-active) .marker-choice-btn::after,
body:not(.landing-active) .visual-choice-btn::before,
body:not(.landing-active) .visual-choice-btn::after{
  display:none!important;
  content:none!important;
}

body:not(.landing-active) .marker-choice-btn.active,
body:not(.landing-active) .visual-choice-btn.active{
  background:rgba(255,255,255,.95)!important;
  color:#1a2035!important;
  border-color:rgba(255,255,255,.95)!important;
}

body:not(.landing-active) .search-input{
  background:rgba(0,0,0,.22)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  color:#fff!important;
  box-shadow:none!important;
}

body:not(.landing-active) .search-input input,
body:not(.landing-active) .search-input input::placeholder{
  color:rgba(255,255,255,.78)!important;
}

body:not(.landing-active) input[type="range"],
body:not(.landing-active) .duration-slider{
  -webkit-appearance:none!important;
  appearance:none!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
  padding:0!important;
}

body:not(.landing-active) .duration-input-wrap{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}

body:not(.landing-active) input[type="range"]::-webkit-slider-runnable-track,
body:not(.landing-active) .duration-slider::-webkit-slider-runnable-track{
  height:3px!important;
  background:rgba(255,255,255,.32)!important;
  background-image:none!important;
  border:0!important;
  border-radius:999px!important;
  box-shadow:none!important;
}

body:not(.landing-active) input[type="range"]::-webkit-slider-thumb,
body:not(.landing-active) .duration-slider::-webkit-slider-thumb{
  width:20px!important;
  height:20px!important;
  margin-top:-8.5px!important;
  background:var(--accent)!important;
  border:0!important;
  box-shadow:0 3px 8px rgba(0,0,0,.36)!important;
}

body:not(.landing-active) input[type="range"]::-moz-range-track,
body:not(.landing-active) .duration-slider::-moz-range-track{
  height:3px!important;
  background:rgba(255,255,255,.32)!important;
  border:0!important;
  box-shadow:none!important;
}

body:not(.landing-active) input[type="range"]::-moz-range-thumb,
body:not(.landing-active) .duration-slider::-moz-range-thumb{
  width:20px!important;
  height:20px!important;
  background:var(--accent)!important;
  border:0!important;
  box-shadow:0 3px 8px rgba(0,0,0,.36)!important;
}

body:not(.landing-active) .guide-primary,
body:not(.landing-active) .play-primary,
body:not(.landing-active) .secondary-primary,
body:not(.landing-active) .generate-btn,
body:not(.landing-active) .search-submit-btn,
body:not(.landing-active) #setZoomEndBtn,
body:not(.landing-active) #setZoomStartBtn{
  background:var(--accent)!important;
  border-color:transparent!important;
  border-radius:12px!important;
  color:#fff!important;
  box-shadow:0 4px 14px rgba(43,168,155,.35)!important;
}

body:not(.landing-active) .guide-primary:disabled,
body:not(.landing-active) .play-primary:disabled,
body:not(.landing-active) .secondary-primary:disabled{
  background:rgba(255,255,255,.14)!important;
  color:rgba(255,255,255,.42)!important;
  box-shadow:none!important;
}

body:not(.landing-active) .guide-steps{
  background:
    linear-gradient(135deg,rgba(18,35,28,.78),rgba(14,25,26,.68))!important;
  border:1px solid rgba(255,255,255,.14)!important;
  color:#fff!important;
  box-shadow:0 12px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10)!important;
  backdrop-filter:blur(26px) saturate(1.45)!important;
  -webkit-backdrop-filter:blur(26px) saturate(1.45)!important;
}

body:not(.landing-active) .guide-step{
  background:rgba(255,255,255,.08)!important;
  border-color:transparent!important;
  color:rgba(255,255,255,.58)!important;
}

body:not(.landing-active) .guide-step.active{
  background:rgba(255,255,255,.12)!important;
  border-color:rgba(255,255,255,.30)!important;
  color:#fff!important;
}

body:not(.landing-active) .guide-index{
  background:rgba(255,255,255,.72)!important;
  color:#355447!important;
  border-color:rgba(255,255,255,.46)!important;
}

body:not(.landing-active) .guide-step.active .guide-index,
body:not(.landing-active) .guide-step.done .guide-index{
  background:var(--accent)!important;
  color:#042f2a!important;
  border-color:var(--accent)!important;
}

body:not(.landing-active) .guide-step > div{
  width:100%!important;
  min-width:0!important;
}

body:not(.landing-active) .guide-title{
  width:100%!important;
  max-width:100%!important;
  display:block!important;
  overflow:hidden!important;
  text-align:center!important;
  text-overflow:clip!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  font-size:9px!important;
  line-height:1.05!important;
}

@media (min-width:901px){
  body:not(.landing-active) .sidebar{
    width:min(430px,31vw)!important;
  }

  body:not(.landing-active) .zoom-section > .zoom-panel,
  body:not(.landing-active) .guide-section > .guide-panel,
  body:not(.landing-active) .guide-section > .camera-panel,
  body:not(.landing-active) .guide-section > .options-panel,
  body:not(.landing-active) .guide-section > .export-panel,
  body:not(.landing-active) .search-section,
  body:not(.landing-active) .upload-section,
  body:not(.landing-active) .gpx-choice-section{
    margin:0 0 10px!important;
    padding:16px!important;
  }
}

@media (max-width:900px){
  body:not(.landing-active) .sidebar{
    top:auto!important;
    left:0!important;
    right:0!important;
    bottom:42px!important;
    width:auto!important;
    max-height:55vh!important;
    overflow-y:auto!important;
    scrollbar-width:none!important;
    padding:0!important;
  }

  body:not(.landing-active) .sidebar::-webkit-scrollbar{
    display:none!important;
  }

  body:not(.landing-active) .zoom-section,
  body:not(.landing-active) .guide-section{
    max-height:none!important;
    overflow:visible!important;
    padding:0!important;
  }

  body:not(.landing-active) .zoom-section > .zoom-panel,
  body:not(.landing-active) .guide-section > .guide-panel,
  body:not(.landing-active) .guide-section > .camera-panel,
  body:not(.landing-active) .guide-section > .options-panel,
  body:not(.landing-active) .guide-section > .export-panel,
  body:not(.landing-active) .search-section,
  body:not(.landing-active) .upload-section,
  body:not(.landing-active) .gpx-choice-section{
    margin:0 12px 8px!important;
    padding:13px 12px!important;
  }

  body:not(.landing-active) .guide-steps{
    position:fixed!important;
    top:calc(var(--topbar-h) + 8px)!important;
    left:12px!important;
    right:12px!important;
    bottom:auto!important;
    z-index:12!important;
    margin:0!important;
    padding:6px!important;
    border-radius:20px!important;
  }
}

@media (max-width:900px){
  body:not(.landing-active) .mobile-step-dock{
    position:fixed!important;
    top:calc(60px + env(safe-area-inset-top,0px) + 8px)!important;
    left:12px!important;
    right:12px!important;
    bottom:auto!important;
    z-index:120!important;
    width:auto!important;
    margin:0!important;
    padding:6px!important;
    transform:none!important;
  }

  body:not(.landing-active) .mobile-step-dock.zoom-steps{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
  }

  body:not(.landing-active) .mobile-step-dock.route-steps{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
  }

  body.landing-active .mobile-step-dock{
    display:none!important;
  }

  .mobile-app-header.site-app-header .app-nav.open{
    z-index:260!important;
  }

  .mobile-app-header.site-app-header .app-nav.open > *{
    width:100%!important;
    min-height:44px!important;
    justify-content:flex-start!important;
    padding:0 14px!important;
    text-align:left!important;
  }

  .mobile-app-header.site-app-header .app-nav.open .landing-login,
  .mobile-app-header.site-app-header .app-nav.open .landing-start-btn{
    justify-content:center!important;
    text-align:center!important;
  }
}

@media (max-width:900px){
  body:not(.landing-active) #optionsPanel .advanced-settings-toggle,
  body:not(.landing-active) #optionsPanel .advanced-settings-panel{
    grid-column:1/-1!important;
  }

  body:not(.landing-active) #optionsPanel .advanced-settings-toggle{
    min-height:42px!important;
    margin-top:2px!important;
    padding:0 13px!important;
    border:1px solid rgba(255,255,255,.14)!important;
    border-radius:13px!important;
    background:rgba(255,255,255,.08)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
  }

  body:not(.landing-active) #optionsPanel .advanced-settings-toggle[aria-expanded="true"]{
    border-radius:13px 13px 0 0!important;
    border-bottom-color:rgba(255,255,255,.08)!important;
  }

  body:not(.landing-active) #optionsPanel .advanced-settings-panel{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:0!important;
    margin-top:-6px!important;
    padding:2px 12px 8px!important;
    border:1px solid rgba(255,255,255,.14)!important;
    border-top:0!important;
    border-radius:0 0 15px 15px!important;
    background:rgba(255,255,255,.06)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
    overflow:hidden!important;
  }

  body:not(.landing-active) #optionsPanel .advanced-settings-panel[hidden]{
    display:none!important;
  }

  body:not(.landing-active) #optionsPanel .advanced-settings-panel > [hidden]{
    display:none!important;
  }

  body:not(.landing-active) #optionsPanel .advanced-settings-panel > .toggle-row,
  body:not(.landing-active) #optionsPanel .advanced-settings-panel > .marker-choice-row{
    display:grid!important;
    grid-template-columns:minmax(84px,.55fr) minmax(0,1fr)!important;
    align-items:center!important;
    gap:10px!important;
    min-height:47px!important;
    padding:9px 0!important;
    border:0!important;
    border-top:1px solid rgba(255,255,255,.10)!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  body:not(.landing-active) #optionsPanel .advanced-settings-panel > .toggle-row:first-child,
  body:not(.landing-active) #optionsPanel .advanced-settings-panel > .marker-choice-row:first-child{
    border-top:0!important;
  }

  body:not(.landing-active) #optionsPanel .advanced-settings-panel .toggle-label{
    flex:0 0 auto!important;
    min-width:0!important;
    letter-spacing:.12em!important;
    line-height:1.15!important;
  }

  body:not(.landing-active) #optionsPanel .advanced-settings-panel .marker-choice,
  body:not(.landing-active) #optionsPanel .advanced-settings-panel .color-choice{
    width:100%!important;
    min-width:0!important;
  }

  body:not(.landing-active) #optionsPanel .advanced-settings-panel > .toggle-row[hidden],
  body:not(.landing-active) #optionsPanel .advanced-settings-panel > .marker-choice-row[hidden]{
    display:none!important;
  }

  body:not(.landing-active) .zoom-section .panel-help-popover,
  body:not(.landing-active) .guide-section .panel-help-popover,
  body:not(.landing-active) .search-section .panel-help-popover,
  body:not(.landing-active) .upload-section .panel-help-popover,
  body:not(.landing-active) .gpx-choice-section .panel-help-popover{
    padding:11px 12px!important;
    border:1px solid rgba(255,255,255,.24)!important;
    border-radius:10px!important;
    background:rgba(247,250,246,.92)!important;
    color:#21332f!important;
    font-family:var(--font-b)!important;
    font-size:12px!important;
    font-weight:600!important;
    letter-spacing:0!important;
    line-height:1.45!important;
    box-shadow:0 10px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.75)!important;
    backdrop-filter:blur(16px) saturate(1.05)!important;
    -webkit-backdrop-filter:blur(16px) saturate(1.05)!important;
  }

  body:not(.landing-active) .zoom-section .panel-info-btn,
  body:not(.landing-active) .guide-section .panel-info-btn,
  body:not(.landing-active) .search-section .panel-info-btn,
  body:not(.landing-active) .upload-section .panel-info-btn,
  body:not(.landing-active) .gpx-choice-section .panel-info-btn{
    min-width:56px!important;
    height:30px!important;
    padding:0 13px!important;
    border:1px solid rgba(47,111,115,.34)!important;
    border-radius:999px!important;
    background:var(--accent)!important;
    color:#fff!important;
    font-family:var(--font-b)!important;
    font-size:11px!important;
    font-weight:800!important;
    letter-spacing:.01em!important;
    box-shadow:0 8px 18px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.16)!important;
  }

  body:not(.landing-active) .zoom-section .panel-info-btn:hover,
  body:not(.landing-active) .guide-section .panel-info-btn:hover,
  body:not(.landing-active) .search-section .panel-info-btn:hover,
  body:not(.landing-active) .upload-section .panel-info-btn:hover,
  body:not(.landing-active) .gpx-choice-section .panel-info-btn:hover,
  body:not(.landing-active) .zoom-section .panel-info-btn[aria-expanded="true"],
  body:not(.landing-active) .guide-section .panel-info-btn[aria-expanded="true"],
  body:not(.landing-active) .search-section .panel-info-btn[aria-expanded="true"],
  body:not(.landing-active) .upload-section .panel-info-btn[aria-expanded="true"],
  body:not(.landing-active) .gpx-choice-section .panel-info-btn[aria-expanded="true"]{
    background:var(--accent2)!important;
    border-color:var(--accent2)!important;
    color:#fff!important;
  }

  body:not(.landing-active) .zoom-section .panel-info-btn:focus-visible,
  body:not(.landing-active) .guide-section .panel-info-btn:focus-visible,
  body:not(.landing-active) .search-section .panel-info-btn:focus-visible,
  body:not(.landing-active) .upload-section .panel-info-btn:focus-visible,
  body:not(.landing-active) .gpx-choice-section .panel-info-btn:focus-visible{
    outline:2px solid rgba(43,168,155,.72)!important;
    outline-offset:3px!important;
  }
}

/* Final cleanup: slider rows must not draw a second surface inside the glass panel. */
body:not(.landing-active) .zoom-camera-controls,
body:not(.landing-active) .camera-fine-tune,
body:not(.landing-active) #zoomFinalPanel .zoom-camera-controls,
body:not(.landing-active) #zoomStartPanel .zoom-camera-controls,
#zoomFinalPanel .zoom-camera-controls,
#zoomStartPanel .zoom-camera-controls{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  outline:0!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

body:not(.landing-active) .camera-row,
body:not(.landing-active) #zoomFinalPanel .camera-row,
body:not(.landing-active) #zoomStartPanel .camera-row,
#zoomFinalPanel .camera-row,
#zoomStartPanel .camera-row{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  outline:0!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  margin:0!important;
}

body:not(.landing-active) .camera-row::before,
body:not(.landing-active) .camera-row::after,
#zoomFinalPanel .camera-row::before,
#zoomFinalPanel .camera-row::after,
#zoomStartPanel .camera-row::before,
#zoomStartPanel .camera-row::after{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
}

body:not(.landing-active) .camera-row input[type="range"],
#zoomFinalPanel .camera-row input[type="range"],
#zoomStartPanel .camera-row input[type="range"]{
  -webkit-appearance:none!important;
  appearance:none!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
  padding:0!important;
}

body:not(.landing-active) .camera-row input[type="range"]::-webkit-slider-runnable-track,
#zoomFinalPanel .camera-row input[type="range"]::-webkit-slider-runnable-track,
#zoomStartPanel .camera-row input[type="range"]::-webkit-slider-runnable-track{
  height:3px!important;
  background:rgba(255,255,255,.34)!important;
  background-image:none!important;
  border:0!important;
  border-radius:999px!important;
  box-shadow:none!important;
}

body:not(.landing-active) .camera-row input[type="range"]::-moz-range-track,
#zoomFinalPanel .camera-row input[type="range"]::-moz-range-track,
#zoomStartPanel .camera-row input[type="range"]::-moz-range-track{
  height:3px!important;
  background:rgba(255,255,255,.34)!important;
  background-image:none!important;
  border:0!important;
  border-radius:999px!important;
  box-shadow:none!important;
}

/* Public landing palette polish.
   Use the brand system deliberately: teal for actions, ink for structure,
   paper/soft-teal for calm surfaces, and red only as a small route accent. */
body.landing-active .landing-page{
  background:var(--brand-paper);
  color:var(--brand-ink);
}
body.landing-active .landing-header{
  border-bottom-color:rgba(167,193,191,.34)!important;
  background:rgba(242,244,243,.94)!important;
}
body.landing-active .landing-nav a,
body.landing-active .landing-tool-link{
  color:var(--brand-ink)!important;
}
body.landing-active .landing-nav a:hover,
body.landing-active .landing-tool-link:hover{
  border-color:rgba(47,111,115,.28)!important;
  background:rgba(167,193,191,.18)!important;
  color:var(--brand-teal)!important;
}
body.landing-active .landing-tool-link.active,
body.landing-active .landing-tool-link[aria-current="page"]{
  border-color:rgba(47,111,115,.48)!important;
  background:rgba(167,193,191,.24)!important;
  color:var(--brand-ink)!important;
}
body.landing-active .landing-login{
  border-color:rgba(167,193,191,.52)!important;
  background:#fff!important;
}
body.landing-active .landing-start-btn,
body.landing-active .landing-primary,
body.landing-active .landing-preview-cta{
  border-color:var(--brand-teal)!important;
  background:var(--brand-teal)!important;
  color:#fff!important;
  box-shadow:0 12px 28px rgba(47,111,115,.20)!important;
}
body.landing-active .landing-nav .landing-start-btn,
.landing-header.public-nav .landing-nav .landing-start-btn{
  color:#fff!important;
}
body.landing-active .landing-start-btn:hover,
body.landing-active .landing-primary:hover,
body.landing-active .landing-preview-cta:hover{
  border-color:var(--public-teal-dark)!important;
  background:var(--public-teal-dark)!important;
  color:#fff!important;
  box-shadow:0 14px 30px rgba(47,111,115,.24)!important;
}
body.landing-active .landing-secondary{
  border-color:rgba(47,111,115,.34)!important;
  background:#fff!important;
  color:var(--brand-ink)!important;
}
body.landing-active .landing-secondary:hover{
  border-color:rgba(47,111,115,.54)!important;
  background:rgba(167,193,191,.16)!important;
}
body.landing-active .landing-hero{
  background:
    radial-gradient(circle at 12% 18%,rgba(167,193,191,.28),transparent 31%),
    linear-gradient(135deg,#fff 0%,var(--brand-paper) 58%,rgba(167,193,191,.22) 100%)!important;
}
body.landing-active .landing-kicker,
body.landing-active .section-eyebrow,
body.landing-active .creator-eyebrow,
body.landing-active .tool-tag,
body.landing-active .tool-card-cta{
  color:var(--brand-teal)!important;
}
body.landing-active .landing-kicker::before,
body.landing-active .landing-preview-label::before{
  background:var(--brand-teal)!important;
}
body.landing-active .landing-copy h1,
body.landing-active .section-header h2,
body.landing-active .creator-inner h2,
body.landing-active .tool-card h3,
body.landing-active .step h3,
body.landing-active .landing-faq-item summary{
  color:var(--brand-ink)!important;
}
body.landing-active .landing-copy h1 em{
  color:var(--brand-teal)!important;
}
body.landing-active .landing-subtitle,
body.landing-active .section-subtitle,
body.landing-active .tool-card p,
body.landing-active .landing-faq-item p,
body.landing-active .creator-bio,
body.landing-active .step p,
body.landing-active .landing-stats span{
  color:var(--public-muted)!important;
}
body.landing-active .landing-stats div,
body.landing-active .tool-card,
body.landing-active .landing-faq-item{
  border-color:rgba(167,193,191,.45)!important;
  background:rgba(255,255,255,.82)!important;
  box-shadow:0 12px 32px rgba(31,45,46,.07)!important;
}
body.landing-active .tool-card,
body.landing-active .landing-faq-item{
  border-radius:8px!important;
}
body.landing-active .section-how,
body.landing-active .section-creator{
  background:linear-gradient(180deg,var(--brand-paper),rgba(167,193,191,.14))!important;
}
body.landing-active .section-tools,
body.landing-active .section-faq{
  background:#fff!important;
}
body.landing-active .section-faq{
  border-top-color:rgba(167,193,191,.36)!important;
}
body.landing-active .steps::before{
  background:rgba(47,111,115,.28)!important;
}
body.landing-active .step-num{
  border-color:rgba(47,111,115,.28)!important;
  background:#fff!important;
  color:var(--brand-teal)!important;
  box-shadow:0 0 0 6px rgba(167,193,191,.16)!important;
}
body.landing-active .tool-card-visual{
  background:linear-gradient(135deg,var(--brand-paper) 0%,rgba(167,193,191,.58) 62%,var(--brand-teal) 100%)!important;
}
body.landing-active .tool-card-visual-zoom{
  background:linear-gradient(135deg,#fff 0%,var(--brand-paper) 46%,rgba(47,111,115,.72) 100%)!important;
}
body.landing-active .tool-tag.blue,
body.landing-active .tool-card-cta.blue{
  color:var(--brand-teal)!important;
}
body.landing-active .landing-faq-item summary::after{
  color:var(--brand-teal)!important;
}
body.landing-active .creator-photo{
  border-radius:8px!important;
  box-shadow:0 16px 34px rgba(31,45,46,.12)!important;
}
body.landing-active .landing-footer{
  background:var(--brand-ink)!important;
  border-top:1px solid rgba(167,193,191,.18)!important;
}

body:not(.landing-active) .has-collapse-toggle::before{
  display:none!important;
  content:none!important;
}

body:not(.landing-active) .zoom-section > .zoom-panel.has-collapse-toggle::before,
body:not(.landing-active) .guide-section > .guide-panel.has-collapse-toggle::before,
body:not(.landing-active) .guide-section > .camera-panel.has-collapse-toggle::before,
body:not(.landing-active) .guide-section > .options-panel.has-collapse-toggle::before,
body:not(.landing-active) .guide-section > .export-panel.has-collapse-toggle::before,
body:not(.landing-active) .search-section.has-collapse-toggle::before,
body:not(.landing-active) .upload-section.has-collapse-toggle::before,
body:not(.landing-active) .gpx-choice-section.has-collapse-toggle::before{
  display:none!important;
  content:none!important;
}

body:not(.landing-active) .panel-collapse-toggle{
  appearance:none;
  -webkit-appearance:none;
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:28px;
  margin:-2px 0 4px;
  padding:0;
  border:0;
  border-radius:12px;
  background:transparent;
  color:#fff;
  cursor:pointer;
  touch-action:manipulation;
}

body:not(.landing-active) .panel-collapse-toggle:focus-visible{
  outline:2px solid rgba(47,111,115,.95);
  outline-offset:2px;
}

body:not(.landing-active) .panel-collapse-handle{
  display:block;
  width:36px;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.36);
  box-shadow:0 1px 0 rgba(0,0,0,.18);
}

body:not(.landing-active) .panel-collapse-label{
  display:none;
  max-width:70%;
  overflow:hidden;
  color:#fff;
  font-family:"DM Mono",monospace;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body:not(.landing-active) .panel-collapsed{
  min-height:54px!important;
  max-height:54px!important;
  padding:8px 12px!important;
  overflow:hidden!important;
}

body:not(.landing-active) .zoom-section > .zoom-panel.panel-collapsed,
body:not(.landing-active) .guide-section > .guide-panel.panel-collapsed,
body:not(.landing-active) .guide-section > .camera-panel.panel-collapsed,
body:not(.landing-active) .guide-section > .options-panel.panel-collapsed,
body:not(.landing-active) .guide-section > .export-panel.panel-collapsed,
body:not(.landing-active) .search-section.panel-collapsed,
body:not(.landing-active) .upload-section.panel-collapsed,
body:not(.landing-active) .gpx-choice-section.panel-collapsed{
  min-height:54px!important;
  max-height:54px!important;
  padding:8px 12px!important;
}

body:not(.landing-active) .panel-collapsed > :not(.panel-collapse-toggle){
  display:none!important;
}

body:not(.landing-active) .panel-collapsed > .panel-collapse-toggle{
  flex-direction:row;
  justify-content:center;
  min-height:38px;
  height:38px;
  margin:0;
  gap:10px;
  background:transparent;
  flex:0 0 38px;
}

body:not(.landing-active) .panel-collapsed .panel-collapse-label{
  display:block;
  max-width:calc(100% - 48px);
}

body:not(.landing-active) .panel-collapsed .panel-collapse-handle{
  width:34px;
  background:rgba(255,255,255,.48);
}

@media (max-width:900px){
  body:not(.landing-active) .panel-collapsed{
    margin-bottom:10px!important;
  }

  body:not(.landing-active) .zoom-section > .zoom-panel.panel-collapsed,
  body:not(.landing-active) .guide-section > .guide-panel.panel-collapsed,
  body:not(.landing-active) .guide-section > .camera-panel.panel-collapsed,
  body:not(.landing-active) .guide-section > .options-panel.panel-collapsed,
  body:not(.landing-active) .guide-section > .export-panel.panel-collapsed,
  body:not(.landing-active) .search-section.panel-collapsed,
  body:not(.landing-active) .upload-section.panel-collapsed,
  body:not(.landing-active) .gpx-choice-section.panel-collapsed{
    margin-bottom:10px!important;
    padding:8px 12px!important;
  }

body:not(.landing-active) .panel-collapsed > .panel-collapse-toggle{
    min-height:38px;
    height:38px;
  }
}

body:not(.landing-active) [data-weather].locked::after{
  content:"🔒 PRO"!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin-left:7px!important;
  padding:3px 6px!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.15)!important;
  color:#fff!important;
  font:900 8px/1 var(--font-b)!important;
  letter-spacing:.06em!important;
  vertical-align:middle!important;
}

body:not(.landing-active) [data-weather].locked{
  opacity:.72!important;
}

body:not(.landing-active) [data-route-overlay].locked::after{
  content:"🔒 PRO"!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin-left:7px!important;
  padding:3px 6px!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.15)!important;
  color:#fff!important;
  font:900 8px/1 var(--font-b)!important;
  letter-spacing:.06em!important;
  vertical-align:middle!important;
}

body:not(.landing-active) [data-route-overlay].locked{
  opacity:.72!important;
  cursor:not-allowed!important;
}

body:not(.landing-active) .format-choice-row{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:7px!important;
}

body:not(.landing-active) .format-choice-row .toggle-label{
  flex:0 0 58px!important;
  min-width:0!important;
  line-height:1.05!important;
}

body:not(.landing-active) .format-choice-row .marker-choice{
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

body:not(.landing-active) .format-choice-row .marker-choice-btn{
  min-width:0!important;
  white-space:nowrap!important;
}

@media (max-width:360px){
  body:not(.landing-active) .format-choice-row .toggle-label{
    flex-basis:50px!important;
  }

  body:not(.landing-active) .format-choice-row .marker-choice-btn{
    padding-left:7px!important;
    padding-right:7px!important;
  }
}