.keypad-container,.practice-keypad{max-width:400px;width:400px;margin:0 auto;padding:1.5rem 0;outline:none;position:relative}.response-display,.practice-keypad .response-display{margin-bottom:1.75rem;text-align:center;min-height:120px;display:flex;flex-direction:column;justify-content:center}.response-label{font-size:1.25rem;color:#405463;margin-bottom:1.25rem;font-weight:600;letter-spacing:.01em;min-height:1.5em}.response-digits,.practice-keypad .response-display{display:flex;flex-direction:row!important;justify-content:center;gap:1.25rem;margin-bottom:.25rem;min-height:60px;align-items:center}.response-digit,.practice-keypad .digit-slot{min-width:3.25rem;width:3.25rem;font-size:2rem;font-weight:600;color:#405463;border-bottom:4px solid #405463;padding:0 0 .5rem;text-align:center;line-height:1;transition:color .2s ease,border-color .2s ease;height:2.5rem}.keypad-grid,.practice-keypad .kp-row{display:grid!important;grid-template-columns:repeat(3,80px)!important;gap:20px!important;justify-content:center!important;margin:0 auto;width:280px}.keypad-grid{grid-template-rows:repeat(4,80px)}.keypad-button,.practice-keypad .keypad-button,.keypad .keypad-button{width:80px!important;height:80px!important;border-radius:50%;border:3px solid #405463;background:transparent;color:#405463;font-size:1.875rem;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .1s ease;margin:0;padding:0;box-sizing:border-box}.keypad-button:hover:not(.disabled):not(:disabled),.practice-keypad .keypad-button:hover:not(:disabled){background-color:#4054631f;transform:scale(1.05)}.keypad-button:active:not(.disabled):not(:disabled),.practice-keypad .keypad-button:active:not(:disabled){background-color:#4054633d;transform:scale(.98)}.keypad-button.disabled,.keypad-button:disabled,.practice-keypad .keypad-button:disabled{opacity:.35;cursor:not-allowed;transform:none!important}.clear-button,.submit-button,.practice-keypad .keypad-button.primary{background-color:#405463!important;color:#fff!important}.submit-button{background-color:#28a745!important}.submit-checkmark{font-size:2.5rem!important;font-weight:700;line-height:1}.clear-button{background-color:#dc3545!important}.clear-icon{font-size:2.2rem!important;font-weight:700;line-height:1}.clear-button.disabled,.submit-button.disabled,.practice-keypad .keypad-button.primary:disabled{background-color:#40546340!important;color:#fffc!important;border-color:#40546340!important}.keypad-instructions{text-align:center;color:#666;font-size:.875rem;line-height:1.4;min-height:3em;margin-top:1rem}.test-content,.practice-content{min-height:500px;position:relative}.status-message{min-height:3rem!important;display:flex;align-items:center;justify-content:center}.trial-info{min-height:120px;display:flex;flex-direction:column;justify-content:center}@media (max-width: 768px){.keypad-container,.practice-keypad{width:350px;max-width:100%}.keypad-grid,.practice-keypad .kp-row{grid-template-columns:repeat(3,70px)!important;gap:15px!important;width:240px}.keypad-button,.practice-keypad .keypad-button{width:70px!important;height:70px!important;font-size:1.625rem}}@media (max-width: 480px){.keypad-container,.practice-keypad{width:300px;max-width:100%}.keypad-grid,.practice-keypad .kp-row{grid-template-columns:repeat(3,60px)!important;gap:12px!important;width:204px}.keypad-button,.practice-keypad .keypad-button{width:60px!important;height:60px!important;font-size:1.5rem}.response-digit,.practice-keypad .digit-slot{min-width:2.5rem;width:2.5rem;font-size:1.5rem}}.reverse-order-text{color:#dc3545!important;font-weight:700!important}.test-interface{max-width:800px;margin:0 auto;padding:2rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.test-interface.loading,.test-interface.error,.test-interface.complete{display:flex;align-items:center;justify-content:center;min-height:60vh}.loading-message,.error-message,.completion-message{text-align:center;background:#fff;border-radius:8px;padding:3rem;box-shadow:0 2px 10px #0000001a;max-width:400px}.loading-message h2,.error-message h2,.completion-message h2{margin-top:0;margin-bottom:1rem;color:#333}.loading-message p,.completion-message p{color:#666;margin-bottom:1.5rem}.error-message p{color:#dc3545;margin-bottom:1.5rem}.loading-spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #007bff;border-radius:50%;animation:spin 1s linear infinite;margin:1rem auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.progress-indicator{background:#fff;border-radius:8px;padding:1.5rem;margin-bottom:2rem;box-shadow:0 2px 10px #0000001a}.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.progress-text{font-size:1.1rem;font-weight:600;color:#333}.progress-percentage{font-size:1rem;color:#666}.progress-bar-container{width:100%;height:8px;background-color:#e9ecef;border-radius:4px;overflow:hidden;margin-bottom:1rem}.progress-bar{height:100%;background-color:#007bff;transition:width .3s ease}.trial-markers{display:flex;justify-content:space-between;gap:2px}.trial-marker{flex:1;height:4px;border-radius:2px;background-color:#e9ecef;transition:background-color .3s ease}.trial-marker.completed{background-color:#28a745}.trial-marker.current{background-color:#007bff}.trial-marker.pending{background-color:#e9ecef}.test-content{background:#fff;border-radius:8px;padding:2rem;box-shadow:0 2px 10px #0000001a;min-height:500px;position:relative}.trial-info{text-align:center;margin-bottom:2rem}.trial-info h2{margin-top:0;margin-bottom:1rem;color:#333;font-size:1.5rem}.status-message{font-size:1.1rem;color:#666;margin:0;line-height:1.5;min-height:2.5rem;display:flex;align-items:center;justify-content:center}.status-message.fixed-prompt{font-size:1.25rem;color:#405463;font-weight:500;min-height:3rem}.recall-mode-highlight{font-weight:700;color:#dc2626}.keypad-container{max-width:400px;margin:0 auto;padding:1.5rem 0;outline:none}.keypad-container.disabled{opacity:.5;pointer-events:none}.response-display{margin-bottom:1.75rem;text-align:center}.response-label{font-size:1.25rem;color:#405463;margin-bottom:1.25rem;font-weight:600;letter-spacing:.01em}.response-digits{display:flex;justify-content:center;gap:1.25rem;margin-bottom:.25rem}.response-digit{min-width:3.25rem;font-size:2rem;font-weight:600;color:#405463;border-bottom:4px solid #405463;padding:0 0 .5rem;text-align:center;line-height:1;transition:color .2s ease,border-color .2s ease}.response-digit.filled{color:#1f2933;border-color:#1f2933}.response-digit.empty{color:transparent;border-color:#40546359}.keypad-grid{display:grid;grid-template-columns:repeat(3,80px);gap:20px;justify-content:center;margin:0 auto;width:280px}.keypad-button{width:80px;height:80px;border-radius:50%;border:3px solid #405463;background:transparent;color:#405463;font-size:1.875rem;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .1s ease;margin:0;padding:0;box-sizing:border-box}.digit-button:hover:not(.disabled),.action-button:hover:not(.disabled){background-color:#4054631f;transform:scale(1.05)}.digit-button:active:not(.disabled),.action-button:active:not(.disabled){background-color:#4054633d;transform:scale(.98)}.keypad-button.disabled{cursor:not-allowed}.digit-button.disabled{opacity:.35}.digit-value{line-height:1}.action-button{font-size:clamp(1.25rem,1.5vw,1.375rem);font-weight:700}.clear-button{background-color:#405463;color:#fff}.clear-button.disabled{background-color:#40546340;color:#fffc;border-color:#40546340}.submit-button{background-color:#405463;color:#fff}.submit-button.disabled{background-color:transparent;border-color:#40546340;color:#40546373}.keypad-instructions{text-align:center;color:#666;font-size:.875rem;line-height:1.4}.keypad-instructions p{margin:.25rem 0}@media (max-width: 768px){.test-interface{padding:1rem}.progress-indicator,.test-content{padding:1.5rem}.keypad-container{padding:1.25rem 0;width:350px;max-width:100%}.keypad-grid{grid-template-columns:repeat(3,70px);gap:15px;width:240px}.keypad-button{width:70px;height:70px;font-size:1.625rem}.response-digit{min-width:2.75rem;font-size:1.75rem;border-bottom-width:3px}.response-label{font-size:1.15rem}.trial-markers{display:none}}@media (max-width: 480px){.keypad-container{width:300px;max-width:100%}.response-digits{gap:.5rem}.response-digit{min-width:2.5rem;width:2.5rem;font-size:1.5rem;border-bottom-width:3px}.response-label{font-size:1.1rem}.keypad-grid{grid-template-columns:repeat(3,60px);gap:12px;width:204px}.keypad-button{width:60px;height:60px;font-size:1.5rem;border-width:3px}.action-button{font-size:1.2rem}}@media (prefers-reduced-motion: reduce){.progress-bar,.trial-marker,.keypad-button,.response-digit{transition:none!important}.loading-spinner{animation:none}}@media (prefers-contrast: high){.keypad-button{border-width:4px}.response-digit{border-bottom-width:5px}.progress-bar{border:3px solid #000}.keypad-button,.response-digit,.response-label{font-weight:800}}.keypad-button:focus{outline:4px solid #007bff;outline-offset:3px}.keypad-button:focus-visible{outline:4px solid #007bff;outline-offset:3px;box-shadow:0 0 0 6px #007bff33}.keypad-container:focus{outline:3px solid #007bff;outline-offset:4px;border-radius:4px}.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}
