.number-navigation { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; }
.number-navigation > button { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; color: var(--green); }
.number-navigation > button:disabled { opacity: .25; }
.number-strip { position: relative; display: flex; flex: 0 1 auto; min-width: 0; gap: 4px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x pan-y pinch-zoom; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(to right,var(--fade-left,#000),#000 24px,#000 calc(100% - 24px),var(--fade-right,#000)); mask-image: linear-gradient(to right,var(--fade-left,#000),#000 24px,#000 calc(100% - 24px),var(--fade-right,#000)); }
.number-strip::-webkit-scrollbar { display: none; }
.number-strip button { position: relative; display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 48px; padding: 0; }
.number-strip span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 4px; background: #e4dfe7; color: #68636c; font-size: 12px; font-variant-numeric: tabular-nums; }
.number-strip [data-status=revisit] span { background: #f0dfbc; color: #80612a; }
.number-strip [data-status=confident] span { background: #dce7d6; color: #285b46; }
.number-strip [aria-current] span { box-shadow: inset 0 0 0 2px var(--green); font-weight: 600; }
.number-strip [data-result=correct] span { background: #dcebd5; color: #29513a; }
.number-strip [data-result=incorrect] span { background: #f1dcd7; color: #843f35; }
@media(max-width:600px) { .number-navigation { gap: 4px; } }