.maneuver-demo{margin:30px 0;border:1px solid #45484d;background:#111316;overflow:hidden}.demo-heading{display:flex;justify-content:space-between;gap:20px;padding:20px 22px;border-bottom:1px solid #34373b}.demo-heading span{display:block;color:var(--green);font-size:8px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700}.demo-heading h2{margin:5px 0 4px;font:700 28px "Barlow Condensed";text-transform:uppercase}.demo-heading p{max-width:620px;margin:0;color:var(--muted);font-size:10px;line-height:1.55}.demo-controls{display:flex;gap:6px;align-items:flex-start;flex-wrap:wrap;justify-content:flex-end}.demo-controls button,.demo-options button{border:1px solid #45484d;background:#1b1d21;color:#d8d8d6;min-height:34px;padding:0 12px;font-size:8px;text-transform:uppercase;letter-spacing:.7px;cursor:pointer;transition:background 160ms ease,color 160ms ease,border-color 160ms ease,transform 120ms ease-out}.demo-controls button:active,.demo-options button:active{transform:scale(.97)}.demo-options{display:flex;gap:5px;padding:10px 12px;overflow-x:auto;border-bottom:1px solid #34373b;scrollbar-width:none}.demo-options::-webkit-scrollbar{display:none}.demo-options button{white-space:nowrap}.demo-options button.active{background:var(--green);border-color:var(--green);color:#171717}.demo-stage{position:relative;background:radial-gradient(circle at 50% 48%,#24272b,#111316 68%);isolation:isolate}.demo-stage::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.3;background-image:linear-gradient(#41444a 1px,transparent 1px),linear-gradient(90deg,#41444a 1px,transparent 1px);background-size:30px 30px;mask-image:radial-gradient(circle,#000 15%,transparent 75%)}.demo-svg{display:block;width:100%;height:auto;max-height:390px}.demo-path{fill:none;stroke:#ffb20d;stroke-width:2.5;stroke-dasharray:7 7;vector-effect:non-scaling-stroke}.drift-path{fill:none;stroke:#f15146;stroke-width:2;stroke-dasharray:5 8;opacity:.65;vector-effect:non-scaling-stroke}.corner-markers circle{fill:#f15146;stroke:#fff;stroke-width:2}.stage-label,.track-label,.drift-label{fill:#9da0a3;font-family:Montserrat,sans-serif;font-weight:700;font-size:9px;text-anchor:middle;letter-spacing:1px}.track-label{fill:#ffbf35}.drift-label{fill:#f2756c}.direction-arrow{fill:none;stroke:#ffb20d;stroke-width:2}.wind-field path{fill:none;stroke:#8cb4c7;stroke-width:3;marker-end:url(#arrowHead);animation:windPulse 1.3s linear infinite}.wind-field path:nth-child(2){animation-delay:-.45s}.wind-field path:nth-child(3){animation-delay:-.9s}@keyframes windPulse{0%,100%{opacity:.25;transform:translateY(-5px)}50%{opacity:1;transform:translateY(5px)}}.demo-drone-art{stroke:#f7f7f5;stroke-width:3;fill:none;vector-effect:non-scaling-stroke}.demo-drone-art circle{fill:#17191c}.demo-drone-art .drone-body{fill:#f7f7f5;stroke:#17191c}.demo-drone-art .drone-nose{fill:#ffb20d;stroke:#ffb20d}.demo-legend{position:absolute;left:14px;right:14px;bottom:10px;display:flex;justify-content:space-between;pointer-events:none;color:#898c90;font-size:8px;text-transform:uppercase;letter-spacing:.6px}.demo-legend span{display:flex;align-items:center;gap:7px}.demo-legend i{display:block;width:13px;height:3px}.nose-key{background:#ffb20d}.path-key{border-top:2px dashed #ffb20d}.demo-legend .path-key{height:0}.demo-svg:has(#demoMotion){overflow:visible}
@media(max-width:720px){.maneuver-demo{margin:22px -4px}.demo-heading{display:block;padding:16px}.demo-heading h2{font-size:25px}.demo-heading p{font-size:10px}.demo-controls{justify-content:flex-start;margin-top:14px}.demo-controls button{min-height:40px;padding:0 11px}.demo-options{padding:8px}.demo-options button{min-height:40px}.demo-svg{min-height:240px}.demo-legend{font-size:7px;bottom:7px}.stage-label,.track-label,.drift-label{font-size:8px}}
@media(prefers-reduced-motion:reduce){.wind-field path{animation:none}.demo-svg{scroll-behavior:auto}}