:root {
  --accent: #127c73;
  --accent-rgb: 18, 124, 115;
}

.drone-scene, .system-component {
  transform-box: view-box;
  transform-origin: 0 0;
}
.system-component { transform-box: fill-box; transform-origin: center; }
.model[data-model="drone"].has-system {
  width: min(94vw, 860px, calc((100svh - 112px) * 8 / 9));
  aspect-ratio: 8 / 9;
}
.overview-label {
  fill: var(--ink);
  stroke: none;
  text-anchor: middle;
  font-size: 20px;
  font-weight: 500;
  user-select: none;
}
.overview-guide {
  fill: none;
  stroke: #a4b4ae;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.part:hover .overview-label, .part.active .overview-label { fill: var(--accent); }
.system-back {
  position: fixed;
  z-index: 10;
  top: max(18px, env(safe-area-inset-top));
  left: 148px;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: #fffffc;
  font-size: 14px;
  cursor: pointer;
}
.system-back:hover { background: #edf4f0; }
.system-arrow {
  fill: none;
  stroke: #88b1aa;
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  transition: stroke 180ms ease;
}
.system-arrow.is-selected { stroke: var(--accent); stroke-width: 2.5; }
.system-origin .part-surface { fill: #eaf3f0; stroke: var(--accent); stroke-width: 2; }
.system-origin .part-line { stroke: var(--accent); stroke-width: 2; }
.system-title, .system-label, .system-caption {
  fill: var(--ink);
  stroke: none;
  text-anchor: middle;
  font-size: 25px;
  font-weight: 600;
  pointer-events: none;
  user-select: none;
}
.system-title { fill: var(--accent); font-size: 27px; }
.system-caption { fill: var(--muted); font-size: 17px; font-weight: 400; }
.system-child .part-surface { fill: #fcfdfb; stroke-width: 2.4; }
.system-child .part-line { stroke-width: 2; }
.system-child .detail-line { stroke-width: 1.2; }
.system-child:hover .system-label, .system-child.active .system-label { fill: var(--accent); }
.system-child .winding { fill: #e4efeb; }
.system-compact .system-title { font-size: 34px; }
.system-compact .system-label { font-size: 30px; }
.system-compact .system-caption { font-size: 22px; }

@media (max-width: 720px) {
  .system-back { top: max(12px, env(safe-area-inset-top)); left: 136px; }
}