body{color:#333;transition:color .2s ease-in-out}body.dark{background-color:#1a1a1a;color:#fff}body.dark h1,body.dark h2,body.dark h3,body.dark p,body.dark ul,body.dark li{color:#fff}.app{padding:2rem;max-width:900px;margin:auto;font-family:Arial,sans-serif;color:#333;transition:color .2s ease-in-out}body.dark .app{color:#fff}.banner{background:linear-gradient(90deg,#07c 60%,#005fa3);color:#fff;text-align:center;padding:1rem;font-size:1.5rem;font-weight:600;border-radius:8px;margin:0 auto 1rem;max-width:900px}body.dark .banner{background:#2c2c2c;color:#fff}.footer{text-align:center;padding:1rem;margin-top:2rem;color:#333;font-size:.9rem;border-top:1px solid #e0e0e0}body.dark .footer{color:#fff;border-top-color:#555}.navbar{display:flex;justify-content:space-between;align-items:center;gap:2rem;background:linear-gradient(90deg,#07c 60%,#005fa3);padding:1rem 2rem;border-radius:0 0 16px 16px;box-shadow:0 2px 8px #0000000a;margin-bottom:2rem}body.dark .navbar{background:#2c2c2c}.navbar a{color:#fff;text-decoration:none;font-weight:600;font-size:1.1rem;letter-spacing:.5px;transition:color .2s;padding:.2rem .7rem;border-radius:6px}.navbar a.active,.navbar a:hover{background:#fff;color:#07c}body.dark .navbar a.active,body.dark .navbar a:hover{background:#444;color:#66b3ff}.nav-links{display:flex;align-items:center}.dark-toggle{padding:10px 20px;border-radius:5px;cursor:pointer;transition:background-color .2s ease-in-out,color .2s ease-in-out,border-color .2s ease-in-out;background-color:#fff;color:#07c;border:1px solid #0077cc;font-size:1rem;font-weight:600}body.dark .dark-toggle{background-color:#333;color:#fff;border-color:#555}.dark-toggle:hover{background-color:#e0e0e0}body.dark .dark-toggle:hover{background-color:#444}.toggle-container{display:flex;align-items:center}.quiz-card{background:#fff;padding:1rem;border-radius:12px;box-shadow:0 4px 12px #0000001a;color:#333;transition:color .2s ease-in-out,background-color .2s ease-in-out;width:100%;max-width:500px;margin:0 auto;box-sizing:border-box}body.dark .quiz-card{background:#2c2c2c;color:#fff}.option,.quiz-button{cursor:pointer;padding:10px 20px;margin:.3rem 0;border:1px solid #0077cc;border-radius:5px;background-color:#07c;color:#fff;transition:background-color .2s ease-in-out,color .2s ease-in-out,border-color .2s ease-in-out;font-size:1rem;font-weight:600;width:100%;max-width:100%;box-sizing:border-box;overflow-wrap:break-word}.question-text{font-size:1.1rem;margin:1rem 0;word-break:break-word;overflow-wrap:break-word}body.dark .option,body.dark .quiz-button{background-color:#333;border-color:#555;color:#fff}.option:hover,.quiz-button:hover{background-color:#005fa3}body.dark .option:hover,body.dark .quiz-button:hover{background-color:#444}.correct{background-color:#c8f7c5;color:#333}body.dark .correct{background-color:#2a4d2a;color:#fff}.wrong{background-color:#f7c5c5;color:#333}body.dark .wrong{background-color:#4d2a2a;color:#fff}.flashcard-section{display:flex;flex-direction:column;align-items:center;margin:3rem 0;padding-bottom:5rem;color:#333;transition:color .2s ease-in-out;min-height:500px;box-sizing:border-box}body.dark .flashcard-section{color:#fff}.flashcard{width:220px;height:140px;perspective:1000px;cursor:pointer;position:relative;margin-bottom:8rem;margin-top:2rem;border:1px solid red}.flashcard .front,.flashcard .back{width:100%;height:100%;padding:1rem;position:absolute;backface-visibility:hidden;border-radius:10px;background:#fff;color:#333;border:2px solid #0077cc;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:600;box-shadow:0 2px 8px #00000014;transition:transform .5s,color .2s ease-in-out,background-color .2s ease-in-out;text-align:center;word-break:break-word;z-index:1}body.dark .flashcard .front,body.dark .flashcard .back{background:#2c2c2c;color:#fff;border-color:#555}.flashcard .back{background:#f0f0f0;color:#333;transform:rotateY(180deg)}body.dark .flashcard .back{background:#333;color:#fff}.flashcard.flipped .front{transform:rotateY(180deg)}.flashcard.flipped .back{transform:rotateY(0)}.flashcard-button{margin:3rem 0;padding:10px 20px;border:1px solid #0077cc;border-radius:5px;background-color:#07c;color:#fff;cursor:pointer;transition:background-color .2s ease-in-out,color .2s ease-in-out,border-color .2s ease-in-out;font-size:1rem;font-weight:600;position:relative;z-index:0;align-self:center;border:1px solid blue}body.dark .flashcard-button{background-color:#333;border-color:#555;color:#fff}.flashcard-button:hover{background-color:#005fa3}body.dark .flashcard-button:hover{background-color:#444}@media (max-width: 600px){.navbar{flex-direction:column;gap:1rem;padding:1rem}.nav-links{flex-direction:column;gap:.5rem}.dark-toggle,.quiz-button,.flashcard-button{width:100%;text-align:center;padding:12px}.quiz-card,.flashcard-section,.study-guide{padding:1rem}.flashcard-section{margin:2rem 0;min-height:400px;padding-bottom:4rem}.flashcard{width:180px;height:120px;margin-bottom:6rem}.flashcard-button{width:100%;padding:12px;margin:3rem 0}.banner{max-width:100%;margin:0 0 1rem}}.footer{background-color:#f8f9fa;padding:1rem;border-top:1px solid #dee2e6;text-align:center;font-size:.875rem;color:#6c757d}.footer.dark{background-color:#343a40;color:#adb5bd;border-top-color:#495057}.dev-attribution p{margin:0 0 .25rem}.dev-attribution p:last-child{margin:0;font-size:.7rem}.footer-links{margin-top:.5rem}.footer-links a{margin:0 .5rem;text-decoration:none;color:inherit;opacity:.8}.footer-links a:hover{opacity:1;text-decoration:underline}.quiz-container{width:600px;margin:0 auto;padding:20px;border:1px solid #ccc;border-radius:10px}.score-section{font-size:24px;text-align:center}.question-section{margin-bottom:20px}.question-count{font-size:18px;margin-bottom:10px}.question-text{font-size:20px;margin-bottom:20px}.answer-section button{width:100%;padding:10px;margin-bottom:10px;border:1px solid #ccc;border-radius:5px;cursor:pointer}.study-guide{padding:1rem;max-width:900px;margin:auto;color:#333;transition:color .2s ease-in-out}body.dark .study-guide{color:#fff}.study-guide-img{width:300px;max-width:100%;display:block;margin:1rem auto}.study-guide h1{text-align:center;color:#07c}body.dark .study-guide h1{color:#66b3ff}.study-guide h2,.study-guide h3{color:#07c}body.dark .study-guide h2,body.dark .study-guide h3{color:#66b3ff}.study-guide p,.study-guide ul{margin-bottom:1rem}.study-guide ul{list-style-type:disc;padding-left:2rem}.study-guide .note{margin-bottom:1rem;padding:1rem;background:#fff;border-left:4px solid #0077cc;border-radius:8px}body.dark .study-guide .note{background:#2c2c2c;color:#fff;border-color:#555}.roman-table-container{overflow-x:auto}.roman-table{border-collapse:collapse;width:100%;text-align:center}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#213547f2;background-color:#f5f6fa;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#07c;text-decoration:none}a:hover{color:#005fa3}body{margin:0;min-width:320px;min-height:100vh;background:#f5f6fa}h1{font-size:2.5em;line-height:1.1}button{border-radius:8px;border:1px solid #0077cc;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#fff;color:#07c;cursor:pointer;transition:border-color .25s,background .25s}button:hover{border-color:#005fa3;background:#e6f0fa}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: dark){:root{color:#f5f6fa;background-color:#242424}a:hover{color:#6af}button{background-color:#1a1a1a;color:#f5f6fa}}