.start-screen{text-align:center;padding:48px 24px}.start-screen h1{color:var(--primary-dark);margin-bottom:16px;font-size:2rem}.start-screen p{color:var(--text-light);margin-bottom:32px}.test-screen{display:none}.test-header{justify-content:space-between;margin-bottom:24px;display:flex}.stat-box{text-align:center}.question-area{text-align:center;padding:32px 0}.question-text{color:var(--text);font-size:2.5rem;font-weight:700;font-family:var(--font-mono);margin-bottom:24px}.answer-form{flex-direction:column;align-items:center;gap:16px;display:flex}.answer-input{text-align:center;border:2px solid var(--warning);border-radius:var(--radius);width:100%;max-width:200px;font-size:2.5rem;font-weight:700;font-family:var(--font-mono);padding:12px 16px;transition:border-color .2s}.answer-input:focus{border-color:var(--warning);outline:none}.answer-input.correct,.answer-input.correct:focus{border-color:var(--success)}.answer-input.incorrect,.answer-input.incorrect:focus{border-color:var(--error)}.feedback{border-radius:var(--radius);min-height:28px;padding:8px 16px;font-size:1.125rem;font-weight:600}.feedback.correct{color:var(--success);background:var(--success-light)}.feedback.incorrect{color:var(--error);background:var(--error-light)}.answer-form .btn-group{justify-items:center;display:grid}.answer-form .btn-group>.btn{grid-area:1/1}.answer-form .btn-group>.btn[hidden]{visibility:hidden;display:block}.results-screen{text-align:center;display:none}.results-screen h2{color:var(--primary-dark);margin-bottom:24px;font-size:1.75rem}.results-grid{grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:32px;display:grid}.result-item{background:var(--bg-alt);border-radius:var(--radius);padding:16px}.result-label{color:var(--text-light);margin-bottom:4px;font-size:.75rem}.result-value{color:var(--text);font-size:1.25rem;font-weight:700}.range-display{color:var(--text-light);text-align:center;margin-bottom:8px;font-size:.875rem}.give-up-container{text-align:center;margin-top:16px}.clock-canvas{width:220px;height:220px;margin:0 auto 24px;display:block}.clock-answer-group{justify-content:center;align-items:center;gap:8px;display:flex}.clock-input{width:80px;max-width:80px;padding:12px 8px;font-size:1.75rem}.clock-separator{color:var(--text);font-size:2.5rem;font-weight:700;font-family:var(--font-mono);line-height:1}.prefix-question{word-break:break-word;font-size:1.75rem}.prefix-input{letter-spacing:.05em;max-width:280px;font-size:2rem}.fraction-canvas{width:220px;height:220px;margin:0 auto 24px;display:block}.fraction-answer-group{justify-content:center;align-items:center;gap:8px;display:flex}.fraction-input{width:80px;max-width:80px;padding:12px 8px;font-size:1.75rem}.fraction-separator{color:var(--text);font-size:2.5rem;font-weight:700;font-family:var(--font-mono);line-height:1}.fraction-question{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}.stacked-fraction{vertical-align:middle;flex-direction:column;align-items:center;display:inline-flex}.frac-num{border-bottom:3px solid var(--text);padding:0 8px 4px;line-height:1.2}.frac-den{padding:4px 8px 0;line-height:1.2}.frac-op{color:var(--text);font-size:2rem;font-weight:700;font-family:var(--font-mono);align-self:center;line-height:1}.comparison-buttons{flex-wrap:nowrap;justify-content:center;gap:8px;margin-bottom:16px;display:flex}.comparison-btn{border:2px solid var(--primary);background:var(--bg);min-width:0;color:var(--primary);border-radius:var(--radius);cursor:pointer;padding:12px 20px;font-size:1.75rem;font-weight:700;transition:background-color .15s,color .15s,border-color .15s}.comparison-btn:hover{background:var(--primary-light)}.comparison-btn:active{transform:scale(.97)}.comparison-btn.selected{background:var(--primary);color:#fff}.comparison-btn.correct{background:var(--success);border-color:var(--success);color:#fff}.comparison-btn.incorrect{background:var(--error);border-color:var(--error);color:#fff}.comparison-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.pattern-question{overflow-wrap:break-word;font-size:1.75rem}@media (max-width:420px){.results-grid{grid-template-columns:1fr;gap:12px}.result-item{justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.result-label{margin-bottom:0}.result-value{font-size:1.125rem}.prefix-question{font-size:1.375rem}.prefix-input{max-width:260px;font-size:1.75rem}.pattern-question{font-size:1.375rem}.fraction-question{gap:8px}.frac-op{font-size:1.5rem}.frac-num,.frac-den{padding:0 4px 2px}.frac-den{padding:2px 4px 0}}@media (min-width:768px){.start-screen{padding:64px 32px}.question-text,.answer-input{font-size:3rem}.results-grid{grid-template-columns:repeat(3,1fr)}.clock-canvas{width:260px;height:260px}.clock-input{width:100px;max-width:100px;padding:12px 10px;font-size:2.25rem}.clock-separator{font-size:3rem}.fraction-canvas{width:260px;height:260px}.fraction-input{width:100px;max-width:100px;padding:12px 10px;font-size:2.25rem}.fraction-separator{font-size:3rem}.prefix-question{font-size:2rem}.prefix-input{max-width:320px;font-size:2.25rem}.pattern-question{font-size:2rem}.frac-op{font-size:2.5rem}.frac-num{border-bottom-width:3px}}@media (min-width:1024px){.question-text{font-size:3.5rem}.answer-input{max-width:260px;font-size:3.5rem}.test-header{max-width:500px;margin-left:auto;margin-right:auto}.results-grid{gap:24px;max-width:600px;margin-left:auto;margin-right:auto}.clock-canvas{width:300px;height:300px}.clock-input{width:120px;max-width:120px;padding:12px;font-size:2.75rem}.clock-separator{font-size:3.5rem}.fraction-canvas{width:300px;height:300px}.fraction-input{width:120px;max-width:120px;padding:12px;font-size:2.75rem}.fraction-separator{font-size:3.5rem}.prefix-question{font-size:2.25rem}.prefix-input{max-width:360px;font-size:2.5rem}.pattern-question{font-size:2.25rem}.fraction-question{gap:16px}.frac-op{font-size:3rem}.frac-num{border-bottom-width:4px}}
