@import url(https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Roboto:wght@400;500;700&display=swap);*{box-sizing:border-box;font-family:Roboto,sans-serif;margin:0;padding:0}html{font-size:16px}body{background-color:#f9fafb;color:#374151;font-size:clamp(1rem,2vw,1.2rem);line-height:1.5;transition:background-color .3s,color .3s}@media (prefers-color-scheme:dark){body{background-color:#111827;color:#fff}}.header h1,h1{font-family:Playfair Display,serif;font-size:clamp(2rem,5vw,2.5rem)}.header p,h2{font-size:clamp(1.1rem,3vw,1.3rem)}.header{background-color:#1e3a8a;color:#fff;margin-bottom:2rem;padding:2rem 1rem;position:relative;text-align:center}.header h1{font-weight:700;letter-spacing:.5px;margin-bottom:.5rem}.header p{font-weight:300;letter-spacing:.3px;margin:0 auto;max-width:800px;opacity:.9}.dark-mode-btn{align-items:center;background-color:#fff3;border:none;border-radius:.5rem;color:#fff;cursor:pointer;display:flex;font-weight:500;gap:.5rem;letter-spacing:.3px;padding:.5rem 1rem;position:absolute;right:1rem;top:1rem;transition:all .3s}.dark-mode-btn:hover{background-color:#ffffff4d}.filter-container{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1.5rem;padding:0 1rem}.filter-btn{background-color:#fff;border:1px solid #d1d5db;border-radius:9999px;color:#374151;font-size:clamp(.9rem,2vw,1.1rem);font-weight:500;letter-spacing:.3px;max-width:240px;padding:.5rem 1rem;transition:all .3s;width:100%}@media (prefers-color-scheme:dark){.filter-btn{background-color:#374151;border-color:#4b5563;color:#d1d5db}}.filter-btn.active{background-color:#2563eb;border-color:#2563eb;color:#fff}.app.dark .filter-btn.inactive,.dark .filter-btn.inactive{background-color:#374151;border-color:#4b5563;color:#d1d5db}.filter-btn:hover{transform:translateY(-.25rem)}.alphabet-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:1fr;padding:0 1rem}.alphabet-card{background-color:#fff;border-radius:.5rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;margin:.5rem 0;padding:1.2rem;text-align:center;transition:all .3s}@media (prefers-color-scheme:dark){.alphabet-card{background-color:#374151}}.app.dark .alphabet-card,.dark .alphabet-card{background-color:#374151}.alphabet-card:hover{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;transform:translateY(-.25rem)}.alphabet-card .letter{color:#2563eb;font-family:Playfair Display,serif;font-size:clamp(1.5rem,6vw,2rem);font-weight:700;margin-bottom:.5rem}@media (prefers-color-scheme:dark){.alphabet-card .letter{color:#60a5fa}}.app.dark .alphabet-card .letter,.dark .alphabet-card .letter{color:#60a5fa}.alphabet-card .latin{font-size:clamp(1rem,3vw,1.125rem);font-weight:500;margin-bottom:.5rem}.alphabet-card .pronuncia{color:#4b5563;font-size:clamp(.9rem,2vw,1rem);font-style:italic;font-weight:400}@media (prefers-color-scheme:dark){.alphabet-card .pronuncia{color:#d1d5db}}.app.dark .alphabet-card .pronuncia,.dark .alphabet-card .pronuncia{color:#d1d5db}.alphabet-card .exemplo{color:#6b7280;font-size:clamp(.8rem,2vw,.9rem);font-weight:400;margin-top:.5rem}@media (prefers-color-scheme:dark){.alphabet-card .exemplo{color:#9ca3af}}.app.dark .alphabet-card .exemplo,.dark .alphabet-card .exemplo{color:#9ca3af}.practice-container,.test-container{box-sizing:border-box;max-width:100%;padding:0 1rem}.card-container{margin-bottom:2rem;perspective:1000px}.card-inner{height:14rem;position:relative;transform-style:preserve-3d;transition:transform .7s;width:100%}.card-inner.flipped{transform:rotateY(180deg)}.card-face{align-items:center;-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:#fff;border-radius:.5rem;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;display:flex;flex-direction:column;inset:0;justify-content:center;padding:2rem;position:absolute}@media (prefers-color-scheme:dark){.card-face{background-color:#374151}}.app.dark .card-face,.dark .card-face{background-color:#374151}.card-back{transform:rotateY(180deg)}.card-letter{color:#2563eb;font-family:Playfair Display,serif;font-size:clamp(2.5rem,10vw,5rem);font-weight:700;margin-bottom:1rem}@media (prefers-color-scheme:dark){.card-letter{color:#60a5fa}}.app.dark .card-letter,.dark .card-letter{color:#60a5fa}.hint-box{background-color:#fef3c7;border-radius:.5rem;color:#92400e;font-weight:500;margin-bottom:1rem;padding:.75rem}@media (prefers-color-scheme:dark){.hint-box{background-color:#78350f;color:#fef3c7}}.app.dark .hint-box,.dark .hint-box{background-color:#78350f;color:#fef3c7}.card-controls{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.card-btn{border:none;border-radius:.5rem;color:#fff;cursor:pointer;font-size:1rem;font-weight:500;margin:0;max-width:240px;padding:.5rem 1rem;transition:background-color .3s;width:100%}.hint-btn{background-color:#d97706}.hint-btn:hover{background-color:#b45309}.flip-btn{background-color:#2563eb}.flip-btn:hover{background-color:#1d4ed8}.back-btn{background-color:#4b5563}.back-btn:hover{background-color:#374151}.nav-controls{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1rem;padding:0 1rem}.nav-btn{border:none;border-radius:.5rem;color:#fff;cursor:pointer;font-size:1rem;font-weight:500;margin:0;max-width:240px;padding:.5rem 1.5rem;transition:background-color .3s;width:100%}.prev-btn{background-color:#4b5563}.prev-btn:hover{background-color:#374151}.shuffle-btn{background-color:#d1d5db;color:#374151}.shuffle-btn:hover{background-color:#9ca3af}.shuffle-btn.active{background-color:#059669;color:#fff}.shuffle-btn.active:hover{background-color:#047857}.next-btn{background-color:#2563eb}.next-btn:hover{background-color:#1d4ed8}.score-box{background-color:#dbeafe;border-radius:.5rem;color:#1e40af;font-size:clamp(1rem,2vw,1.2rem);font-weight:600;margin-bottom:1.5rem;padding:1rem}@media (prefers-color-scheme:dark){.score-box{background-color:#1e3a8a;color:#dbeafe}}.app.dark .score-box,.dark .score-box{background-color:#1e3a8a;color:#dbeafe}.question-box{background-color:#fff;border-radius:.5rem;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;margin-bottom:1.5rem;padding:1.5rem}@media (prefers-color-scheme:dark){.question-box{background-color:#374151}}.app.dark .question-box,.dark .question-box{background-color:#374151}.question-box p:first-child{font-weight:500;margin-bottom:1rem}.question-box p:last-child{color:#2563eb;font-size:clamp(1.2rem,4vw,1.5rem);font-weight:700}@media (prefers-color-scheme:dark){.question-box p:last-child{color:#60a5fa}}.app.dark .question-box p:last-child,.dark .question-box p:last-child{color:#60a5fa}.options-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:1fr;margin-bottom:1.5rem;padding:0 1rem}.option-btn{border:2px solid;border-radius:.5rem;cursor:pointer;font-size:clamp(1rem,3vw,1.5rem);font-weight:700;margin:0 auto;max-width:240px;padding:1rem;transition:all .3s;width:100%}.option-btn.default{background-color:#fff;border-color:#d1d5db;color:#1f2937}@media (prefers-color-scheme:dark){.option-btn.default{background-color:#374151;border-color:#4b5563;color:#d1d5db}}.app.dark .option-btn.default,.dark .option-btn.default{background-color:#374151;border-color:#4b5563;color:#d1d5db}.option-btn.default:hover{background-color:#f0f9ff;border-color:#3b82f6}@media (prefers-color-scheme:dark){.option-btn.default:hover{background-color:#1e3a8a;border-color:#3b82f6}}.app.dark .option-btn.default:hover,.dark .option-btn.default:hover{background-color:#1e3a8a;border-color:#3b82f6}.option-btn.correct{background-color:#dcfce7;border-color:#16a34a;color:#166534}@media (prefers-color-scheme:dark){.option-btn.correct{background-color:#166534;border-color:#16a34a;color:#dcfce7}}.app.dark .option-btn.correct,.dark .option-btn.correct{background-color:#166534;border-color:#16a34a;color:#dcfce7}.option-btn.incorrect{background-color:#fee2e2;border-color:#dc2626;color:#991b1b}@media (prefers-color-scheme:dark){.option-btn.incorrect{background-color:#991b1b;border-color:#dc2626;color:#fee2e2}}.app.dark .option-btn.incorrect,.dark .option-btn.incorrect{background-color:#991b1b;border-color:#dc2626;color:#fee2e2}.option-btn.disabled{background-color:#f3f4f6;border-color:#d1d5db;color:#6b7280}@media (prefers-color-scheme:dark){.option-btn.disabled{background-color:#4b5563;border-color:#6b7280;color:#9ca3af}}.app.dark .option-btn.disabled,.dark .option-btn.disabled{background-color:#4b5563;border-color:#6b7280;color:#9ca3af}.feedback-box{background-color:#f9fafb;border-radius:.5rem;color:#374151;margin-bottom:1.5rem;padding:1rem}@media (prefers-color-scheme:dark){.feedback-box{background-color:#1f2937;color:#d1d5db}}.app.dark .feedback-box,.dark .feedback-box{background-color:#1f2937;color:#d1d5db}.feedback-correct{color:#16a34a}.feedback-correct,.feedback-incorrect{font-size:1.25rem;font-weight:700;margin-bottom:.5rem}.feedback-incorrect{color:#dc2626}.next-question-btn{background-color:#2563eb;border:none;border-radius:.5rem;color:#fff;cursor:pointer;display:block;font-size:clamp(1rem,2vw,1.125rem);font-weight:600;letter-spacing:.3px;margin:0 auto;max-width:240px;padding:.75rem 2rem;transition:background-color .3s;width:100%}.mode-selector{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:2rem;padding:0 1rem}.mode-btn{align-items:center;border:none;border-radius:.5rem;cursor:pointer;display:flex;font-size:1rem;font-weight:600;gap:.5rem;letter-spacing:.3px;margin:0;max-width:240px;padding:.75rem 1.5rem;transition:all .3s;width:100%}.mode-btn.active{background-color:#2563eb;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;color:#fff}.mode-btn.inactive{background-color:#fff;border:1px solid #d1d5db;color:#374151}@media (prefers-color-scheme:dark){.mode-btn.inactive{background-color:#374151;border-color:#4b5563;color:#d1d5db}}.app.dark .mode-btn.inactive,.dark .mode-btn.inactive{background-color:#374151;border-color:#4b5563;color:#d1d5db}.mode-btn.inactive:hover{background-color:#f3f4f6}@media (prefers-color-scheme:dark){.mode-btn.inactive:hover{background-color:#4b5563}}.app.dark .mode-btn.inactive:hover,.dark .mode-btn.inactive:hover{background-color:#4b5563}.footer{background-color:#f3f4f6;color:#4b5563;margin-top:3rem;padding:1rem;text-align:center}@media (prefers-color-scheme:dark){.footer{background-color:#1f2937;color:#9ca3af}}.app.dark .footer,.dark .footer{background-color:#1f2937;color:#9ca3af}.footer p:first-child{font-weight:500}.footer p:last-child{font-weight:400;margin-top:.5rem}.empty-state{color:#6b7280;font-weight:500;grid-column:1/-1;padding:2rem 1rem;text-align:center}@media (prefers-color-scheme:dark){.empty-state{color:#9ca3af}}.app.dark .empty-state,.dark .empty-state{color:#9ca3af}.counter{color:#6b7280;font-weight:500}@media (prefers-color-scheme:dark){.counter{color:#9ca3af}}.app.dark .counter,.dark .counter{color:#9ca3af}@media (min-width:480px){.card-btn,.filter-btn,.mode-btn,.nav-btn,.next-question-btn,.option-btn{min-width:120px;width:auto}.alphabet-grid{grid-template-columns:repeat(2,1fr)}.options-grid{grid-template-columns:repeat(4,1fr)}.card-controls{justify-content:center}}@media (min-width:640px){.practice-container,.test-container{margin:0 auto;max-width:42rem;padding:0 1rem}.alphabet-grid{grid-template-columns:repeat(3,1fr)}.header{padding:2rem}.footer{padding:1.5rem}}@media (min-width:768px){.alphabet-grid{gap:1.5rem;grid-template-columns:repeat(4,1fr)}.alphabet-grid,.filter-container,.mode-selector,.nav-controls,.options-grid{padding:0 1.5rem}}@media (min-width:1024px){.alphabet-grid{grid-template-columns:repeat(5,1fr)}.header h1{font-size:clamp(2rem,4vw,3rem)}.header p{font-size:clamp(1.1rem,2vw,1.5rem)}}@media (min-width:1200px){.alphabet-grid{grid-template-columns:repeat(6,1fr);margin:0 auto;max-width:1400px}}@media (max-width:480px){.card-inner{height:12rem}.card-face{padding:1.5rem}.header h1{font-size:1.8rem;padding-right:2.5rem}.header p{font-size:1rem}.alphabet-card{margin:.3rem 0;padding:1rem}.dark-mode-btn{display:inline-flex;margin:.5rem auto 0;position:relative;right:auto;top:auto}}@media (max-width:360px){html{font-size:14px}.header h1{font-size:1.5rem}.card-inner{height:10rem}.card-btn{font-size:.9rem;padding:.5rem}.nav-btn{font-size:.9rem;padding:.5rem 1rem}}@media (hover:none){.alphabet-card:hover,.filter-btn:hover{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transform:none}}
/*# sourceMappingURL=main.55c51149.css.map*/