.drone-design-intro > p { margin: var(--space-24) 0 0; font-size: var(--project-type-body); line-height: var(--project-leading-body); }
.drone-design-heading { margin-top: var(--space-32); max-width: var(--project-reading-width); }
.drone-design-heading h3 { margin: 0; color: var(--ink); font-size: var(--project-type-emphasis); font-weight: var(--project-weight-heading); line-height: var(--leading-heading); }
.drone-design-heading p { margin: var(--space-12) 0 0; font-size: var(--project-type-body); line-height: var(--project-leading-body); }
.drone-mode-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-16) var(--space-32); margin-block: var(--space-24); }
.drone-mode-tabs { display: flex; gap: var(--space-32); border-bottom: var(--border-subtle); }
.drone-mode-tabs button { position: relative; min-height: var(--control-size); padding: var(--space-12) 0; border: 0; background: none; color: var(--muted); font-size: var(--project-type-small); letter-spacing: .08em; transition: color var(--duration-feedback) var(--ease-feedback); }
.drone-mode-tabs button::after { content: ''; position: absolute; inset: auto 0 -1px; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-feedback) var(--ease-feedback); }
.drone-mode-tabs button[aria-selected="true"] { color: var(--ink); }
.drone-mode-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.drone-mode-tabs button:hover, .drone-mode-tabs button[data-pending] { color: var(--color-accent); }
.drone-mode-toolbar > p { min-height: 1.65em; margin: 0; }
.drone-mode-panel { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: var(--space-32); align-items: center; }
.drone-mode-figure, .drone-structure-figure { margin: 0; min-width: 0; }
.drone-mode-visual { position: relative; aspect-ratio: 16 / 10; background: #000; }
.drone-mode-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 400ms var(--ease-feedback); }
.drone-mode-visual img[data-active] { opacity: 1; }
.drone-mode-copies { display: grid; min-width: 0; }
.drone-mode-copy { grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 400ms var(--ease-feedback), visibility 0s 400ms; }
.drone-mode-copy[data-active] { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.drone-mode-copy h4 { margin: 0; color: var(--ink); font-size: var(--project-type-module); font-weight: var(--project-weight-heading); line-height: var(--leading-heading); }
.drone-mode-copy p { max-width: var(--project-reading-width); margin: var(--space-8) 0 0; font-size: var(--project-type-body); line-height: var(--project-leading-body); }
.drone-mode-copy .drone-mode-label { margin-top: var(--space-16); color: var(--muted); font-size: var(--project-type-small); }
.drone-structure { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-48); margin-top: var(--space-32); align-items: start; }
.drone-drawing { position: relative; background: #000; }
.drone-drawing > img { display: block; width: 100%; height: auto; }
.drone-parts { display: grid; gap: var(--space-16); margin: 0; padding: 0; list-style: none; }
.drone-part { display: grid; gap: var(--space-8); width: 100%; padding: var(--space-12) 0; border: 0; border-top: var(--border-subtle); background: none; text-align: left; transition: color var(--duration-feedback) var(--ease-feedback); }
.drone-part__title { color: var(--ink); font-size: var(--project-type-module); font-weight: var(--project-weight-heading); line-height: var(--leading-heading); }
.drone-part__body { color: var(--color-body); font-size: var(--project-type-body); line-height: var(--project-leading-body); }
.drone-part[data-highlighted] .drone-part__title { color: var(--color-accent); }
.drone-part-point { position: absolute; z-index: 2; left: var(--part-x); top: var(--part-y); display: grid; place-items: center; transform: translate(-50%, -50%); width: var(--control-size); height: var(--control-size); border: 0; padding: 0; background: none; color: var(--color-on-media); font-size: var(--project-type-module); }
.drone-part-point::before { content: ''; position: absolute; z-index: -1; inset: 8px; border: 1px solid var(--color-on-media); border-radius: 50%; background: rgb(32 50 65 / .88); transition: transform var(--duration-feedback) var(--ease-feedback), background var(--duration-feedback) var(--ease-feedback); }
.drone-part-point[data-highlighted]::before { background: var(--color-accent); transform: scale(1.18); }
.drone-part-point:focus-visible { outline-color: var(--color-focus-on-media); outline-offset: -2px; border-radius: 50%; }
.drone-leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.drone-leaders path { fill: none; stroke: #b5cddd; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .45; stroke-dasharray: 1; stroke-dashoffset: 0; transition: opacity var(--duration-feedback) var(--ease-feedback); }
.research-reveals .drone-structure-figure:not([data-revealed]) .drone-leaders path { stroke-dashoffset: 1; }
.research-reveals .drone-structure-figure[data-revealed] .drone-leaders path { transition: stroke-dashoffset 600ms var(--ease-feedback) var(--line-delay), opacity var(--duration-feedback) var(--ease-feedback); }
.drone-leaders path[data-highlighted] { opacity: 1; stroke: #fff; stroke-width: 2; }
.drone-leaders ellipse { fill: rgb(181 205 221 / .08); stroke: #c5dbe9; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity var(--duration-feedback) var(--ease-feedback); }
.drone-leaders ellipse[data-highlighted] { opacity: 1; }
.drone-design-note { margin: var(--space-16) 0 0; color: var(--muted); font-size: var(--project-type-small); line-height: var(--leading-small); }
.remote-viewer.drone-design-viewer { width: min(1050px, calc(100vw - var(--space-48))); }
.drone-design-viewer .remote-viewer__close { border: 0; background: none; color: var(--ink); }
.drone-design-viewer img { background: #000; max-height: calc(100dvh - 260px); }
@media (max-width: 1100px) {
  .drone-mode-panel { grid-template-columns: minmax(0, 1fr); }
  .drone-mode-visual { aspect-ratio: 16 / 9; }
  .drone-structure { gap: var(--space-32); grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .drone-mode-toolbar { gap: var(--space-8); }
  .drone-mode-toolbar > p { flex-basis: 100%; }
  .drone-mode-tabs { gap: var(--space-24); }
  .drone-mode-panel, .drone-structure { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
  .drone-design-heading { margin-top: var(--space-32); }
  .drone-parts { gap: var(--space-8); }
  .remote-viewer.drone-design-viewer { width: calc(100vw - var(--space-24)); }
}
@media (prefers-reduced-motion: reduce) {
  .drone-design *, .drone-design *::before { transition: none !important; }
  .research-reveals .drone-leaders path { stroke-dashoffset: 0 !important; }
}