html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: transparent;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

svg {
  display: block;
  width: 100%;
  height: 100%;
  font-family: "Segoe UI", Arial, sans-serif;
}

.hex {
  fill: none;
  stroke: #8fc9ff;
  stroke-width: 7;
  stroke-linejoin: miter;
  stroke-linecap: square;
  stroke-dasharray: none;
  shape-rendering: geometricPrecision;
  filter: drop-shadow(0 0 3px rgba(143, 201, 255, 0.85));
}

.axis {
  stroke: #48d7e8;
  stroke-width: 3;
  marker-end: url(#axisArrow);
  filter: drop-shadow(0 0 3px rgba(72, 215, 232, 0.9));
}

.coordinate-axis {
  stroke-dasharray: 5 5;
}

.dashed {
  stroke-dasharray: 6 6;
}

.active-vector {
  stroke: #5aa9ff;
  stroke-width: 4;
  marker-end: url(#vectorArrow);
  opacity: 0.88;
  filter: drop-shadow(0 0 3px rgba(90, 169, 255, 0.75));
  transition: opacity 0.25s ease, filter 0.25s ease, stroke 0.25s ease;
}

.active-vector.is-adjacent {
  stroke: #8bc5ff;
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(139, 197, 255, 1));
}

.vref {
  stroke: #ffb020;
  stroke-width: 5;
  marker-end: url(#referenceArrow);
  filter: drop-shadow(0 0 6px rgba(255, 176, 32, 1));
}

.projection {
  stroke: #8fc4d6;
  stroke-width: 1.8;
  stroke-dasharray: 5 5;
  opacity: 0.9;
  filter: drop-shadow(0 0 2px rgba(143, 196, 214, 0.8));
}

.vector-tip-pulse {
  fill: none;
  stroke: #ffb020;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: tipPulse 1.4s ease-out infinite;
}

.vector-tip {
  fill: #fff4cf;
  stroke: #ffb020;
  stroke-width: 2;
  filter: drop-shadow(0 0 4px rgba(255, 176, 32, 0.9));
}

.label {
  font-size: 16px;
  fill: #d9efff;
  font-weight: 600;
}

.sector {
  font-size: 15px;
  font-weight: 700;
  fill: #91a8bd;
  text-anchor: middle;
}

.sector-fill {
  fill: #1d4f7a;
  opacity: 0.06;
  transition: fill 0.25s ease, opacity 0.25s ease;
}

.sector-fill.is-active {
  fill: #ffb020;
  opacity: 0.16;
}

.guide-ring {
  fill: none;
  stroke: #75a7c9;
  stroke-width: 2;
  stroke-dasharray: 3 7;
  opacity: 0.72;
  filter: drop-shadow(0 0 2px rgba(117, 167, 201, 0.7));
}

.origin-ring {
  fill: #0f2739;
  stroke: #8edfed;
  stroke-width: 2.5;
}

.origin {
  fill: #ffffff;
}

#axisArrow path { fill: #48d7e8; }
#vectorArrow path { fill: #5aa9ff; }
#referenceArrow path { fill: #ffb020; }

.angle-badge rect {
  fill: rgba(8, 30, 48, 0.88);
  stroke: rgba(255, 176, 32, 0.7);
  stroke-width: 1;
}

.angle-badge text {
  fill: #ffd27a;
  font-size: 13px;
  font-weight: 700;
}

@keyframes tipPulse {
  from { opacity: 0.9; transform: scale(0.65); }
  to { opacity: 0; transform: scale(1.7); }
}

@media (prefers-reduced-motion: reduce) {
  .vector-tip-pulse {
    animation: none;
    opacity: 0;
  }
}