@layer htmxo {
@keyframes htmx-pulse {
    0%, 100% { outline-color: color-mix(in srgb, var(--htmxo-accent) 30%, transparent); }
    50% { outline-color: var(--htmxo-accent); }
}
.htmx-request-active {
    outline: 2px solid var(--htmxo-accent);
    outline-offset: -2px;
    animation: htmx-pulse 1s ease-in-out infinite;
}
.htmx-request-success {
    outline: 2px solid var(--htmxo-success);
    outline-offset: -2px;
    animation: htmx-fade-success 1s ease-out forwards;
}
.htmx-request-error {
    outline: 2px solid var(--htmxo-error);
    outline-offset: -2px;
    animation: htmx-fade-error 2s ease-out forwards;
}
@keyframes htmx-fade-success {
    0% { outline-color: var(--htmxo-success); }
    100% { outline-color: transparent; }
}
@keyframes htmx-fade-error {
    0% { outline-color: var(--htmxo-error); }
    100% { outline-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .htmx-request-active,
    .htmx-request-success,
    .htmx-request-error {
        animation: none;
    }
}
}