/* Original chart palette; lighter fill alpha requested by Sean, 2026-09-12. */
#drone-chart .chart-stage svg{display:block;width:100%;overflow:hidden;
  /* Full-bleed width means the viewport, not a fixed column, drives the
     size now. Height holds flat at 648px (its height at the old 1152px
     cap) as long as that fits within a 15%-of-source crop budget: below
     that it eases down to the true zero-crop line (56.28vw, native
     1672:941 = 941/1672); above it eases up along the 15%-crop line
     (47.84vw = 56.28vw*0.85 - LESS height than the zero-crop line, since
     less height shows less of the source, i.e. more crop) so the crop
     this svg's slice preserveAspectRatio applies never exceeds 15% of
     the source photo, holding height constant everywhere it can. */
  height:min(max(648px,47.84vw),56.28vw)}
#drone-chart .ct{fill:none;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:drone-draw 4s cubic-bezier(.32,.72,.35,1) forwards;filter:drop-shadow(0 1px 4px rgba(0,0,0,.9))}
@keyframes drone-draw{to{stroke-dashoffset:0}}
#drone-chart .fillband{opacity:0;animation:drone-fade 1.8s 2s forwards}
@keyframes drone-fade{to{opacity:1}}
#drone-chart .sound{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:26px;fill:#d7ebee;opacity:0;animation:drone-fade 1s forwards}
#drone-chart .depthlab{font-size:24px;font-weight:600;fill:#d7ebee}
#drone-chart text{paint-order:stroke fill;stroke:#05080B;stroke-width:7px;stroke-linejoin:round}
#drone-chart[data-mode="photo"] .ct,#drone-chart[data-mode="photo"] .fillband,#drone-chart[data-mode="photo"] .sound{visibility:hidden}
#drone-chart[data-mode="trace"] .fillband,#drone-chart[data-mode="trace"] .sound{visibility:hidden}
@media(prefers-reduced-motion:reduce){#drone-chart .ct,#drone-chart .fillband,#drone-chart .sound{animation:none!important}#drone-chart .ct{stroke-dashoffset:0}#drone-chart .fillband,#drone-chart .sound{opacity:1}}

/* Owner-requested site typography and volume overlay. */
#drone-chart .sound{font-family:var(--pt-font)}
#drone-chart text{stroke:none;paint-order:normal}
#drone-chart .depthlab{font-size:32px}
#drone-chart .volume-value{font-size:58px;font-weight:600;fill:#f6fafc}
#drone-chart .volume-context{font-size:30px;fill:#f6fafc}

/* +2 size increments on mobile, to match the bumped h1. Values are svg
   user units in the 1672x941 viewBox, which already scales responsively
   with the hero's own width via preserveAspectRatio=slice, so this is a
   deliberate extra bump on top of that, not a fixed-px override. */
@media(max-width:760px){
  #drone-chart .volume-value{font-size:78px}
  #drone-chart .volume-context{font-size:42px}
}