.tool-card {
    cursor: pointer;
    transition: box-shadow 0.15s ease-out, transform 0.15s ease-out;
}
.tool-card:focus {
    outline: none;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.9),
        0 0 0 5px #3b82f6,
        0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border-radius: inherit;
}
.tool-card:focus,
.tool-card:hover {
    transform: translateY(-2px);
}
@media (prefers-color-scheme: dark) {
    .tool-card:focus {
        box-shadow:
            0 0 0 2px rgba(0, 0, 0, 0.9),
            0 0 0 5px #60a5fa,
            0 25px 50px -12px rgba(0, 0, 0, 0.5);
    }
}
:root {
    --focus-ring-color: #3b82f6;
    --focus-ring-color-bright: #60a5fa;
    --focus-ring-color-light: #93c5fd;
    --focus-ring-width: 3px;
    --focus-ring-offset: 2px;
    --focus-transition: 0.2s ease-out;
}
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus,
[role="button"]:focus {
    outline: none;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.1),
        0 0 0 4px var(--focus-ring-color),
        0 0 8px 2px var(--focus-ring-color-bright),
        0 0 20px 5px rgba(59, 130, 246, 0.6),
        0 0 40px 10px rgba(59, 130, 246, 0.4),
        0 0 60px 15px rgba(59, 130, 246, 0.2),
        0 0 80px 20px rgba(59, 130, 246, 0.1);
    transition: box-shadow var(--focus-transition);
}
@media (prefers-color-scheme: dark) {
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    [tabindex]:focus,
    [role="button"]:focus {
        box-shadow:
            0 0 0 2px rgba(0, 0, 0, 0.2),
            0 0 0 4px var(--focus-ring-color-bright),
            0 0 10px 3px var(--focus-ring-color-light),
            0 0 25px 8px rgba(96, 165, 250, 0.6),
            0 0 50px 15px rgba(96, 165, 250, 0.4),
            0 0 80px 25px rgba(96, 165, 250, 0.2),
            0 0 100px 35px rgba(96, 165, 250, 0.1);
    }
}
button:focus-visible,
.rounded-full:focus-visible,
[class*="rounded"]:focus-visible {
    border-radius: inherit;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    border-color: var(--focus-ring-color) !important;
    box-shadow:
        0 0 0 var(--focus-ring-offset) rgba(255, 255, 255, 0.9),
        0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color),
        inset 0 0 0 1px var(--focus-ring-color);
}
.focus-card:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 var(--focus-ring-offset) rgba(255, 255, 255, 0.9),
        0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color),
        0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
@keyframes focus-pulse {
    0%,
    100% {
        box-shadow:
            0 0 0 var(--focus-ring-offset) rgba(255, 255, 255, 0.9),
            0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
    }
    50% {
        box-shadow:
            0 0 0 var(--focus-ring-offset) rgba(255, 255, 255, 0.9),
            0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width) + 2px) var(--focus-ring-color),
            0 0 12px 4px rgba(59, 130, 246, 0.3);
    }
}
.focus-animated:focus-visible {
    animation: focus-pulse 1.5s ease-in-out infinite;
}
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1.5rem;
    background: var(--focus-ring-color);
    color: white;
    font-weight: 600;
    border-radius: 0.5rem;
    z-index: 9999;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 1rem;
}