.learn-skip-link {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: 10000;
padding: 0.75rem 1.25rem;
background: #1e293b;
color: #fff;
text-decoration: none;
border-radius: 8px;
font-weight: 600;
}
.learn-skip-link:focus,
.learn-skip-link:focus-visible {
position: fixed;
left: 1rem;
top: 1rem;
width: auto;
height: auto;
overflow: visible;
outline: 3px solid #818cf8;
outline-offset: 2px;
}
#main:focus,
#learn-main:focus {
outline: none;
}
#learn-main a:focus-visible,
#learn-main button:focus-visible,
#learn-main input:focus-visible,
#learn-main select:focus-visible,
#learn-main textarea:focus-visible,
#learn-main [tabindex]:focus-visible,
.learn-fc-scene:focus-visible,
.learn-postit-scene:focus-visible,
.learn-path-dot:focus-visible {
outline: 2px solid var(--learn-accent, #667eea);
outline-offset: 2px;
}
.learn-path-item:focus-visible {
outline: 3px solid var(--learn-accent, #667eea);
outline-offset: 2px;
}
.learn-path-item.locked {
cursor: not-allowed;
}
.learn-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
#learnFlashcardApp .learn-fc-scene.is-discarding .learn-fc-motion,
#learnFlashcardApp .learn-fc-scene.is-entering .learn-fc-motion {
animation-duration: 0.55s !important;
animation-iteration-count: 1 !important;
}
#learnFlashcardApp .learn-fc-inner {
transition: transform 0.6s ease !important;
-webkit-transition: -webkit-transform 0.6s ease !important;
}
#learnFlashcardApp .learn-fc-inner.is-flipped,
.learn-ui .learn-postit-flipper.is-flipped {
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
}
}
@media (prefers-contrast: more) {
#learn-main .btn-outline-secondary,
#learn-main .btn-outline-primary,
.learn-path-item {
border-width: 2px;
}
}