.orloj-dial-annotation {
  pointer-events: none;
}

.orloj-dial-annotation__target {
  fill: rgba(255, 237, 174, 0.96);
  stroke: rgba(31, 20, 9, 0.96);
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}

.orloj-dial-annotation__line {
  fill: none;
  stroke: rgba(255, 231, 151, 0.92);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.72));
}

.orloj-dial-annotation__box {
  fill: rgba(3, 13, 20, 0.91);
  stroke: rgba(238, 193, 95, 0.8);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 9px 12px rgba(0, 0, 0, 0.72));
}

.orloj-dial-annotation__title,
.orloj-dial-annotation__detail {
  paint-order: stroke;
  stroke: rgba(1, 7, 11, 0.96);
  stroke-linejoin: round;
  font-family: Inter, ui-sans-serif, sans-serif;
}

.orloj-dial-annotation__title {
  fill: #fff0b8;
  stroke-width: 4;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.orloj-dial-annotation__detail {
  fill: rgba(238, 225, 191, 0.82);
  stroke-width: 3;
  font-size: 12px;
  font-weight: 600;
}

.orloj-page-backdrop[data-orloj-annotations="visible"] .orloj-mechanism-wash {
  opacity: 0.22;
}

.orloj-annotation-toggle {
  display: inline-flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.7rem;
  border: 1px solid rgba(221, 177, 87, 0.34);
  border-radius: 0.8rem;
  background: rgba(15, 31, 42, 0.72);
  color: rgba(244, 231, 196, 0.86);
  cursor: pointer;
  font-family: Inter, ui-sans-serif, sans-serif;
  font-size: 0.74rem;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease;
}

.orloj-annotation-toggle:hover,
.orloj-annotation-toggle:focus-visible {
  border-color: rgba(255, 219, 128, 0.76);
  color: #fff1bd;
  outline: none;
}

.orloj-annotation-toggle.is-active {
  border-color: rgba(246, 202, 102, 0.76);
  background: rgba(91, 66, 29, 0.78);
  color: #fff0b5;
}

@media (max-width: 760px) {
  .orloj-dial-annotation__title {
    font-size: 18px;
  }

  .orloj-dial-annotation__detail {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orloj-dial-annotation,
  .orloj-annotation-toggle {
    transition: none !important;
  }
}