/* Field Notes blog animation figures (see fieldnotes-anim.js) */
.fn-anim {
  position: relative;
  margin: 32px 0;
  padding: 20px 20px 14px;
  background: linear-gradient(180deg, var(--surface-2, #151821), var(--surface, #101218));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-xl, 18px);
  box-shadow: var(--shadow, 0 18px 44px rgba(0, 0, 0, 0.28));
}
.fn-anim .fn-svg { display: block; width: 100%; height: auto; font-family: inherit; overflow: visible; }
.fn-anim figcaption { margin-top: 10px; font-size: 0.92rem; line-height: 1.45; color: var(--text-soft, rgba(245, 247, 251, 0.7)); }
.fn-anim .fn-src { display: block; margin-top: 4px; font-size: 0.8rem; color: var(--text-faint, rgba(245, 247, 251, 0.46)); }
.fn-anim .fn-replay {
  position: absolute; top: 12px; right: 12px; padding: 4px 10px; font: inherit; font-size: 0.78rem; font-weight: 600;
  color: var(--text-soft, rgba(245, 247, 251, 0.7)); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 999px; cursor: pointer;
}
.fn-anim .fn-replay:hover, .fn-anim .fn-replay:focus-visible { color: var(--text, #f5f7fb); border-color: var(--border-strong, rgba(255, 57, 81, 0.28)); }
@media (max-width: 600px) { .fn-anim { padding: 14px 10px 10px; margin: 24px -4px; } }