/* Annotation geometry uses normalized coordinates in the source image space. */
.how-to-image-frame { position: relative; width: 100%; overflow: hidden; border-radius: .8rem; }
.how-to-image-frame.is-screenshot { max-width: 320px; margin-inline: auto; outline: 1px solid var(--ht-border); }
.how-to-annotation-overlay { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.how-to-annotation { color: #e35b06; }
.how-to-annotation--orange { color: #e35b06; }
.how-to-annotation--blue { color: #1762e4; }
.how-to-annotation--green { color: #087f57; }
.how-to-annotation rect, .how-to-annotation ellipse { fill: currentColor; fill-opacity: .06; stroke: currentColor; stroke-width: 2.5px; }
.how-to-annotation line, .how-to-annotation polyline { fill: none; stroke: currentColor; stroke-width: 2.5px; stroke-linecap: round; stroke-linejoin: round; }
.how-to-annotation--pulse { animation: how-to-annotation-pulse 1.6s ease-in-out 3; }
.how-to-annotation--draw line { stroke-dasharray: 1; animation: how-to-annotation-draw .9s ease-out both; }
.how-to-annotation--draw polyline { animation: how-to-annotation-head .9s ease-out both; }
.how-to-annotation-label { position: absolute; transform: translate(-50%, -50%); max-width: 90%; padding: .2rem .4rem; border: 1px solid currentColor; border-radius: .35rem; background: #fff; font-size: .7rem; font-weight: 800; line-height: 1.3; text-align: center; pointer-events: none; }
@keyframes how-to-annotation-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes how-to-annotation-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes how-to-annotation-head { 0%, 75% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .how-to-annotation, .how-to-annotation line, .how-to-annotation polyline { animation: none; opacity: 1; stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* Effect engine: anchor placement and ring motion use separate elements so
   rotation never moves the center or stretches the circle on tall images. */
.how-to-aura { position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.how-to-aura-halo, .how-to-aura-ring { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.how-to-aura-halo { border: 1px solid currentColor; opacity: .55; box-shadow: 0 0 8px 2px currentColor, inset 0 0 6px 1px currentColor; }
.how-to-aura-ring { background: conic-gradient(transparent 0deg, currentColor 90deg, currentColor 130deg, transparent 180deg, currentColor 270deg, currentColor 310deg, transparent 360deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); }
.how-to-aura--orbit .how-to-aura-ring { animation: how-to-aura-orbit var(--how-to-effect-duration, 3s) linear infinite; }
@keyframes how-to-aura-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .how-to-aura--orbit .how-to-aura-ring { animation: none; }
}

/* Reusable perimeter and direction effects retain a quiet base outline while
   a brighter segment travels around the target or along the indicated line. */
.how-to-effect--scan > :not(.how-to-effect-tracer), .how-to-effect--confirm > :not(.how-to-effect-tracer), .how-to-effect--flow > :not(.how-to-effect-tracer) { stroke-width: 1.5px; stroke-opacity: .55; fill-opacity: .025; }
.how-to-annotation .how-to-effect-tracer { fill: none; stroke-width: .006; stroke-linecap: round; stroke-dasharray: .18 .82; filter: drop-shadow(0 0 2px currentColor); animation: how-to-effect-travel var(--how-to-effect-duration, 3s) linear infinite; }
.how-to-effect--confirm .how-to-effect-tracer { stroke-dasharray: .28 .72; animation-direction: reverse; }
.how-to-effect--flow .how-to-effect-tracer { stroke-dasharray: .25 .75; }
.how-to-effect--flow polyline { stroke-opacity: 1; filter: drop-shadow(0 0 2px currentColor); }
@keyframes how-to-effect-travel { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1; } }
@media (prefers-reduced-motion: reduce) {
  .how-to-annotation .how-to-effect-tracer { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; filter: none; }
}

/* Shape auras use the same light arcs as the circular aura. Rotate the light
   field, not the rectangle/ellipse itself, to keep targets aligned. */
@property --how-to-aura-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.how-to-shaped-aura { aspect-ratio: auto; }
.how-to-shaped-aura .how-to-aura-halo { border-radius: inherit; border: 0; opacity: .4; box-shadow: 0 0 7px 2px currentColor, inset 0 0 5px 1px currentColor; filter: blur(.6px); }
.how-to-shaped-aura .how-to-aura-ring { border-radius: inherit; padding: 2px; background: conic-gradient(from var(--how-to-aura-angle), transparent 0deg, currentColor 90deg, currentColor 130deg, transparent 180deg, currentColor 270deg, currentColor 310deg, transparent 360deg); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; animation: how-to-shaped-aura-orbit var(--how-to-effect-duration, 3s) linear infinite; opacity: .85; }
@keyframes how-to-shaped-aura-orbit { from { --how-to-aura-angle: 0deg; } to { --how-to-aura-angle: 360deg; } }
.how-to-effect--flow > :not(.how-to-effect-tracer) { stroke-width: 1px; stroke-opacity: .25; }
.how-to-effect--flow .how-to-effect-tracer { stroke-width: .0035; filter: drop-shadow(0 0 3px currentColor); }
.how-to-effect--flow polyline { stroke-opacity: .6; filter: blur(.3px) drop-shadow(0 0 3px currentColor); }
@media (prefers-reduced-motion: reduce) {
  .how-to-shaped-aura .how-to-aura-ring { animation: none; }
}